@datarailsshared/datarailsshared 1.4.22-tigers → 1.4.23

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, HostListener, Directive, ComponentFactoryResolver, ViewContainerRef, ViewChild, Injector, Injectable, Host, NgModule, Optional } from '@angular/core';
-import { FormControl, NG_VALUE_ACCESSOR, NgModel, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Injectable, Optional, Injector, Host, NgModule } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR, NgControl, NgModel, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
 import * as momentImported from 'moment';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { Subject, from, merge, fromEvent, noop as noop$1, BehaviorSubject } from 'rxjs';
-import { startWith, switchMap, takeUntil, filter, skip, first, debounceTime, distinctUntilChanged, take } from 'rxjs/operators';
+import { startWith, switchMap, takeUntil, filter, take, first, skip, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { transition, style, animate, trigger, state } from '@angular/animations';
 import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { MatDatepickerModule, MatCalendar } from '@angular/material/datepicker';
+import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -1489,17 +1489,10 @@ const POPUP_ANIMATION = [
 class TooltipComponent {
     constructor() {
         this.isContentTemplate = false;
-        this.isMouseOn$ = new BehaviorSubject(false);
     }
     ngOnInit() {
         this.isContentTemplate = this.content instanceof TemplateRef;
     }
-    setMouseOn() {
-        this.isMouseOn$.next(true);
-    }
-    unsetMouseOn() {
-        this.isMouseOn$.next(false);
-    }
 }
 TooltipComponent.decorators = [
     { type: Component, args: [{
@@ -1517,9 +1510,7 @@ TooltipComponent.propDecorators = {
     contentContext: [{ type: Input }],
     position: [{ type: Input }],
     options: [{ type: Input }],
-    class: [{ type: Input }],
-    setMouseOn: [{ type: HostListener, args: ['mouseenter',] }],
-    unsetMouseOn: [{ type: HostListener, args: ['mouseleave',] }]
+    class: [{ type: Input }]
 };
 
 class DrTooltipDirective {
@@ -1530,8 +1521,6 @@ class DrTooltipDirective {
         this.contentContext = {};
         this.position = 'top';
         this.class = '';
-        // is used for preserve tooltip from being hidden for N milliseconds
-        this.drTooltipMousleaveTimeout = 0;
     }
     set drTooltipOptions(options) {
         if (options === null || options === void 0 ? void 0 : options.indent) {
@@ -1564,36 +1553,16 @@ class DrTooltipDirective {
         if (this.overlayRef) {
             this.overlayRef.dispose();
         }
-        if (this.tooltipMouseOnSubscription) {
-            this.tooltipMouseOnSubscription.unsubscribe();
-        }
     }
     show() {
-        if (this.manualHandling || this.overlayRef)
+        if (this.manualHandling)
             return;
         this.renderTooltip();
     }
     hide() {
-        var _a;
-        if (this.manualHandling || !this.tooltipRef || ((_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.instance.isMouseOn$.getValue()))
+        if (this.manualHandling)
             return;
-        // 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(() => {
-                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();
-        }
+        this.destroyTooltip();
     }
     createOverlay() {
         const positionStrategy = this.overlayPositionBuilder
@@ -1605,17 +1574,12 @@ class DrTooltipDirective {
         var _a;
         this.createOverlay();
         if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.content) {
-            this.tooltipRef = this.overlayRef.attach(new 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(skip(1)).subscribe((isMouseOn) => {
-                if (!isMouseOn) {
-                    this.destroyTooltip();
-                }
-            });
+            const tooltipRef = this.overlayRef.attach(new 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;
         }
     }
     destroyTooltip() {
@@ -1623,10 +1587,6 @@ class DrTooltipDirective {
             this.overlayRef.dispose();
         }
         this.overlayRef = null;
-        this.tooltipRef = null;
-        if (this.tooltipMouseOnSubscription) {
-            this.tooltipMouseOnSubscription.unsubscribe();
-        }
     }
 }
 DrTooltipDirective.decorators = [
@@ -1644,7 +1604,6 @@ DrTooltipDirective.propDecorators = {
     contentContext: [{ type: Input, args: ['drTooltipContext',] }],
     position: [{ type: Input, args: ['drTooltipPosition',] }],
     class: [{ type: Input, args: ['drTooltipClass',] }],
-    drTooltipMousleaveTimeout: [{ type: Input }],
     drTooltipOptions: [{ type: Input }],
     showTooltip: [{ type: Input, args: ['drTooltipShow',] }],
     show: [{ type: HostListener, args: ['mouseenter',] }],
@@ -1924,1519 +1883,1457 @@ DrButtonComponent.propDecorators = {
 <dr-button [isDisabled]="false" [theme]="'text-link'">Text Link</dr-button>
 */
 
-class DrPopoverRef {
-    constructor(overlayRef) {
-        this.overlayRef = overlayRef;
-        this.onClose$ = new 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();
+const MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
+const DATE_INPUT_FORMAT = 'YYYY/MM/DD';
+const YEAR_FORMAT = 'yyyy';
+const MONTH_YEAR_FORMAT = 'MM/yyyy';
+const QUARTER_FORMAT = 'Q/yyyy';
+class CustomDateFormat {
+    constructor() {
+        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'
+        };
     }
-    close(res) {
-        this.overlayRef.detach();
-        this.overlayRef.dispose();
-        this.onClose$.next(res);
-        this.onClose$.complete();
+    set parse(parse) {
+        this._parse = Object.assign({}, this._parse, parse);
+    }
+    get parse() {
+        return this._parse;
+    }
+    set display(display) {
+        this._display = Object.assign({}, this._display, display);
+    }
+    get display() {
+        return this._display;
+    }
+    updateDateFormat(parse, display) {
+        this.parse = parse;
+        if (!display) {
+            display = parse;
+        }
+        this.display = display;
     }
 }
 
-var DrPopoverAlignmentDimension;
-(function (DrPopoverAlignmentDimension) {
-    DrPopoverAlignmentDimension["Width"] = "width";
-    DrPopoverAlignmentDimension["Height"] = "height";
-})(DrPopoverAlignmentDimension || (DrPopoverAlignmentDimension = {}));
-const DEFAULT_CONFIG = {
-    hasBackdrop: false,
-    closeOnBackdropClick: false,
-    backdropClass: 'dr-popover-transparent-backdrop',
-};
-const DEFAULT_MODEL = {
-    position: 'bottom',
-    class: '',
-    overlayConfig: {},
-    manualClosing: { enabled: false },
-};
-function getAlignmentDimension(position) {
-    if (!POPUP_POSITIONS[position])
-        return DrPopoverAlignmentDimension.Width;
-    if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
-        return DrPopoverAlignmentDimension.Height;
+const moment$2 = require('moment');
+class DrDatePickerService {
+    constructor() {
+        this.timeframe = 'day';
+        this.format = new BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+        this.updatedQuater = new Subject();
+    }
+    getQuarterDisplay(value, format) {
+        return 'Q' + moment$2(value).quarter() + format.charAt(1) + moment$2(value).year();
+    }
+    setTimeframe(format) {
+        const 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 DrPopoverAlignmentDimension.Width;
 }
+DrDatePickerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrDatePickerService_Factory() { return new DrDatePickerService(); }, token: DrDatePickerService, providedIn: "root" });
+DrDatePickerService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
 
-class DrPopoverComponent {
-    constructor(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
+const moment$1 = require('moment');
+class DrDatePickerCustomHeaderComponent {
+    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+        this._calendar = _calendar;
+        this._dateAdapter = _dateAdapter;
+        this._dateFormats = _dateFormats;
         this.cdr = cdr;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.elementRef = elementRef;
-        this.popoverRef = popoverRef;
-        this.class = '';
-        this.isContentTemplate = false;
-        this.popover = true;
+        this.datePickerService = datePickerService;
+        this._destroyed = new Subject();
+        this.quarters = [1, 2, 3, 4];
+        this.selectedQuarter = 1;
+        this.timeframeOptions = [{
+                title: 'Day',
+                value: 'month',
+                format: MAT_DEFAULT_DATE_FORMAT,
+                periodLabel: () => this._dateAdapter
+                    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
+                    .toLocaleUpperCase()
+            }, {
+                title: 'Month',
+                value: 'year',
+                format: MONTH_YEAR_FORMAT,
+                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+            }, {
+                title: 'Quarter',
+                value: 'none',
+                format: QUARTER_FORMAT,
+                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
+            }, {
+                title: 'Year',
+                value: 'multi-year',
+                format: YEAR_FORMAT,
+                periodLabel: () => {
+                    const currentYear = moment$1(this._calendar.activeDate).year();
+                    const startPeriod = Math.floor(currentYear / 24) * 24;
+                    return startPeriod + '-' + (startPeriod + 23);
+                }
+            }];
+        this.pagingSetup = {
+            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            'none': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            'multi-year': (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
+        };
+        this.selectedTimeframe = 'month';
+        this.timeframeSelection = false;
+        this.periodMonthLabel = '';
+        this.periodYearLabel = '';
+        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
+        this.datePickerService.format
+            .pipe(take(1))
+            .subscribe(value => {
+            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format == value)[0].value;
+            this.setPeriodLabels();
+        });
+        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
     }
-    clickOutside(e) {
-        const isTargetHost = this.hostRef instanceof ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
-        const isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
-        const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
-        const isTargetInSelect = e.target.closest('ng-dropdown-panel');
-        const isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
-        if (!isTargetHost
-            && !isTargetInPopover
-            && !isTargetInDatepicker
-            && !isTargetInSelect
-            && !isTargetInDatepickerContent
-            && !this.manualClosing.enabled) {
-            this.popoverRef.close();
-        }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
     }
-    ngOnInit() {
-        this.isContentTemplate = this.content instanceof 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);
+    setPeriodLabels() {
+        const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
+        const fullPeriodLabel = currentTimeframeOption.periodLabel();
+        if (this._calendar.currentView === 'month') {
+            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
+            this.periodYearLabel = fullPeriodLabel.slice(4);
         }
-        if (this.alignment === 'host') {
-            this[getAlignmentDimension(this.position)] = '100%';
+        else {
+            this.periodMonthLabel = '';
+            this.periodYearLabel = fullPeriodLabel;
         }
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
+    }
+    setTimeframe() {
+        this.timeframeSelection = false;
+        this._calendar.currentView = this.selectedTimeframe;
+        const chosenTimeframeOption = this.timeframeOptions.filter(option => 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();
+        }
+    }
+    get currentViewIsQuater() {
+        return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
+    }
+    switchViewOnClickOnPeriodLabel(view) {
+        this._calendar.currentView = view;
+    }
+    onSelectQuater(quarterNumber) {
+        const monthsInQuarter = 3;
+        this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+        const unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
+        this._calendar.activeDate = unadaptedDate;
+        this.datePickerService.updatedQuater.next(moment$1(unadaptedDate));
+        this.datePickerService.calendarInstance.close();
+    }
+    pagingClicked(forward) {
+        this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
+    }
+    pagingDateChange(actionCall, amount, forward) {
+        this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
+        this.setPeriodLabels();
     }
 }
-DrPopoverComponent.decorators = [
+DrDatePickerCustomHeaderComponent.decorators = [
     { type: 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: [
-                    trigger('popover', POPUP_ANIMATION),
-                ],
+                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",
                 changeDetection: 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: [":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"]
             },] }
 ];
-DrPopoverComponent.ctorParameters = () => [
+DrDatePickerCustomHeaderComponent.ctorParameters = () => [
+    { type: MatCalendar },
+    { type: DateAdapter },
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
     { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: ElementRef },
-    { type: DrPopoverRef }
+    { type: DrDatePickerService }
 ];
-DrPopoverComponent.propDecorators = {
-    content: [{ type: Input }],
-    contentContext: [{ type: Input }],
-    class: [{ type: Input }],
-    hostRef: [{ type: Input }],
-    manualClosing: [{ type: Input }],
-    alignment: [{ type: Input }],
-    position: [{ type: Input }],
-    popoverContainer: [{ type: ViewChild, args: ['popoverContainer', { read: ElementRef, static: true },] }],
-    width: [{ type: HostBinding, args: ['style.width',] }],
-    height: [{ type: HostBinding, args: ['style.height',] }],
-    popover: [{ type: HostBinding, args: ['@popover',] }],
-    clickOutside: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
-};
 
-class DrPopoverService {
-    constructor(overlay, overlayPositionBuilder, injector) {
-        this.overlay = overlay;
-        this.overlayPositionBuilder = overlayPositionBuilder;
-        this.injector = injector;
+const moment = require('moment');
+const noop = () => { };
+const ɵ0$1 = noop;
+class DrDatePickerComponent {
+    constructor(cdr, _dateAdapter, datePickerService) {
+        this.cdr = cdr;
+        this._dateAdapter = _dateAdapter;
+        this.datePickerService = datePickerService;
+        this._destroyed = new Subject();
+        this.readonly = true;
+        this._format = MAT_DEFAULT_DATE_FORMAT;
+        this.customHeader = DrDatePickerCustomHeaderComponent;
+        this.onChangeFormat = new EventEmitter();
+        this.timeframeSelection = false;
+        this.takeEndOfPeriod = false;
+        this.placeholder = 'Select';
+        this.min = null;
+        this.max = null;
+        this.calendarViewSetup = {
+            'year': (calendar) => calendar.currentView = 'multi-year',
+            'month': (calendar) => calendar.currentView = 'year',
+            'quarter': (calendar) => calendar.currentView = 'none',
+            'day': (calendar) => calendar.currentView = 'month'
+        };
+        this.pagingSetup = {
+            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
+            'quarter': (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
+            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
+            'day': (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
+        };
+        this.innerValue = null;
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        datePickerService.format
+            .pipe(takeUntil(this._destroyed))
+            .subscribe((value) => {
+            this._format = value;
+            this.onChangeFormat.emit(this.normalizeValue(value));
+            cdr.markForCheck();
+        });
+        datePickerService.updatedQuater
+            .pipe(takeUntil(this._destroyed))
+            .subscribe((value) => {
+            this.tryToNormalaizeTimeframe(value, 'quarter');
+            this.writeValue(value);
+            this.onChangeCallback(value);
+        });
     }
-    open(content, popoverModel) {
-        if (!content)
+    set format(value) {
+        if (value) {
+            value = this.normalizeValue(value);
+            this._format = value;
+            this.datePickerService.format.next(value);
+            this.datePickerService.setTimeframe(value);
+            this.cdr.markForCheck();
+        }
+    }
+    ngAfterViewInit() {
+        this.datePickerService.calendarInstance = this.dp;
+        if (this._format === MAT_DEFAULT_DATE_FORMAT) {
             return;
-        const model = Object.assign(Object.assign({}, DEFAULT_MODEL), popoverModel);
-        const overlayRef = this.createOverlay(model);
-        const popoverRef = new DrPopoverRef(overlayRef);
-        this.attachOverlayContainer(content, model, overlayRef, popoverRef);
-        this.registerListeners(model, overlayRef, popoverRef);
-        return popoverRef;
+        }
+        setTimeout(() => {
+            const popupInstance = this.dp._popupComponentRef.instance;
+            const calenderInstance = popupInstance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance;
+            calenderInstance.currentPeriodClicked = function () {
+                this.calendarViewSetup[this.datePickerService.timeframe] && this.calendarViewSetup[this.datePickerService.timeframe](this.calendar);
+            };
+        }, 1000);
     }
-    attachOverlayContainer(content, { contentContext, position, class: elementClass, manualClosing, hostRef, alignment }, overlayRef, popoverRef) {
-        const componentPortal = new ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
-        const 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;
+    tryToNormalaizeTimeframe(normalizedRef, timeframe) {
+        if (this.takeEndOfPeriod) {
+            normalizedRef.endOf(timeframe);
+        }
+        normalizedRef.set('hour', 12);
     }
-    createOverlay(popoverModel) {
-        const overlayConfig = this.getOverlayConfig(popoverModel);
-        return this.overlay.create(overlayConfig);
+    get value() {
+        return this.innerValue;
     }
-    getOverlayConfig(popoverModel) {
-        if (!POPUP_POSITIONS[popoverModel.position])
-            throw new Error(`DrPopover does not support the '${popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position}' position!`);
-        const config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
-        const hostElement = this.getHostElement(popoverModel.hostRef);
-        const positionStrategy = this.overlayPositionBuilder
-            .flexibleConnectedTo(popoverModel.hostRef)
-            .withPositions([POPUP_POSITIONS[popoverModel.position]]);
-        const overlayConfig = new OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy }, config));
-        if (popoverModel.alignment === 'host' && hostElement) {
-            const alignmentDimension = getAlignmentDimension(popoverModel.position);
-            overlayConfig[alignmentDimension] = hostElement.getBoundingClientRect()[alignmentDimension];
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
         }
-        return overlayConfig;
+        this.cdr.markForCheck();
     }
-    createInjector(popoverRef) {
-        const injectionTokens = [
-            { provide: DrPopoverRef, useValue: popoverRef },
-        ];
-        return Injector.create({ providers: injectionTokens, parent: this.injector });
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
     }
-    registerListeners(popoverModel, overlayRef, popoverRef) {
-        const config = popoverModel.overlayConfig || {};
-        const targetElement = popoverModel.targetElement;
-        const 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(() => popoverRef.close());
-        }
-        if (targetElement) {
-            targetElement.addEventListener('mouseup', () => popoverRef.close(), { once: true });
-        }
-        if (popoverModel.alignment === 'host' && hostElement) {
-            const alignmentDimension = getAlignmentDimension(popoverModel.position);
-            const resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(host => overlayRef.updateSize({ [alignmentDimension]: host.target.getBoundingClientRect()[alignmentDimension] }));
-            });
-            resizeObserver.observe(hostElement);
-            popoverRef.onClose.pipe(first()).subscribe(() => resizeObserver.unobserve(hostElement));
-        }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
-    getHostElement(hostRef) {
-        if (!hostRef || hostRef.x)
-            return null;
-        if (hostRef.nativeElement)
-            return hostRef.nativeElement;
-        return hostRef;
+    writeValue(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.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrPopoverService_Factory() { return new DrPopoverService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i1.OverlayPositionBuilder), i0.ɵɵinject(i0.INJECTOR)); }, token: DrPopoverService, providedIn: "root" });
-DrPopoverService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-DrPopoverService.ctorParameters = () => [
-    { type: Overlay },
-    { type: OverlayPositionBuilder },
-    { type: Injector }
-];
-
-class DrPopoverDirective {
-    constructor(elementRef, drPopoverService) {
-        this.elementRef = elementRef;
-        this.drPopoverService = drPopoverService;
-        this.contentContext = {};
-        this.position = 'bottom';
-        this.class = '';
-        this.overlayConfig = {};
-        this.manualClosing = { enabled: false };
-        this.popoverClose = new EventEmitter();
-        this.showStateChange = new EventEmitter();
+    get quarterDisplay() {
+        return this.datePickerService.getQuarterDisplay(this.value, this._format);
     }
-    togglePopover() {
-        if (this.popoverRef) {
-            this.closePopover();
+    normalizeValue(value) {
+        if (value.includes('d')) {
+            value = value.replace(/d/g, 'D');
         }
-        else {
-            this.renderPopover();
-            this.showStateChange.emit({ isShown: !!this.popoverRef });
+        else if (value.includes('D')) {
+            value = value.replace(/D/g, 'd');
         }
+        return value;
     }
-    closePopover(res) {
-        if (this.popoverRef) {
-            this.popoverRef.close(res);
-            this.popoverRef = null;
+    chosenMonthHandler(normalizedMonth, datepicker) {
+        if (this.datePickerService.timeframe === 'month') {
+            this.tryToNormalaizeTimeframe(normalizedMonth, 'month');
+            this.writeValue(normalizedMonth);
+            this.onChangeCallback(normalizedMonth);
+            datepicker.close();
         }
     }
-    renderPopover() {
-        const 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(first()).subscribe((res) => {
-            this.closePopover();
-            this.popoverClose.emit(res);
-            this.showStateChange.emit({ isShown: !!this.popoverRef });
-        });
+    chosenYearHandler(normalizedYear, datepicker) {
+        if (this.datePickerService.timeframe === 'year') {
+            this.tryToNormalaizeTimeframe(normalizedYear, 'year');
+            this.writeValue(normalizedYear);
+            this.onChangeCallback(normalizedYear);
+            datepicker.close();
+        }
+    }
+    pagingClicked(forward) {
+        this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
+        this.datePickerService.calendarInstance.close();
+    }
+    pagingDateChange(actionCall, amount, forward) {
+        const newValue = this._dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
+        this.writeValue(newValue);
+        this.onChangeCallback(newValue);
     }
     ngOnDestroy() {
-        this.closePopover();
+        this._destroyed.next();
+        this._destroyed.complete();
     }
 }
-DrPopoverDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[drPopover]'
+DrDatePickerComponent.decorators = [
+    { type: 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: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    { provide: 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.ctorParameters = () => [
-    { type: ElementRef },
-    { type: DrPopoverService }
+DrDatePickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DateAdapter },
+    { type: DrDatePickerService }
 ];
-DrPopoverDirective.propDecorators = {
-    content: [{ type: Input, args: ['drPopover',] }],
-    contentContext: [{ type: Input, args: ['drPopoverContext',] }],
-    position: [{ type: Input, args: ['drPopoverPosition',] }],
-    class: [{ type: Input, args: ['drPopoverClass',] }],
-    overlayConfig: [{ type: Input, args: ['drPopoverOverlayConfig',] }],
-    manualClosing: [{ type: Input, args: ['drPopoverManualClosing',] }],
-    alignment: [{ type: Input, args: ['drPopoverAlignment',] }],
-    popoverClose: [{ type: Output, args: ['drPopoverClose',] }],
-    showStateChange: [{ type: Output, args: ['drPopoverShowStateChange',] }],
-    togglePopover: [{ type: HostListener, args: ['click',] }]
+DrDatePickerComponent.propDecorators = {
+    _format: [{ type: Input }],
+    onChangeFormat: [{ type: Output }],
+    format: [{ type: Input }],
+    timeframeSelection: [{ type: Input }],
+    takeEndOfPeriod: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    min: [{ type: Input }],
+    max: [{ type: Input }],
+    dp: [{ type: ViewChild, args: ['datePicker',] }]
 };
 
-class DrDropdownService {
-    constructor() {
-        this.actionItem = new Subject();
-    }
-    set addMenu(item) {
-        this.menuInView = item;
+class DrDatePickerFormatDirective {
+    constructor(matDateFormat, ngControl) {
+        this.matDateFormat = matDateFormat;
+        this.ngControl = ngControl;
     }
-    destroy() {
-        if (this.menuInView) {
-            this.menuInView.destroy();
+    set datePickerFormat(format) {
+        var _a;
+        if (this.configDateParse) {
+            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
+        }
+        else {
+            this.matDateFormat.updateDateFormat({ dateInput: format });
         }
+        const value = this.ngControl.value;
+        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
     }
 }
-DrDropdownService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrDropdownService_Factory() { return new DrDropdownService(); }, token: DrDropdownService, providedIn: "root" });
-DrDropdownService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
+DrDatePickerFormatDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDatePickerFormat]',
+                providers: [
+                    {
+                        provide: DateAdapter,
+                        useClass: MomentDateAdapter
+                    },
+                    {
+                        provide: MAT_DATE_FORMATS,
+                        useClass: CustomDateFormat
+                    }
+                ]
             },] }
 ];
-DrDropdownService.ctorParameters = () => [];
+DrDatePickerFormatDirective.ctorParameters = () => [
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: NgControl, decorators: [{ type: Optional }] }
+];
+DrDatePickerFormatDirective.propDecorators = {
+    configDateParse: [{ type: Input }],
+    configDateDisplay: [{ type: Input }],
+    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
+};
 
-class DrDropdownComponent {
-    constructor(menuService, cdr) {
-        this.menuService = menuService;
-        this.cdr = cdr;
-        this.position = 'left';
-    }
-    set options(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(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();
-        }
-    }
-    onMouseLeave() {
-        if (this.drDropdownInHover)
-            this.menuService.destroy();
+class DrPopoverRef {
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+        this.onClose$ = new 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();
     }
-    onClickedOutside() {
-        if (this.firstInit) {
-            this.menuService.destroy();
-        }
-        else {
-            this.firstInit = true;
-        }
+    close(res) {
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+        this.onClose$.next(res);
+        this.onClose$.complete();
     }
-    hide() {
-        this.menuService.destroy();
+}
+
+var DrPopoverAlignmentDimension;
+(function (DrPopoverAlignmentDimension) {
+    DrPopoverAlignmentDimension["Width"] = "width";
+    DrPopoverAlignmentDimension["Height"] = "height";
+})(DrPopoverAlignmentDimension || (DrPopoverAlignmentDimension = {}));
+const DEFAULT_CONFIG = {
+    hasBackdrop: false,
+    closeOnBackdropClick: false,
+    backdropClass: 'dr-popover-transparent-backdrop',
+};
+const DEFAULT_MODEL = {
+    position: 'bottom',
+    class: '',
+    overlayConfig: {},
+    manualClosing: { enabled: false },
+};
+function getAlignmentDimension(position) {
+    if (!POPUP_POSITIONS[position])
+        return DrPopoverAlignmentDimension.Width;
+    if ((position === null || position === void 0 ? void 0 : position.includes('left')) || (position === null || position === void 0 ? void 0 : position.includes('right'))) {
+        return DrPopoverAlignmentDimension.Height;
     }
-    disabled(act) {
-        if (!act.disabled) {
-            return false;
-        }
-        if (typeof act.disabled === 'boolean') {
-            return act.disabled;
-        }
-        else {
-            return act.disabled(act.data);
-        }
+    return DrPopoverAlignmentDimension.Width;
+}
+
+class DrPopoverComponent {
+    constructor(cdr, componentFactoryResolver, viewContainerRef, elementRef, popoverRef) {
+        this.cdr = cdr;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.popoverRef = popoverRef;
+        this.class = '';
+        this.isContentTemplate = false;
+        this.popover = true;
     }
-    selected(act) {
-        if (!act.selected) {
-            return false;
-        }
-        if (typeof act.selected === 'boolean') {
-            return act.selected;
-        }
-        else {
-            return act.selected(act.data);
+    clickOutside(e) {
+        const isTargetHost = this.hostRef instanceof ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
+        const isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
+        const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
+        const isTargetInSelect = e.target.closest('ng-dropdown-panel');
+        const isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
+        if (!isTargetHost
+            && !isTargetInPopover
+            && !isTargetInDatepicker
+            && !isTargetInSelect
+            && !isTargetInDatepickerContent
+            && !this.manualClosing.enabled) {
+            this.popoverRef.close();
         }
     }
-    tooltipToShow(act) {
-        if (act.toolTipIfDisabled && !this.disabled(act))
-            return '';
-        return act.toolTip;
-    }
-    tooltipPosition(widthMoreRight) {
-        return widthMoreRight ? 'right' : 'left';
-    }
-    action(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();
+    ngOnInit() {
+        this.isContentTemplate = this.content instanceof 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);
         }
-    }
-    onActionIconClick($event, actionIcon, data) {
-        $event.stopPropagation();
-        if (!this.disabled(actionIcon)) {
-            actionIcon.action(data);
-            this.hide();
+        if (this.alignment === 'host') {
+            this[getAlignmentDimension(this.position)] = '100%';
         }
+        this.cdr.detectChanges();
     }
 }
-DrDropdownComponent.decorators = [
+DrPopoverComponent.decorators = [
     { type: 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",
+                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: [
+                    trigger('popover', POPUP_ANIMATION),
+                ],
                 changeDetection: 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"]
+                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"]
             },] }
 ];
-DrDropdownComponent.ctorParameters = () => [
-    { type: DrDropdownService },
-    { type: ChangeDetectorRef }
+DrPopoverComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef },
+    { type: ElementRef },
+    { type: DrPopoverRef }
 ];
-DrDropdownComponent.propDecorators = {
-    viewMenu: [{ type: ViewChild, args: ['listMenu',] }],
-    menuContainer: [{ type: ViewChild, args: ['menuContainer',] }],
-    options: [{ type: Input }]
+DrPopoverComponent.propDecorators = {
+    content: [{ type: Input }],
+    contentContext: [{ type: Input }],
+    class: [{ type: Input }],
+    hostRef: [{ type: Input }],
+    manualClosing: [{ type: Input }],
+    alignment: [{ type: Input }],
+    position: [{ type: Input }],
+    popoverContainer: [{ type: ViewChild, args: ['popoverContainer', { read: ElementRef, static: true },] }],
+    width: [{ type: HostBinding, args: ['style.width',] }],
+    height: [{ type: HostBinding, args: ['style.height',] }],
+    popover: [{ type: HostBinding, args: ['@popover',] }],
+    clickOutside: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
 };
 
-class DrDropdownDirective {
-    constructor(componentFactoryResolver, viewContainerRef, service, el, _document) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.service = service;
-        this.el = el;
-        this._document = _document;
-        this.position = 'left';
+class DrPopoverService {
+    constructor(overlay, overlayPositionBuilder, injector) {
+        this.overlay = overlay;
+        this.overlayPositionBuilder = overlayPositionBuilder;
+        this.injector = injector;
     }
-    elementHover() {
-        if (!this.drDropdownInHover)
+    open(content, popoverModel) {
+        if (!content)
             return;
-        this.openDropdown();
+        const model = Object.assign(Object.assign({}, DEFAULT_MODEL), popoverModel);
+        const overlayRef = this.createOverlay(model);
+        const popoverRef = new DrPopoverRef(overlayRef);
+        this.attachOverlayContainer(content, model, overlayRef, popoverRef);
+        this.registerListeners(model, overlayRef, popoverRef);
+        return popoverRef;
     }
-    elementClick() {
-        this.openDropdown();
+    attachOverlayContainer(content, { contentContext, position, class: elementClass, manualClosing, hostRef, alignment }, overlayRef, popoverRef) {
+        const componentPortal = new ComponentPortal(DrPopoverComponent, null, this.createInjector(popoverRef));
+        const 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;
     }
-    documentClick(e) {
-        this.closeDropdown(e);
+    createOverlay(popoverModel) {
+        const overlayConfig = this.getOverlayConfig(popoverModel);
+        return this.overlay.create(overlayConfig);
     }
-    openDropdown() {
-        const option = this.el.nativeElement.getBoundingClientRect();
-        this._document.querySelectorAll('dr-dropdown').forEach(item => item.remove());
-        if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
-            this.contentCmpRef.destroy();
-            this.contentCmpRef = null;
-        }
-        else {
-            this.service.destroy();
-            this.showMenu({
-                option,
-                drDropdownInHover: this.drDropdownInHover,
-                position: this.position,
-                list: this.drDropdown,
-                class: this.drDropdownClass
-            });
+    getOverlayConfig(popoverModel) {
+        if (!POPUP_POSITIONS[popoverModel.position])
+            throw new Error(`DrPopover does not support the '${popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position}' position!`);
+        const config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
+        const hostElement = this.getHostElement(popoverModel.hostRef);
+        const positionStrategy = this.overlayPositionBuilder
+            .flexibleConnectedTo(popoverModel.hostRef)
+            .withPositions([POPUP_POSITIONS[popoverModel.position]]);
+        const overlayConfig = new OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy }, config));
+        if (popoverModel.alignment === 'host' && hostElement) {
+            const alignmentDimension = getAlignmentDimension(popoverModel.position);
+            overlayConfig[alignmentDimension] = hostElement.getBoundingClientRect()[alignmentDimension];
         }
+        return overlayConfig;
     }
-    closeDropdown(e) {
-        const menuItem = e.target.classList;
-        if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
-            return;
+    createInjector(popoverRef) {
+        const injectionTokens = [
+            { provide: DrPopoverRef, useValue: popoverRef },
+        ];
+        return Injector.create({ providers: injectionTokens, parent: this.injector });
+    }
+    registerListeners(popoverModel, overlayRef, popoverRef) {
+        const config = popoverModel.overlayConfig || {};
+        const targetElement = popoverModel.targetElement;
+        const 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(() => popoverRef.close());
         }
-        const elems = this._document.querySelectorAll('dr-dropdown');
-        if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
-            setTimeout(() => elems.forEach(item => item.remove()), 100);
+        if (targetElement) {
+            targetElement.addEventListener('mouseup', () => popoverRef.close(), { once: true });
         }
-    }
-    showMenu(options) {
-        let 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;
-    }
-    ngOnDestroy() {
-        if (this.contentCmpRef) {
-            this.contentCmpRef.destroy();
+        if (popoverModel.alignment === 'host' && hostElement) {
+            const alignmentDimension = getAlignmentDimension(popoverModel.position);
+            const resizeObserver = new ResizeObserver(entries => {
+                entries.forEach(host => overlayRef.updateSize({ [alignmentDimension]: host.target.getBoundingClientRect()[alignmentDimension] }));
+            });
+            resizeObserver.observe(hostElement);
+            popoverRef.onClose.pipe(first()).subscribe(() => resizeObserver.unobserve(hostElement));
         }
     }
+    getHostElement(hostRef) {
+        if (!hostRef || hostRef.x)
+            return null;
+        if (hostRef.nativeElement)
+            return hostRef.nativeElement;
+        return hostRef;
+    }
 }
-DrDropdownDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[drDropdown]'
+DrPopoverService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrPopoverService_Factory() { return new DrPopoverService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i1.OverlayPositionBuilder), i0.ɵɵinject(i0.INJECTOR)); }, token: DrPopoverService, providedIn: "root" });
+DrPopoverService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
             },] }
 ];
-DrDropdownDirective.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: DrDropdownService },
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+DrPopoverService.ctorParameters = () => [
+    { type: Overlay },
+    { type: OverlayPositionBuilder },
+    { type: Injector }
 ];
-DrDropdownDirective.propDecorators = {
-    position: [{ type: Input }],
-    drDropdown: [{ type: Input }],
-    drDropdownClass: [{ type: Input }],
-    drDropdownInHover: [{ type: Input }],
-    contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
-    elementHover: [{ type: HostListener, args: ['mouseenter',] }],
-    elementClick: [{ type: HostListener, args: ['click',] }],
-    documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
-};
 
-class DrDropdownPositionDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.position = 'left';
-    }
-    ngOnInit() {
-        setTimeout(this.calculatePosition.bind(this), 1);
+class DrPopoverDirective {
+    constructor(elementRef, drPopoverService) {
+        this.elementRef = elementRef;
+        this.drPopoverService = drPopoverService;
+        this.contentContext = {};
+        this.position = 'bottom';
+        this.class = '';
+        this.overlayConfig = {};
+        this.manualClosing = { enabled: false };
+        this.popoverClose = new EventEmitter();
+        this.showStateChange = new EventEmitter();
     }
-    calculatePosition() {
-        let xDifference = 0;
-        let defaultDelta = 10;
-        let defaultPadding = 0;
-        let originalPosition = this.position;
-        if (this.position === 'child') {
-            defaultDelta = 0;
-            defaultPadding = 10;
-            xDifference = this.el.nativeElement.parentElement.parentElement.offsetWidth - this.el.nativeElement.offsetWidth;
-            const parentRect = this.el.nativeElement.parentElement.parentElement.getBoundingClientRect();
-            this.position = {
-                x: this.el.nativeElement.offsetWidth,
-                y: this.el.nativeElement.parentElement.parentElement.offsetTop - 9,
-                clientX: parentRect.x + this.el.nativeElement.parentElement.parentElement.offsetWidth,
-                clientY: parentRect.y
-            };
-        }
-        if (typeof this.position === 'string') {
-            this.renderer.setStyle(this.el.nativeElement, 'top', this.position === 'bottom' ?
-                this.drDropdownPosition.y - this.drDropdownPosition.height + 'px' :
-                this.drDropdownPosition.y + 'px');
-            this.renderer.setStyle(this.el.nativeElement, 'left', this.position === 'right' ?
-                this.drDropdownPosition.x + this.drDropdownPosition.width + 'px' :
-                this.drDropdownPosition.x + 'px');
-            const menuHeight = this.el.nativeElement.offsetHeight;
-            const heightMoreWindowBottom = menuHeight + this.drDropdownPosition.y > window.innerHeight;
-            const heightMoreWindowTop = menuHeight - this.drDropdownPosition.y + this.drDropdownPosition.height / 2 > 48; // header height;
-            const widthMoreWindowRight = this.drDropdownPosition.x + 250 > window.innerWidth;
-            const spaceBetweenElAndRightBorder = window.innerWidth - (this.drDropdownPosition.x + this.el.nativeElement.offsetWidth);
-            this.widthMoreRight = this.drDropdownPosition.x < spaceBetweenElAndRightBorder;
-            if (heightMoreWindowBottom) {
-                this.position = 'top';
-            }
-            if (heightMoreWindowBottom && widthMoreWindowRight && !heightMoreWindowTop || this.position === 'top-left') {
-                this.position = 'top-left';
-                this.renderer.setStyle(this.el.nativeElement, 'transform', 'translate(-100%, calc(-100% + ' + this.drDropdownPosition.height + 'px))');
-            }
-            if (heightMoreWindowTop && heightMoreWindowBottom) {
-                this.position = 'left-center';
-            }
-            if (this.position === 'bottom-left') {
-                this.renderer.setStyle(this.el.nativeElement, 'transform', `translate(calc(-100% + ${this.drDropdownPosition.width}px), ${this.drDropdownPosition.height + 8}px)`);
-            }
-            const className = this.position === 'top' ? 'content-top'
-                : this.position === 'top-left' ? 'content-top-left'
-                    : this.position === 'bottom' ? 'content-bottom'
-                        : this.position === 'bottom-left' ? 'content-bottom-left'
-                            : this.position === 'left' ? 'content-left'
-                                : this.position === 'left-center' ? 'content-left-center'
-                                    : this.position === 'right' ? 'content-right'
-                                        : this.position === 'bottom-right' ? 'content-bottom-right' : '';
-            this.renderer.addClass(this.el.nativeElement, className);
-            this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
+    togglePopover() {
+        if (this.popoverRef) {
+            this.closePopover();
         }
         else {
-            const defaultChildPadding = 3;
-            const widthMoreWindowRight = originalPosition !== 'child'
-                ? window.innerWidth - (this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding)
-                : window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
-            const widthMoreWindowBottom = originalPosition !== 'child'
-                ? window.innerHeight - (this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding)
-                : window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
-            const spaceRightAmount = window.innerWidth - (this.position.clientX + this.el.nativeElement.offsetWidth + defaultPadding);
-            this.widthMoreRight = !(widthMoreWindowRight < 0);
-            let calculatedHorizantallyPos = widthMoreWindowRight < 0
-                ? -this.position.x + -defaultChildPadding
-                : this.position.x + defaultChildPadding + xDifference;
-            if (spaceRightAmount <= 0 && originalPosition !== 'child') {
-                calculatedHorizantallyPos -= this.el.nativeElement.offsetWidth;
-            }
-            const deltaHeight = widthMoreWindowBottom < 0 ? widthMoreWindowBottom : defaultDelta;
-            this.renderer.setStyle(this.el.nativeElement, 'top', (this.position.y + deltaHeight) + 'px');
-            this.renderer.setStyle(this.el.nativeElement, 'left', (calculatedHorizantallyPos) + 'px');
-            this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
+            this.renderPopover();
+            this.showStateChange.emit({ isShown: !!this.popoverRef });
+        }
+    }
+    closePopover(res) {
+        if (this.popoverRef) {
+            this.popoverRef.close(res);
+            this.popoverRef = null;
         }
     }
+    renderPopover() {
+        const 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(first()).subscribe((res) => {
+            this.closePopover();
+            this.popoverClose.emit(res);
+            this.showStateChange.emit({ isShown: !!this.popoverRef });
+        });
+    }
+    ngOnDestroy() {
+        this.closePopover();
+    }
 }
-DrDropdownPositionDirective.decorators = [
+DrPopoverDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[drDropdownPosition]',
-                exportAs: 'dropdownPosition'
+                selector: '[drPopover]'
             },] }
 ];
-DrDropdownPositionDirective.ctorParameters = () => [
+DrPopoverDirective.ctorParameters = () => [
     { type: ElementRef },
-    { type: Renderer2 }
+    { type: DrPopoverService }
 ];
-DrDropdownPositionDirective.propDecorators = {
-    drDropdownPosition: [{ type: Input }],
-    position: [{ type: Input }]
+DrPopoverDirective.propDecorators = {
+    content: [{ type: Input, args: ['drPopover',] }],
+    contentContext: [{ type: Input, args: ['drPopoverContext',] }],
+    position: [{ type: Input, args: ['drPopoverPosition',] }],
+    class: [{ type: Input, args: ['drPopoverClass',] }],
+    overlayConfig: [{ type: Input, args: ['drPopoverOverlayConfig',] }],
+    manualClosing: [{ type: Input, args: ['drPopoverManualClosing',] }],
+    alignment: [{ type: Input, args: ['drPopoverAlignment',] }],
+    popoverClose: [{ type: Output, args: ['drPopoverClose',] }],
+    showStateChange: [{ type: Output, args: ['drPopoverShowStateChange',] }],
+    togglePopover: [{ type: HostListener, args: ['click',] }]
 };
 
-class DrDropdownItemShowPipe {
-    transform(arr) {
-        return arr.filter(item => item.show ? item.show(item.data) : true);
+class DrDropdownService {
+    constructor() {
+        this.actionItem = new Subject();
     }
-}
-DrDropdownItemShowPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'drDropdownItemShowPipe'
-            },] }
-];
-
-class DrTabComponent {
-    constructor() { }
-    ngOnInit() {
+    set addMenu(item) {
+        this.menuInView = item;
+    }
+    destroy() {
+        if (this.menuInView) {
+            this.menuInView.destroy();
+        }
     }
 }
-DrTabComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-tab',
-                template: `
-      <ng-template>
-          <ng-content></ng-content>
-      </ng-template>
-       `
+DrDropdownService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrDropdownService_Factory() { return new DrDropdownService(); }, token: DrDropdownService, providedIn: "root" });
+DrDropdownService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
             },] }
 ];
-DrTabComponent.ctorParameters = () => [];
-DrTabComponent.propDecorators = {
-    label: [{ type: Input }],
-    disabled: [{ type: Input }],
-    contentTemplate: [{ type: ViewChild, args: [TemplateRef,] }]
-};
+DrDropdownService.ctorParameters = () => [];
 
-class DrTabsComponent {
-    constructor() {
-        this.selectedTab = 0;
-        this.selectedTabChange = new EventEmitter();
+class DrDropdownComponent {
+    constructor(menuService, cdr) {
+        this.menuService = menuService;
+        this.cdr = cdr;
+        this.position = 'left';
     }
-    selectedIndexChange($event) {
-        this.selectedTab = $event;
-        this.selectedTabChange.emit($event);
+    set options(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(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();
+        }
     }
-}
-DrTabsComponent.decorators = [
-    { type: 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 = () => [];
-DrTabsComponent.propDecorators = {
-    selectedTab: [{ type: Input }],
-    withRadio: [{ type: Input }],
-    vertical: [{ type: Input }],
-    selectedTabChange: [{ type: Output }],
-    tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
-};
-
-class DrAccordionComponent {
-    constructor() {
-        this.openCloseItems = new Subject();
-        this.multiValue = false;
+    onMouseLeave() {
+        if (this.drDropdownInHover)
+            this.menuService.destroy();
     }
-    /**
-     *  Allow multiple items to be expanded at the same time.
-     */
-    get multi() {
-        return this.multiValue;
+    onClickedOutside() {
+        if (this.firstInit) {
+            this.menuService.destroy();
+        }
+        else {
+            this.firstInit = true;
+        }
     }
-    set multi(val) {
-        this.multiValue = !!val;
+    hide() {
+        this.menuService.destroy();
     }
-    /**
-     * Opens all enabled accordion items.
-     */
-    openAll() {
-        if (this.multi) {
-            this.openCloseItems.next(false);
+    disabled(act) {
+        if (!act.disabled) {
+            return false;
+        }
+        if (typeof act.disabled === 'boolean') {
+            return act.disabled;
+        }
+        else {
+            return act.disabled(act.data);
         }
     }
-    /**
-     * Closes all enabled accordion items.
-     */
-    closeAll() {
-        this.openCloseItems.next(true);
+    selected(act) {
+        if (!act.selected) {
+            return false;
+        }
+        if (typeof act.selected === 'boolean') {
+            return act.selected;
+        }
+        else {
+            return act.selected(act.data);
+        }
+    }
+    tooltipToShow(act) {
+        if (act.toolTipIfDisabled && !this.disabled(act))
+            return '';
+        return act.toolTip;
+    }
+    tooltipPosition(widthMoreRight) {
+        return widthMoreRight ? 'right' : 'left';
+    }
+    action(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();
+        }
+    }
+    onActionIconClick($event, actionIcon, data) {
+        $event.stopPropagation();
+        if (!this.disabled(actionIcon)) {
+            actionIcon.action(data);
+            this.hide();
+        }
     }
 }
-DrAccordionComponent.decorators = [
+DrDropdownComponent.decorators = [
     { type: Component, args: [{
-                selector: 'dr-accordion',
-                template: '<ng-content select="dr-accordion-item"></ng-content>',
+                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: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\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"]
             },] }
 ];
-DrAccordionComponent.propDecorators = {
-    multi: [{ type: Input, args: ['multi',] }]
+DrDropdownComponent.ctorParameters = () => [
+    { type: DrDropdownService },
+    { type: ChangeDetectorRef }
+];
+DrDropdownComponent.propDecorators = {
+    viewMenu: [{ type: ViewChild, args: ['listMenu',] }],
+    menuContainer: [{ type: ViewChild, args: ['menuContainer',] }],
+    options: [{ type: Input }]
 };
 
-class DrAccordionItemComponent {
-    constructor(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 EventEmitter();
-        this.accordionItemInvalidate = new Subject();
-        this.collapsedValue = true;
-        this.disabledValue = false;
-        this.destroy$ = new Subject();
+class DrDropdownDirective {
+    constructor(componentFactoryResolver, viewContainerRef, service, el, _document) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.service = service;
+        this.el = el;
+        this._document = _document;
+        this.position = 'left';
     }
-    /**
-     * Item is collapse (`true` by default)
-     * @type {boolean}
-     */
-    get collapsed() {
-        return this.collapsedValue;
+    elementHover() {
+        if (!this.drDropdownInHover)
+            return;
+        this.openDropdown();
     }
-    set collapsed(val) {
-        this.collapsedValue = !!val;
-        this.collapsedChange.emit(this.collapsedValue);
-        this.invalidate();
+    elementClick() {
+        this.openDropdown();
     }
-    /**
-     * Item is expanded (`false` by default)
-     */
-    get expanded() {
-        return !this.collapsed;
+    documentClick(e) {
+        this.closeDropdown(e);
     }
-    set expanded(val) {
-        this.collapsedValue = !val;
+    openDropdown() {
+        const option = this.el.nativeElement.getBoundingClientRect();
+        this._document.querySelectorAll('dr-dropdown').forEach(item => item.remove());
+        if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
+            this.contentCmpRef.destroy();
+            this.contentCmpRef = null;
+        }
+        else {
+            this.service.destroy();
+            this.showMenu({
+                option,
+                drDropdownInHover: this.drDropdownInHover,
+                position: this.position,
+                list: this.drDropdown,
+                class: this.drDropdownClass
+            });
+        }
     }
-    /**
-     * Item is disabled and cannot be opened.
-     * @type {boolean}
-     */
-    get disabled() {
-        return this.disabledValue;
+    closeDropdown(e) {
+        const menuItem = e.target.classList;
+        if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
+            return;
+        }
+        const elems = this._document.querySelectorAll('dr-dropdown');
+        if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
+            setTimeout(() => elems.forEach(item => item.remove()), 100);
+        }
     }
-    set disabled(val) {
-        this.disabledValue = !!val;
-        this.invalidate();
-    }
-    /**
-     * Open/close the item
-     */
-    toggle() {
-        if (!this.disabled) {
-            // we need this temporary variable as `openCloseItems.next` will change current value we need to save
-            const willSet = !this.collapsed;
-            if (!this.accordion.multi) {
-                this.accordion.openCloseItems.next(true);
-            }
-            this.collapsed = willSet;
-        }
-    }
-    /**
-     * Open the item.
-     */
-    open() {
-        if (!this.disabled) {
-            this.collapsed = false;
-        }
-    }
-    /**
-     * Collapse the item.
-     */
-    close() {
-        if (!this.disabled) {
-            this.collapsed = true;
-        }
-    }
-    ngOnInit() {
-        this.accordion.openCloseItems
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(collapsed => {
-            if (!this.disabled) {
-                this.collapsed = collapsed;
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        this.accordionItemInvalidate.next(true);
+    showMenu(options) {
+        let 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;
     }
     ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.accordionItemInvalidate.complete();
-    }
-    invalidate() {
-        this.accordionItemInvalidate.next(true);
-        this.cd.markForCheck();
+        if (this.contentCmpRef) {
+            this.contentCmpRef.destroy();
+        }
     }
 }
-DrAccordionItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-accordion-item',
-                template: `
-    <ng-content select="dr-accordion-item-header"></ng-content>
-    <ng-content select="dr-accordion-item-body"></ng-content>
-  `,
-                changeDetection: 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"]
+DrDropdownDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDropdown]'
             },] }
 ];
-DrAccordionItemComponent.ctorParameters = () => [
-    { type: DrAccordionComponent, decorators: [{ type: Host }] },
-    { type: ChangeDetectorRef }
+DrDropdownDirective.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef },
+    { type: DrDropdownService },
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
-DrAccordionItemComponent.propDecorators = {
-    collapsed: [{ type: Input, args: ['collapsed',] }, { type: HostBinding, args: ['class.collapsed',] }],
-    expanded: [{ type: Input, args: ['expanded',] }, { type: HostBinding, args: ['class.expanded',] }],
-    disabled: [{ type: Input, args: ['disabled',] }, { type: HostBinding, args: ['class.disabled',] }],
-    collapsedChange: [{ type: Output }]
+DrDropdownDirective.propDecorators = {
+    position: [{ type: Input }],
+    drDropdown: [{ type: Input }],
+    drDropdownClass: [{ type: Input }],
+    drDropdownInHover: [{ type: Input }],
+    contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
+    elementHover: [{ type: HostListener, args: ['mouseenter',] }],
+    elementClick: [{ type: HostListener, args: ['click',] }],
+    documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
 };
 
-class DrAccordionItemHeaderComponent {
-    constructor(accordionItem, cd) {
-        this.accordionItem = accordionItem;
-        this.cd = cd;
-        this.destroy$ = new Subject();
-    }
-    get isCollapsed() {
-        return this.accordionItem.collapsed;
-    }
-    get expanded() {
-        return !this.accordionItem.collapsed;
-    }
-    get tabbable() {
-        return this.accordionItem.disabled ? '-1' : '0';
-    }
-    get disabled() {
-        return this.accordionItem.disabled;
-    }
-    toggle() {
-        this.accordionItem.toggle();
-    }
-    get state() {
-        if (this.isCollapsed) {
-            return 'collapsed';
-        }
-        return 'expanded';
+class DrDropdownPositionDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.position = 'left';
     }
     ngOnInit() {
-        this.accordionItem.accordionItemInvalidate
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.cd.markForCheck());
+        setTimeout(this.calculatePosition.bind(this), 1);
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    calculatePosition() {
+        let xDifference = 0;
+        let defaultDelta = 10;
+        let defaultPadding = 0;
+        let originalPosition = this.position;
+        if (this.position === 'child') {
+            defaultDelta = 0;
+            defaultPadding = 10;
+            xDifference = this.el.nativeElement.parentElement.parentElement.offsetWidth - this.el.nativeElement.offsetWidth;
+            const parentRect = this.el.nativeElement.parentElement.parentElement.getBoundingClientRect();
+            this.position = {
+                x: this.el.nativeElement.offsetWidth,
+                y: this.el.nativeElement.parentElement.parentElement.offsetTop - 9,
+                clientX: parentRect.x + this.el.nativeElement.parentElement.parentElement.offsetWidth,
+                clientY: parentRect.y
+            };
+        }
+        if (typeof this.position === 'string') {
+            this.renderer.setStyle(this.el.nativeElement, 'top', this.position === 'bottom' ?
+                this.drDropdownPosition.y - this.drDropdownPosition.height + 'px' :
+                this.drDropdownPosition.y + 'px');
+            this.renderer.setStyle(this.el.nativeElement, 'left', this.position === 'right' ?
+                this.drDropdownPosition.x + this.drDropdownPosition.width + 'px' :
+                this.drDropdownPosition.x + 'px');
+            const menuHeight = this.el.nativeElement.offsetHeight;
+            const heightMoreWindowBottom = menuHeight + this.drDropdownPosition.y > window.innerHeight;
+            const heightMoreWindowTop = menuHeight - this.drDropdownPosition.y + this.drDropdownPosition.height / 2 > 48; // header height;
+            const widthMoreWindowRight = this.drDropdownPosition.x + 250 > window.innerWidth;
+            const spaceBetweenElAndRightBorder = window.innerWidth - (this.drDropdownPosition.x + this.el.nativeElement.offsetWidth);
+            this.widthMoreRight = this.drDropdownPosition.x < spaceBetweenElAndRightBorder;
+            if (heightMoreWindowBottom) {
+                this.position = 'top';
+            }
+            if (heightMoreWindowBottom && widthMoreWindowRight && !heightMoreWindowTop || this.position === 'top-left') {
+                this.position = 'top-left';
+                this.renderer.setStyle(this.el.nativeElement, 'transform', 'translate(-100%, calc(-100% + ' + this.drDropdownPosition.height + 'px))');
+            }
+            if (heightMoreWindowTop && heightMoreWindowBottom) {
+                this.position = 'left-center';
+            }
+            if (this.position === 'bottom-left') {
+                this.renderer.setStyle(this.el.nativeElement, 'transform', `translate(calc(-100% + ${this.drDropdownPosition.width}px), ${this.drDropdownPosition.height + 8}px)`);
+            }
+            const className = this.position === 'top' ? 'content-top'
+                : this.position === 'top-left' ? 'content-top-left'
+                    : this.position === 'bottom' ? 'content-bottom'
+                        : this.position === 'bottom-left' ? 'content-bottom-left'
+                            : this.position === 'left' ? 'content-left'
+                                : this.position === 'left-center' ? 'content-left-center'
+                                    : this.position === 'right' ? 'content-right'
+                                        : this.position === 'bottom-right' ? 'content-bottom-right' : '';
+            this.renderer.addClass(this.el.nativeElement, className);
+            this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
+        }
+        else {
+            const defaultChildPadding = 3;
+            const widthMoreWindowRight = originalPosition !== 'child'
+                ? window.innerWidth - (this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding)
+                : window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
+            const widthMoreWindowBottom = originalPosition !== 'child'
+                ? window.innerHeight - (this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding)
+                : window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
+            const spaceRightAmount = window.innerWidth - (this.position.clientX + this.el.nativeElement.offsetWidth + defaultPadding);
+            this.widthMoreRight = !(widthMoreWindowRight < 0);
+            let calculatedHorizantallyPos = widthMoreWindowRight < 0
+                ? -this.position.x + -defaultChildPadding
+                : this.position.x + defaultChildPadding + xDifference;
+            if (spaceRightAmount <= 0 && originalPosition !== 'child') {
+                calculatedHorizantallyPos -= this.el.nativeElement.offsetWidth;
+            }
+            const deltaHeight = widthMoreWindowBottom < 0 ? widthMoreWindowBottom : defaultDelta;
+            this.renderer.setStyle(this.el.nativeElement, 'top', (this.position.y + deltaHeight) + 'px');
+            this.renderer.setStyle(this.el.nativeElement, 'left', (calculatedHorizantallyPos) + 'px');
+            this.renderer.setStyle(this.el.nativeElement, 'z-index', '10010');
+        }
     }
 }
-DrAccordionItemHeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-accordion-item-header',
-                template: `
-    <ng-content select="dr-accordion-item-title"></ng-content>
-    <ng-content select="dr-accordion-item-description"></ng-content>
-    <ng-content></ng-content>
-    <i class="dr-icon-arrow-down expansion-indicator"
-       [@expansionIndicator]="state"
-       *ngIf="!disabled">
-    </i>
-  `,
-                animations: [
-                    trigger('expansionIndicator', [
-                        state('expanded', style({
-                            transform: 'rotate(180deg)',
-                        })),
-                        transition('collapsed => expanded', animate('100ms ease-in')),
-                        transition('expanded => collapsed', animate('100ms ease-out')),
-                    ]),
-                ],
-                changeDetection: 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"]
+DrDropdownPositionDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[drDropdownPosition]',
+                exportAs: 'dropdownPosition'
             },] }
 ];
-DrAccordionItemHeaderComponent.ctorParameters = () => [
-    { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
-    { type: ChangeDetectorRef }
+DrDropdownPositionDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
 ];
-DrAccordionItemHeaderComponent.propDecorators = {
-    isCollapsed: [{ type: HostBinding, args: ['class.accordion-item-header-collapsed',] }],
-    expanded: [{ type: HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: HostBinding, args: ['attr.aria-expanded',] }],
-    tabbable: [{ type: HostBinding, args: ['attr.tabindex',] }],
-    disabled: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
-    toggle: [{ type: HostListener, args: ['click',] }, { type: HostListener, args: ['keydown.space',] }, { type: HostListener, args: ['keydown.enter',] }]
+DrDropdownPositionDirective.propDecorators = {
+    drDropdownPosition: [{ type: Input }],
+    position: [{ type: Input }]
 };
 
-const accordionItemBodyTrigger = trigger('accordionItemBody', [
-    state('collapsed', style({
-        overflow: 'hidden',
-        visibility: 'hidden',
-        height: 0,
-    })),
-    state('expanded', style({
-        overflow: 'hidden',
-        visibility: 'visible',
-    })),
-    transition('collapsed => expanded', animate('100ms ease-in')),
-    transition('expanded => collapsed', animate('100ms ease-out')),
-]);
-class DrAccordionItemBodyComponent {
-    constructor(accordionItem, cd) {
-        this.accordionItem = accordionItem;
-        this.cd = cd;
-        this.destroy$ = new Subject();
-    }
-    get state() {
-        return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
-    }
-    ngOnInit() {
-        this.accordionItem.accordionItemInvalidate
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.cd.markForCheck());
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-DrAccordionItemBodyComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'dr-accordion-item-body',
-                template: `
-    <div [@accordionItemBody]="{ value: state }">
-      <div class="item-body">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-                animations: [accordionItemBodyTrigger],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
-            },] }
-];
-DrAccordionItemBodyComponent.ctorParameters = () => [
-    { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
-    { type: ChangeDetectorRef }
-];
-
-class DrModelDebounceChangeDirective {
-    constructor(ngModel) {
-        this.ngModel = ngModel;
-        this.debounce = 200;
-        this.ngModelDebounceChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.subscription = this.ngModel.control.valueChanges
-            .pipe(skip(1), debounceTime(this.debounce), distinctUntilChanged())
-            .subscribe(value => this.ngModelDebounceChange.emit(value));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-}
-DrModelDebounceChangeDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[ngModelDebounceChange]'
-            },] }
-];
-DrModelDebounceChangeDirective.ctorParameters = () => [
-    { type: NgModel }
-];
-DrModelDebounceChangeDirective.propDecorators = {
-    debounce: [{ type: Input }],
-    ngModelDebounceChange: [{ type: Output }]
-};
-
-const MAT_DEFAULT_DATE_FORMAT = 'MM/DD/yyyy';
-const DATE_INPUT_FORMAT = 'YYYY/MM/DD';
-const YEAR_FORMAT = 'yyyy';
-const MONTH_YEAR_FORMAT = 'MM/yyyy';
-const QUARTER_FORMAT = 'Q/yyyy';
-class CustomDateFormat {
-    constructor() {
-        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'
-        };
-    }
-    set parse(parse) {
-        this._parse = Object.assign({}, this._parse, parse);
-    }
-    get parse() {
-        return this._parse;
-    }
-    set display(display) {
-        this._display = Object.assign({}, this._display, display);
-    }
-    get display() {
-        return this._display;
-    }
-    updateDateFormat(parse, display) {
-        this.parse = parse;
-        if (!display) {
-            display = parse;
-        }
-        this.display = display;
+class DrDropdownItemShowPipe {
+    transform(arr) {
+        return arr.filter(item => item.show ? item.show(item.data) : true);
     }
 }
-var DatePickerPeriodPosition;
-(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";
-})(DatePickerPeriodPosition || (DatePickerPeriodPosition = {}));
-
-const components$2 = [DateTagComponent,
-    DayTagComponent,
-    WeekTagComponent,
-    MonthTagComponent,
-    QuarterTagComponent,
-    AnyTagComponent,
-    YearTagComponent,
-    ForecastTagComponent];
-const ɵ0$1 = { useUtc: true };
-class DateTagModule {
-}
-DateTagModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    MatNativeDateModule,
-                    MatDatepickerModule,
-                    FormsModule,
-                    MatFormFieldModule,
-                    ReactiveFormsModule,
-                    MatInputModule,
-                    MatMomentDateModule,
-                    MatSelectModule
-                ],
-                exports: components$2,
-                providers: [
-                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0$1 }
-                ],
-                declarations: components$2,
-            },] }
-];
-;
-
-class ListTagModule {
-}
-ListTagModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    MatFormFieldModule,
-                    ReactiveFormsModule,
-                    MatMomentDateModule,
-                    MatSelectModule,
-                    MatButtonToggleModule,
-                ],
-                exports: [ListTagComponent],
-                providers: [],
-                declarations: [
-                    ListTagComponent
-                ],
-            },] }
-];
-
-class DrTagModule {
-}
-DrTagModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    DateTagModule,
-                    ListTagModule
-                ],
-                exports: [DrTagComponent],
-                providers: [],
-                declarations: [
-                    DrTagComponent
-                ],
+DrDropdownItemShowPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'drDropdownItemShowPipe'
             },] }
 ];
 
-const moment$2 = require('moment');
-class DrDatePickerService {
-    constructor() {
-        this.isTimeframeSelectionEnabled = false;
-        this.timeframe = 'day';
-        this.format$ = new BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
-        this.updatedQuarter$ = new Subject();
-        this.formatConfig = {
-            day: MAT_DEFAULT_DATE_FORMAT,
-            month: MONTH_YEAR_FORMAT,
-            year: YEAR_FORMAT,
-            quarter: QUARTER_FORMAT,
-        };
-    }
-    getQuarterDisplay(value) {
-        return 'Q' + moment$2(value).quarter() + this.format$.getValue().charAt(1) + moment$2(value).year();
-    }
-    getTimeframe(format) {
-        const defaultFrame = 'day';
-        if (!format) {
-            return defaultFrame;
-        }
-        const 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;
-        }
-    }
-    getConfiguredFormat(timeframe) {
-        return this.formatConfig[timeframe];
-    }
-    updateTimeframeAndFormat(format) {
-        const normalizedFormat = this.normalizeValue(format || this.format$.getValue());
-        this.timeframe = this.getTimeframe(normalizedFormat);
-        this.format$.next(this.getConfiguredFormat(this.timeframe));
-    }
-    normalizeValue(value) {
-        return value.replace(/d/g, 'D');
-    }
-}
-DrDatePickerService.decorators = [
-    { type: Injectable }
-];
-
-const moment$1 = require('moment');
-class DrDatePickerCustomHeaderComponent {
-    constructor(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
-        this._calendar = _calendar;
-        this._dateAdapter = _dateAdapter;
-        this._dateFormats = _dateFormats;
-        this.cdr = cdr;
-        this.datePickerService = datePickerService;
-        this._destroyed = new Subject();
-        this.quarters = [1, 2, 3, 4];
-        this.selectedQuarter = 1;
-        this.timeframeOptions = [{
-                title: 'Day',
-                value: 'month',
-                format: this.datePickerService.formatConfig.day,
-                periodLabel: () => this._dateAdapter
-                    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
-                    .toLocaleUpperCase()
-            }, {
-                title: 'Month',
-                value: 'year',
-                format: this.datePickerService.formatConfig.month,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
-            }, {
-                title: 'Quarter',
-                value: 'none',
-                format: this.datePickerService.formatConfig.quarter,
-                periodLabel: () => String(moment$1(this._calendar.activeDate).year())
-            }, {
-                title: 'Year',
-                value: 'multi-year',
-                format: this.datePickerService.formatConfig.year,
-                periodLabel: () => {
-                    const currentYear = moment$1(this._calendar.activeDate).year();
-                    const startPeriod = Math.floor(currentYear / 24) * 24;
-                    return startPeriod + '-' + (startPeriod + 23);
-                }
-            }];
-        this.pagingSetup = {
-            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'none': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            'multi-year': (forward) => this.pagingDateChange('addCalendarYears', 24, forward)
-        };
-        this.selectedTimeframe = 'month';
-        this.timeframeSelection = false;
-        this.periodMonthLabel = '';
-        this.periodYearLabel = '';
-        _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
-        this.datePickerService.format$
-            .pipe(take(1))
-            .subscribe(value => {
-            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format == value)[0].value;
-            this.setPeriodLabels();
-        });
-        _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    setPeriodLabels() {
-        const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
-        const fullPeriodLabel = currentTimeframeOption.periodLabel();
-        if (this._calendar.currentView === 'month') {
-            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
-            this.periodYearLabel = fullPeriodLabel.slice(4);
-        }
-        else {
-            this.periodMonthLabel = '';
-            this.periodYearLabel = fullPeriodLabel;
-        }
-        this.cdr.markForCheck();
+class DrTabComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    setTimeframe() {
-        this.timeframeSelection = false;
-        this._calendar.currentView = this.selectedTimeframe;
-        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
-        this.datePickerService.updateTimeframeAndFormat(chosenTimeframeOption.format);
-        if (this.selectedTimeframe == 'none') {
-            this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-        }
+}
+DrTabComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-tab',
+                template: `
+      <ng-template>
+          <ng-content></ng-content>
+      </ng-template>
+       `
+            },] }
+];
+DrTabComponent.ctorParameters = () => [];
+DrTabComponent.propDecorators = {
+    label: [{ type: Input }],
+    disabled: [{ type: Input }],
+    contentTemplate: [{ type: ViewChild, args: [TemplateRef,] }]
+};
+
+class DrTabsComponent {
+    constructor() {
+        this.selectedTab = 0;
+        this.selectedTabChange = new EventEmitter();
     }
-    get currentViewIsQuarter() {
-        return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
+    selectedIndexChange($event) {
+        this.selectedTab = $event;
+        this.selectedTabChange.emit($event);
     }
-    switchViewOnClickOnPeriodLabel(view) {
-        this._calendar.currentView = view;
+}
+DrTabsComponent.decorators = [
+    { type: 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 = () => [];
+DrTabsComponent.propDecorators = {
+    selectedTab: [{ type: Input }],
+    withRadio: [{ type: Input }],
+    vertical: [{ type: Input }],
+    selectedTabChange: [{ type: Output }],
+    tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
+};
+
+class DrAccordionComponent {
+    constructor() {
+        this.openCloseItems = new Subject();
+        this.multiValue = false;
     }
-    onSelectQuarter(quarterNumber) {
-        const monthsInQuarter = 3;
-        this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
-        const unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
-        this._calendar.activeDate = unadaptedDate;
-        this.datePickerService.updatedQuarter$.next(moment$1(unadaptedDate));
-        this.datePickerService.calendarInstance.close();
+    /**
+     *  Allow multiple items to be expanded at the same time.
+     */
+    get multi() {
+        return this.multiValue;
     }
-    pagingClicked(forward) {
-        this.pagingSetup[this._calendar.currentView] && this.pagingSetup[this._calendar.currentView](forward);
+    set multi(val) {
+        this.multiValue = !!val;
     }
-    pagingDateChange(actionCall, amount, forward) {
-        this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
-        this.setPeriodLabels();
+    /**
+     * Opens all enabled accordion items.
+     */
+    openAll() {
+        if (this.multi) {
+            this.openCloseItems.next(false);
+        }
+    }
+    /**
+     * Closes all enabled accordion items.
+     */
+    closeAll() {
+        this.openCloseItems.next(true);
     }
 }
-DrDatePickerCustomHeaderComponent.decorators = [
+DrAccordionComponent.decorators = [
     { type: Component, args: [{
-                selector: 'dr-date-picker_custom-header.component',
-                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\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",
+                selector: 'dr-accordion',
+                template: '<ng-content select="dr-accordion-item"></ng-content>',
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
+                styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
             },] }
 ];
-DrDatePickerCustomHeaderComponent.ctorParameters = () => [
-    { type: MatCalendar },
-    { type: DateAdapter },
-    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
-    { type: ChangeDetectorRef },
-    { type: DrDatePickerService }
-];
+DrAccordionComponent.propDecorators = {
+    multi: [{ type: Input, args: ['multi',] }]
+};
 
-const moment = require('moment');
-const noop = () => { };
-const ɵ0 = noop;
-class DrDatePickerComponent {
-    constructor(cdr, dateAdapter, datePickerService) {
-        this.cdr = cdr;
-        this.dateAdapter = dateAdapter;
-        this.datePickerService = datePickerService;
-        // Whether to transform date, taking end, start, middle of preiod (i.e. set middle of month if timeframe='month')
-        this.periodPosition = DatePickerPeriodPosition.DEFAULT;
-        this.placeholder = 'Select';
-        this.calendarViewsTimeframeMapping = {
-            year: 'multi-year',
-            month: 'year',
-            quarter: 'none',
-            day: 'month',
-        };
-        this.customHeader = DrDatePickerCustomHeaderComponent;
-        this.readonly = true;
-        this.innerValue = null;
-        this.destroyed$ = new Subject();
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        datePickerService.updatedQuarter$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.setValueFromMoment(value);
-        });
-    }
-    set format(value) {
-        this.datePickerService.updateTimeframeAndFormat(value);
+class DrAccordionItemComponent {
+    constructor(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 EventEmitter();
+        this.accordionItemInvalidate = new Subject();
+        this.collapsedValue = true;
+        this.disabledValue = false;
+        this.destroy$ = new Subject();
     }
-    set min(minDate) {
-        this._min = moment.unix(minDate).utc();
+    /**
+     * Item is collapse (`true` by default)
+     * @type {boolean}
+     */
+    get collapsed() {
+        return this.collapsedValue;
     }
-    set max(maxDate) {
-        this._max = moment.unix(maxDate).utc();
+    set collapsed(val) {
+        this.collapsedValue = !!val;
+        this.collapsedChange.emit(this.collapsedValue);
+        this.invalidate();
     }
-    get value() {
-        return this.innerValue;
+    /**
+     * Item is expanded (`false` by default)
+     */
+    get expanded() {
+        return !this.collapsed;
     }
-    set value(v) {
-        if (v !== this.innerValue) {
-            this.setValueFromMoment(v);
-        }
-        this.cdr.markForCheck();
+    set expanded(val) {
+        this.collapsedValue = !val;
     }
-    ngAfterViewInit() {
-        this.datePickerService.calendarInstance = this.dp;
-        this.dp.startView = this.calendarViewsTimeframeMapping[this.datePickerService.timeframe];
+    /**
+     * Item is disabled and cannot be opened.
+     * @type {boolean}
+     */
+    get disabled() {
+        return this.disabledValue;
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
+    set disabled(val) {
+        this.disabledValue = !!val;
+        this.invalidate();
     }
     /**
-     * Updating component inner value according to datepicker timeframe (day, month etc.)
-     * and date position in period (start, end, middle)
+     * Open/close the item
      */
-    tryToNormalaizeTimeframe() {
-        const timeframe = this.datePickerService.timeframe;
-        switch (this.periodPosition) {
-            case DatePickerPeriodPosition.START_OF_PERIOD:
-                this.innerValue.startOf(timeframe);
-                break;
-            case DatePickerPeriodPosition.END_OF_PERIOD:
-                this.innerValue.endOf(timeframe);
-                break;
-            case DatePickerPeriodPosition.MIDDLE_OF_PERIOD:
-                this.innerValue.startOf(timeframe);
-                const endOfPeriod = this.innerValue.clone().endOf(timeframe);
-                const diff = endOfPeriod.diff(this.innerValue, 'seconds');
-                this.innerValue.add(diff / 2 + 1, 'seconds');
-                break;
-            default:
-                this.innerValue.startOf(timeframe);
-                break;
+    toggle() {
+        if (!this.disabled) {
+            // we need this temporary variable as `openCloseItems.next` will change current value we need to save
+            const willSet = !this.collapsed;
+            if (!this.accordion.multi) {
+                this.accordion.openCloseItems.next(true);
+            }
+            this.collapsed = willSet;
         }
     }
-    chosenPeriodHandler(chosenDate, timeframe) {
-        if (this.datePickerService.timeframe === timeframe) {
-            this.setValueFromMoment(chosenDate);
-            this.dp.close();
+    /**
+     * Open the item.
+     */
+    open() {
+        if (!this.disabled) {
+            this.collapsed = false;
         }
     }
     /**
-     * Setting value from outside of component via ngModel or formControl updates
+     * Collapse the item.
      */
-    writeValue(value) {
-        this.innerValue = value ? moment.unix(value).utc() : value;
-        if (this.innerValue) {
-            this.tryToNormalaizeTimeframe();
+    close() {
+        if (!this.disabled) {
+            this.collapsed = true;
         }
-        this.cdr.markForCheck();
     }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
+    ngOnInit() {
+        this.accordion.openCloseItems
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(collapsed => {
+            if (!this.disabled) {
+                this.collapsed = collapsed;
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        this.accordionItemInvalidate.next(true);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.accordionItemInvalidate.complete();
+    }
+    invalidate() {
+        this.accordionItemInvalidate.next(true);
+        this.cd.markForCheck();
+    }
+}
+DrAccordionItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-accordion-item',
+                template: `
+    <ng-content select="dr-accordion-item-header"></ng-content>
+    <ng-content select="dr-accordion-item-body"></ng-content>
+  `,
+                changeDetection: 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 = () => [
+    { type: DrAccordionComponent, decorators: [{ type: Host }] },
+    { type: ChangeDetectorRef }
+];
+DrAccordionItemComponent.propDecorators = {
+    collapsed: [{ type: Input, args: ['collapsed',] }, { type: HostBinding, args: ['class.collapsed',] }],
+    expanded: [{ type: Input, args: ['expanded',] }, { type: HostBinding, args: ['class.expanded',] }],
+    disabled: [{ type: Input, args: ['disabled',] }, { type: HostBinding, args: ['class.disabled',] }],
+    collapsedChange: [{ type: Output }]
+};
+
+class DrAccordionItemHeaderComponent {
+    constructor(accordionItem, cd) {
+        this.accordionItem = accordionItem;
+        this.cd = cd;
+        this.destroy$ = new Subject();
+    }
+    get isCollapsed() {
+        return this.accordionItem.collapsed;
+    }
+    get expanded() {
+        return !this.accordionItem.collapsed;
+    }
+    get tabbable() {
+        return this.accordionItem.disabled ? '-1' : '0';
+    }
+    get disabled() {
+        return this.accordionItem.disabled;
+    }
+    toggle() {
+        this.accordionItem.toggle();
     }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
+    get state() {
+        if (this.isCollapsed) {
+            return 'collapsed';
+        }
+        return 'expanded';
     }
-    /**
-     * Set inner value from Moment and propagate
-     * @param momentDate
-     */
-    setValueFromMoment(momentDate) {
-        this.setValue(momentDate.unix());
+    ngOnInit() {
+        this.accordionItem.accordionItemInvalidate
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.cd.markForCheck());
     }
-    /**
-     * Set inner value from timestamp and propagate
-     * @param timestamp
-     */
-    setValue(timestamp) {
-        this.writeValue(timestamp);
-        this.onChangeCallback(this.innerValue.unix());
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
 }
-DrDatePickerComponent.decorators = [
+DrAccordionItemHeaderComponent.decorators = [
     { type: Component, args: [{
-                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: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true },
-                    { provide: DrDatePickerService }
+                selector: 'dr-accordion-item-header',
+                template: `
+    <ng-content select="dr-accordion-item-title"></ng-content>
+    <ng-content select="dr-accordion-item-description"></ng-content>
+    <ng-content></ng-content>
+    <i class="dr-icon-arrow-down expansion-indicator"
+       [@expansionIndicator]="state"
+       *ngIf="!disabled">
+    </i>
+  `,
+                animations: [
+                    trigger('expansionIndicator', [
+                        state('expanded', style({
+                            transform: 'rotate(180deg)',
+                        })),
+                        transition('collapsed => expanded', animate('100ms ease-in')),
+                        transition('expanded => collapsed', animate('100ms ease-out')),
+                    ]),
                 ],
-                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"]
+                changeDetection: 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"]
             },] }
 ];
-DrDatePickerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateAdapter },
-    { type: DrDatePickerService }
+DrAccordionItemHeaderComponent.ctorParameters = () => [
+    { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
+    { type: ChangeDetectorRef }
 ];
-DrDatePickerComponent.propDecorators = {
-    format: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    periodPosition: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    dp: [{ type: ViewChild, args: ['datePicker',] }]
+DrAccordionItemHeaderComponent.propDecorators = {
+    isCollapsed: [{ type: HostBinding, args: ['class.accordion-item-header-collapsed',] }],
+    expanded: [{ type: HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: HostBinding, args: ['attr.aria-expanded',] }],
+    tabbable: [{ type: HostBinding, args: ['attr.tabindex',] }],
+    disabled: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    toggle: [{ type: HostListener, args: ['click',] }, { type: HostListener, args: ['keydown.space',] }, { type: HostListener, args: ['keydown.enter',] }]
 };
 
-class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
-    constructor(cdr, dateAdapter, datePickerService) {
-        super(cdr, dateAdapter, datePickerService);
-        this.cdr = cdr;
-        this.dateAdapter = dateAdapter;
-        this.datePickerService = datePickerService;
-        this.isDashboardDatepicker = false;
-        this.onChangeFormat = new EventEmitter();
-        this.pagingSetup = {
-            'year': (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
-            'quarter': (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
-            'month': (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            'day': (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
-        };
-        datePickerService.isTimeframeSelectionEnabled = true;
-        datePickerService.format$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.onChangeFormat.emit(datePickerService.normalizeValue(value));
-        });
-    }
-    get isDashboardClassDisplayed() {
-        return this.isDashboardDatepicker;
+const accordionItemBodyTrigger = trigger('accordionItemBody', [
+    state('collapsed', style({
+        overflow: 'hidden',
+        visibility: 'hidden',
+        height: 0,
+    })),
+    state('expanded', style({
+        overflow: 'hidden',
+        visibility: 'visible',
+    })),
+    transition('collapsed => expanded', animate('100ms ease-in')),
+    transition('expanded => collapsed', animate('100ms ease-out')),
+]);
+class DrAccordionItemBodyComponent {
+    constructor(accordionItem, cd) {
+        this.accordionItem = accordionItem;
+        this.cd = cd;
+        this.destroy$ = new Subject();
     }
-    ;
-    get quarterDisplay() {
-        return this.datePickerService.getQuarterDisplay(this.value);
+    get state() {
+        return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
     }
     ngOnInit() {
-        if (this.dateFormatConfig) {
-            this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), this.dateFormatConfig);
-        }
-    }
-    pagingClicked(forward) {
-        this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
-        this.dp.close();
+        this.accordionItem.accordionItemInvalidate
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.cd.markForCheck());
     }
-    pagingDateChange(actionCall, amount, forward) {
-        const newValue = this.dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
-        this.setValueFromMoment(newValue);
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
 }
-DrDatePickerWithTimeframeComponent.decorators = [
+DrAccordionItemBodyComponent.decorators = [
     { type: Component, args: [{
-                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",
+                selector: 'dr-accordion-item-body',
+                template: `
+    <div [@accordionItemBody]="{ value: state }">
+      <div class="item-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                animations: [accordionItemBodyTrigger],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [
-                    { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
-                    { provide: DrDatePickerService }
-                ],
-                styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background-color:#fff;border:1px solid #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"]
+                styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
             },] }
 ];
-DrDatePickerWithTimeframeComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateAdapter },
-    { type: DrDatePickerService }
+DrAccordionItemBodyComponent.ctorParameters = () => [
+    { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
+    { type: ChangeDetectorRef }
 ];
-DrDatePickerWithTimeframeComponent.propDecorators = {
-    isDashboardClassDisplayed: [{ type: HostBinding, args: ['class.dr-date-picker-on-dashboard',] }],
-    isDashboardDatepicker: [{ type: Input }],
-    dateFormatConfig: [{ type: Input }],
-    onChangeFormat: [{ type: Output }]
-};
 
-class DrDatePickerFormatDirective {
-    constructor(matDateFormat, ngControl) {
-        this.matDateFormat = matDateFormat;
-        this.ngControl = ngControl;
+class DrModelDebounceChangeDirective {
+    constructor(ngModel) {
+        this.ngModel = ngModel;
+        this.debounce = 200;
+        this.ngModelDebounceChange = new EventEmitter();
     }
-    set datePickerFormat(format) {
-        var _a;
-        if (this.configDateParse) {
-            this.matDateFormat.updateDateFormat(this.configDateParse, this.configDateDisplay);
-        }
-        else {
-            this.matDateFormat.updateDateFormat({ dateInput: format });
-        }
-        const value = this.ngControl.value;
-        (_a = this.ngControl.valueAccessor) === null || _a === void 0 ? void 0 : _a.writeValue(value);
+    ngOnInit() {
+        this.subscription = this.ngModel.control.valueChanges
+            .pipe(skip(1), debounceTime(this.debounce), distinctUntilChanged())
+            .subscribe(value => this.ngModelDebounceChange.emit(value));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
 }
-DrDatePickerFormatDirective.decorators = [
+DrModelDebounceChangeDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[drDatePickerFormat]',
-                providers: [
-                    {
-                        provide: DateAdapter,
-                        useClass: MomentDateAdapter
-                    },
-                    {
-                        provide: MAT_DATE_FORMATS,
-                        useClass: CustomDateFormat
-                    }
-                ]
+                selector: '[ngModelDebounceChange]'
             },] }
 ];
-DrDatePickerFormatDirective.ctorParameters = () => [
-    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
-    { type: NgControl, decorators: [{ type: Optional }] }
+DrModelDebounceChangeDirective.ctorParameters = () => [
+    { type: NgModel }
 ];
-DrDatePickerFormatDirective.propDecorators = {
-    configDateParse: [{ type: Input }],
-    configDateDisplay: [{ type: Input }],
-    datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
+DrModelDebounceChangeDirective.propDecorators = {
+    debounce: [{ type: Input }],
+    ngModelDebounceChange: [{ type: Output }]
 };
 
-// !!! Please do not use such approach in other places
-// Hard fix for 'none' calendar view selection
-MatCalendar.prototype.focusActiveCell = function () {
-    var _a;
-    (_a = this._getCurrentViewComponent()) === null || _a === void 0 ? void 0 : _a._focusActiveCell(false);
-};
+const components$2 = [DateTagComponent,
+    DayTagComponent,
+    WeekTagComponent,
+    MonthTagComponent,
+    QuarterTagComponent,
+    AnyTagComponent,
+    YearTagComponent,
+    ForecastTagComponent];
+const ɵ0 = { useUtc: true };
+class DateTagModule {
+}
+DateTagModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MatNativeDateModule,
+                    MatDatepickerModule,
+                    FormsModule,
+                    MatFormFieldModule,
+                    ReactiveFormsModule,
+                    MatInputModule,
+                    MatMomentDateModule,
+                    MatSelectModule
+                ],
+                exports: components$2,
+                providers: [
+                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: ɵ0 }
+                ],
+                declarations: components$2,
+            },] }
+];
+;
+
+class ListTagModule {
+}
+ListTagModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    MatFormFieldModule,
+                    ReactiveFormsModule,
+                    MatMomentDateModule,
+                    MatSelectModule,
+                    MatButtonToggleModule,
+                ],
+                exports: [ListTagComponent],
+                providers: [],
+                declarations: [
+                    ListTagComponent
+                ],
+            },] }
+];
+
+class DrTagModule {
+}
+DrTagModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    DateTagModule,
+                    ListTagModule
+                ],
+                exports: [DrTagComponent],
+                providers: [],
+                declarations: [
+                    DrTagComponent
+                ],
+            },] }
+];
+
 const components$1 = [
     DrButtonComponent,
     RadioButtonComponent,
@@ -3447,7 +3344,6 @@ const components$1 = [
     DrToggleComponent,
     DrToggleButtonComponent,
     DrDatePickerComponent,
-    DrDatePickerWithTimeframeComponent,
     DrDatePickerFormatDirective,
     DrDatePickerCustomHeaderComponent,
     DrModelDebounceChangeDirective
@@ -3464,6 +3360,9 @@ DrInputsModule.decorators = [
                     CommonModule,
                     NgSelectModule,
                     MatDatepickerModule
+                ],
+                providers: [
+                    DrDatePickerService
                 ]
             },] }
 ];
@@ -3612,5 +3511,5 @@ DrAccordionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, CustomDateFormat, DATE_INPUT_FORMAT, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MAT_DEFAULT_DATE_FORMAT, MONTH_YEAR_FORMAT, MonthTagComponent, QUARTER_FORMAT, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YEAR_FORMAT, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg };
+export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerService as ɵc, CustomDateFormat as ɵd, DrDatePickerCustomHeaderComponent as ɵe };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map