@datarailsshared/datarailsshared 1.3.29 → 1.3.32

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 (35) hide show
  1. package/bundles/datarailsshared-datarailsshared.umd.js +372 -11
  2. package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
  3. package/datarailsshared-datarailsshared-1.3.32.tgz +0 -0
  4. package/datarailsshared-datarailsshared.metadata.json +1 -1
  5. package/esm2015/lib/dr-accordion/accordion-item-body.component.js +57 -0
  6. package/esm2015/lib/dr-accordion/accordion-item-header.component.js +79 -0
  7. package/esm2015/lib/dr-accordion/accordion-item.component.js +123 -0
  8. package/esm2015/lib/dr-accordion/accordion.component.js +43 -0
  9. package/esm2015/lib/dr-accordion/accordion.module.js +23 -0
  10. package/esm2015/lib/dr-dropdown/dr-dropdown.component.js +1 -1
  11. package/esm2015/lib/dr-inputs/button/button.component.js +2 -2
  12. package/esm2015/lib/dr-inputs/checkbox/checkbox.component.js +1 -1
  13. package/esm2015/lib/dr-inputs/dr-input/dr-input.component.js +18 -3
  14. package/esm2015/lib/dr-inputs/dr-select/dr-select.component.js +1 -1
  15. package/esm2015/lib/dr-inputs/dr-toggle/dr-toggle.component.js +1 -1
  16. package/esm2015/lib/dr-inputs/radio-button/radio-button.component.js +1 -1
  17. package/esm2015/lib/dr-inputs/radio-button/radio-group.component.js +2 -2
  18. package/esm2015/lib/dr-tabs/dr-tab.component.js +1 -1
  19. package/esm2015/lib/dr-tabs/dr-tabs.component.js +4 -3
  20. package/esm2015/lib/dr-tabs/dr-tabs.module.js +2 -2
  21. package/esm2015/public-api.js +6 -1
  22. package/fesm2015/datarailsshared-datarailsshared.js +333 -14
  23. package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
  24. package/lib/dr-accordion/accordion-item-body.component.d.ts +11 -0
  25. package/lib/dr-accordion/accordion-item-header.component.d.ts +16 -0
  26. package/lib/dr-accordion/accordion-item.component.d.ts +53 -0
  27. package/lib/dr-accordion/accordion.component.d.ts +19 -0
  28. package/lib/dr-accordion/accordion.module.d.ts +2 -0
  29. package/lib/dr-inputs/button/button.component.d.ts +1 -1
  30. package/lib/dr-inputs/dr-input/dr-input.component.d.ts +3 -1
  31. package/lib/dr-tabs/dr-tab.component.d.ts +1 -1
  32. package/lib/dr-tabs/dr-tabs.component.d.ts +1 -0
  33. package/package.json +1 -1
  34. package/public-api.d.ts +5 -0
  35. package/datarailsshared-datarailsshared-1.3.29.tgz +0 -0
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Optional, Injector, Injectable, NgModule } from '@angular/core';
2
+ import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Optional, Injector, Injectable, Host, NgModule } from '@angular/core';
3
3
  import { FormControl, NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
4
4
  import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
5
5
  import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -7,7 +7,7 @@ import * as momentImported from 'moment';
7
7
  import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
8
8
  import { Subject, from, merge, fromEvent, noop as noop$1 } from 'rxjs';
9
9
  import { startWith, switchMap, takeUntil, filter, first } from 'rxjs/operators';
10
- import { transition, style, animate, trigger } from '@angular/animations';
10
+ import { transition, style, animate, trigger, state } from '@angular/animations';
11
11
  import * as i1 from '@angular/cdk/overlay';
12
12
  import { Overlay, OverlayPositionBuilder, OverlayConfig } from '@angular/cdk/overlay';
13
13
  import { ComponentPortal } from '@angular/cdk/portal';
@@ -831,7 +831,7 @@ RadioButtonComponent.decorators = [
831
831
  }
832
832
  ],
833
833
  changeDetection: ChangeDetectionStrategy.OnPush,
834
- styles: [":host{display:flex;line-height:22px}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
834
+ styles: [":host{display:flex;line-height:22px}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #8F929E;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:#FFFFFF;border-color:#4646ce;color:#4646ce}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%234646CE\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#4646ce}label input:disabled+span:before{border-color:#8f929e}label input[disabled]:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%238F929E\"/></svg> ');border-color:#8f929e}label span:hover:before{border-color:#4e566c}\n"]
835
835
  },] }
836
836
  ];
837
837
  RadioButtonComponent.ctorParameters = () => [
@@ -876,7 +876,7 @@ class RadioGroupComponent {
876
876
  this.updateDisabled();
877
877
  }
878
878
  ngAfterContentInit() {
879
- // In case option 'name' isn't set on nb-radio component,
879
+ // In case option 'name' isn't set on dr-radio component,
880
880
  // we need to set it's name right away, so it won't overlap with options
881
881
  // without names from other radio groups. Otherwise they all would have
882
882
  // same name and will be considered as options from one group so only the
@@ -1048,7 +1048,7 @@ CheckboxComponent.decorators = [
1048
1048
  { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }
1049
1049
  ],
1050
1050
  changeDetection: ChangeDetectionStrategy.OnPush,
1051
- styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #85889C;background-color:#f4f4f4;font-weight:normal;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#85889c;color:#579bf2;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#579BF2;border-color:#579bf2;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#579BF2;border-color:#579bf2;color:#fff}label input:disabled+span:before{border-color:#bcbcbc;pointer-events:none}label input[disabled]:checked+span:before{background:#BCBCBC;border-color:#bcbcbc;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#F6F7F8;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"]
1051
+ styles: ["input+span{vertical-align:middle;line-height:30px}input+span,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:0}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;min-height:12px;line-height:12px;min-width:12px;margin-right:5px;border:1.5px solid #8F929E;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before,label:hover input+span:before{background-color:#fff;border-color:#8f929e;color:#4646ce;border-radius:2px}label input:checked+span:before,label:hover input:checked+span:before{content:url('data:image/svg+xml; utf8, <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M1 5L4.5 8.5L11 1.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background:#4646CE;border-color:#4646ce;color:#fff}label input:checked+span.cross:before,label:hover input:checked+span.cross:before{content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91786 4.99992L9.03356 1.88386C9.11927 1.79808 9.16654 1.68365 9.16668 1.56162C9.16668 1.43952 9.1194 1.32495 9.03356 1.23931L8.7605 0.966323C8.67466 0.880342 8.56026 0.833252 8.43811 0.833252C8.31615 0.833252 8.20169 0.880342 8.11585 0.966323L5.00016 4.08218L1.88431 0.966323C1.79861 0.880342 1.68407 0.833252 1.56199 0.833252C1.44004 0.833252 1.32559 0.880342 1.23988 0.966323L0.966677 1.23931C0.788899 1.4171 0.788899 1.70628 0.966677 1.88386L4.08245 4.99992L0.966677 8.11584C0.880904 8.20175 0.833707 8.31619 0.833707 8.43822C0.833707 8.56025 0.880904 8.67468 0.966677 8.76053L1.23981 9.03351C1.32551 9.11943 1.44003 9.16658 1.56191 9.16658C1.684 9.16658 1.79853 9.11943 1.88424 9.03351L5.00008 5.91759L8.11578 9.03351C8.20162 9.11943 8.31608 9.16658 8.43803 9.16658C8.56005 9.16658 8.67459 9.11943 8.76043 9.03351L9.03349 8.76053C9.11919 8.67475 9.16646 8.56025 9.16646 8.43822C9.16646 8.31619 9.11919 8.20175 9.03349 8.11591L5.91786 4.99992Z\" fill=\"white\"/></svg>')}label input+span.indeterminate:before,label:hover input+span.indeterminate:before{content:url('data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 2\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25L11 0.250001C11.4142 0.250001 11.75 0.585787 11.75 1C11.75 1.41421 11.4142 1.75 11 1.75L1 1.75C0.585786 1.75 0.25 1.41421 0.25 1Z\" fill=\"white\"/></svg>');background:#4646CE;border-color:#4646ce;color:#fff}label input:disabled+span:before{border-color:#dfe0e3;pointer-events:none}label input[disabled]:checked+span:before{background:#8F929E;border-color:#8f929e;pointer-events:none}label input:not([disabled])+span:hover:after{content:\"\";width:28px;height:28px;background:#F2F2FB;border-radius:50%;position:absolute;left:-6px;top:-5px;z-index:-1}\n"]
1052
1052
  },] }
1053
1053
  ];
1054
1054
  CheckboxComponent.ctorParameters = () => [
@@ -1067,10 +1067,10 @@ class DrInputComponent {
1067
1067
  this.elementRef = elementRef;
1068
1068
  this.renderer = renderer;
1069
1069
  this.cdr = cdr;
1070
+ this._clearable = false;
1070
1071
  this.type = 'string';
1071
1072
  this.placeholder = '';
1072
1073
  this.readonly = false;
1073
- this.clearable = false;
1074
1074
  this.blur = new EventEmitter();
1075
1075
  this.innerValue = null;
1076
1076
  this._disabled = null;
@@ -1116,6 +1116,16 @@ class DrInputComponent {
1116
1116
  }
1117
1117
  this.cdr.markForCheck();
1118
1118
  }
1119
+ set clearable(val) {
1120
+ this._clearable = !!val;
1121
+ if (this._clearable) {
1122
+ this._elementClass.push('clearable');
1123
+ }
1124
+ else {
1125
+ this._elementClass = this._elementClass.filter(item => item !== 'clearable');
1126
+ }
1127
+ this.cdr.markForCheck();
1128
+ }
1119
1129
  get elementClass() {
1120
1130
  return this._elementClass.join(' ');
1121
1131
  }
@@ -1186,11 +1196,16 @@ class DrInputComponent {
1186
1196
  this.globalListenFunc();
1187
1197
  }
1188
1198
  }
1199
+ onClear($event) {
1200
+ $event.preventDefault();
1201
+ $event.stopPropagation();
1202
+ this.value = null;
1203
+ }
1189
1204
  }
1190
1205
  DrInputComponent.decorators = [
1191
1206
  { type: Component, args: [{
1192
1207
  selector: 'dr-input',
1193
- template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n (blur)=\"blur.emit(value); onTouched()\"\r\n [disabled]=\"_disabled\"\r\n [readonly]=\"readonly\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [name]=\"name\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"writeValue(null)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n (click)=\"onButtonClicked($event)\">\r\n {{_buttonOptions.text}}\r\n</button>\r\n",
1208
+ template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n (blur)=\"blur.emit(value); onTouched()\"\r\n [disabled]=\"_disabled\"\r\n [readonly]=\"readonly\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [name]=\"name\"\r\n [min]=\"min\"\r\n [step]=\"step\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"onClear($event)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n (click)=\"onButtonClicked($event)\">\r\n {{_buttonOptions.text}}\r\n</button>\r\n",
1194
1209
  providers: [{
1195
1210
  provide: NG_VALUE_ACCESSOR,
1196
1211
  useExisting: forwardRef(() => DrInputComponent),
@@ -1279,7 +1294,7 @@ DrSelectComponent.decorators = [
1279
1294
  useExisting: DrSelectComponent,
1280
1295
  multi: true
1281
1296
  }],
1282
- styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-value{line-height:1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
1297
+ styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
1283
1298
  },] }
1284
1299
  ];
1285
1300
  DrSelectComponent.ctorParameters = () => [
@@ -1631,7 +1646,7 @@ DrToggleComponent.decorators = [
1631
1646
  { provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
1632
1647
  ],
1633
1648
  changeDetection: ChangeDetectionStrategy.OnPush,
1634
- 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:#579bf2}: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:#aeb5bb;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"]
1649
+ 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"]
1635
1650
  },] }
1636
1651
  ];
1637
1652
  DrToggleComponent.ctorParameters = () => [
@@ -1818,7 +1833,7 @@ DrButtonComponent.decorators = [
1818
1833
  { type: Component, args: [{
1819
1834
  selector: 'dr-button',
1820
1835
  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",
1821
- 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~=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"]
1836
+ 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"]
1822
1837
  },] }
1823
1838
  ];
1824
1839
  DrButtonComponent.ctorParameters = () => [];
@@ -2444,7 +2459,7 @@ DrDropdownComponent.decorators = [
2444
2459
  selector: 'dr-dropdown',
2445
2460
  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",
2446
2461
  changeDetection: ChangeDetectionStrategy.OnPush,
2447
- 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{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"]
2462
+ 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"]
2448
2463
  },] }
2449
2464
  ];
2450
2465
  DrDropdownComponent.ctorParameters = () => [
@@ -2662,18 +2677,305 @@ class DrTabsComponent {
2662
2677
  DrTabsComponent.decorators = [
2663
2678
  { type: Component, args: [{
2664
2679
  selector: 'dr-tabs',
2665
- template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\r\n (selectedIndexChange)=\"selectedIndexChange($event)\"\r\n [class.with-radio]=\"withRadio\">\r\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\r\n <ng-container *ngIf=\"withRadio\">\r\n <ng-template mat-tab-label>\r\n <dr-radio-button [value]=\"index\"\r\n [(ngModel)]=\"selectedTab\">\r\n </dr-radio-button>\r\n {{tab.label}}\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\r\n </mat-tab>\r\n</mat-tab-group>\r\n",
2666
- styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}\n"]
2680
+ template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\r\n (selectedIndexChange)=\"selectedIndexChange($event)\"\r\n [class.with-radio]=\"withRadio\"\r\n [class.vertical]=\"vertical\"\r\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\r\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\r\n <ng-container *ngIf=\"withRadio\">\r\n <ng-template mat-tab-label>\r\n <dr-radio-button [value]=\"index\"\r\n [(ngModel)]=\"selectedTab\">\r\n </dr-radio-button>\r\n {{tab.label}}\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\r\n </mat-tab>\r\n</mat-tab-group>\r\n",
2681
+ styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-labels{flex-direction:column;padding:0;border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}\n"]
2667
2682
  },] }
2668
2683
  ];
2669
2684
  DrTabsComponent.ctorParameters = () => [];
2670
2685
  DrTabsComponent.propDecorators = {
2671
2686
  selectedTab: [{ type: Input }],
2672
2687
  withRadio: [{ type: Input }],
2688
+ vertical: [{ type: Input }],
2673
2689
  selectedTabChange: [{ type: Output }],
2674
2690
  tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
2675
2691
  };
2676
2692
 
2693
+ class DrAccordionComponent {
2694
+ constructor() {
2695
+ this.openCloseItems = new Subject();
2696
+ this.multiValue = false;
2697
+ }
2698
+ /**
2699
+ * Allow multiple items to be expanded at the same time.
2700
+ */
2701
+ get multi() {
2702
+ return this.multiValue;
2703
+ }
2704
+ set multi(val) {
2705
+ this.multiValue = !!val;
2706
+ }
2707
+ /**
2708
+ * Opens all enabled accordion items.
2709
+ */
2710
+ openAll() {
2711
+ if (this.multi) {
2712
+ this.openCloseItems.next(false);
2713
+ }
2714
+ }
2715
+ /**
2716
+ * Closes all enabled accordion items.
2717
+ */
2718
+ closeAll() {
2719
+ this.openCloseItems.next(true);
2720
+ }
2721
+ }
2722
+ DrAccordionComponent.decorators = [
2723
+ { type: Component, args: [{
2724
+ selector: 'dr-accordion',
2725
+ template: '<ng-content select="dr-accordion-item"></ng-content>',
2726
+ changeDetection: ChangeDetectionStrategy.OnPush,
2727
+ styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
2728
+ },] }
2729
+ ];
2730
+ DrAccordionComponent.propDecorators = {
2731
+ multi: [{ type: Input, args: ['multi',] }]
2732
+ };
2733
+
2734
+ class DrAccordionItemComponent {
2735
+ constructor(accordion, cd) {
2736
+ this.accordion = accordion;
2737
+ this.cd = cd;
2738
+ /**
2739
+ * Emits whenever the expanded state of the accordion changes.
2740
+ * Primarily used to facilitate two-way binding.
2741
+ */
2742
+ this.collapsedChange = new EventEmitter();
2743
+ this.accordionItemInvalidate = new Subject();
2744
+ this.collapsedValue = true;
2745
+ this.disabledValue = false;
2746
+ this.destroy$ = new Subject();
2747
+ }
2748
+ /**
2749
+ * Item is collapse (`true` by default)
2750
+ * @type {boolean}
2751
+ */
2752
+ get collapsed() {
2753
+ return this.collapsedValue;
2754
+ }
2755
+ set collapsed(val) {
2756
+ this.collapsedValue = !!val;
2757
+ this.collapsedChange.emit(this.collapsedValue);
2758
+ this.invalidate();
2759
+ }
2760
+ /**
2761
+ * Item is expanded (`false` by default)
2762
+ */
2763
+ get expanded() {
2764
+ return !this.collapsed;
2765
+ }
2766
+ set expanded(val) {
2767
+ this.collapsedValue = !val;
2768
+ }
2769
+ /**
2770
+ * Item is disabled and cannot be opened.
2771
+ * @type {boolean}
2772
+ */
2773
+ get disabled() {
2774
+ return this.disabledValue;
2775
+ }
2776
+ set disabled(val) {
2777
+ this.disabledValue = !!val;
2778
+ this.invalidate();
2779
+ }
2780
+ /**
2781
+ * Open/close the item
2782
+ */
2783
+ toggle() {
2784
+ if (!this.disabled) {
2785
+ // we need this temporary variable as `openCloseItems.next` will change current value we need to save
2786
+ const willSet = !this.collapsed;
2787
+ if (!this.accordion.multi) {
2788
+ this.accordion.openCloseItems.next(true);
2789
+ }
2790
+ this.collapsed = willSet;
2791
+ }
2792
+ }
2793
+ /**
2794
+ * Open the item.
2795
+ */
2796
+ open() {
2797
+ if (!this.disabled) {
2798
+ this.collapsed = false;
2799
+ }
2800
+ }
2801
+ /**
2802
+ * Collapse the item.
2803
+ */
2804
+ close() {
2805
+ if (!this.disabled) {
2806
+ this.collapsed = true;
2807
+ }
2808
+ }
2809
+ ngOnInit() {
2810
+ this.accordion.openCloseItems
2811
+ .pipe(takeUntil(this.destroy$))
2812
+ .subscribe(collapsed => {
2813
+ if (!this.disabled) {
2814
+ this.collapsed = collapsed;
2815
+ }
2816
+ });
2817
+ }
2818
+ ngOnChanges(changes) {
2819
+ this.accordionItemInvalidate.next(true);
2820
+ }
2821
+ ngOnDestroy() {
2822
+ this.destroy$.next();
2823
+ this.destroy$.complete();
2824
+ this.accordionItemInvalidate.complete();
2825
+ }
2826
+ invalidate() {
2827
+ this.accordionItemInvalidate.next(true);
2828
+ this.cd.markForCheck();
2829
+ }
2830
+ }
2831
+ DrAccordionItemComponent.decorators = [
2832
+ { type: Component, args: [{
2833
+ selector: 'dr-accordion-item',
2834
+ template: `
2835
+ <ng-content select="dr-accordion-item-header"></ng-content>
2836
+ <ng-content select="dr-accordion-item-body"></ng-content>
2837
+ `,
2838
+ changeDetection: ChangeDetectionStrategy.OnPush,
2839
+ 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"]
2840
+ },] }
2841
+ ];
2842
+ DrAccordionItemComponent.ctorParameters = () => [
2843
+ { type: DrAccordionComponent, decorators: [{ type: Host }] },
2844
+ { type: ChangeDetectorRef }
2845
+ ];
2846
+ DrAccordionItemComponent.propDecorators = {
2847
+ collapsed: [{ type: Input, args: ['collapsed',] }, { type: HostBinding, args: ['class.collapsed',] }],
2848
+ expanded: [{ type: Input, args: ['expanded',] }, { type: HostBinding, args: ['class.expanded',] }],
2849
+ disabled: [{ type: Input, args: ['disabled',] }, { type: HostBinding, args: ['class.disabled',] }],
2850
+ collapsedChange: [{ type: Output }]
2851
+ };
2852
+
2853
+ class DrAccordionItemHeaderComponent {
2854
+ constructor(accordionItem, cd) {
2855
+ this.accordionItem = accordionItem;
2856
+ this.cd = cd;
2857
+ this.destroy$ = new Subject();
2858
+ }
2859
+ get isCollapsed() {
2860
+ return this.accordionItem.collapsed;
2861
+ }
2862
+ get expanded() {
2863
+ return !this.accordionItem.collapsed;
2864
+ }
2865
+ get tabbable() {
2866
+ return this.accordionItem.disabled ? '-1' : '0';
2867
+ }
2868
+ get disabled() {
2869
+ return this.accordionItem.disabled;
2870
+ }
2871
+ toggle() {
2872
+ this.accordionItem.toggle();
2873
+ }
2874
+ get state() {
2875
+ if (this.isCollapsed) {
2876
+ return 'collapsed';
2877
+ }
2878
+ return 'expanded';
2879
+ }
2880
+ ngOnInit() {
2881
+ this.accordionItem.accordionItemInvalidate
2882
+ .pipe(takeUntil(this.destroy$))
2883
+ .subscribe(() => this.cd.markForCheck());
2884
+ }
2885
+ ngOnDestroy() {
2886
+ this.destroy$.next();
2887
+ this.destroy$.complete();
2888
+ }
2889
+ }
2890
+ DrAccordionItemHeaderComponent.decorators = [
2891
+ { type: Component, args: [{
2892
+ selector: 'dr-accordion-item-header',
2893
+ template: `
2894
+ <ng-content select="dr-accordion-item-title"></ng-content>
2895
+ <ng-content select="dr-accordion-item-description"></ng-content>
2896
+ <ng-content></ng-content>
2897
+ <i class="dr-icon-arrow-down expansion-indicator"
2898
+ [@expansionIndicator]="state"
2899
+ *ngIf="!disabled">
2900
+ </i>
2901
+ `,
2902
+ animations: [
2903
+ trigger('expansionIndicator', [
2904
+ state('expanded', style({
2905
+ transform: 'rotate(180deg)',
2906
+ })),
2907
+ transition('collapsed => expanded', animate('100ms ease-in')),
2908
+ transition('expanded => collapsed', animate('100ms ease-out')),
2909
+ ]),
2910
+ ],
2911
+ changeDetection: ChangeDetectionStrategy.OnPush,
2912
+ 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"]
2913
+ },] }
2914
+ ];
2915
+ DrAccordionItemHeaderComponent.ctorParameters = () => [
2916
+ { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
2917
+ { type: ChangeDetectorRef }
2918
+ ];
2919
+ DrAccordionItemHeaderComponent.propDecorators = {
2920
+ isCollapsed: [{ type: HostBinding, args: ['class.accordion-item-header-collapsed',] }],
2921
+ expanded: [{ type: HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: HostBinding, args: ['attr.aria-expanded',] }],
2922
+ tabbable: [{ type: HostBinding, args: ['attr.tabindex',] }],
2923
+ disabled: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
2924
+ toggle: [{ type: HostListener, args: ['click',] }, { type: HostListener, args: ['keydown.space',] }, { type: HostListener, args: ['keydown.enter',] }]
2925
+ };
2926
+
2927
+ const accordionItemBodyTrigger = trigger('accordionItemBody', [
2928
+ state('collapsed', style({
2929
+ overflow: 'hidden',
2930
+ visibility: 'hidden',
2931
+ height: 0,
2932
+ })),
2933
+ state('expanded', style({
2934
+ overflow: 'hidden',
2935
+ visibility: 'visible',
2936
+ })),
2937
+ transition('collapsed => expanded', animate('100ms ease-in')),
2938
+ transition('expanded => collapsed', animate('100ms ease-out')),
2939
+ ]);
2940
+ class DrAccordionItemBodyComponent {
2941
+ constructor(accordionItem, cd) {
2942
+ this.accordionItem = accordionItem;
2943
+ this.cd = cd;
2944
+ this.destroy$ = new Subject();
2945
+ }
2946
+ get state() {
2947
+ return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
2948
+ }
2949
+ ngOnInit() {
2950
+ this.accordionItem.accordionItemInvalidate
2951
+ .pipe(takeUntil(this.destroy$))
2952
+ .subscribe(() => this.cd.markForCheck());
2953
+ }
2954
+ ngOnDestroy() {
2955
+ this.destroy$.next();
2956
+ this.destroy$.complete();
2957
+ }
2958
+ }
2959
+ DrAccordionItemBodyComponent.decorators = [
2960
+ { type: Component, args: [{
2961
+ selector: 'dr-accordion-item-body',
2962
+ template: `
2963
+ <div [@accordionItemBody]="{ value: state }">
2964
+ <div class="item-body">
2965
+ <ng-content></ng-content>
2966
+ </div>
2967
+ </div>
2968
+ `,
2969
+ animations: [accordionItemBodyTrigger],
2970
+ changeDetection: ChangeDetectionStrategy.OnPush,
2971
+ styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
2972
+ },] }
2973
+ ];
2974
+ DrAccordionItemBodyComponent.ctorParameters = () => [
2975
+ { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
2976
+ { type: ChangeDetectorRef }
2977
+ ];
2978
+
2677
2979
  const components$2 = [DateTagComponent,
2678
2980
  DayTagComponent,
2679
2981
  WeekTagComponent,
@@ -2894,11 +3196,28 @@ DrTabsModule.decorators = [
2894
3196
  },] }
2895
3197
  ];
2896
3198
 
3199
+ const DR_ACCORDION_COMPONENTS = [
3200
+ DrAccordionComponent,
3201
+ DrAccordionItemComponent,
3202
+ DrAccordionItemHeaderComponent,
3203
+ DrAccordionItemBodyComponent,
3204
+ ];
3205
+ class DrAccordionModule {
3206
+ }
3207
+ DrAccordionModule.decorators = [
3208
+ { type: NgModule, args: [{
3209
+ imports: [CommonModule],
3210
+ exports: [...DR_ACCORDION_COMPONENTS],
3211
+ declarations: [...DR_ACCORDION_COMPONENTS],
3212
+ providers: [],
3213
+ },] }
3214
+ ];
3215
+
2897
3216
  /* components */
2898
3217
 
2899
3218
  /**
2900
3219
  * Generated bundle index. Do not edit.
2901
3220
  */
2902
3221
 
2903
- export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
3222
+ export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
2904
3223
  //# sourceMappingURL=datarailsshared-datarailsshared.js.map