@datarailsshared/datarailsshared 1.3.31 → 1.3.34

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1271,7 +1271,7 @@
         });
         RadioGroupComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
-            // In case option 'name' isn't set on nb-radio component,
+            // In case option 'name' isn't set on dr-radio component,
             // we need to set it's name right away, so it won't overlap with options
             // without names from other radio groups. Otherwise they all would have
             // same name and will be considered as options from one group so only the
@@ -2112,12 +2112,12 @@
     DrToggleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-toggle',
-                    template: "<span class=\"mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{toggleTitle}}</span>\r\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\r\n    <input type=\"checkbox\"\r\n           [checked]=\"checkedStatus\"\r\n           [disabled]=\"_disabled\"\r\n           (click)=\"setValue()\">\r\n    <span class=\"toggle-body\">\r\n        <i></i>\r\n        <ng-content></ng-content>\r\n    </span>\r\n</label>\r\n<span class=\"ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{toggleTitle}}</span>\r\n",
+                    template: "<span class=\"mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{toggleTitle}}</span>\r\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\r\n    <input type=\"checkbox\"\r\n           [checked]=\"checkedStatus\"\r\n           [disabled]=\"_disabled\"\r\n           (click)=\"setValue()\">\r\n    <span class=\"toggle-body\">\r\n        <i></i>\r\n    </span>\r\n    <ng-content></ng-content>\r\n</label>\r\n<span class=\"ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{toggleTitle}}</span>\r\n",
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;justify-content:space-between;align-items:center}:host.toggle-label-alignment{justify-content:start}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:rgba(143,155,179,.24)!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#4646ce}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}\n"]
+                    styles: [":host{display:flex;justify-content:space-between;align-items:center}:host.toggle-label-alignment{justify-content:start}:host .toggle-container{display:flex;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:rgba(143,155,179,.24)!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#4646ce}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#8f929e;line-height:1}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}\n"]
                 },] }
     ];
     DrToggleComponent.ctorParameters = function () { return [
@@ -2332,8 +2332,8 @@
     DrButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-button',
-                    template: "<button (click)=\"onClick($event)\" [disabled]=\"_disabled\" [attr.is-loading]=\"_isLoading\" [attr.bold]=\"isBold\"\r\n        [attr.icon]=\"!!icon\" [attr.theme]=\"theme\">\r\n    <ng-container *ngIf=\"!_isLoading\">\r\n        <i *ngIf=\"icon\" class=\"dr\" [class]=\"icon\" [style.color]=\"iconColor || 'inherit'\"></i>\r\n        <ng-content></ng-content>\r\n        <i *ngIf=\"theme === 'dropdown'\" class=\"dr-icon-arrow-down\"></i>\r\n    </ng-container>\r\n    <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\r\n</button>\r\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][bold=true]{font-weight:600}:host button[theme][icon=true]{padding-left:8px}:host button[theme][icon=false]{justify-content:center}\n"]
+                    template: "<button (click)=\"onClick($event)\" [disabled]=\"_disabled\" [attr.is-loading]=\"_isLoading\" [attr.bold]=\"isBold\"\r\n        [attr.icon]=\"!!icon\" [attr.iconAfterLabel]=\"!!iconAfterLabel\" [attr.theme]=\"theme\">\r\n    <ng-container *ngIf=\"!_isLoading\">\r\n        <i *ngIf=\"icon\" class=\"dr\" [class]=\"icon\" [style.color]=\"iconColor || 'inherit'\"></i>\r\n        <ng-content></ng-content>\r\n        <i *ngIf=\"theme === 'dropdown'\" class=\"dr-icon-arrow-down\"></i>\r\n        <i *ngIf=\"iconAfterLabel\" class=\"dr dr-last\" [class]=\"iconAfterLabel\" [style.color]=\"iconColor || 'inherit'\"></i>\r\n    </ng-container>\r\n    <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\r\n</button>\r\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 []; };
@@ -2341,6 +2341,7 @@
         title: [{ type: i0.Input }],
         theme: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
+        iconAfterLabel: [{ type: i0.Input }],
         isBold: [{ type: i0.Input }],
         iconColor: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
@@ -2976,10 +2977,9 @@
             }
         };
         DrDropdownComponent.prototype.tooltipToShow = function (act) {
-            if (act.toolTipIfDisabled || this.disabled(act) || !act.toolTip) {
+            if (act.toolTipIfDisabled && !this.disabled(act) && !act.toolTip)
                 return '';
-            }
-            return act.toolTip ? act.toolTip : act.title;
+            return act.toolTip || act.title;
         };
         DrDropdownComponent.prototype.action = function (act) {
             if (!this.disabled(act)) {
@@ -3004,9 +3004,9 @@
     DrDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-dropdown',
-                    template: "<div #menuContainer\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"'top'\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div #menuContainer\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"'top'\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f6f7f8}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc;pointer-events:none}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(45%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
+                    styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::ng-deep .cdk-overlay-container{z-index:10400}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f6f7f8}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(45%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
                 },] }
     ];
     DrDropdownComponent.ctorParameters = function () { return [
@@ -3241,6 +3241,322 @@
         tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
     };
 
+    var DrAccordionComponent = /** @class */ (function () {
+        function DrAccordionComponent() {
+            this.openCloseItems = new rxjs.Subject();
+            this.multiValue = false;
+        }
+        Object.defineProperty(DrAccordionComponent.prototype, "multi", {
+            /**
+             *  Allow multiple items to be expanded at the same time.
+             */
+            get: function () {
+                return this.multiValue;
+            },
+            set: function (val) {
+                this.multiValue = !!val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Opens all enabled accordion items.
+         */
+        DrAccordionComponent.prototype.openAll = function () {
+            if (this.multi) {
+                this.openCloseItems.next(false);
+            }
+        };
+        /**
+         * Closes all enabled accordion items.
+         */
+        DrAccordionComponent.prototype.closeAll = function () {
+            this.openCloseItems.next(true);
+        };
+        return DrAccordionComponent;
+    }());
+    DrAccordionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion',
+                    template: '<ng-content select="dr-accordion-item"></ng-content>',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
+                },] }
+    ];
+    DrAccordionComponent.propDecorators = {
+        multi: [{ type: i0.Input, args: ['multi',] }]
+    };
+
+    var DrAccordionItemComponent = /** @class */ (function () {
+        function DrAccordionItemComponent(accordion, cd) {
+            this.accordion = accordion;
+            this.cd = cd;
+            /**
+             * Emits whenever the expanded state of the accordion changes.
+             * Primarily used to facilitate two-way binding.
+             */
+            this.collapsedChange = new i0.EventEmitter();
+            this.accordionItemInvalidate = new rxjs.Subject();
+            this.collapsedValue = true;
+            this.disabledValue = false;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemComponent.prototype, "collapsed", {
+            /**
+             * Item is collapse (`true` by default)
+             * @type {boolean}
+             */
+            get: function () {
+                return this.collapsedValue;
+            },
+            set: function (val) {
+                this.collapsedValue = !!val;
+                this.collapsedChange.emit(this.collapsedValue);
+                this.invalidate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemComponent.prototype, "expanded", {
+            /**
+             * Item is expanded (`false` by default)
+             */
+            get: function () {
+                return !this.collapsed;
+            },
+            set: function (val) {
+                this.collapsedValue = !val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemComponent.prototype, "disabled", {
+            /**
+             * Item is disabled and cannot be opened.
+             * @type {boolean}
+             */
+            get: function () {
+                return this.disabledValue;
+            },
+            set: function (val) {
+                this.disabledValue = !!val;
+                this.invalidate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Open/close the item
+         */
+        DrAccordionItemComponent.prototype.toggle = function () {
+            if (!this.disabled) {
+                // we need this temporary variable as `openCloseItems.next` will change current value we need to save
+                var willSet = !this.collapsed;
+                if (!this.accordion.multi) {
+                    this.accordion.openCloseItems.next(true);
+                }
+                this.collapsed = willSet;
+            }
+        };
+        /**
+         * Open the item.
+         */
+        DrAccordionItemComponent.prototype.open = function () {
+            if (!this.disabled) {
+                this.collapsed = false;
+            }
+        };
+        /**
+         * Collapse the item.
+         */
+        DrAccordionItemComponent.prototype.close = function () {
+            if (!this.disabled) {
+                this.collapsed = true;
+            }
+        };
+        DrAccordionItemComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordion.openCloseItems
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function (collapsed) {
+                if (!_this.disabled) {
+                    _this.collapsed = collapsed;
+                }
+            });
+        };
+        DrAccordionItemComponent.prototype.ngOnChanges = function (changes) {
+            this.accordionItemInvalidate.next(true);
+        };
+        DrAccordionItemComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.accordionItemInvalidate.complete();
+        };
+        DrAccordionItemComponent.prototype.invalidate = function () {
+            this.accordionItemInvalidate.next(true);
+            this.cd.markForCheck();
+        };
+        return DrAccordionItemComponent;
+    }());
+    DrAccordionItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item',
+                    template: "\n    <ng-content select=\"dr-accordion-item-header\"></ng-content>\n    <ng-content select=\"dr-accordion-item-body\"></ng-content>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{background-color:#fff;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:16px;font-weight:400;line-height:1.25rem;display:flex;flex-direction:column}\n"]
+                },] }
+    ];
+    DrAccordionItemComponent.ctorParameters = function () { return [
+        { type: DrAccordionComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrAccordionItemComponent.propDecorators = {
+        collapsed: [{ type: i0.Input, args: ['collapsed',] }, { type: i0.HostBinding, args: ['class.collapsed',] }],
+        expanded: [{ type: i0.Input, args: ['expanded',] }, { type: i0.HostBinding, args: ['class.expanded',] }],
+        disabled: [{ type: i0.Input, args: ['disabled',] }, { type: i0.HostBinding, args: ['class.disabled',] }],
+        collapsedChange: [{ type: i0.Output }]
+    };
+
+    var DrAccordionItemHeaderComponent = /** @class */ (function () {
+        function DrAccordionItemHeaderComponent(accordionItem, cd) {
+            this.accordionItem = accordionItem;
+            this.cd = cd;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "isCollapsed", {
+            get: function () {
+                return this.accordionItem.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "expanded", {
+            get: function () {
+                return !this.accordionItem.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "tabbable", {
+            get: function () {
+                return this.accordionItem.disabled ? '-1' : '0';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "disabled", {
+            get: function () {
+                return this.accordionItem.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemHeaderComponent.prototype.toggle = function () {
+            this.accordionItem.toggle();
+        };
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "state", {
+            get: function () {
+                if (this.isCollapsed) {
+                    return 'collapsed';
+                }
+                return 'expanded';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemHeaderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordionItem.accordionItemInvalidate
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.cd.markForCheck(); });
+        };
+        DrAccordionItemHeaderComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return DrAccordionItemHeaderComponent;
+    }());
+    DrAccordionItemHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item-header',
+                    template: "\n    <ng-content select=\"dr-accordion-item-title\"></ng-content>\n    <ng-content select=\"dr-accordion-item-description\"></ng-content>\n    <ng-content></ng-content>\n    <i class=\"dr-icon-arrow-down expansion-indicator\"\n       [@expansionIndicator]=\"state\"\n       *ngIf=\"!disabled\">\n    </i>\n  ",
+                    animations: [
+                        animations.trigger('expansionIndicator', [
+                            animations.state('expanded', animations.style({
+                                transform: 'rotate(180deg)',
+                            })),
+                            animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
+                            animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
+                        ]),
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:flex;align-items:center;cursor:pointer;position:relative;border-bottom:1px solid #edf1f7;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:13px;font-weight:600;line-height:1.5rem;padding:1.25rem;text-transform:capitalize}:host:focus{outline:0}:host .expansion-indicator{font-size:24px;position:absolute;right:10px;font-weight:700}\n"]
+                },] }
+    ];
+    DrAccordionItemHeaderComponent.ctorParameters = function () { return [
+        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrAccordionItemHeaderComponent.propDecorators = {
+        isCollapsed: [{ type: i0.HostBinding, args: ['class.accordion-item-header-collapsed',] }],
+        expanded: [{ type: i0.HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: i0.HostBinding, args: ['attr.aria-expanded',] }],
+        tabbable: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
+        disabled: [{ type: i0.HostBinding, args: ['attr.aria-disabled',] }],
+        toggle: [{ type: i0.HostListener, args: ['click',] }, { type: i0.HostListener, args: ['keydown.space',] }, { type: i0.HostListener, args: ['keydown.enter',] }]
+    };
+
+    var accordionItemBodyTrigger = animations.trigger('accordionItemBody', [
+        animations.state('collapsed', animations.style({
+            overflow: 'hidden',
+            visibility: 'hidden',
+            height: 0,
+        })),
+        animations.state('expanded', animations.style({
+            overflow: 'hidden',
+            visibility: 'visible',
+        })),
+        animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
+        animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
+    ]);
+    var DrAccordionItemBodyComponent = /** @class */ (function () {
+        function DrAccordionItemBodyComponent(accordionItem, cd) {
+            this.accordionItem = accordionItem;
+            this.cd = cd;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemBodyComponent.prototype, "state", {
+            get: function () {
+                return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemBodyComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordionItem.accordionItemInvalidate
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.cd.markForCheck(); });
+        };
+        DrAccordionItemBodyComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return DrAccordionItemBodyComponent;
+    }());
+    DrAccordionItemBodyComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item-body',
+                    template: "\n    <div [@accordionItemBody]=\"{ value: state }\">\n      <div class=\"item-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    animations: [accordionItemBodyTrigger],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
+                },] }
+    ];
+    DrAccordionItemBodyComponent.ctorParameters = function () { return [
+        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
     var components$2 = [DateTagComponent,
         DayTagComponent,
         WeekTagComponent,
@@ -3491,6 +3807,26 @@
                 },] }
     ];
 
+    var DR_ACCORDION_COMPONENTS = [
+        DrAccordionComponent,
+        DrAccordionItemComponent,
+        DrAccordionItemHeaderComponent,
+        DrAccordionItemBodyComponent,
+    ];
+    var DrAccordionModule = /** @class */ (function () {
+        function DrAccordionModule() {
+        }
+        return DrAccordionModule;
+    }());
+    DrAccordionModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    exports: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
+                    declarations: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
+                    providers: [],
+                },] }
+    ];
+
     /* components */
 
     /**
@@ -3502,6 +3838,11 @@
     exports.DateTagComponent = DateTagComponent;
     exports.DateTagModule = DateTagModule;
     exports.DayTagComponent = DayTagComponent;
+    exports.DrAccordionComponent = DrAccordionComponent;
+    exports.DrAccordionItemBodyComponent = DrAccordionItemBodyComponent;
+    exports.DrAccordionItemComponent = DrAccordionItemComponent;
+    exports.DrAccordionItemHeaderComponent = DrAccordionItemHeaderComponent;
+    exports.DrAccordionModule = DrAccordionModule;
     exports.DrAvatarComponent = DrAvatarComponent;
     exports.DrAvatarModule = DrAvatarModule;
     exports.DrAvatarPipe = DrAvatarPipe;