@datarailsshared/datarailsshared 1.3.39 → 1.3.42

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material-moment-adapter'), require('moment'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/button-toggle'), require('@ng-select/ng-select'), require('@angular/material/tooltip'), require('@angular/material/tabs')) :
     typeof define === 'function' && define.amd ? define('@datarailsshared/datarailsshared', ['exports', '@angular/core', '@angular/forms', '@angular/material/core', '@angular/material-moment-adapter', 'moment', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/button-toggle', '@ng-select/ng-select', '@angular/material/tooltip', '@angular/material/tabs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.momentImported, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs));
-}(this, (function (exports, i0, forms, core, materialMomentAdapter, momentImported, common, rxjs, operators, animations, i1, portal, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.datarailsshared = global.datarailsshared || {}, global.datarailsshared.datarailsshared = {}), global.ng.core, global.ng.forms, global.ng.material.core, global.ng.materialMomentAdapter, global.moment$7, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.buttonToggle, global.ngSelect, global.ng.material.tooltip, global.ng.material.tabs));
+}(this, (function (exports, i0, forms, core, materialMomentAdapter, moment$7, common, rxjs, operators, animations, i1, portal, datepicker, formField, input, select, buttonToggle, ngSelect, tooltip, tabs) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,7 +25,7 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var momentImported__namespace = /*#__PURE__*/_interopNamespace(momentImported);
+    var moment__namespace = /*#__PURE__*/_interopNamespace(moment$7);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     // import {*} from ""
@@ -1041,7 +1041,7 @@
         tagChange: [{ type: i0.Output }]
     };
 
-    var moment$1 = momentImported__namespace;
+    var moment$1 = moment__namespace;
     var ListTagComponent = /** @class */ (function () {
         function ListTagComponent() {
             this.defaultValue = "";
@@ -1631,7 +1631,7 @@
     DrInputComponent.decorators = [
         { type: i0.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: forms.NG_VALUE_ACCESSOR,
                             useExisting: i0.forwardRef(function () { return DrInputComponent; }),
@@ -1656,6 +1656,8 @@
         clearable: [{ type: i0.Input }],
         min: [{ type: i0.Input }],
         max: [{ type: i0.Input }],
+        minLength: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
         step: [{ type: i0.Input }],
         blur: [{ type: i0.Output }],
         elementClass: [{ type: i0.HostBinding, args: ['class',] }],
@@ -1679,6 +1681,7 @@
             this.items = [];
             this.appendTo = 'body';
             this.disabled = false;
+            this.optionWithDescription = false;
             this.keyDownFn = function () { return true; };
             this.change = new i0.EventEmitter();
             this.onChange = function () { };
@@ -1731,13 +1734,13 @@
     DrSelectComponent.decorators = [
         { type: i0.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: forms.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 = function () { return [
@@ -1759,6 +1762,7 @@
         loading: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        optionWithDescription: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
         keyDownFn: [{ type: i0.Input }],
         selectedItem: [{ type: i0.Input }],
@@ -2378,6 +2382,7 @@
     var DATE_INPUT_FORMAT = 'YYYY/MM/DD';
     var YEAR_FORMAT = 'yyyy';
     var MONTH_YEAR_FORMAT = 'MM/yyyy';
+    var QUARTER_FORMAT = 'Q/yyyy';
     var CustomDateFormat = /** @class */ (function () {
         function CustomDateFormat() {
             this._parse = {
@@ -2387,7 +2392,9 @@
                 dateInput: DATE_INPUT_FORMAT,
                 monthYearLabel: 'MMM YYYY',
                 dateA11yLabel: 'LL',
-                monthYearA11yLabel: 'MMM YYYY'
+                monthYearA11yLabel: 'MMM YYYY',
+                quarterYearLabel: 'Q/YYYY',
+                yearLabel: 'YYYY'
             };
         }
         Object.defineProperty(CustomDateFormat.prototype, "parse", {
@@ -2420,51 +2427,224 @@
         return CustomDateFormat;
     }());
 
+    var DrDatePickerService = /** @class */ (function () {
+        function DrDatePickerService() {
+            this.timeframe = 'day';
+            this.format = new rxjs.BehaviorSubject(MAT_DEFAULT_DATE_FORMAT);
+            this.updatedQuater = new rxjs.Subject();
+        }
+        DrDatePickerService.prototype.getQuarterDisplay = function (value, format) {
+            return 'Q' + moment__namespace(value).quarter() + format.charAt(1) + moment__namespace(value).year();
+        };
+        DrDatePickerService.prototype.setTimeframe = function (format) {
+            var lowerCaseFormat = format.toLowerCase();
+            switch (true) {
+                case lowerCaseFormat.includes('q'):
+                    this.timeframe = 'quarter';
+                    break;
+                case lowerCaseFormat.includes('d'):
+                    this.timeframe = 'day';
+                    break;
+                case lowerCaseFormat.includes('m'):
+                    this.timeframe = 'month';
+                    break;
+                case lowerCaseFormat.includes('y'):
+                    this.timeframe = 'year';
+                    break;
+                default:
+                    this.timeframe = 'day';
+            }
+        };
+        return DrDatePickerService;
+    }());
+    DrDatePickerService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DrDatePickerService_Factory() { return new DrDatePickerService(); }, token: DrDatePickerService, providedIn: "root" });
+    DrDatePickerService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+
+    var DrDatePickerCustomHeaderComponent = /** @class */ (function () {
+        function DrDatePickerCustomHeaderComponent(_calendar, _dateAdapter, _dateFormats, cdr, datePickerService) {
+            var _this = this;
+            this._calendar = _calendar;
+            this._dateAdapter = _dateAdapter;
+            this._dateFormats = _dateFormats;
+            this.cdr = cdr;
+            this.datePickerService = datePickerService;
+            this._destroyed = new rxjs.Subject();
+            this.quarters = [1, 2, 3, 4];
+            this.selectedQuarter = 1;
+            this.timeframeOptions = [{
+                    title: 'Day',
+                    value: 'month',
+                    format: MAT_DEFAULT_DATE_FORMAT,
+                    periodLabel: function () { return _this._dateAdapter
+                        .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
+                        .toLocaleUpperCase(); }
+                }, {
+                    title: 'Month',
+                    value: 'year',
+                    format: MONTH_YEAR_FORMAT,
+                    periodLabel: function () { return String(moment__namespace(_this._calendar.activeDate).year()); }
+                }, {
+                    title: 'Quarter',
+                    value: 'none',
+                    format: QUARTER_FORMAT,
+                    periodLabel: function () { return String(moment__namespace(_this._calendar.activeDate).year()); }
+                }, {
+                    title: 'Year',
+                    value: 'multi-year',
+                    format: YEAR_FORMAT,
+                    periodLabel: function () {
+                        var currentYear = moment__namespace(_this._calendar.activeDate).year();
+                        var startPeriod = Math.floor(currentYear / 24) * 24;
+                        return startPeriod + '-' + (startPeriod + 23);
+                    }
+                }];
+            this.pagingSetup = {
+                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                'none': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                'multi-year': function (forward) { return _this.pagingDateChange('addCalendarYears', 24, forward); }
+            };
+            this.selectedTimeframe = 'month';
+            this.timeframeSelection = false;
+            this.periodMonthLabel = '';
+            this.periodYearLabel = '';
+            _calendar.stateChanges
+                .pipe(operators.takeUntil(this._destroyed))
+                .subscribe(function () { return cdr.markForCheck(); });
+            this.datePickerService.format
+                .pipe(operators.take(1))
+                .subscribe(function (value) {
+                _this.selectedTimeframe = _this.timeframeOptions.filter(function (option) { return option.format == value; })[0].value;
+            });
+        }
+        DrDatePickerCustomHeaderComponent.prototype.ngOnDestroy = function () {
+            this._destroyed.next();
+            this._destroyed.complete();
+        };
+        DrDatePickerCustomHeaderComponent.prototype.setPeriodLabels = function (currentTimeframeOption) {
+            var fullPeriodLabel = currentTimeframeOption.periodLabel();
+            if (this.selectedTimeframe === 'month') {
+                this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
+                this.periodYearLabel = fullPeriodLabel.slice(4);
+            }
+            else {
+                this.periodMonthLabel = '';
+                this.periodYearLabel = fullPeriodLabel;
+            }
+        };
+        DrDatePickerCustomHeaderComponent.prototype.setTimeframe = function () {
+            var _this = this;
+            this.timeframeSelection = false;
+            this._calendar.currentView = this.selectedTimeframe;
+            var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
+            this.setPeriodLabels(chosenTimeframeOption);
+            this.datePickerService.format.next(chosenTimeframeOption.format);
+            this.datePickerService.setTimeframe(chosenTimeframeOption.format);
+            if (this.selectedTimeframe == null) {
+                this.selectedQuarter = moment__namespace(this._calendar.activeDate).quarter();
+            }
+        };
+        Object.defineProperty(DrDatePickerCustomHeaderComponent.prototype, "currentViewIsQuater", {
+            get: function () {
+                return !['month', 'year', 'multi-year'].includes(this._calendar.currentView);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrDatePickerCustomHeaderComponent.prototype.switchViewOnClickOnPeriodLabel = function (view) {
+            this._calendar.currentView = view;
+        };
+        DrDatePickerCustomHeaderComponent.prototype.onSelectQuater = function (quarterNumber) {
+            var monthsInQuarter = 3;
+            this.selectedQuarter = moment__namespace(this._calendar.activeDate).quarter();
+            var unadaptedDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, monthsInQuarter * (quarterNumber - this.selectedQuarter));
+            this._calendar.activeDate = unadaptedDate;
+            this.datePickerService.updatedQuater.next(moment__namespace(unadaptedDate));
+            this.datePickerService.calendarInstance.close();
+        };
+        DrDatePickerCustomHeaderComponent.prototype.pagingClicked = function (forward) {
+            this.pagingSetup[this.selectedTimeframe] && this.pagingSetup[this.selectedTimeframe](forward);
+        };
+        DrDatePickerCustomHeaderComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
+            var _this = this;
+            this._calendar.activeDate = this._dateAdapter[actionCall](this._calendar.activeDate, forward ? amount : -amount);
+            var chosenTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this.selectedTimeframe; })[0];
+            this.setPeriodLabels(chosenTimeframeOption);
+        };
+        return DrDatePickerCustomHeaderComponent;
+    }());
+    DrDatePickerCustomHeaderComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.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 = function () { return [
+        { type: datepicker.MatCalendar },
+        { type: core.DateAdapter },
+        { type: CustomDateFormat, decorators: [{ type: i0.Inject, args: [core.MAT_DATE_FORMATS,] }] },
+        { type: i0.ChangeDetectorRef },
+        { type: DrDatePickerService }
+    ]; };
+
     var noop = function () { };
     var ɵ0$1 = noop;
     var DrDatePickerComponent = /** @class */ (function () {
-        function DrDatePickerComponent(cdr) {
+        function DrDatePickerComponent(cdr, _dateAdapter, datePickerService) {
+            var _this = this;
             this.cdr = cdr;
+            this._dateAdapter = _dateAdapter;
+            this.datePickerService = datePickerService;
+            this._destroyed = new rxjs.Subject();
             this.readonly = true;
-            this._lastView = 'month';
             this._format = MAT_DEFAULT_DATE_FORMAT;
+            this.customHeader = DrDatePickerCustomHeaderComponent;
+            this.onChangeFormat = new i0.EventEmitter();
+            this.timeframeSelection = false;
             this.placeholder = 'Select';
             this.min = null;
             this.max = null;
+            this.calendarViewSetup = {
+                'year': function (calendar) { return calendar.currentView = 'multi-year'; },
+                'month': function (calendar) { return calendar.currentView = 'year'; },
+                'quarter': function (calendar) { return calendar.currentView = 'none'; },
+                'day': function (calendar) { return calendar.currentView = 'month'; }
+            };
+            this.pagingSetup = {
+                'year': function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                'quarter': function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
+                'month': function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                'day': function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); }
+            };
             this.innerValue = null;
             this.onTouchedCallback = noop;
             this.onChangeCallback = noop;
+            datePickerService.format
+                .pipe(operators.takeUntil(this._destroyed))
+                .subscribe(function (value) {
+                _this._format = value;
+                _this.onChangeFormat.emit(_this.normalizeValue(value));
+                cdr.markForCheck();
+            });
+            datePickerService.updatedQuater
+                .pipe(operators.takeUntil(this._destroyed))
+                .subscribe(function (value) {
+                _this.writeValue(value);
+            });
         }
-        Object.defineProperty(DrDatePickerComponent.prototype, "lastView", {
-            set: function (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();
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(DrDatePickerComponent.prototype, "format", {
             set: function (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();
                 }
             },
@@ -2473,20 +2653,15 @@
         });
         DrDatePickerComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            if (this._lastView === 'month') {
+            this.datePickerService.calendarInstance = this.dp;
+            if (this._format === MAT_DEFAULT_DATE_FORMAT) {
                 return;
             }
-            var lastView = this._lastView;
             setTimeout(function () {
                 var popupInstance = _this.dp._popupComponentRef.instance;
                 var 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);
         };
@@ -2513,47 +2688,87 @@
         DrDatePickerComponent.prototype.writeValue = function (value) {
             if (value !== this.innerValue) {
                 if (value && typeof value === 'number') {
-                    this.innerValue = momentImported__namespace.unix(value);
+                    this.innerValue = moment__namespace.unix(value);
                 }
                 else {
                     this.innerValue = value;
                 }
+                if (this.timeframeSelection) {
+                    moment__namespace(value).endOf(this.datePickerService.timeframe);
+                }
                 this.cdr.markForCheck();
             }
         };
+        Object.defineProperty(DrDatePickerComponent.prototype, "quarterDisplay", {
+            get: function () {
+                return this.datePickerService.getQuarterDisplay(this.value, this._format);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrDatePickerComponent.prototype.normalizeValue = function (value) {
+            if (value.includes('d')) {
+                value = value.replace(/d/g, 'D');
+            }
+            else if (value.includes('D')) {
+                value = value.replace(/D/g, 'd');
+            }
+            return value;
+        };
         DrDatePickerComponent.prototype.chosenMonthHandler = function (normalizedMonth, datepicker) {
-            if (this._lastView === 'year') {
+            if (this.datePickerService.timeframe == 'month') {
                 this.writeValue(normalizedMonth);
                 this.onChangeCallback(normalizedMonth);
                 datepicker.close();
             }
         };
         DrDatePickerComponent.prototype.chosenYearHandler = function (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();
+            }
+        };
+        DrDatePickerComponent.prototype.pagingClicked = function (forward) {
+            this.pagingSetup[this.datePickerService.timeframe] && this.pagingSetup[this.datePickerService.timeframe](forward);
+            this.datePickerService.calendarInstance.close();
+        };
+        DrDatePickerComponent.prototype.pagingDateChange = function (actionCall, amount, forward) {
+            var newValue = this._dateAdapter[actionCall](this.innerValue, forward ? amount : -amount);
+            this.writeValue(newValue);
+            this.onChangeCallback(newValue);
+        };
+        DrDatePickerComponent.prototype.ngOnDestroy = function () {
+            this._destroyed.next();
+            this._destroyed.complete();
         };
         return DrDatePickerComponent;
     }());
     DrDatePickerComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrDatePickerComponent, multi: true }
                     ],
-                    styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background:#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 = function () { return [
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: core.DateAdapter },
+        { type: DrDatePickerService }
     ]; };
     DrDatePickerComponent.propDecorators = {
-        lastView: [{ type: i0.Input }],
+        _format: [{ type: i0.Input }],
+        onChangeFormat: [{ type: i0.Output }],
         format: [{ type: i0.Input }],
+        timeframeSelection: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         min: [{ type: i0.Input }],
         max: [{ type: i0.Input }],
@@ -3182,12 +3397,16 @@
             }
             else {
                 var defaultChildPadding = 3;
-                var widthMoreWindowRight = window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
-                var widthMoreWindowBottom = window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
+                var widthMoreWindowRight = window.innerWidth - (this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding);
+                var widthMoreWindowBottom = window.innerHeight - (this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding);
+                var spaceRightAmount = window.innerWidth - (this.position.clientX + this.el.nativeElement.offsetWidth + defaultPadding);
                 this.widthMoreRight = !(widthMoreWindowRight < 0);
                 var calculatedHorizantallyPos = widthMoreWindowRight < 0
                     ? -this.position.x + -defaultChildPadding
                     : this.position.x + defaultChildPadding + xDifference;
+                if (spaceRightAmount <= 0) {
+                    calculatedHorizantallyPos -= this.el.nativeElement.offsetWidth;
+                }
                 var 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');
@@ -3678,7 +3897,8 @@
         DrToggleComponent,
         DrToggleButtonComponent,
         DrDatePickerComponent,
-        DrDatePickerFormatDirective
+        DrDatePickerFormatDirective,
+        DrDatePickerCustomHeaderComponent
     ];
     var DrInputsModule = /** @class */ (function () {
         function DrInputsModule() {
@@ -3694,7 +3914,10 @@
                         forms.ReactiveFormsModule,
                         common.CommonModule,
                         ngSelect.NgSelectModule,
-                        datepicker.MatDatepickerModule,
+                        datepicker.MatDatepickerModule
+                    ],
+                    providers: [
+                        DrDatePickerService
                     ]
                 },] }
     ];
@@ -3919,7 +4142,9 @@
     exports.YearTagComponent = YearTagComponent;
     exports.ɵa = components$2;
     exports.ɵb = POPUP_ANIMATION;
-    exports.ɵc = CustomDateFormat;
+    exports.ɵc = DrDatePickerService;
+    exports.ɵd = CustomDateFormat;
+    exports.ɵe = DrDatePickerCustomHeaderComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });