@datarailsshared/datarailsshared 1.4.47-dragons → 1.4.48-bratans

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -2399,7 +2399,7 @@
         { type: i0.Component, args: [{
                     selector: 'dr-button',
                     template: "<button (click)=\"onClick($event)\" [disabled]=\"_disabled\" [attr.is-loading]=\"_isLoading\" [attr.bold]=\"isBold\"\n        [attr.icon]=\"!!icon\" [attr.iconAfterLabel]=\"!!iconAfterLabel\" [attr.theme]=\"theme\">\n    <ng-container *ngIf=\"!_isLoading\">\n        <i *ngIf=\"icon\" class=\"dr\" [class]=\"icon\" [style.color]=\"iconColor || 'inherit'\"></i>\n        <ng-content></ng-content>\n        <i *ngIf=\"theme === 'dropdown'\" class=\"dr-icon-arrow-down\"></i>\n        <i *ngIf=\"iconAfterLabel\" class=\"dr dr-last\" [class]=\"iconAfterLabel\" [style.color]=\"iconColor || 'inherit'\"></i>\n    </ng-container>\n    <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\n</button>\n",
-                    styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button[theme]{cursor:pointer;border-radius:16px;padding:5px 16px;font-family:\"Poppins\";font-style:normal;font-weight:400;font-size:14px;line-height:22px;color:#4e566c;border:1px solid #7F7FDD;display:flex;justify-content:space-between;align-items:center;height:32px}:host button[theme] .dr{padding:0;margin-left:5.35px;margin-right:8.64px}:host button[theme] .dr-spinner{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}@keyframes rotate{0%{transform:rotate()}to{transform:rotate(360deg)}}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=secondary]{padding:5px 16px;background:#FFFFFF;border-radius:16px;min-width:90px}:host button[theme][theme~=split-secondary-first]:hover:not([disabled]),:host button[theme][theme~=split-secondary-last]:hover:not([disabled]),:host button[theme][theme~=secondary]:hover:not([disabled]){color:#4e566c;transition:.2ms ease-in all;background:#F2F2FB;box-shadow:0 4px 14px #0000001a;border:1px solid #4646CE}:host button[theme][theme~=split-secondary-first]:active,:host button[theme][theme~=split-secondary-last]:active,:host button[theme][theme~=secondary]:active{box-shadow:none;background:#F2F2FB}:host button[theme][theme~=split-secondary-first][disabled],:host button[theme][theme~=split-secondary-last][disabled],:host button[theme][theme~=secondary][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=split-secondary-first][is-loading=true],:host button[theme][theme~=split-secondary-last][is-loading=true],:host button[theme][theme~=secondary][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-last],:host button[theme][theme~=primary]{background:#4646CE;color:#fff;border:none;min-width:90px}:host button[theme][theme~=split-primary-first]:hover:not([disabled]),:host button[theme][theme~=split-primary-last]:hover:not([disabled]),:host button[theme][theme~=primary]:hover:not([disabled]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);box-shadow:0 4px 14px #0000001a;border:none}:host button[theme][theme~=split-primary-first]:active,:host button[theme][theme~=split-primary-last]:active,:host button[theme][theme~=primary]:active{background:#25258C}:host button[theme][theme~=split-primary-first][disabled],:host button[theme][theme~=split-primary-last][disabled],:host button[theme][theme~=primary][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=split-primary-first][is-loading=true],:host button[theme][theme~=split-primary-last][is-loading=true],:host button[theme][theme~=primary][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=split-primary-first] .dr,:host button[theme][theme~=split-primary-last] .dr,:host button[theme][theme~=primary] .dr{margin:0}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover,:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{min-width:unset;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:10px;padding-right:8px}:host button[theme][theme~=split-secondary-first][icon=true],:host button[theme][theme~=split-secondary-first]:hover[icon=true],:host button[theme][theme~=split-primary-first][icon=true],:host button[theme][theme~=split-primary-first]:hover[icon=true]{padding-left:6px;padding-right:2px}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{border-right:1px solid #fff!important}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover{border-right:none!important}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover,:host button[theme][theme~=split-primary-last],:host button[theme][theme~=split-primary-last]:hover{min-width:unset;border-bottom-left-radius:0;border-top-left-radius:0;padding-left:8px;padding-right:10px}:host button[theme][theme~=split-secondary-last][icon=true],:host button[theme][theme~=split-secondary-last]:hover[icon=true],:host button[theme][theme~=split-primary-last][icon=true],:host button[theme][theme~=split-primary-last]:hover[icon=true]{padding-left:2px;padding-right:6px}:host button[theme][theme~=split-secondary-last] .dr,:host button[theme][theme~=split-secondary-last]:hover .dr,:host button[theme][theme~=split-primary-last] .dr,:host button[theme][theme~=split-primary-last]:hover .dr{margin:0}:host button[theme][theme~=split-primary-last],:host button[theme][theme~=split-primary-last]:hover{border-left:none}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover{margin-left:-1px}:host button[theme][theme~=danger]{background:#BF1D30;color:#fff;border:none;min-width:90px}:host button[theme][theme~=danger]:hover:not([disabled]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#740e1a 0%,#BF1D30 100%);box-shadow:0 4px 14px #0000001a;border-radius:16px;border:none}:host button[theme][theme~=danger]:active{background:#740e1a}:host button[theme][theme~=danger][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=danger][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=ghost]{background:none;border:none;color:#151b3f;padding:4px 8px}:host button[theme][theme~=ghost] .dr{margin-left:4.5px;margin-right:12.5px}:host button[theme][theme~=ghost]:hover:not([disabled]){color:#4646ce;background:#F2F2FB;border-radius:4px}:host button[theme][theme~=ghost][disabled]{color:#727583;cursor:default;pointer-events:none}:host button[theme][theme~=text-link]{background:none;border:none;color:#0b5af9}:host button[theme][theme~=text-link][disabled]{color:#727583;pointer-events:none}:host button[theme][theme~=primary-icon]{padding:8px;width:28px;height:28px;justify-content:center;color:#fff;background:#4646CE;border:none}:host button[theme][theme~=primary-icon]:hover,:host button[theme][theme~=primary-icon]:active{background:linear-gradient(96.89deg,#131318 0%,#4646CE 100%)}:host button[theme][theme~=primary-icon][disabled]{color:#bcbcbc;background:#E5E6EA;cursor:default;pointer-events:none}:host button[theme][theme~=primary-icon] .dr{margin:0}:host button[theme][theme~=secondary-icon]{background:white;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:1px solid #7F7FDD}:host button[theme][theme~=secondary-icon]:hover,:host button[theme][theme~=secondary-icon]:active{color:#4646ce;background:#F2F2FB}:host button[theme][theme~=secondary-icon][disabled]{color:#bcbcbc;background:#E5E6EA;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=secondary-icon] .dr{margin:0}:host button[theme][theme~=simple-text]{color:#0c142b;border:none;background:none}:host button[theme][theme~=simple-text] .dr{margin:0 8px 0 0}:host button[theme][theme~=icon]{background:none;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:none}:host button[theme][theme~=icon]:hover,:host button[theme][theme~=icon]:active{background:#F0F3FC;color:#4646ce}:host button[theme][theme~=icon][disabled]{color:#bcbcbc;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=icon][disabled]:hover,:host button[theme][theme~=icon][disabled]:active{background:none}:host button[theme][theme~=icon] .dr{margin:0}:host button[theme][theme~=dropdown],:host button[theme][theme~=primary-square]{background:#FFFFFF;border-radius:6px;border:1px solid #C3C4CE;box-shadow:none;min-width:unset}:host button[theme][theme~=dropdown]:hover,:host button[theme][theme~=primary-square]:hover{border-color:#85889c}:host button[theme][theme~=dropdown]:active,:host button[theme][theme~=primary-square]:active{border-color:#4646ce}:host button[theme][theme~=dropdown] i:first-child,:host button[theme][theme~=primary-square] i:first-child{margin-right:3px}:host button[theme][theme~=dropdown] i:last-child,:host button[theme][theme~=primary-square] i:last-child{margin-left:3px}:host button[theme][theme~=dropdown]{padding:0 8px}:host button[theme][theme~=primary-square]{padding:0;-webkit-user-select:none;user-select:none}:host button[theme][theme~=primary-square]:hover{background-color:#f9f7ff;border:1px solid #7E828E}:host button[theme][theme~=primary-square]:active{background-color:#f2f2fb;border:1px solid #4646CE}:host button[theme][theme~=primary-square][disabled]{opacity:.6;pointer-events:none}:host button[theme][theme~=link-btn]{padding:5px 8px;border:none;background:none;border-radius:5px;color:#0c142b}:host button[theme][theme~=link-btn] .dr{margin:0 4px 0 0}:host button[theme][theme~=link-btn] .dr-last{margin-right:0;margin-left:4px}:host button[theme][theme~=link-btn]:hover{background:#F2F2FB;color:#4646ce}:host button[theme][theme~=link-btn]:active{background:#F2F2FB;color:#25258c}:host button[theme][theme~=link-btn]:disabled{background:none;color:#727583}:host button[theme][theme~=link-btn]:disabled .dr{color:#bcbcbc}:host button[theme][bold=true]{font-weight:600}:host button[theme][icon=true]:not([theme~=\"primary-square\"]){padding-left:8px}:host button[theme][icon=false]{justify-content:center}:host.dr-button-selected button[theme][theme~=primary-square]{background-color:#f2f2fb;border:1px solid #4646CE}\n"]
+                    styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button[theme]{cursor:pointer;border-radius:16px;padding:5px 16px;font-family:\"Poppins\";font-style:normal;font-weight:400;font-size:14px;line-height:22px;color:#4e566c;border:1px solid #7F7FDD;display:flex;justify-content:space-between;align-items:center;height:32px}:host button[theme] .dr{padding:0;margin-left:5.35px;margin-right:8.64px}:host button[theme] .dr-spinner{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}@keyframes rotate{0%{transform:rotate()}to{transform:rotate(360deg)}}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=secondary]{padding:5px 16px;background:#FFFFFF;border-radius:16px;min-width:90px}:host button[theme][theme~=split-secondary-first]:hover:not([disabled]),:host button[theme][theme~=split-secondary-last]:hover:not([disabled]),:host button[theme][theme~=secondary]:hover:not([disabled]){color:#4e566c;transition:.2ms ease-in all;background:#F2F2FB;box-shadow:0 4px 14px #0000001a;border:1px solid #4646CE}:host button[theme][theme~=split-secondary-first]:active,:host button[theme][theme~=split-secondary-last]:active,:host button[theme][theme~=secondary]:active{box-shadow:none;background:#F2F2FB}:host button[theme][theme~=split-secondary-first][disabled],:host button[theme][theme~=split-secondary-last][disabled],:host button[theme][theme~=secondary][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=split-secondary-first][is-loading=true],:host button[theme][theme~=split-secondary-last][is-loading=true],:host button[theme][theme~=secondary][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-last],:host button[theme][theme~=primary]{background:#4646CE;color:#fff;border:none;min-width:90px}:host button[theme][theme~=split-primary-first]:hover:not([disabled]),:host button[theme][theme~=split-primary-last]:hover:not([disabled]),:host button[theme][theme~=primary]:hover:not([disabled]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);box-shadow:0 4px 14px #0000001a;border:none}:host button[theme][theme~=split-primary-first]:active,:host button[theme][theme~=split-primary-last]:active,:host button[theme][theme~=primary]:active{background:#25258C}:host button[theme][theme~=split-primary-first][disabled],:host button[theme][theme~=split-primary-last][disabled],:host button[theme][theme~=primary][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=split-primary-first][is-loading=true],:host button[theme][theme~=split-primary-last][is-loading=true],:host button[theme][theme~=primary][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=split-primary-first] .dr,:host button[theme][theme~=split-primary-last] .dr,:host button[theme][theme~=primary] .dr{margin:0}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover,:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{min-width:unset;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:10px;padding-right:8px}:host button[theme][theme~=split-secondary-first][icon=true],:host button[theme][theme~=split-secondary-first]:hover[icon=true],:host button[theme][theme~=split-primary-first][icon=true],:host button[theme][theme~=split-primary-first]:hover[icon=true]{padding-left:6px;padding-right:2px}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{border-right:1px solid #fff!important}:host button[theme][theme~=split-secondary-first],:host button[theme][theme~=split-secondary-first]:hover{border-right:none!important}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover,:host button[theme][theme~=split-primary-last],:host button[theme][theme~=split-primary-last]:hover{min-width:unset;border-bottom-left-radius:0;border-top-left-radius:0;padding-left:8px;padding-right:10px}:host button[theme][theme~=split-secondary-last][icon=true],:host button[theme][theme~=split-secondary-last]:hover[icon=true],:host button[theme][theme~=split-primary-last][icon=true],:host button[theme][theme~=split-primary-last]:hover[icon=true]{padding-left:2px;padding-right:6px}:host button[theme][theme~=split-secondary-last] .dr,:host button[theme][theme~=split-secondary-last]:hover .dr,:host button[theme][theme~=split-primary-last] .dr,:host button[theme][theme~=split-primary-last]:hover .dr{margin:0}:host button[theme][theme~=split-primary-last],:host button[theme][theme~=split-primary-last]:hover{border-left:none}:host button[theme][theme~=split-secondary-last],:host button[theme][theme~=split-secondary-last]:hover{margin-left:-1px}:host button[theme][theme~=danger]{background:#BF1D30;color:#fff;border:none;min-width:90px}:host button[theme][theme~=danger]:hover:not([disabled]){transition:.2ms ease-in all;background:linear-gradient(96.89deg,#740e1a 0%,#BF1D30 100%);box-shadow:0 4px 14px #0000001a;border-radius:16px;border:none}:host button[theme][theme~=danger]:active{background:#740e1a}:host button[theme][theme~=danger][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=danger][is-loading=true]{justify-content:center;padding:5px 16px;pointer-events:none}:host button[theme][theme~=ghost]{background:none;border:none;color:#151b3f;padding:4px 8px}:host button[theme][theme~=ghost] .dr{margin-left:4.5px;margin-right:12.5px}:host button[theme][theme~=ghost]:hover:not([disabled]){color:#4646ce;background:#F2F2FB;border-radius:4px}:host button[theme][theme~=ghost][disabled]{color:#727583;cursor:default;pointer-events:none}:host button[theme][theme~=text-link]{background:none;border:none;color:#0b5af9}:host button[theme][theme~=text-link][disabled]{color:#727583;pointer-events:none}:host button[theme][theme~=primary-icon]{padding:8px;width:28px;height:28px;justify-content:center;color:#fff;background:#4646CE;border:none}:host button[theme][theme~=primary-icon]:hover,:host button[theme][theme~=primary-icon]:active{background:linear-gradient(96.89deg,#131318 0%,#4646CE 100%)}:host button[theme][theme~=primary-icon][disabled]{color:#bcbcbc;background:#E5E6EA;cursor:default;pointer-events:none}:host button[theme][theme~=primary-icon] .dr{margin:0}:host button[theme][theme~=secondary-icon]{background:white;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:1px solid #7F7FDD}:host button[theme][theme~=secondary-icon]:hover,:host button[theme][theme~=secondary-icon]:active{color:#4646ce;background:#F2F2FB}:host button[theme][theme~=secondary-icon][disabled]{color:#bcbcbc;background:#E5E6EA;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=secondary-icon] .dr{margin:0}:host button[theme][theme~=simple-text]{color:#0c142b;border:none;background:none}:host button[theme][theme~=simple-text] .dr{margin:0 8px 0 0}:host button[theme][theme~=icon]{background:none;padding:8px;width:28px;height:28px;justify-content:center;color:#4e566c;border:none}:host button[theme][theme~=icon]:hover,:host button[theme][theme~=icon]:active{background:#F0F3FC;color:#4646ce}:host button[theme][theme~=icon][disabled]{color:#bcbcbc;border:none;cursor:default;pointer-events:none}:host button[theme][theme~=icon][disabled]:hover,:host button[theme][theme~=icon][disabled]:active{background:none}:host button[theme][theme~=icon] .dr{margin:0}:host button[theme][theme~=dropdown]{padding:0 8px;background:#FFFFFF;border-radius:6px;border:1px solid #C3C4CE;min-width:unset;box-shadow:none}:host button[theme][theme~=dropdown]:hover{border-color:#85889c}:host button[theme][theme~=dropdown]:active{border-color:#4646ce}:host button[theme][theme~=dropdown] i:first-child{margin-right:3px}:host button[theme][theme~=dropdown] i:last-child{margin-left:3px}:host button[theme][theme~=link-btn]{padding:5px 8px;border:none;background:none;border-radius:5px;color:#0c142b}:host button[theme][theme~=link-btn] .dr{margin:0 4px 0 0}:host button[theme][theme~=link-btn] .dr-last{margin-right:0;margin-left:4px}:host button[theme][theme~=link-btn]:hover{background:#F2F2FB;color:#4646ce}:host button[theme][theme~=link-btn]:active{background:#F2F2FB;color:#25258c}:host button[theme][theme~=link-btn]:disabled{background:none;color:#727583}:host button[theme][theme~=link-btn]:disabled .dr{color:#bcbcbc}:host button[theme][bold=true]{font-weight:600}:host button[theme][icon=true]{padding-left:8px}:host button[theme][icon=false]{justify-content:center}\n"]
                 },] }
     ];
     DrButtonComponent.ctorParameters = function () { return []; };
@@ -3088,7 +3088,6 @@
     var DrTabsComponent = /** @class */ (function () {
         function DrTabsComponent() {
             this.selectedTab = 0;
-            this.noBodyPadding = false;
             this.selectedTabChange = new i0.EventEmitter();
         }
         DrTabsComponent.prototype.selectedIndexChange = function ($event) {
@@ -3100,8 +3099,8 @@
     DrTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-tabs',
-                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\n               [class.with-radio]=\"withRadio\"\n               [class.vertical]=\"vertical\"\n               [class.no-body-padding]=\"noBodyPadding\"\n               [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n  <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n    <ng-container *ngIf=\"withRadio\">\n      <ng-template mat-tab-label>\n        <dr-radio-button [value]=\"index\"\n                         [(ngModel)]=\"selectedTab\">\n        </dr-radio-button>\n        {{tab.label}}\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n  </mat-tab>\n</mat-tab-group>\n",
-                    styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}\n"]
+                    template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n               (selectedIndexChange)=\"selectedIndexChange($event)\"\n               [class.with-radio]=\"withRadio\"\n               [class.vertical]=\"vertical\"\n               [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n  <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n    <ng-container *ngIf=\"withRadio\">\n      <ng-template mat-tab-label>\n        <dr-radio-button [value]=\"index\"\n                         [(ngModel)]=\"selectedTab\">\n        </dr-radio-button>\n        {{tab.label}}\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n  </mat-tab>\n</mat-tab-group>\n",
+                    styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-labels{flex-direction:column;padding:0;border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}\n"]
                 },] }
     ];
     DrTabsComponent.ctorParameters = function () { return []; };
@@ -3109,7 +3108,6 @@
         selectedTab: [{ type: i0.Input }],
         withRadio: [{ type: i0.Input }],
         vertical: [{ type: i0.Input }],
-        noBodyPadding: [{ type: i0.Input }],
         selectedTabChange: [{ type: i0.Output }],
         tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
     };
@@ -3467,6 +3465,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 +3522,7 @@
         TimeframeOption["DAY"] = "day";
         TimeframeOption["MONTH"] = "month";
         TimeframeOption["QUARTER"] = "quarter";
+        TimeframeOption["WEEK"] = "week";
         TimeframeOption["YEAR"] = "year";
     })(exports.TimeframeOption || (exports.TimeframeOption = {}));
     exports.CalendarView = void 0;
@@ -3613,14 +3613,34 @@
                 },] }
     ];
 
-    var DrSharedUtils = /** @class */ (function () {
-        function DrSharedUtils() {
+    var DrDatePickerService = /** @class */ (function () {
+        function DrDatePickerService() {
+            this.isTimeframeSelectionEnabled = false;
+            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
+            };
         }
-        /**
-         * Get timeframe (day, year, month, quarter) based on passed format
-         * @param format - date format string. Examples: MM/DD/YYYY, Q/YYYY
-         */
-        DrSharedUtils.getTimeframeByDateFormat = function (format) {
+        DrDatePickerService.prototype.getQuarterDisplay = function (value) {
+            return 'Q' + value.format(this.formatConfig.quarter);
+        };
+        DrDatePickerService.prototype.getWeekDisplay = function (value) {
+            return 'W' + value.format(this.formatConfig.week);
+        };
+        DrDatePickerService.prototype.getTimeframe = function (format) {
             var defaultFrame = exports.TimeframeOption.DAY;
             if (!format) {
                 return defaultFrame;
@@ -3633,34 +3653,14 @@
                     return exports.TimeframeOption.DAY;
                 case lowerCaseFormat.includes('m'):
                     return exports.TimeframeOption.MONTH;
+                case lowerCaseFormat.includes('w'):
+                    return exports.TimeframeOption.WEEK;
                 case lowerCaseFormat.includes('y'):
                     return exports.TimeframeOption.YEAR;
                 default:
                     return defaultFrame;
             }
         };
-        return DrSharedUtils;
-    }());
-
-    var DrDatePickerService = /** @class */ (function () {
-        function DrDatePickerService() {
-            this.isTimeframeSelectionEnabled = false;
-            this.timeframe = exports.TimeframeOption.DAY;
-            this.format$ = new rxjs.BehaviorSubject(exports.DateFromats.MAT_DEFAULT_DATE_FORMAT);
-            this.updatedQuarter$ = new rxjs.Subject();
-            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,
-            };
-        }
-        DrDatePickerService.prototype.getQuarterDisplay = function (value) {
-            return 'Q' + value.quarter() + this.format$.getValue().charAt(1) + value.year();
-        };
-        DrDatePickerService.prototype.getTimeframe = function (format) {
-            return DrSharedUtils.getTimeframeByDateFormat(format);
-        };
         DrDatePickerService.prototype.getConfiguredFormat = function (timeframe) {
             return this.formatConfig[timeframe];
         };
@@ -3692,25 +3692,37 @@
             this.quarters = [1, 2, 3, 4];
             this.selectedQuarter = 1;
             this.timeframeOptions = [{
-                    title: 'Day',
+                    timeframe: exports.TimeframeOption.DAY,
                     value: exports.CalendarView.FOR_DAYS,
+                    title: 'Day',
                     format: this.datePickerService.formatConfig.day,
                     periodLabel: function () { return _this._dateAdapter
                         .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
                         .toLocaleUpperCase(); }
                 }, {
-                    title: 'Month',
+                    timeframe: exports.TimeframeOption.WEEK,
+                    value: exports.CalendarView.FOR_DAYS,
+                    title: 'Week',
+                    format: this.datePickerService.formatConfig.week,
+                    periodLabel: function () { return _this._dateAdapter
+                        .format(_this._calendar.activeDate, _this._dateFormats.display.monthYearLabel)
+                        .toLocaleUpperCase(); }
+                }, {
+                    timeframe: exports.TimeframeOption.MONTH,
                     value: exports.CalendarView.FOR_MONTHS,
+                    title: 'Month',
                     format: this.datePickerService.formatConfig.month,
                     periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
                 }, {
-                    title: 'Quarter',
+                    timeframe: exports.TimeframeOption.QUARTER,
                     value: exports.CalendarView.FOR_QUARTERS,
+                    title: 'Quarter',
                     format: this.datePickerService.formatConfig.quarter,
                     periodLabel: function () { return String(moment$1(_this._calendar.activeDate).year()); }
                 }, {
-                    title: 'Year',
+                    timeframe: exports.TimeframeOption.YEAR,
                     value: exports.CalendarView.FOR_YEARS,
+                    title: 'Year',
                     format: this.datePickerService.formatConfig.year,
                     periodLabel: function () {
                         var currentYear = moment$1(_this._calendar.activeDate).year();
@@ -3736,6 +3748,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 +3762,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 +3812,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 +3990,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,16 +3998,18 @@
             _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$))
                 .subscribe(function (value) {
+                datePickerService.format$.getValue();
                 _this.onChangeFormat.emit(datePickerService.normalizeValue(value));
             });
             return _this;
@@ -4015,23 +4032,34 @@
             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();
+                switch (true) {
+                    case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('Q'):
+                        return this.datePickerService.getQuarterDisplay(this.value);
+                    case formatCached === null || formatCached === void 0 ? void 0 : formatCached.includes('W'):
+                        return this.datePickerService.getWeekDisplay(this.value);
+                    default:
+                        return 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 +4095,7 @@
         isDashboardDatepicker: [{ type: i0.Input }],
         dateFormatConfig: [{ type: i0.Input }],
         canSelectTimeframe: [{ type: i0.Input }],
+        availableTimeframes: [{ type: i0.Input }],
         onChangeFormat: [{ type: i0.Output }]
     };
 
@@ -4117,6 +4146,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 +4179,8 @@
         DrDatePickerWithTimeframeComponent,
         DrDatePickerFormatDirective,
         DrDatePickerCustomHeaderComponent,
-        DrModelDebounceChangeDirective
+        DrModelDebounceChangeDirective,
+        DrShowTimeframePipe
     ];
     var DrInputsModule = /** @class */ (function () {
         function DrInputsModule() {
@@ -4352,7 +4396,6 @@
     exports.DrPopoverRef = DrPopoverRef;
     exports.DrPopoverService = DrPopoverService;
     exports.DrSelectComponent = DrSelectComponent;
-    exports.DrSharedUtils = DrSharedUtils;
     exports.DrSpinnerComponent = DrSpinnerComponent;
     exports.DrSpinnerDirective = DrSpinnerDirective;
     exports.DrSpinnerModule = DrSpinnerModule;
@@ -4382,6 +4425,7 @@
     exports["ɵe"] = DrDatePickerWithTimeframeComponent;
     exports["ɵf"] = DrDatePickerFormatDirective;
     exports["ɵg"] = DrDatePickerCustomHeaderComponent;
+    exports["ɵh"] = DrShowTimeframePipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });