@datarailsshared/datarailsshared 1.4.54 → 1.4.55

package/esm2015/lib/utils/dr-shared-utils.js

@@ -15,6 +15,8 @@ export class DrSharedUtils {
                 return TimeframeOption.QUARTER;
             case lowerCaseFormat.includes('d'):
                 return TimeframeOption.DAY;
+            case lowerCaseFormat.includes('w'):
+                return TimeframeOption.WEEK;
             case lowerCaseFormat.includes('m'):
                 return TimeframeOption.MONTH;
             case lowerCaseFormat.includes('y'):
@@ -24,4 +26,4 @@ export class DrSharedUtils {
         }
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItc2hhcmVkLXV0aWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGF0YXJhaWxzc2hhcmVkL3NyYy9saWIvdXRpbHMvZHItc2hhcmVkLXV0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUV2RCxNQUFNLE9BQU8sYUFBYTtJQUN4Qjs7O09BR0c7SUFDSSxNQUFNLENBQUMsd0JBQXdCLENBQUMsTUFBYztRQUNuRCxNQUFNLFlBQVksR0FBRyxlQUFlLENBQUMsR0FBRyxDQUFDO1FBRXpDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDWCxPQUFPLFlBQVksQ0FBQztTQUNyQjtRQUVELE1BQU0sZUFBZSxHQUFHLE1BQU0sQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUM3QyxRQUFRLElBQUksRUFBRTtZQUNaLEtBQUssZUFBZSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUM7Z0JBQ2hDLE9BQU8sZUFBZSxDQUFDLE9BQU8sQ0FBQztZQUNqQyxLQUFLLGVBQWUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDO2dCQUNoQyxPQUFPLGVBQWUsQ0FBQyxHQUFHLENBQUM7WUFDN0IsS0FBSyxlQUFlLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQztnQkFDaEMsT0FBTyxlQUFlLENBQUMsS0FBSyxDQUFDO1lBQy9CLEtBQUssZUFBZSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUM7Z0JBQ2hDLE9BQU8sZUFBZSxDQUFDLElBQUksQ0FBQztZQUM5QjtnQkFDRSxPQUFPLFlBQVksQ0FBQztTQUN2QjtJQUNILENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRpbWVmcmFtZU9wdGlvbiB9IGZyb20gJy4uL21vZGVscy9kYXRlUGlja2VyJztcblxuZXhwb3J0IGNsYXNzIERyU2hhcmVkVXRpbHMge1xuICAvKipcbiAgICogR2V0IHRpbWVmcmFtZSAoZGF5LCB5ZWFyLCBtb250aCwgcXVhcnRlcikgYmFzZWQgb24gcGFzc2VkIGZvcm1hdFxuICAgKiBAcGFyYW0gZm9ybWF0IC0gZGF0ZSBmb3JtYXQgc3RyaW5nLiBFeGFtcGxlczogTU0vREQvWVlZWSwgUS9ZWVlZXG4gICAqL1xuICBwdWJsaWMgc3RhdGljIGdldFRpbWVmcmFtZUJ5RGF0ZUZvcm1hdChmb3JtYXQ6IHN0cmluZyk6IFRpbWVmcmFtZU9wdGlvbiB7XG4gICAgY29uc3QgZGVmYXVsdEZyYW1lID0gVGltZWZyYW1lT3B0aW9uLkRBWTtcblxuICAgIGlmICghZm9ybWF0KSB7XG4gICAgICByZXR1cm4gZGVmYXVsdEZyYW1lO1xuICAgIH1cblxuICAgIGNvbnN0IGxvd2VyQ2FzZUZvcm1hdCA9IGZvcm1hdC50b0xvd2VyQ2FzZSgpO1xuICAgIHN3aXRjaCAodHJ1ZSkge1xuICAgICAgY2FzZSBsb3dlckNhc2VGb3JtYXQuaW5jbHVkZXMoJ3EnKTpcbiAgICAgICAgcmV0dXJuIFRpbWVmcmFtZU9wdGlvbi5RVUFSVEVSO1xuICAgICAgY2FzZSBsb3dlckNhc2VGb3JtYXQuaW5jbHVkZXMoJ2QnKTpcbiAgICAgICAgcmV0dXJuIFRpbWVmcmFtZU9wdGlvbi5EQVk7XG4gICAgICBjYXNlIGxvd2VyQ2FzZUZvcm1hdC5pbmNsdWRlcygnbScpOlxuICAgICAgICByZXR1cm4gVGltZWZyYW1lT3B0aW9uLk1PTlRIO1xuICAgICAgY2FzZSBsb3dlckNhc2VGb3JtYXQuaW5jbHVkZXMoJ3knKTpcbiAgICAgICAgcmV0dXJuIFRpbWVmcmFtZU9wdGlvbi5ZRUFSO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIGRlZmF1bHRGcmFtZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItc2hhcmVkLXV0aWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGF0YXJhaWxzc2hhcmVkL3NyYy9saWIvdXRpbHMvZHItc2hhcmVkLXV0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUV2RCxNQUFNLE9BQU8sYUFBYTtJQUN4Qjs7O09BR0c7SUFDSSxNQUFNLENBQUMsd0JBQXdCLENBQUMsTUFBYztRQUNuRCxNQUFNLFlBQVksR0FBRyxlQUFlLENBQUMsR0FBRyxDQUFDO1FBRXpDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDWCxPQUFPLFlBQVksQ0FBQztTQUNyQjtRQUVELE1BQU0sZUFBZSxHQUFHLE1BQU0sQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUM3QyxRQUFRLElBQUksRUFBRTtZQUNaLEtBQUssZUFBZSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUM7Z0JBQ2hDLE9BQU8sZUFBZSxDQUFDLE9BQU8sQ0FBQztZQUNqQyxLQUFLLGVBQWUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDO2dCQUNoQyxPQUFPLGVBQWUsQ0FBQyxHQUFHLENBQUM7WUFDN0IsS0FBSyxlQUFlLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQztnQkFDaEMsT0FBTyxlQUFlLENBQUMsSUFBSSxDQUFDO1lBQzlCLEtBQUssZUFBZSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUM7Z0JBQ2hDLE9BQU8sZUFBZSxDQUFDLEtBQUssQ0FBQztZQUMvQixLQUFLLGVBQWUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDO2dCQUNoQyxPQUFPLGVBQWUsQ0FBQyxJQUFJLENBQUM7WUFDOUI7Z0JBQ0UsT0FBTyxZQUFZLENBQUM7U0FDdkI7SUFDSCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUaW1lZnJhbWVPcHRpb24gfSBmcm9tICcuLi9tb2RlbHMvZGF0ZVBpY2tlcic7XG5cbmV4cG9ydCBjbGFzcyBEclNoYXJlZFV0aWxzIHtcbiAgLyoqXG4gICAqIEdldCB0aW1lZnJhbWUgKGRheSwgeWVhciwgbW9udGgsIHF1YXJ0ZXIpIGJhc2VkIG9uIHBhc3NlZCBmb3JtYXRcbiAgICogQHBhcmFtIGZvcm1hdCAtIGRhdGUgZm9ybWF0IHN0cmluZy4gRXhhbXBsZXM6IE1NL0REL1lZWVksIFEvWVlZWVxuICAgKi9cbiAgcHVibGljIHN0YXRpYyBnZXRUaW1lZnJhbWVCeURhdGVGb3JtYXQoZm9ybWF0OiBzdHJpbmcpOiBUaW1lZnJhbWVPcHRpb24ge1xuICAgIGNvbnN0IGRlZmF1bHRGcmFtZSA9IFRpbWVmcmFtZU9wdGlvbi5EQVk7XG5cbiAgICBpZiAoIWZvcm1hdCkge1xuICAgICAgcmV0dXJuIGRlZmF1bHRGcmFtZTtcbiAgICB9XG5cbiAgICBjb25zdCBsb3dlckNhc2VGb3JtYXQgPSBmb3JtYXQudG9Mb3dlckNhc2UoKTtcbiAgICBzd2l0Y2ggKHRydWUpIHtcbiAgICAgIGNhc2UgbG93ZXJDYXNlRm9ybWF0LmluY2x1ZGVzKCdxJyk6XG4gICAgICAgIHJldHVybiBUaW1lZnJhbWVPcHRpb24uUVVBUlRFUjtcbiAgICAgIGNhc2UgbG93ZXJDYXNlRm9ybWF0LmluY2x1ZGVzKCdkJyk6XG4gICAgICAgIHJldHVybiBUaW1lZnJhbWVPcHRpb24uREFZO1xuICAgICAgY2FzZSBsb3dlckNhc2VGb3JtYXQuaW5jbHVkZXMoJ3cnKTpcbiAgICAgICAgcmV0dXJuIFRpbWVmcmFtZU9wdGlvbi5XRUVLO1xuICAgICAgY2FzZSBsb3dlckNhc2VGb3JtYXQuaW5jbHVkZXMoJ20nKTpcbiAgICAgICAgcmV0dXJuIFRpbWVmcmFtZU9wdGlvbi5NT05USDtcbiAgICAgIGNhc2UgbG93ZXJDYXNlRm9ybWF0LmluY2x1ZGVzKCd5Jyk6XG4gICAgICAgIHJldHVybiBUaW1lZnJhbWVPcHRpb24uWUVBUjtcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiBkZWZhdWx0RnJhbWU7XG4gICAgfVxuICB9XG59XG4iXX0=

package/fesm2015/datarailsshared-datarailsshared.js

@@ -2235,6 +2235,7 @@ class DrDropdownComponent {
         this.menuService = menuService;
         this.cdr = cdr;
         this.position = 'left';
+        this.wasHovered = false;
     }
     set options(data) {
         if (data) {
@@ -2256,6 +2257,9 @@ class DrDropdownComponent {
             this.cdr.markForCheck();
         }
     }
+    onMouseEnter() {
+        this.wasHovered = true;
+    }
     onMouseLeave() {
         if (this.drDropdownInHover)
             this.menuService.destroy();
@@ -2323,7 +2327,7 @@ class DrDropdownComponent {
 DrDropdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-dropdown',
-                template: "<div #menuContainer\n     (mouseleave)=\"onMouseLeave()\"\n     (clickOutside)=\"onClickedOutside()\"\n     [drDropdownPosition]=\"option\"\n     #dropdownPosition=\"dropdownPosition\"\n     [position]=\"position\"\n     [class]=\"containerClass\"\n     class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\">\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n             (click)=\"action(act)\"\n             [drTooltip]=\"tooltipToShow(act)\"\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n             class=\"dr-dropdown__container__item\"\n             [class.item-disabled]=\"disabled(act)\"\n             [class.item-selected]=\"selected(act)\"\n             [class.separate-line]=\"act.separateLine\">\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\n               [class]=\"actionIcon.icon\"\n               [class.showOnHover]=\"actionIcon.showOnHover\"\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n        </div>\n    </div>\n</div>\n",
+                template: "<div #menuContainer\n     (mouseleave)=\"onMouseLeave()\"\n     (mouseenter)=\"onMouseEnter()\"\n     (clickOutside)=\"onClickedOutside()\"\n     [drDropdownPosition]=\"option\"\n     #dropdownPosition=\"dropdownPosition\"\n     [position]=\"position\"\n     [class]=\"containerClass\"\n     class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\">\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n             (click)=\"action(act)\"\n             [drTooltip]=\"tooltipToShow(act)\"\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n             class=\"dr-dropdown__container__item\"\n             [class.item-disabled]=\"disabled(act)\"\n             [class.item-selected]=\"selected(act)\"\n             [class.separate-line]=\"act.separateLine\">\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\n               [class]=\"actionIcon.icon\"\n               [class.showOnHover]=\"actionIcon.showOnHover\"\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n        </div>\n    </div>\n</div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item.separate-line{border-top:1px solid #BCBCBC}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(15%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
             },] }
@@ -2346,6 +2350,7 @@ class DrDropdownDirective {
         this.el = el;
         this._document = _document;
         this.position = 'left';
+        this.mouseleaveTimeout = 200;
     }
     elementHover() {
         if (!this.drDropdownInHover)
@@ -2355,6 +2360,16 @@ class DrDropdownDirective {
     elementClick() {
         this.openDropdown();
     }
+    leaveDropdownTriggerElement() {
+        if (this.drDropdownInHover) {
+            setTimeout(_ => {
+                if (this.contentCmpRef && !this.contentCmpRef.instance.wasHovered) {
+                    this.contentCmpRef.destroy();
+                    this.contentCmpRef = null;
+                }
+            }, this.mouseleaveTimeout);
+        }
+    }
     documentClick(e) {
         this.closeDropdown(e);
     }
@@ -2377,12 +2392,16 @@ class DrDropdownDirective {
         }
     }
     closeDropdown(e) {
-        const menuItem = e.target.classList;
-        if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
+        if (!this.contentCmpRef) {
             return;
         }
-        const elems = this._document.querySelectorAll('dr-dropdown');
-        if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
+        const clickTarget = e.target;
+        const triggerElement = this.el.nativeElement;
+        const dropdownElement = this.contentCmpRef.location.nativeElement;
+        const isClickTriggerElement = triggerElement.contains(clickTarget) || triggerElement === clickTarget;
+        const isClickDropdownContents = dropdownElement.contains(clickTarget);
+        if (!isClickTriggerElement && !isClickDropdownContents) {
+            const elems = this._document.querySelectorAll('dr-dropdown');
             setTimeout(() => elems.forEach(item => item.remove()), 100);
         }
     }
@@ -2420,6 +2439,7 @@ DrDropdownDirective.propDecorators = {
     contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
     elementHover: [{ type: HostListener, args: ['mouseenter',] }],
     elementClick: [{ type: HostListener, args: ['click',] }],
+    leaveDropdownTriggerElement: [{ type: HostListener, args: ['mouseleave',] }],
     documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
 };
 
@@ -2906,6 +2926,7 @@ var DateFromats;
     DateFromats["YEAR_FORMAT"] = "yyyy";
     DateFromats["MONTH_YEAR_FORMAT"] = "MM/yyyy";
     DateFromats["QUARTER_FORMAT"] = "Q/yyyy";
+    DateFromats["WEEK_FORMAT"] = "W/yyyy";
 })(DateFromats || (DateFromats = {}));
 class CustomDateFormat {
     constructor() {
@@ -2953,6 +2974,7 @@ var TimeframeOption;
     TimeframeOption["DAY"] = "day";
     TimeframeOption["MONTH"] = "month";
     TimeframeOption["QUARTER"] = "quarter";
+    TimeframeOption["WEEK"] = "week";
     TimeframeOption["YEAR"] = "year";
 })(TimeframeOption || (TimeframeOption = {}));
 var CalendarView;
@@ -3050,6 +3072,8 @@ class DrSharedUtils {
                 return TimeframeOption.QUARTER;
             case lowerCaseFormat.includes('d'):
                 return TimeframeOption.DAY;
+            case lowerCaseFormat.includes('w'):
+                return TimeframeOption.WEEK;
             case lowerCaseFormat.includes('m'):
                 return TimeframeOption.MONTH;
             case lowerCaseFormat.includes('y'):
@@ -3066,15 +3090,31 @@ class DrDatePickerService {
         this.timeframe = TimeframeOption.DAY;
         this.format$ = new BehaviorSubject(DateFromats.MAT_DEFAULT_DATE_FORMAT);
         this.updatedQuarter$ = new Subject();
+        this.availableTimeframes = [
+            TimeframeOption.DAY,
+            TimeframeOption.WEEK,
+            TimeframeOption.MONTH,
+            TimeframeOption.QUARTER,
+            TimeframeOption.YEAR
+        ];
         this.formatConfig = {
             day: DateFromats.MAT_DEFAULT_DATE_FORMAT,
             month: DateFromats.MONTH_YEAR_FORMAT,
             year: DateFromats.YEAR_FORMAT,
             quarter: DateFromats.QUARTER_FORMAT,
+            week: DateFromats.WEEK_FORMAT
         };
     }
-    getQuarterDisplay(value) {
-        return 'Q' + value.quarter() + this.format$.getValue().charAt(1) + value.year();
+    getDisplayPrefix() {
+        const formatCached = this.format$.getValue();
+        switch (true) {
+            case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('Q'):
+                return 'Q';
+            case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('W'):
+                return 'W';
+            default:
+                return '';
+        }
     }
     getTimeframe(format) {
         return DrSharedUtils.getTimeframeByDateFormat(format);
@@ -3107,6 +3147,7 @@ class DrDatePickerCustomHeaderComponent {
         this.quarters = [1, 2, 3, 4];
         this.selectedQuarter = 1;
         this.timeframeOptions = [{
+                timeframe: TimeframeOption.DAY,
                 title: 'Day',
                 value: CalendarView.FOR_DAYS,
                 format: this.datePickerService.formatConfig.day,
@@ -3114,16 +3155,27 @@ class DrDatePickerCustomHeaderComponent {
                     .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
                     .toLocaleUpperCase()
             }, {
+                timeframe: TimeframeOption.WEEK,
+                title: 'Week',
+                value: CalendarView.FOR_DAYS,
+                format: this.datePickerService.formatConfig.week,
+                periodLabel: () => this._dateAdapter
+                    .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
+                    .toLocaleUpperCase()
+            }, {
+                timeframe: TimeframeOption.MONTH,
                 title: 'Month',
                 value: CalendarView.FOR_MONTHS,
                 format: this.datePickerService.formatConfig.month,
                 periodLabel: () => String(moment$1(this._calendar.activeDate).year())
             }, {
+                timeframe: TimeframeOption.QUARTER,
                 title: 'Quarter',
                 value: CalendarView.FOR_QUARTERS,
                 format: this.datePickerService.formatConfig.quarter,
                 periodLabel: () => String(moment$1(this._calendar.activeDate).year())
             }, {
+                timeframe: TimeframeOption.YEAR,
                 title: 'Year',
                 value: CalendarView.FOR_YEARS,
                 format: this.datePickerService.formatConfig.year,
@@ -3151,6 +3203,9 @@ class DrDatePickerCustomHeaderComponent {
             this.selectedTimeframe = this.timeframeOptions.filter(option => option.format == value)[0].value;
             _calendar.currentView = this.selectedTimeframe;
             this.setPeriodLabels();
+            if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
+                this.selectedQuarter = moment$1(this._calendar.activeDate).quarter();
+            }
         });
         _calendar.viewChanged.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
     }
@@ -3161,7 +3216,7 @@ class DrDatePickerCustomHeaderComponent {
     setPeriodLabels() {
         const currentTimeframeOption = this.timeframeOptions.filter(option => option.value === this._calendar.currentView)[0];
         const fullPeriodLabel = currentTimeframeOption.periodLabel();
-        if (this._calendar.currentView === 'month') {
+        if (this._calendar.currentView === CalendarView.FOR_DAYS) {
             this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
             this.periodYearLabel = fullPeriodLabel.slice(4);
         }
@@ -3205,7 +3260,7 @@ class DrDatePickerCustomHeaderComponent {
 DrDatePickerCustomHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-date-picker_custom-header.component',
-                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
+                template: "<div *ngIf=\"datePickerService.isTimeframeSelectionEnabled\" class=\"dr-datepicker__timeframe-select__wrapper\">\n    <dr-select\n        class=\"dr-datepicker__timeframe-select\"\n        [(ngModel)]=\"selectedTimeframe\"\n        [items]=\"timeframeOptions | drShowTimeframePipe: datePickerService.availableTimeframes\"\n        bindLabel=\"title\"\n        bindValue=\"value\"\n        (ngModelChange)=\"setTimeframe()\">\n    </dr-select>\n</div>\n\n<div class=\"dr-date-paging\">\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(false)\">\n            <i class=\"dr-icon-arrow-left presentation_buttons-navigate_input\"></i>\n    </div>\n    <span class=\"example-header-label\">\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_MONTHS)\">{{periodMonthLabel + ' '}}</span>\n        <span (click)=\"switchViewOnClickOnPeriodLabel(calendarView.FOR_YEARS)\">{{periodYearLabel}}</span>\n    </span>\n    <div class=\"dr-date-paging flip-page-button\"\n        (click)=\"pagingClicked(true)\">\n            <i class=\"dr-icon-arrow-right presentation_buttons-navigate_input\"></i>\n    </div>\n</div>\n<div #quarterlyDatePicker class=\"dr-quarterly-datepicker\" *ngIf=\"currentViewIsQuarter\">\n    <div *ngFor=\"let quarter of quarters\"\n        class=\"quarter-selector\" (click)=\"onSelectQuarter(quarter)\"\n        [class]=\"quarter == selectedQuarter ? 'selected' : ''\"\n        >Q{{quarter}}</div>\n</div>\n\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
             },] }
@@ -3375,7 +3430,8 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             [TimeframeOption.YEAR]: (forward) => this.pagingDateChange('addCalendarYears', 1, forward),
             [TimeframeOption.QUARTER]: (forward) => this.pagingDateChange('addCalendarMonths', 3, forward),
             [TimeframeOption.MONTH]: (forward) => this.pagingDateChange('addCalendarMonths', 1, forward),
-            [TimeframeOption.DAY]: (forward) => this.pagingDateChange('addCalendarDays', 1, forward)
+            [TimeframeOption.DAY]: (forward) => this.pagingDateChange('addCalendarDays', 1, forward),
+            [TimeframeOption.WEEK]: (forward) => this.pagingDateChange('addCalendarDays', 7, forward)
         };
         datePickerService.isTimeframeSelectionEnabled = true;
         datePickerService.format$
@@ -3394,19 +3450,19 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             this.cdr.markForCheck();
         }
     }
+    set availableTimeframes(value) {
+        if (value && value.length) {
+            this.datePickerService.availableTimeframes = value;
+        }
+    }
     get displayedFormattedValue() {
-        var _a;
         if (!this.value) {
             return this.placeholder;
         }
-        return ((_a = this.datePickerService.format$.getValue()) === null || _a === void 0 ? void 0 : _a.includes('Q'))
-            ? this.datePickerService.getQuarterDisplay(this.value)
-            : this.value.format(this.datePickerService.format$.getValue());
+        const formatCached = this.datePickerService.format$.getValue();
+        return this.datePickerService.getDisplayPrefix() + this.value.format(formatCached);
     }
     ngOnInit() {
-        if (this.dateFormatConfig) {
-            this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), this.dateFormatConfig);
-        }
         this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
         this.cdr.markForCheck();
     }
@@ -3441,6 +3497,7 @@ DrDatePickerWithTimeframeComponent.propDecorators = {
     isDashboardDatepicker: [{ type: Input }],
     dateFormatConfig: [{ type: Input }],
     canSelectTimeframe: [{ type: Input }],
+    availableTimeframes: [{ type: Input }],
     onChangeFormat: [{ type: Output }]
 };
 
@@ -3486,6 +3543,17 @@ DrDatePickerFormatDirective.propDecorators = {
     datePickerFormat: [{ type: Input, args: ['drDatePickerFormat',] }]
 };
 
+class DrShowTimeframePipe {
+    transform(arr, showOptions) {
+        return arr.filter(item => showOptions.includes(item.timeframe));
+    }
+}
+DrShowTimeframePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'drShowTimeframePipe'
+            },] }
+];
+
 // !!! Please do not use such approach in other places
 // Hard fix for 'none' calendar view selection
 MatCalendar.prototype.focusActiveCell = function () {
@@ -3505,7 +3573,8 @@ const components$1 = [
     DrDatePickerWithTimeframeComponent,
     DrDatePickerFormatDirective,
     DrDatePickerCustomHeaderComponent,
-    DrModelDebounceChangeDirective
+    DrModelDebounceChangeDirective,
+    DrShowTimeframePipe
 ];
 class DrInputsModule {
 }
@@ -3667,5 +3736,5 @@ DrAccordionModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CalendarView, CheckboxComponent, CustomDateFormat, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg };
+export { AnyTagComponent, CalendarView, CheckboxComponent, CustomDateFormat, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSharedUtils, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, SpinnerSize, SpinnerType, TimeframeOption, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, DrDatePickerComponent as ɵc, DrDatePickerService as ɵd, DrDatePickerWithTimeframeComponent as ɵe, DrDatePickerFormatDirective as ɵf, DrDatePickerCustomHeaderComponent as ɵg, DrShowTimeframePipe as ɵh };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map