@datarailsshared/datarailsshared 1.4.54 → 1.4.56

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1170,9 +1170,20 @@
         function RadioButtonComponent(cdr) {
             this.cdr = cdr;
             this.valueChange = new i0.EventEmitter();
+            this._disabled = false;
             this.onChange = (function (onchanges) { });
             this.onTouched = function () { };
         }
+        Object.defineProperty(RadioButtonComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (disabled) {
+                this._disabled = disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(RadioButtonComponent.prototype, "value", {
             get: function () {
                 return this._value;
@@ -1211,7 +1222,7 @@
     RadioButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-radio-button',
-                    template: "<label>\n  <input\n    type=\"radio\"\n    [name]=\"name\"\n    [value]=\"value\"\n    (change)=\"valueChanged(value)\"\n    [(ngModel)]=\"modelValue\"\n    (click)=\"toggleChange($event)\">\n  <span>\n      <ng-content></ng-content>\n  </span>\n</label>\n",
+                    template: "<label>\n  <input\n    type=\"radio\"\n    [name]=\"name\"\n    [value]=\"value\"\n    (change)=\"valueChanged(value)\"\n    [(ngModel)]=\"modelValue\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleChange($event)\">\n  <span>\n      <ng-content></ng-content>\n  </span>\n</label>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1220,17 +1231,17 @@
                         }
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;line-height:22px}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #8F929E;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:#FFFFFF;border-color:#4646ce;color:#4646ce}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#4646ce}label input:disabled+span:before{border-color:#8f929e}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%238F929E\"/></svg> ');border-color:#8f929e}label span:hover:before{border-color:#4e566c}\n"]
+                    styles: [":host{display:flex;line-height:22px}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #8F929E;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#4646ce;color:#4646ce}label input:disabled+span:before{border-color:#8f929e}label input[disabled]:checked+span:before{background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%238F929E\"/></svg> ');background-repeat:no-repeat;background-position:center;border-color:#8f929e!important;color:#8f929e}label span:hover:before{border-color:#4e566c}\n"]
                 },] }
     ];
     RadioButtonComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef }
     ]; };
     RadioButtonComponent.propDecorators = {
-        disabled: [{ type: i0.Input }],
         name: [{ type: i0.Input }],
         _value: [{ type: i0.Input, args: ['value',] }],
-        valueChange: [{ type: i0.Output }]
+        valueChange: [{ type: i0.Output }],
+        disabled: [{ type: i0.Input }]
     };
 
     var RadioGroupComponent = /** @class */ (function () {
@@ -1459,7 +1470,7 @@
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8F929E;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646CE;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646CE;border-color:#4646ce;color:#fff}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8F929E;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#F2F2FB;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"]
+                    styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8F929E;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646CE;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646CE;border-color:#4646ce;color:#fff}label input:disabled+span{color:#8f929e}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8F929E;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#F2F2FB;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"]
                 },] }
     ];
     CheckboxComponent.ctorParameters = function () { return [
@@ -2755,6 +2766,7 @@
             this.menuService = menuService;
             this.cdr = cdr;
             this.position = 'left';
+            this.wasHovered = false;
         }
         Object.defineProperty(DrDropdownComponent.prototype, "options", {
             set: function (data) {
@@ -2780,6 +2792,9 @@
             enumerable: false,
             configurable: true
         });
+        DrDropdownComponent.prototype.onMouseEnter = function () {
+            this.wasHovered = true;
+        };
         DrDropdownComponent.prototype.onMouseLeave = function () {
             if (this.drDropdownInHover)
                 this.menuService.destroy();
@@ -2848,7 +2863,7 @@
     DrDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-dropdown',
-                    template: "<div #menuContainer\n     (mouseleave)=\"onMouseLeave()\"\n     (clickOutside)=\"onClickedOutside()\"\n     [drDropdownPosition]=\"option\"\n     #dropdownPosition=\"dropdownPosition\"\n     [position]=\"position\"\n     [class]=\"containerClass\"\n     class=\"dr-dropdown\">\n    <div class=\"dr-dropdown__container\">\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n             (click)=\"action(act)\"\n             [drTooltip]=\"tooltipToShow(act)\"\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n             class=\"dr-dropdown__container__item\"\n             [class.item-disabled]=\"disabled(act)\"\n             [class.item-selected]=\"selected(act)\"\n             [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: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item.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"]
                 },] }
@@ -2871,6 +2886,7 @@
             this.el = el;
             this._document = _document;
             this.position = 'left';
+            this.mouseleaveTimeout = 200;
         }
         DrDropdownDirective.prototype.elementHover = function () {
             if (!this.drDropdownInHover)
@@ -2880,6 +2896,17 @@
         DrDropdownDirective.prototype.elementClick = function () {
             this.openDropdown();
         };
+        DrDropdownDirective.prototype.leaveDropdownTriggerElement = function () {
+            var _this = this;
+            if (this.drDropdownInHover) {
+                setTimeout(function (_) {
+                    if (_this.contentCmpRef && !_this.contentCmpRef.instance.wasHovered) {
+                        _this.contentCmpRef.destroy();
+                        _this.contentCmpRef = null;
+                    }
+                }, this.mouseleaveTimeout);
+            }
+        };
         DrDropdownDirective.prototype.documentClick = function (e) {
             this.closeDropdown(e);
         };
@@ -2902,13 +2929,17 @@
             }
         };
         DrDropdownDirective.prototype.closeDropdown = function (e) {
-            var menuItem = e.target.classList;
-            if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
+            if (!this.contentCmpRef) {
                 return;
             }
-            var elems = this._document.querySelectorAll('dr-dropdown');
-            if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
-                setTimeout(function () { return elems.forEach(function (item) { return item.remove(); }); }, 100);
+            var clickTarget = e.target;
+            var triggerElement = this.el.nativeElement;
+            var dropdownElement = this.contentCmpRef.location.nativeElement;
+            var isClickTriggerElement = triggerElement.contains(clickTarget) || triggerElement === clickTarget;
+            var isClickDropdownContents = dropdownElement.contains(clickTarget);
+            if (!isClickTriggerElement && !isClickDropdownContents) {
+                var elems_1 = this._document.querySelectorAll('dr-dropdown');
+                setTimeout(function () { return elems_1.forEach(function (item) { return item.remove(); }); }, 100);
             }
         };
         DrDropdownDirective.prototype.showMenu = function (options) {
@@ -2946,6 +2977,7 @@
         contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
         elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
         elementClick: [{ type: i0.HostListener, args: ['click',] }],
+        leaveDropdownTriggerElement: [{ type: i0.HostListener, args: ['mouseleave',] }],
         documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
@@ -3467,6 +3499,7 @@
         DateFromats["YEAR_FORMAT"] = "yyyy";
         DateFromats["MONTH_YEAR_FORMAT"] = "MM/yyyy";
         DateFromats["QUARTER_FORMAT"] = "Q/yyyy";
+        DateFromats["WEEK_FORMAT"] = "W/yyyy";
     })(exports.DateFromats || (exports.DateFromats = {}));
     var CustomDateFormat = /** @class */ (function () {
         function CustomDateFormat() {
@@ -3523,6 +3556,7 @@
         TimeframeOption["DAY"] = "day";
         TimeframeOption["MONTH"] = "month";
         TimeframeOption["QUARTER"] = "quarter";
+        TimeframeOption["WEEK"] = "week";
         TimeframeOption["YEAR"] = "year";
     })(exports.TimeframeOption || (exports.TimeframeOption = {}));
     exports.CalendarView = void 0;
@@ -3631,6 +3665,8 @@
                     return exports.TimeframeOption.QUARTER;
                 case lowerCaseFormat.includes('d'):
                     return exports.TimeframeOption.DAY;
+                case lowerCaseFormat.includes('w'):
+                    return exports.TimeframeOption.WEEK;
                 case lowerCaseFormat.includes('m'):
                     return exports.TimeframeOption.MONTH;
                 case lowerCaseFormat.includes('y'):
@@ -3648,15 +3684,31 @@
             this.timeframe = exports.TimeframeOption.DAY;
             this.format$ = new rxjs.BehaviorSubject(exports.DateFromats.MAT_DEFAULT_DATE_FORMAT);
             this.updatedQuarter$ = new rxjs.Subject();
+            this.availableTimeframes = [
+                exports.TimeframeOption.DAY,
+                exports.TimeframeOption.WEEK,
+                exports.TimeframeOption.MONTH,
+                exports.TimeframeOption.QUARTER,
+                exports.TimeframeOption.YEAR
+            ];
             this.formatConfig = {
                 day: exports.DateFromats.MAT_DEFAULT_DATE_FORMAT,
                 month: exports.DateFromats.MONTH_YEAR_FORMAT,
                 year: exports.DateFromats.YEAR_FORMAT,
                 quarter: exports.DateFromats.QUARTER_FORMAT,
+                week: exports.DateFromats.WEEK_FORMAT
             };
         }
-        DrDatePickerService.prototype.getQuarterDisplay = function (value) {
-            return 'Q' + value.quarter() + this.format$.getValue().charAt(1) + value.year();
+        DrDatePickerService.prototype.getDisplayPrefix = function () {
+            var 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 '';
+            }
         };
         DrDatePickerService.prototype.getTimeframe = function (format) {
             return DrSharedUtils.getTimeframeByDateFormat(format);
@@ -3692,6 +3744,7 @@
             this.quarters = [1, 2, 3, 4];
             this.selectedQuarter = 1;
             this.timeframeOptions = [{
+                    timeframe: exports.TimeframeOption.DAY,
                     title: 'Day',
                     value: exports.CalendarView.FOR_DAYS,
                     format: this.datePickerService.formatConfig.day,
@@ -3699,16 +3752,27 @@
                         .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
                         .toLocaleUpperCase(); }
                 }, {
+                    timeframe: exports.TimeframeOption.WEEK,
+                    title: 'Week',
+                    value: exports.CalendarView.FOR_DAYS,
+                    format: this.datePickerService.formatConfig.week,
+                    periodLabel: function () { return _this._dateAdapter
+                        .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
+                        .toLocaleUpperCase(); }
+                }, {
+                    timeframe: exports.TimeframeOption.MONTH,
                     title: 'Month',
                     value: exports.CalendarView.FOR_MONTHS,
                     format: this.datePickerService.formatConfig.month,
                     periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
                 }, {
+                    timeframe: exports.TimeframeOption.QUARTER,
                     title: 'Quarter',
                     value: exports.CalendarView.FOR_QUARTERS,
                     format: this.datePickerService.formatConfig.quarter,
                     periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
                 }, {
+                    timeframe: exports.TimeframeOption.YEAR,
                     title: 'Year',
                     value: exports.CalendarView.FOR_YEARS,
                     format: this.datePickerService.formatConfig.year,
@@ -3736,6 +3800,9 @@
                 _this.selectedTimeframe = _this.timeframeOptions.filter(function (option) { return option.format == value; })[0].value;
                 _calendar.currentView = _this.selectedTimeframe;
                 _this.setPeriodLabels();
+                if (_this.selectedTimeframe === exports.CalendarView.FOR_QUARTERS) {
+                    _this.selectedQuarter = moment$1(_this._calendar.activeDate).quarter();
+                }
             });
             _calendar.viewChanged.pipe(operators.takeUntil(this._destroyed)).subscribe(function () { return _this.setPeriodLabels(); });
         }
@@ -3747,7 +3814,7 @@
             var _this = this;
             var currentTimeframeOption = this.timeframeOptions.filter(function (option) { return option.value === _this._calendar.currentView; })[0];
             var fullPeriodLabel = currentTimeframeOption.periodLabel();
-            if (this._calendar.currentView === 'month') {
+            if (this._calendar.currentView === exports.CalendarView.FOR_DAYS) {
                 this.periodMonthLabel = fullPeriodLabel.slice(0, 3);
                 this.periodYearLabel = fullPeriodLabel.slice(4);
             }
@@ -3797,7 +3864,7 @@
     DrDatePickerCustomHeaderComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:54px;align-items:center;font-family:\"Poppins\";font-style:normal;font-weight:600;font-size:14px;line-height:22px}.dr-datepicker__timeframe-select__wrapper{background-color:#f9faff;padding:16px 32px;border-radius:18px 18px 0 0}.dr-date-paging{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 8px;grid-gap:4px;gap:4px}.dr-date-paging.flip-page-button{width:20px;height:20px;padding:0;color:#4e566c}.dr-date-paging.flip-page-button:hover{border-radius:50%;background:#F2F2FB;color:#4646ce}.example-header-label{cursor:pointer}.dr-quarterly-datepicker{display:flex;justify-content:space-between;padding:10px}.dr-quarterly-datepicker .quarter-selector{display:block;width:74px;height:40px;text-align:center;border-radius:40px;font-weight:400;padding-top:9px}.dr-quarterly-datepicker .quarter-selector:hover{background:#F2F2FB;color:#4646ce;font-weight:600;cursor:pointer}.dr-quarterly-datepicker .quarter-selector.selected{background-color:#4646ce;color:#f3f7ff;font-weight:600}\n"]
                 },] }
@@ -3975,7 +4042,7 @@
     var DrDatePickerWithTimeframeComponent = /** @class */ (function (_super) {
         __extends(DrDatePickerWithTimeframeComponent, _super);
         function DrDatePickerWithTimeframeComponent(cdr, dateAdapter, datePickerService) {
-            var _b;
+            var _a;
             var _this = _super.call(this, cdr, dateAdapter, datePickerService) || this;
             _this.cdr = cdr;
             _this.dateAdapter = dateAdapter;
@@ -3983,12 +4050,13 @@
             _this.isDashboardDatepicker = false;
             _this.canSelectTimeframe = true;
             _this.onChangeFormat = new i0.EventEmitter();
-            _this.pagingSetup = (_b = {},
-                _b[exports.TimeframeOption.YEAR] = function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
-                _b[exports.TimeframeOption.QUARTER] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
-                _b[exports.TimeframeOption.MONTH] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
-                _b[exports.TimeframeOption.DAY] = function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); },
-                _b);
+            _this.pagingSetup = (_a = {},
+                _a[exports.TimeframeOption.YEAR] = function (forward) { return _this.pagingDateChange('addCalendarYears', 1, forward); },
+                _a[exports.TimeframeOption.QUARTER] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 3, forward); },
+                _a[exports.TimeframeOption.MONTH] = function (forward) { return _this.pagingDateChange('addCalendarMonths', 1, forward); },
+                _a[exports.TimeframeOption.DAY] = function (forward) { return _this.pagingDateChange('addCalendarDays', 1, forward); },
+                _a[exports.TimeframeOption.WEEK] = function (forward) { return _this.pagingDateChange('addCalendarDays', 7, forward); },
+                _a);
             datePickerService.isTimeframeSelectionEnabled = true;
             datePickerService.format$
                 .pipe(operators.takeUntil(_this.destroyed$))
@@ -4015,23 +4083,27 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "availableTimeframes", {
+            set: function (value) {
+                if (value && value.length) {
+                    this.datePickerService.availableTimeframes = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DrDatePickerWithTimeframeComponent.prototype, "displayedFormattedValue", {
             get: function () {
-                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());
+                var formatCached = this.datePickerService.format$.getValue();
+                return this.datePickerService.getDisplayPrefix() + this.value.format(formatCached);
             },
             enumerable: false,
             configurable: true
         });
         DrDatePickerWithTimeframeComponent.prototype.ngOnInit = function () {
-            if (this.dateFormatConfig) {
-                this.datePickerService.formatConfig = Object.assign(Object.assign({}, this.datePickerService.formatConfig), this.dateFormatConfig);
-            }
             this.datePickerService.isTimeframeSelectionEnabled = this.canSelectTimeframe;
             this.cdr.markForCheck();
         };
@@ -4067,6 +4139,7 @@
         isDashboardDatepicker: [{ type: i0.Input }],
         dateFormatConfig: [{ type: i0.Input }],
         canSelectTimeframe: [{ type: i0.Input }],
+        availableTimeframes: [{ type: i0.Input }],
         onChangeFormat: [{ type: i0.Output }]
     };
 
@@ -4117,6 +4190,20 @@
         datePickerFormat: [{ type: i0.Input, args: ['drDatePickerFormat',] }]
     };
 
+    var DrShowTimeframePipe = /** @class */ (function () {
+        function DrShowTimeframePipe() {
+        }
+        DrShowTimeframePipe.prototype.transform = function (arr, showOptions) {
+            return arr.filter(function (item) { return showOptions.includes(item.timeframe); });
+        };
+        return DrShowTimeframePipe;
+    }());
+    DrShowTimeframePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'drShowTimeframePipe'
+                },] }
+    ];
+
     // !!! Please do not use such approach in other places
     // Hard fix for 'none' calendar view selection
     datepicker.MatCalendar.prototype.focusActiveCell = function () {
@@ -4136,7 +4223,8 @@
         DrDatePickerWithTimeframeComponent,
         DrDatePickerFormatDirective,
         DrDatePickerCustomHeaderComponent,
-        DrModelDebounceChangeDirective
+        DrModelDebounceChangeDirective,
+        DrShowTimeframePipe
     ];
     var DrInputsModule = /** @class */ (function () {
         function DrInputsModule() {
@@ -4382,6 +4470,7 @@
     exports["ɵe"] = DrDatePickerWithTimeframeComponent;
     exports["ɵf"] = DrDatePickerFormatDirective;
     exports["ɵg"] = DrDatePickerCustomHeaderComponent;
+    exports["ɵh"] = DrShowTimeframePipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });