@datarailsshared/datarailsshared 1.4.182 → 1.4.183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bundles/datarailsshared-datarailsshared.umd.js +16 -70
  2. package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
  3. package/datarailsshared-datarailsshared-1.4.183.tgz +0 -0
  4. package/datarailsshared-datarailsshared.metadata.json +1 -1
  5. package/esm2015/lib/dr-inputs/button/button.component.js +17 -59
  6. package/fesm2015/datarailsshared-datarailsshared.js +16 -58
  7. package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
  8. package/lib/dr-inputs/button/button.component.d.ts +7 -11
  9. package/package.json +1 -1
  10. package/datarailsshared-datarailsshared-1.4.182.tgz +0 -0
package/esm2015/lib/dr-inputs/button/button.component.js CHANGED
@@ -1,37 +1,14 @@
1
1
  import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
2
2
  export class DrButtonComponent {
3
3
  constructor() {
4
- this._disabled = null;
5
- this._isLoading = false;
6
- this._elementClass = [];
7
4
  this.theme = 'primary';
8
- this.isBold = false;
5
+ this.iconSize = '24px';
6
+ this.iconAfterSize = '24px';
7
+ this.disabled = false;
8
+ this.isLoading = false;
9
+ this.isActive = false;
9
10
  this.click = new EventEmitter();
10
11
  }
11
- set disabled(value) {
12
- if (value) {
13
- this._elementClass.push('disabled');
14
- }
15
- else {
16
- this._elementClass = this._elementClass.filter(item => item !== 'disabled');
17
- }
18
- this._disabled = value;
19
- }
20
- set isLoading(value) {
21
- if (value) {
22
- this._elementClass.push('loading');
23
- }
24
- else {
25
- this._elementClass = this._elementClass.filter(item => item !== 'loading');
26
- }
27
- this._isLoading = !!value;
28
- }
29
- get elementClass() {
30
- return this._elementClass.join(' ');
31
- }
32
- set(val) {
33
- this._elementClass = val.split(' ');
34
- }
35
12
  onClick($event) {
36
13
  $event.preventDefault();
37
14
  $event.stopPropagation();
@@ -41,41 +18,22 @@ export class DrButtonComponent {
41
18
  DrButtonComponent.decorators = [
42
19
  { type: Component, args: [{
43
20
  selector: 'dr-button',
44
- 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.font-size]=\"iconSize || '24px'\" [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\"\n [style.color]=\"iconColor || 'inherit'\"></i>\n </ng-container>\n <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\n</button>\n",
45
- 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}: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-secondary-first],:host button[theme][theme~=split-secondary-first]:hover{padding-left:10px;padding-right:8px}:host button[theme][theme~=split-secondary-first][icon=true]{padding-left:6px;padding-right:2px}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{padding-left:12px;padding-right:9px}: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}: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-secondary-last],:host button[theme][theme~=split-secondary-last]:hover{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]{padding-left:2px;padding-right:6px}:host button[theme][theme~=split-primary-last]{padding-left:9px;padding-right:12px}:host button[theme][theme~=split-primary-last][icon=true]{padding-left:1px!important;padding-right:6px}:host button[theme][theme~=split-primary-last]:hover{padding-left:9px;padding-right:12px}:host button[theme][theme~=split-primary-last]:hover[icon=true]{padding-left:1px!important;padding-right:6px}: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;padding:4px 8px;background:transparent;border-radius:4px;font-size:14px;font-style:normal;font-weight:400;line-height:22px;color:#6d6e6f;white-space:nowrap}:host button[theme][theme~=ghost] i{margin:0 4px 0 0}:host button[theme][theme~=ghost]:hover{background:#f5f5f5;color:#333}:host button[theme][theme~=ghost]:active:not([disabled]){color:#4646ce;background:#f2f2fb}: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],:host.dr-button-selected button[theme][theme~=secondary-icon]{background-color:#f2f2fb;border:1px solid #4646ce}\n"]
21
+ template: "<button (click)=\"onClick($event)\"\n [disabled]=\"disabled\">\n <i *ngIf=\"icon\"\n class=\"dr-button__icon\"\n [class]=\"icon\"\n [style.font-size]=\"iconSize\"\n [style.color]=\"iconColor || 'inherit'\">\n </i>\n <ng-content></ng-content>\n <div *ngIf=\"isLoading\"\n class=\"dr-button__spinner\">\n <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n </div>\n <i *ngIf=\"iconAfter\"\n class=\"dr-button__icon dr-button__icon--after\"\n [class]=\"iconAfter\"\n [style.font-size]=\"iconAfterSize\"\n [style.color]=\"iconAfterColor || 'inherit'\">\n </i>\n</button>\n",
22
+ styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;font-family:\"Poppins\",sans-serif;font-weight:400;font-size:14px;font-style:normal;line-height:22px;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;left:0;right:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646CE;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258C;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#FFFFFF;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#F5F5F5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#EAEAFF;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#DFE0E3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#EAEAFF;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646CE;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258C;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#FFFFFF;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#F5F5F5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#EAEAFF;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#FFFFFF}:host.ghost button:hover{color:#333;background:#F5F5F5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#EAEAFF;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#FFFFFF;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#F5F5F5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#EAEAFF;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#F0F1F4;border-color:#aeabac}:host.link button{border:none;background:none;color:#4646ce;padding:0 4px}:host.link button:hover,:host.link.active button,:host.link button:active{text-decoration:underline}:host.link.disabled button{color:#aeabac}:host.danger button{color:#fff;background:#BF1D30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
46
23
  },] }
47
24
  ];
48
25
  DrButtonComponent.ctorParameters = () => [];
49
26
  DrButtonComponent.propDecorators = {
50
- title: [{ type: Input }],
51
- theme: [{ type: Input }],
52
- icon: [{ type: Input }],
53
- iconAfterLabel: [{ type: Input }],
54
- isBold: [{ type: Input }],
27
+ theme: [{ type: Input }, { type: HostBinding, args: ['class',] }],
28
+ icon: [{ type: Input }, { type: HostBinding, args: ['class.with-icon',] }],
55
29
  iconColor: [{ type: Input }],
56
30
  iconSize: [{ type: Input }],
57
- disabled: [{ type: Input }],
58
- isLoading: [{ type: Input }],
59
- click: [{ type: Output }],
60
- elementClass: [{ type: HostBinding, args: ['class',] }]
31
+ iconAfter: [{ type: Input }, { type: HostBinding, args: ['class.with-icon-after',] }],
32
+ iconAfterColor: [{ type: Input }],
33
+ iconAfterSize: [{ type: Input }],
34
+ disabled: [{ type: Input }, { type: HostBinding, args: ['class.disabled',] }],
35
+ isLoading: [{ type: Input }, { type: HostBinding, args: ['class.loading',] }],
36
+ isActive: [{ type: Input }, { type: HostBinding, args: ['class.active',] }],
37
+ click: [{ type: Output }]
61
38
  };
62
- // Examples:
63
- /*
64
- <dr-button [icon]="'dr-icon-arrow-down'">hello</dr-button>
65
- <dr-button [icon]="'dr-icon-refresh'" [theme]="'primary-icon'"></dr-button>
66
- <dr-button [icon]="'dr-icon-refresh'" [isDisabled]="true" [theme]="'primary-icon'"></dr-button>
67
- <dr-button [theme]="'secondary'" [icon]="'dr-icon-excel'" [iconColor]="'#03A678'"></dr-button>
68
-
69
- <dr-button [icon]="'dr-icon-refresh'" [theme]="'secondary-icon'"></dr-button>
70
- <dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'secondary-icon'"></dr-button>
71
-
72
- <dr-button [icon]="'dr-icon-share'" [theme]="'icon'"></dr-button>
73
- <dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'icon'"></dr-button>
74
-
75
- <dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'">Primary</dr-button>
76
- <dr-button [isDisabled]="false" >Primary</dr-button>
77
- <dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'" [theme]="'secondary'">Secondary</dr-button>
78
- <dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'" [theme]="'ghost'">Ghost</dr-button>
79
- <dr-button [isDisabled]="false" [theme]="'text-link'">Text Link</dr-button>
80
- */
81
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQVdwRixNQUFNLE9BQU8saUJBQWlCO0lBMkMxQjtRQXpDQSxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsa0JBQWEsR0FBYSxFQUFFLENBQUM7UUFHcEIsVUFBSyxHQUFlLFNBQVMsQ0FBQztRQUc5QixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBc0JkLFVBQUssR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBWXJDLENBQUM7SUE5QkQsSUFBYSxRQUFRLENBQUMsS0FBSztRQUN2QixJQUFJLEtBQUssRUFBRTtZQUNQLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQ3ZDO2FBQU07WUFDSCxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxLQUFLLFVBQVUsQ0FBQyxDQUFDO1NBQy9FO1FBQ0QsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQWEsU0FBUyxDQUFDLEtBQUs7UUFDeEIsSUFBSSxLQUFLLEVBQUU7WUFDUCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztTQUN0QzthQUFNO1lBQ0gsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxTQUFTLENBQUMsQ0FBQztTQUM5RTtRQUNELElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBSUQsSUFDSSxZQUFZO1FBQ1osT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsR0FBRyxDQUFDLEdBQVc7UUFDWCxJQUFJLENBQUMsYUFBYSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUtNLE9BQU8sQ0FBQyxNQUFNO1FBQ2pCLE1BQU0sQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixNQUFNLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7O1lBdkRKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsV0FBVztnQkFDckIscXdCQUFzQzs7YUFFekM7Ozs7b0JBT0ksS0FBSztvQkFDTCxLQUFLO21CQUNMLEtBQUs7NkJBQ0wsS0FBSztxQkFDTCxLQUFLO3dCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFFTCxLQUFLO3dCQVNMLEtBQUs7b0JBU0wsTUFBTTsyQkFFTixXQUFXLFNBQUMsT0FBTzs7QUFtQnhCLGFBQWE7QUFDYjs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFpQkUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxudHlwZSBCdXR0b25UeXBlID0gJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAnZGFuZ2VyJyB8ICdwcmltYXJ5LWljb24nIHxcbiAgICAnc2Vjb25kYXJ5LWljb24nIHwgJ2ljb24nIHwgJ3ByaW1hcnktc3F1YXJlJyB8ICdnaG9zdCcgfCAnbGluay1idG4nIHwgJ3RleHQtbGluaycgfCAnc2ltcGxlLXRleHQnIHxcbiAgICAnc3BsaXQtcHJpbWFyeS1maXJzdCcgfCAnc3BsaXQtcHJpbWFyeS1sYXN0JyB8ICdzcGxpdC1zZWNvbmRhcnktZmlyc3QnIHwgJ3NwbGl0LXNlY29uZGFyeS1sYXN0JyB8ICdkcm9wZG93bic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZHItYnV0dG9uJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEckJ1dHRvbkNvbXBvbmVudCB7XG5cbiAgICBfZGlzYWJsZWQgPSBudWxsO1xuICAgIF9pc0xvYWRpbmcgPSBmYWxzZTtcbiAgICBfZWxlbWVudENsYXNzOiBzdHJpbmdbXSA9IFtdO1xuXG4gICAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcbiAgICBASW5wdXQoKSB0aGVtZTogQnV0dG9uVHlwZSA9ICdwcmltYXJ5JztcbiAgICBASW5wdXQoKSBpY29uOiBzdHJpbmc7XG4gICAgQElucHV0KCkgaWNvbkFmdGVyTGFiZWw6IHN0cmluZztcbiAgICBASW5wdXQoKSBpc0JvbGQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBpY29uQ29sb3I6IHN0cmluZztcbiAgICBASW5wdXQoKSBpY29uU2l6ZTogc3RyaW5nO1xuXG4gICAgQElucHV0KCkgc2V0IGRpc2FibGVkKHZhbHVlKSB7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5fZWxlbWVudENsYXNzLnB1c2goJ2Rpc2FibGVkJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLl9lbGVtZW50Q2xhc3MgPSB0aGlzLl9lbGVtZW50Q2xhc3MuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gJ2Rpc2FibGVkJyk7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5fZGlzYWJsZWQgPSB2YWx1ZTtcbiAgICB9XG5cbiAgICBASW5wdXQoKSBzZXQgaXNMb2FkaW5nKHZhbHVlKSB7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5fZWxlbWVudENsYXNzLnB1c2goJ2xvYWRpbmcnKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMuX2VsZW1lbnRDbGFzcyA9IHRoaXMuX2VsZW1lbnRDbGFzcy5maWx0ZXIoaXRlbSA9PiBpdGVtICE9PSAnbG9hZGluZycpO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuX2lzTG9hZGluZyA9ICEhdmFsdWU7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpIGNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gICAgZ2V0IGVsZW1lbnRDbGFzcygpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5fZWxlbWVudENsYXNzLmpvaW4oJyAnKTtcbiAgICB9XG5cbiAgICBzZXQodmFsOiBzdHJpbmcpIHtcbiAgICAgICAgdGhpcy5fZWxlbWVudENsYXNzID0gdmFsLnNwbGl0KCcgJyk7XG4gICAgfVxuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgfVxuXG4gICAgcHVibGljIG9uQ2xpY2soJGV2ZW50KSB7XG4gICAgICAgICRldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIHRoaXMuY2xpY2suZW1pdCgkZXZlbnQpO1xuICAgIH1cbn1cblxuLy8gIEV4YW1wbGVzOlxuLypcbjxkci1idXR0b24gW2ljb25dPVwiJ2RyLWljb24tYXJyb3ctZG93bidcIj5oZWxsbzwvZHItYnV0dG9uPlxuPGRyLWJ1dHRvbiBbaWNvbl09XCInZHItaWNvbi1yZWZyZXNoJ1wiIFt0aGVtZV09XCIncHJpbWFyeS1pY29uJ1wiPjwvZHItYnV0dG9uPlxuPGRyLWJ1dHRvbiBbaWNvbl09XCInZHItaWNvbi1yZWZyZXNoJ1wiIFtpc0Rpc2FibGVkXT1cInRydWVcIiBbdGhlbWVdPVwiJ3ByaW1hcnktaWNvbidcIj48L2RyLWJ1dHRvbj5cbjxkci1idXR0b24gW3RoZW1lXT1cIidzZWNvbmRhcnknXCIgW2ljb25dPVwiJ2RyLWljb24tZXhjZWwnXCIgW2ljb25Db2xvcl09XCInIzAzQTY3OCdcIj48L2RyLWJ1dHRvbj5cblxuPGRyLWJ1dHRvbiBbaWNvbl09XCInZHItaWNvbi1yZWZyZXNoJ1wiIFt0aGVtZV09XCInc2Vjb25kYXJ5LWljb24nXCI+PC9kci1idXR0b24+XG48ZHItYnV0dG9uIFtpY29uXT1cIidkci1pY29uLXNoYXJlJ1wiIFtpc0Rpc2FibGVkXT1cInRydWVcIiBbdGhlbWVdPVwiJ3NlY29uZGFyeS1pY29uJ1wiPjwvZHItYnV0dG9uPlxuXG48ZHItYnV0dG9uIFtpY29uXT1cIidkci1pY29uLXNoYXJlJ1wiIFt0aGVtZV09XCInaWNvbidcIj48L2RyLWJ1dHRvbj5cbjxkci1idXR0b24gW2ljb25dPVwiJ2RyLWljb24tc2hhcmUnXCIgW2lzRGlzYWJsZWRdPVwidHJ1ZVwiIFt0aGVtZV09XCInaWNvbidcIj48L2RyLWJ1dHRvbj5cblxuPGRyLWJ1dHRvbiBbaXNEaXNhYmxlZF09XCJmYWxzZVwiIFtpY29uXT1cIidkci1pY29uLXJlZnJlc2gnXCI+UHJpbWFyeTwvZHItYnV0dG9uPlxuPGRyLWJ1dHRvbiBbaXNEaXNhYmxlZF09XCJmYWxzZVwiID5QcmltYXJ5PC9kci1idXR0b24+XG48ZHItYnV0dG9uIFtpc0Rpc2FibGVkXT1cImZhbHNlXCIgW2ljb25dPVwiJ2RyLWljb24tcmVmcmVzaCdcIiBbdGhlbWVdPVwiJ3NlY29uZGFyeSdcIj5TZWNvbmRhcnk8L2RyLWJ1dHRvbj5cbjxkci1idXR0b24gW2lzRGlzYWJsZWRdPVwiZmFsc2VcIiBbaWNvbl09XCInZHItaWNvbi1yZWZyZXNoJ1wiIFt0aGVtZV09XCInZ2hvc3QnXCI+R2hvc3Q8L2RyLWJ1dHRvbj5cbjxkci1idXR0b24gW2lzRGlzYWJsZWRdPVwiZmFsc2VcIiBbdGhlbWVdPVwiJ3RleHQtbGluaydcIj5UZXh0IExpbms8L2RyLWJ1dHRvbj5cbiovXG4iXX0=
39
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQXNCcEYsTUFBTSxPQUFPLGlCQUFpQjtJQWlDMUI7UUE3QkEsVUFBSyxHQUFlLFNBQVMsQ0FBQztRQU1yQixhQUFRLEdBQUcsTUFBTSxDQUFDO1FBTWxCLGtCQUFhLEdBQUcsTUFBTSxDQUFDO1FBS2hDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFJakIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUlsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRVAsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFHckMsQ0FBQztJQUVNLE9BQU8sQ0FBQyxNQUFNO1FBQ2pCLE1BQU0sQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixNQUFNLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7O1lBN0NKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsV0FBVztnQkFDckIsMnFCQUFzQzs7YUFFekM7Ozs7b0JBR0ksS0FBSyxZQUNMLFdBQVcsU0FBQyxPQUFPO21CQUduQixLQUFLLFlBQ0wsV0FBVyxTQUFDLGlCQUFpQjt3QkFFN0IsS0FBSzt1QkFDTCxLQUFLO3dCQUVMLEtBQUssWUFDTCxXQUFXLFNBQUMsdUJBQXVCOzZCQUVuQyxLQUFLOzRCQUNMLEtBQUs7dUJBR0wsS0FBSyxZQUNMLFdBQVcsU0FBQyxnQkFBZ0I7d0JBRzVCLEtBQUssWUFDTCxXQUFXLFNBQUMsZUFBZTt1QkFHM0IsS0FBSyxZQUNMLFdBQVcsU0FBQyxjQUFjO29CQUcxQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbnR5cGUgQnV0dG9uVHlwZSA9XG4gICAgJ3ByaW1hcnknIHxcbiAgICAnc3BsaXQtcHJpbWFyeS1maXJzdCcgfFxuICAgICdzcGxpdC1wcmltYXJ5LWxhc3QnIHxcbiAgICAnc2Vjb25kYXJ5JyB8XG4gICAgJ3NwbGl0LXNlY29uZGFyeS1maXJzdCcgfFxuICAgICdzcGxpdC1zZWNvbmRhcnktbGFzdCcgfFxuICAgICdpY29uJyB8XG4gICAgJ2ljb24tcHJpbWFyeScgfFxuICAgICdpY29uLXNlY29uZGFyeScgIHxcbiAgICAnZ2hvc3QnIHxcbiAgICAnc2VsZWN0aW9uJyB8XG4gICAgJ2xpbmsnIHxcbiAgICAnZGFuZ2VyJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdkci1idXR0b24nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyQnV0dG9uQ29tcG9uZW50IHtcblxuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gICAgdGhlbWU6IEJ1dHRvblR5cGUgPSAncHJpbWFyeSc7XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnY2xhc3Mud2l0aC1pY29uJylcbiAgICBpY29uOiBzdHJpbmc7XG4gICAgQElucHV0KCkgaWNvbkNvbG9yOiBzdHJpbmc7XG4gICAgQElucHV0KCkgaWNvblNpemUgPSAnMjRweCc7XG5cbiAgICBASW5wdXQoKVxuICAgIEBIb3N0QmluZGluZygnY2xhc3Mud2l0aC1pY29uLWFmdGVyJylcbiAgICBpY29uQWZ0ZXI6IHN0cmluZztcbiAgICBASW5wdXQoKSBpY29uQWZ0ZXJDb2xvcjogc3RyaW5nO1xuICAgIEBJbnB1dCgpIGljb25BZnRlclNpemUgPSAnMjRweCc7XG5cblxuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kaXNhYmxlZCcpXG4gICAgZGlzYWJsZWQgPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5sb2FkaW5nJylcbiAgICBpc0xvYWRpbmcgPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hY3RpdmUnKVxuICAgIGlzQWN0aXZlID0gZmFsc2U7XG5cbiAgICBAT3V0cHV0KCkgY2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICB9XG5cbiAgICBwdWJsaWMgb25DbGljaygkZXZlbnQpIHtcbiAgICAgICAgJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgdGhpcy5jbGljay5lbWl0KCRldmVudCk7XG4gICAgfVxufVxuIl19
package/fesm2015/datarailsshared-datarailsshared.js CHANGED
@@ -2095,37 +2095,14 @@ DrSpinnerDirective.propDecorators = {
2095
2095
 
2096
2096
  class DrButtonComponent {
2097
2097
  constructor() {
2098
- this._disabled = null;
2099
- this._isLoading = false;
2100
- this._elementClass = [];
2101
2098
  this.theme = 'primary';
2102
- this.isBold = false;
2099
+ this.iconSize = '24px';
2100
+ this.iconAfterSize = '24px';
2101
+ this.disabled = false;
2102
+ this.isLoading = false;
2103
+ this.isActive = false;
2103
2104
  this.click = new EventEmitter();
2104
2105
  }
2105
- set disabled(value) {
2106
- if (value) {
2107
- this._elementClass.push('disabled');
2108
- }
2109
- else {
2110
- this._elementClass = this._elementClass.filter(item => item !== 'disabled');
2111
- }
2112
- this._disabled = value;
2113
- }
2114
- set isLoading(value) {
2115
- if (value) {
2116
- this._elementClass.push('loading');
2117
- }
2118
- else {
2119
- this._elementClass = this._elementClass.filter(item => item !== 'loading');
2120
- }
2121
- this._isLoading = !!value;
2122
- }
2123
- get elementClass() {
2124
- return this._elementClass.join(' ');
2125
- }
2126
- set(val) {
2127
- this._elementClass = val.split(' ');
2128
- }
2129
2106
  onClick($event) {
2130
2107
  $event.preventDefault();
2131
2108
  $event.stopPropagation();
@@ -2135,43 +2112,24 @@ class DrButtonComponent {
2135
2112
  DrButtonComponent.decorators = [
2136
2113
  { type: Component, args: [{
2137
2114
  selector: 'dr-button',
2138
- 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.font-size]=\"iconSize || '24px'\" [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\"\n [style.color]=\"iconColor || 'inherit'\"></i>\n </ng-container>\n <i *ngIf=\"_isLoading\" class=\"dr dr-spinner dr-icon-load\"></i>\n</button>\n",
2139
- 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}: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-secondary-first],:host button[theme][theme~=split-secondary-first]:hover{padding-left:10px;padding-right:8px}:host button[theme][theme~=split-secondary-first][icon=true]{padding-left:6px;padding-right:2px}:host button[theme][theme~=split-primary-first],:host button[theme][theme~=split-primary-first]:hover{padding-left:12px;padding-right:9px}: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}: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-secondary-last],:host button[theme][theme~=split-secondary-last]:hover{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]{padding-left:2px;padding-right:6px}:host button[theme][theme~=split-primary-last]{padding-left:9px;padding-right:12px}:host button[theme][theme~=split-primary-last][icon=true]{padding-left:1px!important;padding-right:6px}:host button[theme][theme~=split-primary-last]:hover{padding-left:9px;padding-right:12px}:host button[theme][theme~=split-primary-last]:hover[icon=true]{padding-left:1px!important;padding-right:6px}: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;padding:4px 8px;background:transparent;border-radius:4px;font-size:14px;font-style:normal;font-weight:400;line-height:22px;color:#6d6e6f;white-space:nowrap}:host button[theme][theme~=ghost] i{margin:0 4px 0 0}:host button[theme][theme~=ghost]:hover{background:#f5f5f5;color:#333}:host button[theme][theme~=ghost]:active:not([disabled]){color:#4646ce;background:#f2f2fb}: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],:host.dr-button-selected button[theme][theme~=secondary-icon]{background-color:#f2f2fb;border:1px solid #4646ce}\n"]
2115
+ template: "<button (click)=\"onClick($event)\"\n [disabled]=\"disabled\">\n <i *ngIf=\"icon\"\n class=\"dr-button__icon\"\n [class]=\"icon\"\n [style.font-size]=\"iconSize\"\n [style.color]=\"iconColor || 'inherit'\">\n </i>\n <ng-content></ng-content>\n <div *ngIf=\"isLoading\"\n class=\"dr-button__spinner\">\n <i [style.font-size]=\"iconSize\" class=\"dr-icon-load\"></i>\n </div>\n <i *ngIf=\"iconAfter\"\n class=\"dr-button__icon dr-button__icon--after\"\n [class]=\"iconAfter\"\n [style.font-size]=\"iconAfterSize\"\n [style.color]=\"iconAfterColor || 'inherit'\">\n </i>\n</button>\n",
2116
+ styles: [":host{display:inline-block}:host.disabled,:host.loading{pointer-events:none}:host button{position:relative;display:flex;align-items:center;flex-wrap:nowrap;cursor:pointer;font-family:\"Poppins\",sans-serif;font-weight:400;font-size:14px;font-style:normal;line-height:22px;border-radius:16px;padding:4px 16px;height:32px;border:1px solid}:host button .dr-button__spinner{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;left:0;right:0;background:inherit;border-radius:inherit}:host button .dr-button__spinner i{animation-name:rotate;animation-iteration-count:infinite;animation-duration:1s}:host.with-icon button{padding-left:8px}:host.with-icon button i:first-child{margin-right:4px}:host.with-icon-after button{padding-right:8px}:host.with-icon-after button i:last-child{margin-left:4px}:host.split-primary-first button,:host.split-secondary-first button{border-bottom-right-radius:0;border-top-right-radius:0;padding-right:8px}:host.split-primary-last button,:host.split-secondary-last button{border-bottom-left-radius:0;border-top-left-radius:0;padding-right:8px;padding-left:4px;border-left:none}:host.split-primary-last button i,:host.split-secondary-last button i{margin:0!important}:host.primary button,:host.split-primary-first button,:host.split-primary-last button{color:#fff;background:#4646CE;border-color:#4646ce}:host.primary button:hover,:host.split-primary-first button:hover,:host.split-primary-last button:hover{background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.primary.active button,:host.primary button:active,:host.split-primary-first.active button,:host.split-primary-first button:active,:host.split-primary-last.active button,:host.split-primary-last button:active{background:#25258C;border-color:#25258c}:host.primary.disabled button,:host.split-primary-first.disabled button,:host.split-primary-last.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}:host.split-primary-first button{border-right-color:#dfe0e3}:host.split-primary-first.disabled button{border-right-color:#aeabac}:host.secondary button,:host.split-secondary-first button,:host.split-secondary-last button{color:#4646ce;background:#FFFFFF;border-color:#4646ce}:host.secondary button:hover,:host.split-secondary-first button:hover,:host.split-secondary-last button:hover{background:#F5F5F5;box-shadow:0 4px 14px #0000001a}:host.secondary.active button,:host.secondary button:active,:host.split-secondary-first.active button,:host.split-secondary-first button:active,:host.split-secondary-last.active button,:host.split-secondary-last button:active{background:#EAEAFF;box-shadow:none}:host.secondary.disabled button,:host.split-secondary-first.disabled button,:host.split-secondary-last.disabled button{color:#aeabac;border-color:#aeabac}:host.split-secondary-first button{border-right-color:#4646ce}:host.split-secondary-first.disabled button{border-right-color:#aeabac}:host.icon button,:host.icon-primary button,:host.icon-secondary button{width:28px;height:28px;padding:0;justify-content:center}:host.icon button i,:host.icon-primary button i,:host.icon-secondary button i{margin:0!important}:host.icon button{background:transparent;border-color:transparent;color:#6d6e6f}:host.icon button:hover{color:#333;background:#DFE0E3;border-color:#dfe0e3}:host.icon.active button,:host.icon button:active{color:#4646ce;background:#EAEAFF;border-color:#eaeaff}:host.icon.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.icon-primary button{color:#fff;background:#4646CE;border-color:#4646ce}:host.icon-primary button:hover{color:#fff;background:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%);border-color:linear-gradient(96.89deg,#25258C 0%,#4646CE 100%)}:host.icon-primary.active button,:host.icon-primary button:active{color:#fff;background:#25258C;border-color:#25258c}:host.icon-primary.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}:host.icon-secondary button{color:#4646ce;background:#FFFFFF;border-color:#4646ce}:host.icon-secondary button:hover{color:#4646ce;background:#F5F5F5;border-color:#4646ce}:host.icon-secondary.active button,:host.icon-secondary button:active{color:#4646ce;background:#EAEAFF;border-color:#4646ce}:host.icon-secondary.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}:host.ghost button{border-radius:4px;padding:4px;background:transparent;border-color:transparent;color:#6d6e6f}:host.ghost button .dr-button__spinner{color:#4646ce;background:#FFFFFF}:host.ghost button:hover{color:#333;background:#F5F5F5;border-color:#f5f5f5}:host.ghost.active button,:host.ghost button:active{color:#4646ce;background:#EAEAFF;border-color:#eaeaff}:host.ghost.disabled button{color:#aeabac;background:transparent;border-color:transparent}:host.selection button{border-radius:6px;padding:4px 8px;background:#FFFFFF;border-color:#9ea1aa;color:#6d6e6f}:host.selection button:hover{color:#6d6e6f;background:#F5F5F5;border-color:#4e566c}:host.selection.active button,:host.selection button:active{color:#6d6e6f;background:#EAEAFF;border-color:#4646ce}:host.selection.disabled button{color:#aeabac;background:#F0F1F4;border-color:#aeabac}:host.link button{border:none;background:none;color:#4646ce;padding:0 4px}:host.link button:hover,:host.link.active button,:host.link button:active{text-decoration:underline}:host.link.disabled button{color:#aeabac}:host.danger button{color:#fff;background:#BF1D30;border-color:#bf1d30}:host.danger button:hover{background:#981440;border-color:#981440}:host.danger.active button,:host.danger button:active{background:#680325;border-color:#680325}:host.danger.disabled button{color:#aeabac;background:#F0F1F4;border-color:#f0f1f4}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
2140
2117
  },] }
2141
2118
  ];
2142
2119
  DrButtonComponent.ctorParameters = () => [];
2143
2120
  DrButtonComponent.propDecorators = {
2144
- title: [{ type: Input }],
2145
- theme: [{ type: Input }],
2146
- icon: [{ type: Input }],
2147
- iconAfterLabel: [{ type: Input }],
2148
- isBold: [{ type: Input }],
2121
+ theme: [{ type: Input }, { type: HostBinding, args: ['class',] }],
2122
+ icon: [{ type: Input }, { type: HostBinding, args: ['class.with-icon',] }],
2149
2123
  iconColor: [{ type: Input }],
2150
2124
  iconSize: [{ type: Input }],
2151
- disabled: [{ type: Input }],
2152
- isLoading: [{ type: Input }],
2153
- click: [{ type: Output }],
2154
- elementClass: [{ type: HostBinding, args: ['class',] }]
2125
+ iconAfter: [{ type: Input }, { type: HostBinding, args: ['class.with-icon-after',] }],
2126
+ iconAfterColor: [{ type: Input }],
2127
+ iconAfterSize: [{ type: Input }],
2128
+ disabled: [{ type: Input }, { type: HostBinding, args: ['class.disabled',] }],
2129
+ isLoading: [{ type: Input }, { type: HostBinding, args: ['class.loading',] }],
2130
+ isActive: [{ type: Input }, { type: HostBinding, args: ['class.active',] }],
2131
+ click: [{ type: Output }]
2155
2132
  };
2156
- // Examples:
2157
- /*
2158
- <dr-button [icon]="'dr-icon-arrow-down'">hello</dr-button>
2159
- <dr-button [icon]="'dr-icon-refresh'" [theme]="'primary-icon'"></dr-button>
2160
- <dr-button [icon]="'dr-icon-refresh'" [isDisabled]="true" [theme]="'primary-icon'"></dr-button>
2161
- <dr-button [theme]="'secondary'" [icon]="'dr-icon-excel'" [iconColor]="'#03A678'"></dr-button>
2162
-
2163
- <dr-button [icon]="'dr-icon-refresh'" [theme]="'secondary-icon'"></dr-button>
2164
- <dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'secondary-icon'"></dr-button>
2165
-
2166
- <dr-button [icon]="'dr-icon-share'" [theme]="'icon'"></dr-button>
2167
- <dr-button [icon]="'dr-icon-share'" [isDisabled]="true" [theme]="'icon'"></dr-button>
2168
-
2169
- <dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'">Primary</dr-button>
2170
- <dr-button [isDisabled]="false" >Primary</dr-button>
2171
- <dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'" [theme]="'secondary'">Secondary</dr-button>
2172
- <dr-button [isDisabled]="false" [icon]="'dr-icon-refresh'" [theme]="'ghost'">Ghost</dr-button>
2173
- <dr-button [isDisabled]="false" [theme]="'text-link'">Text Link</dr-button>
2174
- */
2175
2133
 
2176
2134
  class DrPopoverRef {
2177
2135
  constructor(overlayRef) {