@datarailsshared/datarailsshared 1.3.40 → 1.3.43

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, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Optional, Injector, Injectable, Host, NgModule } from '@angular/core';
+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, 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 * as moment$7 from 'moment';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
-import { Subject, from, merge, fromEvent, noop as noop$1 } from 'rxjs';
-import { startWith, switchMap, takeUntil, filter, first } from 'rxjs/operators';
+import { Subject, from, merge, fromEvent, noop as noop$1, BehaviorSubject } from 'rxjs';
+import { startWith, switchMap, takeUntil, filter, take, first } 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 } 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';
@@ -668,7 +668,7 @@ DrTagComponent.propDecorators = {
     tagChange: [{ type: Output }]
 };
 
-const moment$1 = momentImported;
+const moment$1 = moment$7;
 class ListTagComponent {
     constructor() {
         this.defaultValue = "";
@@ -1205,7 +1205,7 @@ class DrInputComponent {
 DrInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-input',
-                template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"blur.emit(value); onTouched()\"\r\n       [disabled]=\"_disabled\"\r\n       [readonly]=\"readonly\"\r\n       [type]=\"type\"\r\n       [placeholder]=\"placeholder\"\r\n       [name]=\"name\"\r\n       [min]=\"min\"\r\n       [step]=\"step\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"onClear($event)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n        (click)=\"onButtonClicked($event)\">\r\n    {{_buttonOptions.text}}\r\n</button>\r\n",
+                template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"blur.emit(value); onTouched()\"\r\n       [disabled]=\"_disabled\"\r\n       [readonly]=\"readonly\"\r\n       [type]=\"type\"\r\n       [placeholder]=\"placeholder\"\r\n       [name]=\"name\"\r\n       [min]=\"min\"\r\n       [max]=\"max\"\r\n       [minLength]=\"minLength\"\r\n       [maxlength]=\"maxlength\"\r\n       [step]=\"step\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"onClear($event)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n        (click)=\"onButtonClicked($event)\">\r\n    {{_buttonOptions.text}}\r\n</button>\r\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         useExisting: forwardRef(() => DrInputComponent),
@@ -1230,6 +1230,8 @@ DrInputComponent.propDecorators = {
     clearable: [{ type: Input }],
     min: [{ type: Input }],
     max: [{ type: Input }],
+    minLength: [{ type: Input }],
+    maxlength: [{ type: Input }],
     step: [{ type: Input }],
     blur: [{ type: Output }],
     elementClass: [{ type: HostBinding, args: ['class',] }],
@@ -1252,6 +1254,7 @@ class DrSelectComponent {
         this.items = [];
         this.appendTo = 'body';
         this.disabled = false;
+        this.optionWithDescription = false;
         this.keyDownFn = () => true;
         this.change = new EventEmitter();
         this.onChange = () => { };
@@ -1288,13 +1291,13 @@ class DrSelectComponent {
 DrSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-select',
-                template: " <ng-select [(ngModel)]=\"selectedItem\"\r\n            [items]=\"items\"\r\n            [bindLabel]=\"bindLabel\"\r\n            [bindValue]=\"bindValue\"\r\n            [multiple]=\"multiple\"\r\n            [addTag]=\"addTag\"\r\n            [appendTo]=\"appendTo\"\r\n            [clearable]=\"clearable\"\r\n            [searchable]=\"searchable\"\r\n            [hideSelected]=\"hideSelected\"\r\n            [placeholder]=\"placeholder\"\r\n            [loading]=\"loading\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            [id]=\"id\"\r\n            [keyDownFn]=\"keyDownFn\"\r\n            [searchFn]=\"searchFn\"\r\n            (change)=\"change.emit(selectedItem); onChange(selectedItem)\"\r\n            class=\"dr-select\">\r\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\r\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n    </ng-template>\r\n     <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n     <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n     <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n </ng-select>\r\n",
+                template: " <ng-select [(ngModel)]=\"selectedItem\"\r\n            [items]=\"items\"\r\n            [bindLabel]=\"bindLabel\"\r\n            [bindValue]=\"bindValue\"\r\n            [multiple]=\"multiple\"\r\n            [addTag]=\"addTag\"\r\n            [appendTo]=\"appendTo\"\r\n            [clearable]=\"clearable\"\r\n            [searchable]=\"searchable\"\r\n            [hideSelected]=\"hideSelected\"\r\n            [placeholder]=\"placeholder\"\r\n            [loading]=\"loading\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            [id]=\"id\"\r\n            [keyDownFn]=\"keyDownFn\"\r\n            [searchFn]=\"searchFn\"\r\n            (change)=\"change.emit(selectedItem); onChange(selectedItem)\"\r\n            class=\"dr-select\">\r\n    <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\r\n        <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n    </ng-template>\r\n     <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n     <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n     <ng-template *ngIf=\"optionWithDescription\" ng-option-tmp let-item=\"item\">\r\n        <div class=\"dr-select__option-with-desc__wrapper\">\r\n            <div>{{ item.name }}</div>\r\n            <div class=\"dr-select__option-with-desc__description\"\r\n            >{{ item?.description }}</div>\r\n        </div>\r\n    </ng-template>\r\n     <ng-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\r\n         <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n     </ng-template>\r\n </ng-select>\r\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         useExisting: DrSelectComponent,
                         multi: true
                     }],
-                styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
+                styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{max-width:97%;word-break:break-word;color:#4e566c;font-weight:400;font-size:12px;line-height:20px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select.ng-option-selected.ng-option-marked .dr-select__option-with-desc__wrapper .dr-select__option-with-desc__description{color:#0c142b}\n"]
             },] }
 ];
 DrSelectComponent.ctorParameters = () => [
@@ -1316,6 +1319,7 @@ DrSelectComponent.propDecorators = {
     loading: [{ type: Input }],
     readonly: [{ type: Input }],
     disabled: [{ type: Input }],
+    optionWithDescription: [{ type: Input }],
     id: [{ type: Input }],
     keyDownFn: [{ type: Input }],
     selectedItem: [{ type: Input }],
@@ -1878,6 +1882,7 @@ 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 = {
@@ -1887,7 +1892,9 @@ class CustomDateFormat {
             dateInput: DATE_INPUT_FORMAT,
             monthYearLabel: 'MMM YYYY',
             dateA11yLabel: 'LL',
-            monthYearA11yLabel: 'MMM YYYY'
+            monthYearA11yLabel: 'MMM YYYY',
+            quarterYearLabel: 'Q/YYYY',
+            yearLabel: 'YYYY'
         };
     }
     set parse(parse) {
@@ -1911,64 +1918,226 @@ class CustomDateFormat {
     }
 }
 
+class DrDatePickerService {
+    constructor() {
+        this.timeframe = 'day';
+        this.format = new BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+        this.updatedQuater = new Subject();
+    }
+    getQuarterDisplay(value, format) {
+        return 'Q' + moment$7(value).quarter() + format.charAt(1) + moment$7(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';
+        }
+    }
+}
+DrDatePickerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrDatePickerService_Factory() { return new DrDatePickerService(); }, token: DrDatePickerService, providedIn: "root" });
+DrDatePickerService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
+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: 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$7(this._calendar.activeDate).year())
+            }, {
+                title: 'Quarter',
+                value: 'none',
+                format: QUARTER_FORMAT,
+                periodLabel: () => String(moment$7(this._calendar.activeDate).year())
+            }, {
+                title: 'Year',
+                value: 'multi-year',
+                format: YEAR_FORMAT,
+                periodLabel: () => {
+                    const currentYear = moment$7(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(() => cdr.markForCheck());
+        this.datePickerService.format
+            .pipe(take(1))
+            .subscribe(value => {
+            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format == value)[0].value;
+        });
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    setPeriodLabels(currentTimeframeOption) {
+        const fullPeriodLabel = currentTimeframeOption.periodLabel();
+        if (this.selectedTimeframe === 'month') {
+            this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
+            this.periodYearLabel = fullPeriodLabel.slice(4);
+        }
+        else {
+            this.periodMonthLabel = '';
+            this.periodYearLabel = fullPeriodLabel;
+        }
+    }
+    setTimeframe() {
+        this.timeframeSelection = false;
+        this._calendar.currentView = this.selectedTimeframe;
+        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
+        this.setPeriodLabels(chosenTimeframeOption);
+        this.datePickerService.format.next(chosenTimeframeOption.format);
+        this.datePickerService.setTimeframe(chosenTimeframeOption.format);
+        if (this.selectedTimeframe == null) {
+            this.selectedQuarter = moment$7(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$7(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$7(unadaptedDate));
+        this.datePickerService.calendarInstance.close();
+    }
+    pagingClicked(forward) {
+        this.pagingSetup[this.selectedTimeframe] && this.pagingSetup[this.selectedTimeframe](forward);
+    }
+    pagingDateChange(actionCall, amount, forward) {
+        this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
+        const chosenTimeframeOption = this.timeframeOptions.filter(option => option.value === this.selectedTimeframe)[0];
+        this.setPeriodLabels(chosenTimeframeOption);
+    }
+}
+DrDatePickerCustomHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-date-picker_custom-header.component',
+                template: "<div class=\"dr-datepicker__timeframe-select__wrapper\">\r\n    <dr-select \r\n        class=\"dr-datepicker__timeframe-select\"\r\n        [(ngModel)]=\"selectedTimeframe\"\r\n        [items]=\"timeframeOptions\"\r\n        bindLabel=\"title\"\r\n        bindValue=\"value\"\r\n        (ngModelChange)=\"setTimeframe()\">\r\n    </dr-select>\r\n</div>\r\n\r\n<div class=\"dr-date-paging\">\r\n    <div class=\"dr-date-paging flip-page-button\"\r\n        (click)=\"pagingClicked(false)\">\r\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>    \r\n    </div>\r\n    <span class=\"example-header-label\">\r\n        <span (click)=\"switchViewOnClickOnPeriodLabel('year')\">{{periodMonthLabel + ' '}}</span> \r\n        <span (click)=\"switchViewOnClickOnPeriodLabel('multi-year')\">{{periodYearLabel}}</span>\r\n    </span>\r\n    <div class=\"dr-date-paging flip-page-button\"\r\n        (click)=\"pagingClicked(true)\">\r\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\r\n    </div>\r\n</div>\r\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuater\">\r\n    <div *ngFor=\"let quarter of quarters\" \r\n        class=\"quarter-selector\" (click)=\"onSelectQuater(quarter)\"\r\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\r\n        >Q{{quarter}}</div>\r\n</div>\r\n\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-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}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
+            },] }
+];
+DrDatePickerCustomHeaderComponent.ctorParameters = () => [
+    { type: MatCalendar },
+    { type: DateAdapter },
+    { type: CustomDateFormat, decorators: [{ type: Inject, args: [MAT_DATE_FORMATS,] }] },
+    { type: ChangeDetectorRef },
+    { type: DrDatePickerService }
+];
+
 const noop = () => { };
 const ɵ0$1 = noop;
 class DrDatePickerComponent {
-    constructor(cdr) {
+    constructor(cdr, _dateAdapter, datePickerService) {
         this.cdr = cdr;
+        this._dateAdapter = _dateAdapter;
+        this.datePickerService = datePickerService;
+        this._destroyed = new Subject();
         this.readonly = true;
-        this._lastView = 'month';
         this._format = MAT_DEFAULT_DATE_FORMAT;
+        this.customHeader = DrDatePickerCustomHeaderComponent;
+        this.onChangeFormat = new EventEmitter();
+        this.timeframeSelection = 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;
-    }
-    set lastView(view) {
-        switch (view) {
-            case 'year':
-                this._lastView = 'multi-year';
-                this._format = YEAR_FORMAT;
-                break;
-            case 'month':
-                this._lastView = 'year';
-                this._format = MONTH_YEAR_FORMAT;
-                break;
-            default:
-                this._lastView = 'month';
-                this._format = MAT_DEFAULT_DATE_FORMAT;
-        }
-        this.cdr.markForCheck();
+        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.writeValue(value);
+        });
     }
     set format(value) {
         if (value) {
-            if (value.includes('d')) {
-                value = value.replace(/d/g, 'D');
-            }
-            else if (value.includes('D')) {
-                value = value.replace(/D/g, 'd');
-            }
+            value = this.normalizeValue(value);
             this._format = value;
+            this.datePickerService.format.next(value);
+            this.datePickerService.setTimeframe(value);
             this.cdr.markForCheck();
         }
     }
     ngAfterViewInit() {
-        if (this._lastView === 'month') {
+        this.datePickerService.calendarInstance = this.dp;
+        if (this._format === MAT_DEFAULT_DATE_FORMAT) {
             return;
         }
-        const lastView = this._lastView;
         setTimeout(() => {
             const popupInstance = this.dp._popupComponentRef.instance;
             const calenderInstance = popupInstance._calendar._calendarHeaderPortal._attachedHost._attachedRef.instance;
             calenderInstance.currentPeriodClicked = function () {
-                if (lastView === 'multi-year') {
-                    this.calendar.currentView = 'multi-year';
-                }
-                else if (lastView === 'year') {
-                    this.calendar.currentView = this.calendar.currentView == 'year' ? 'multi-year' : 'year';
-                }
+                this.calendarViewSetup[this.datePickerService.timeframe] && this.calendarViewSetup[this.datePickerService.timeframe](this.calendar);
             };
         }, 1000);
     }
@@ -1991,46 +2160,82 @@ class DrDatePickerComponent {
     writeValue(value) {
         if (value !== this.innerValue) {
             if (value && typeof value === 'number') {
-                this.innerValue = momentImported.unix(value);
+                this.innerValue = moment$7.unix(value);
             }
             else {
                 this.innerValue = value;
             }
+            if (this.timeframeSelection) {
+                moment$7(value).endOf(this.datePickerService.timeframe);
+            }
             this.cdr.markForCheck();
         }
     }
+    get quarterDisplay() {
+        return this.datePickerService.getQuarterDisplay(this.value, this._format);
+    }
+    normalizeValue(value) {
+        if (value.includes('d')) {
+            value = value.replace(/d/g, 'D');
+        }
+        else if (value.includes('D')) {
+            value = value.replace(/D/g, 'd');
+        }
+        return value;
+    }
     chosenMonthHandler(normalizedMonth, datepicker) {
-        if (this._lastView === 'year') {
+        if (this.datePickerService.timeframe == 'month') {
             this.writeValue(normalizedMonth);
             this.onChangeCallback(normalizedMonth);
             datepicker.close();
         }
     }
     chosenYearHandler(normalizedYear, datepicker) {
-        if (this._lastView === 'multi-year') {
+        if (this.datePickerService.timeframe == 'year') {
             this.writeValue(normalizedYear);
             this.onChangeCallback(normalizedYear);
             datepicker.close();
         }
+        else if (['quarter', 'day'].includes(this.datePickerService.timeframe)) {
+            this.writeValue(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._destroyed.next();
+        this._destroyed.complete();
     }
 }
 DrDatePickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker',
-                template: "<i class=\"dr-icon-schedule\"></i>\r\n<input [(ngModel)]=\"value\"\r\n       (click)=\"datePicker.open()\"\r\n       [matDatepicker]=\"datePicker\"\r\n       [placeholder]=\"placeholder\"\r\n       [drDatePickerFormat]=\"_format\"\r\n       [readonly]=\"readonly\"\r\n       [min]=\"min\"\r\n       [max]=\"max\"\r\n/>\r\n <mat-datepicker #datePicker\r\n                 startView=\"{{_lastView}}\"\r\n                 (yearSelected)=\"chosenYearHandler($event, datePicker)\"\r\n                 (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\r\n </mat-datepicker>\r\n\r\n",
+                template: "<div class=\"dr-datepicker__with-timeframe-selection\"\r\n    *ngIf=\"timeframeSelection;else noTimeframeSelection\">\r\n    <div class=\"dr-input-date-paging__flip-page-button\"\r\n        (click)=\"pagingClicked(false)\"\r\n    >\r\n        <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>    \r\n    </div>\r\n        <div class=\"dr-input-date-paging__quarter-display\"\r\n            *ngIf=\"_format.includes('Q')\"\r\n            (click)=\"datePicker.open()\"\r\n        >{{quarterDisplay}}</div>\r\n            <input [(ngModel)]=\"value\"\r\n                (click)=\"datePicker.open()\"\r\n                [matDatepicker]=\"datePicker\"\r\n                [placeholder]=\"placeholder\"\r\n                [drDatePickerFormat]=\"_format\"\r\n                [readonly]=\"readonly\"\r\n                [class]=\"_format.includes('Q') ? 'when-quarter' : ''\"\r\n                [min]=\"min\"\r\n                [max]=\"max\"/>\r\n    <div class=\"dr-input-date-paging__flip-page-button\"\r\n        (click)=\"pagingClicked(true)\">\r\n        <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\r\n    </div>\r\n    <mat-datepicker #datePicker\r\n        class=\"dr-timeframe-datepicker\"\r\n        [calendarHeaderComponent]=\"customHeader\"\r\n        (yearSelected)=\"chosenYearHandler($event, datePicker)\"\r\n        (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\r\n    </mat-datepicker>\r\n</div>\r\n\r\n<ng-template class=\"dr-datepicker__no-timeframe-selection\"\r\n    #noTimeframeSelection>\r\n    <i class=\"dr-icon-schedule\"></i>\r\n    <input [(ngModel)]=\"value\"\r\n        (click)=\"datePicker.open()\"\r\n        [matDatepicker]=\"datePicker\"\r\n        [placeholder]=\"placeholder\"\r\n        [drDatePickerFormat]=\"_format\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"/>\r\n    <mat-datepicker #datePicker\r\n        (yearSelected)=\"chosenYearHandler($event, datePicker)\"\r\n        (monthSelected)=\"chosenMonthHandler($event, datePicker)\">\r\n    </mat-datepicker>\r\n</ng-template>\r\n\r\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:#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:#999 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}: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:#F3F7FF}::ng-deep .mat-calendar-body-selected{background-color:#579bf2}::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)}\n"]
+                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}: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"]
             },] }
 ];
 DrDatePickerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: DateAdapter },
+    { type: DrDatePickerService }
 ];
 DrDatePickerComponent.propDecorators = {
-    lastView: [{ type: Input }],
+    _format: [{ type: Input }],
+    onChangeFormat: [{ type: Output }],
     format: [{ type: Input }],
+    timeframeSelection: [{ type: Input }],
     placeholder: [{ type: Input }],
     min: [{ type: Input }],
     max: [{ type: Input }],
@@ -2472,7 +2677,7 @@ DrDropdownComponent.decorators = [
                 selector: 'dr-dropdown',
                 template: "<div #menuContainer\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     #dropdownPosition=\"dropdownPosition\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::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:#f6f7f8}.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 .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(45%)}.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: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible}::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:#f6f7f8}.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 .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(45%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
             },] }
 ];
 DrDropdownComponent.ctorParameters = () => [
@@ -3092,7 +3297,8 @@ const components$1 = [
     DrToggleComponent,
     DrToggleButtonComponent,
     DrDatePickerComponent,
-    DrDatePickerFormatDirective
+    DrDatePickerFormatDirective,
+    DrDatePickerCustomHeaderComponent
 ];
 class DrInputsModule {
 }
@@ -3105,7 +3311,10 @@ DrInputsModule.decorators = [
                     ReactiveFormsModule,
                     CommonModule,
                     NgSelectModule,
-                    MatDatepickerModule,
+                    MatDatepickerModule
+                ],
+                providers: [
+                    DrDatePickerService
                 ]
             },] }
 ];
@@ -3254,5 +3463,5 @@ DrAccordionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-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, 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, CustomDateFormat as ɵc };
+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, 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