@datarailsshared/datarailsshared 1.3.13 → 1.3.15
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.
- package/assets/styles/img/spinner.gif +0 -0
- package/bundles/datarailsshared-datarailsshared.umd.js +113 -32
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.3.15.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-dropdown/dr-dropdown.component.js +14 -3
- package/esm2015/lib/dr-inputs/button/button.component.js +4 -4
- package/esm2015/lib/dr-inputs/dr-input/dr-input.component.js +1 -1
- package/esm2015/lib/dr-inputs/dr-inputs.module.js +13 -2
- package/esm2015/lib/dr-inputs/dr-toggle-button/dr-toggle-button.component.js +52 -0
- package/esm2015/lib/dr-popover/dr-popover.component.js +5 -26
- package/esm2015/lib/dr-popover/dr-popover.directive.js +29 -4
- package/esm2015/lib/dr-tabs/dr-tabs.component.js +1 -1
- package/esm2015/lib/models/dropdown.js +1 -1
- package/esm2015/public-api.js +2 -1
- package/fesm2015/datarailsshared-datarailsshared.js +108 -33
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-dropdown/dr-dropdown.component.d.ts +1 -0
- package/lib/dr-inputs/dr-toggle-button/dr-toggle-button.component.d.ts +17 -0
- package/lib/dr-popover/dr-popover.component.d.ts +1 -5
- package/lib/dr-popover/dr-popover.directive.d.ts +6 -2
- package/lib/models/dropdown.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/datarailsshared-datarailsshared-1.3.13.tgz +0 -0
|
@@ -1018,7 +1018,7 @@ DrInputComponent.decorators = [
|
|
|
1018
1018
|
multi: true
|
|
1019
1019
|
}],
|
|
1020
1020
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1021
|
-
styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"
|
|
1021
|
+
styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden;outline:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host input{display:flex;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;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.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
|
|
1022
1022
|
},] }
|
|
1023
1023
|
];
|
|
1024
1024
|
DrInputComponent.ctorParameters = () => [
|
|
@@ -1424,6 +1424,56 @@ DrToggleComponent.propDecorators = {
|
|
|
1424
1424
|
checkedChange: [{ type: Output }]
|
|
1425
1425
|
};
|
|
1426
1426
|
|
|
1427
|
+
class DrToggleButtonComponent {
|
|
1428
|
+
constructor(cdr) {
|
|
1429
|
+
this.cdr = cdr;
|
|
1430
|
+
this._disabled = false;
|
|
1431
|
+
this.onChange = () => { };
|
|
1432
|
+
this.onTouched = () => { };
|
|
1433
|
+
}
|
|
1434
|
+
set disabled(value) {
|
|
1435
|
+
this.setDisabledState(value);
|
|
1436
|
+
}
|
|
1437
|
+
writeValue(value) {
|
|
1438
|
+
this.selectedValue = value;
|
|
1439
|
+
this.cdr.markForCheck();
|
|
1440
|
+
}
|
|
1441
|
+
registerOnChange(fn) {
|
|
1442
|
+
this.onChange = fn;
|
|
1443
|
+
}
|
|
1444
|
+
registerOnTouched(fn) {
|
|
1445
|
+
this.onTouched = fn;
|
|
1446
|
+
}
|
|
1447
|
+
setDisabledState(isDisabled) {
|
|
1448
|
+
this._disabled = isDisabled;
|
|
1449
|
+
}
|
|
1450
|
+
setValue(item) {
|
|
1451
|
+
this.selectedValue = item;
|
|
1452
|
+
this.onChange(this.selectedValue);
|
|
1453
|
+
this.onTouched();
|
|
1454
|
+
this.cdr.markForCheck();
|
|
1455
|
+
}
|
|
1456
|
+
}
|
|
1457
|
+
DrToggleButtonComponent.decorators = [
|
|
1458
|
+
{ type: Component, args: [{
|
|
1459
|
+
selector: 'dr-toggle-button',
|
|
1460
|
+
template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\r\n <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\r\n [class.selected]=\"item === selectedValue\"\r\n class=\"toggle-container__item\">\r\n {{item.name || item}}\r\n </div>\r\n</div>\r\n",
|
|
1461
|
+
providers: [
|
|
1462
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DrToggleButtonComponent), multi: true }
|
|
1463
|
+
],
|
|
1464
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1465
|
+
styles: [".toggle-container{display:flex;flex-wrap:nowrap;background:#F6F7F8;border:1px solid #C3C4CE;box-sizing:border-box;border-radius:20px;height:28px}.toggle-container.disabled{pointer-events:none}.toggle-container__item{height:28px;display:flex;align-items:center;justify-content:center;padding:4px 16px;border-radius:20px;margin:-1px;cursor:pointer}.toggle-container__item.selected{background:#F3F7FF;border:1px solid #579BF2;color:#0061ff;font-weight:600}\n"]
|
|
1466
|
+
},] }
|
|
1467
|
+
];
|
|
1468
|
+
DrToggleButtonComponent.ctorParameters = () => [
|
|
1469
|
+
{ type: ChangeDetectorRef }
|
|
1470
|
+
];
|
|
1471
|
+
DrToggleButtonComponent.propDecorators = {
|
|
1472
|
+
items: [{ type: Input }],
|
|
1473
|
+
selectedValue: [{ type: Input }],
|
|
1474
|
+
disabled: [{ type: Input }]
|
|
1475
|
+
};
|
|
1476
|
+
|
|
1427
1477
|
class ISpinnerOptions extends DOMRect {
|
|
1428
1478
|
}
|
|
1429
1479
|
class DrSpinnerComponent {
|
|
@@ -1518,8 +1568,8 @@ class DrButtonComponent {
|
|
|
1518
1568
|
DrButtonComponent.decorators = [
|
|
1519
1569
|
{ type: Component, args: [{
|
|
1520
1570
|
selector: 'dr-button',
|
|
1521
|
-
template: "<button (click)=\"onClick($event)\" [disabled]=\"disabled\" [attr.is-loading]=\"isLoading\" [attr.bold]=\"isBold\"\r\n
|
|
1522
|
-
styles: [":host{display:inline-block}: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~=secondary]{padding:5px 16px;background:#FFFFFF;border-radius:16px;min-width:90px}:host button[theme][theme~=secondary]:hover:not([disabled
|
|
1571
|
+
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\" [ngClass]=\"icon\" [style.color]=\"iconColor || 'inherit'\"></i>\r\n <ng-content></ng-content>\r\n </ng-container>\r\n <i *ngIf=\"isLoading\" class=\"dr dr-spinner\"></i>\r\n</button>\r\n",
|
|
1572
|
+
styles: [":host{display:inline-block}: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~=secondary]{padding:5px 16px;background:#FFFFFF;border-radius:16px;min-width:90px}: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;border-radius:16px}:host button[theme][theme~=secondary]:active{box-shadow:none;background:#F2F2FB}:host button[theme][theme~=secondary][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default}:host button[theme][theme~=secondary][is-loading=true]{justify-content:center;padding:5px 16px}:host button[theme][theme~=primary]{background:#4646CE;color:#fff;border:none;min-width:90px}: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-radius:16px;border:none}:host button[theme][theme~=primary]:active{background:#25258C}:host button[theme][theme~=primary][disabled]{background:#F0F1F4;color:#727583;border:none;cursor:default}:host button[theme][theme~=primary][is-loading=true]{justify-content:center;padding:5px 16px}: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}:host button[theme][theme~=danger][is-loading=true]{justify-content:center;padding:5px 16px}: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}:host button[theme][theme~=text-link]{background:none;border:none;color:#0b5af9;text-decoration:underline}:host button[theme][theme~=text-link][disabled]{color:#727583}: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}: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}: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}: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][bold=true]{font-weight:600}:host button[theme][icon=true]{padding-left:8px}:host button[theme][icon=false]{justify-content:center}\n"]
|
|
1523
1573
|
},] }
|
|
1524
1574
|
];
|
|
1525
1575
|
DrButtonComponent.ctorParameters = () => [];
|
|
@@ -1767,30 +1817,13 @@ class DrPopoverRef {
|
|
|
1767
1817
|
}
|
|
1768
1818
|
|
|
1769
1819
|
class DrPopoverComponent {
|
|
1770
|
-
constructor(cdr, componentFactoryResolver, viewContainerRef
|
|
1820
|
+
constructor(cdr, componentFactoryResolver, viewContainerRef) {
|
|
1771
1821
|
this.cdr = cdr;
|
|
1772
1822
|
this.componentFactoryResolver = componentFactoryResolver;
|
|
1773
1823
|
this.viewContainerRef = viewContainerRef;
|
|
1774
|
-
this.elementRef = elementRef;
|
|
1775
|
-
this.popoverRef = popoverRef;
|
|
1776
1824
|
this.class = '';
|
|
1777
1825
|
this.isContentTemplate = false;
|
|
1778
1826
|
}
|
|
1779
|
-
clickOutside(e) {
|
|
1780
|
-
const isTargetHost = this.hostRef instanceof ElementRef && (this.hostRef.nativeElement === e.target || this.hostRef.nativeElement.contains(e.target));
|
|
1781
|
-
const isTargetInPopover = this.elementRef.nativeElement.contains(e.target);
|
|
1782
|
-
const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
|
|
1783
|
-
const isTargetInSelect = e.target.closest('ng-dropdown-panel');
|
|
1784
|
-
const isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
|
|
1785
|
-
if (!isTargetHost
|
|
1786
|
-
&& !isTargetInPopover
|
|
1787
|
-
&& !isTargetInDatepicker
|
|
1788
|
-
&& !isTargetInSelect
|
|
1789
|
-
&& !isTargetInDatepickerContent
|
|
1790
|
-
&& !this.manualClosing) {
|
|
1791
|
-
this.popoverRef.close();
|
|
1792
|
-
}
|
|
1793
|
-
}
|
|
1794
1827
|
ngOnInit() {
|
|
1795
1828
|
this.isContentTemplate = this.content instanceof TemplateRef;
|
|
1796
1829
|
if (!this.isContentTemplate) {
|
|
@@ -1815,9 +1848,7 @@ DrPopoverComponent.decorators = [
|
|
|
1815
1848
|
DrPopoverComponent.ctorParameters = () => [
|
|
1816
1849
|
{ type: ChangeDetectorRef },
|
|
1817
1850
|
{ type: ComponentFactoryResolver },
|
|
1818
|
-
{ type: ViewContainerRef }
|
|
1819
|
-
{ type: ElementRef },
|
|
1820
|
-
{ type: DrPopoverRef }
|
|
1851
|
+
{ type: ViewContainerRef }
|
|
1821
1852
|
];
|
|
1822
1853
|
DrPopoverComponent.propDecorators = {
|
|
1823
1854
|
content: [{ type: Input }],
|
|
@@ -1825,8 +1856,7 @@ DrPopoverComponent.propDecorators = {
|
|
|
1825
1856
|
class: [{ type: Input }],
|
|
1826
1857
|
hostRef: [{ type: Input }],
|
|
1827
1858
|
manualClosing: [{ type: Input }],
|
|
1828
|
-
popoverContainer: [{ type: ViewChild, args: ['popoverContainer', { read: ElementRef, static: true },] }]
|
|
1829
|
-
clickOutside: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
|
|
1859
|
+
popoverContainer: [{ type: ViewChild, args: ['popoverContainer', { read: ElementRef, static: true },] }]
|
|
1830
1860
|
};
|
|
1831
1861
|
|
|
1832
1862
|
const DEFAULT_CONFIG = {
|
|
@@ -1909,9 +1939,11 @@ DrPopoverService.ctorParameters = () => [
|
|
|
1909
1939
|
];
|
|
1910
1940
|
|
|
1911
1941
|
class DrPopoverDirective {
|
|
1912
|
-
constructor(elementRef, drPopoverService) {
|
|
1942
|
+
constructor(elementRef, renderer, drPopoverService, document) {
|
|
1913
1943
|
this.elementRef = elementRef;
|
|
1944
|
+
this.renderer = renderer;
|
|
1914
1945
|
this.drPopoverService = drPopoverService;
|
|
1946
|
+
this.document = document;
|
|
1915
1947
|
this.contentContext = {};
|
|
1916
1948
|
this.position = 'bottom';
|
|
1917
1949
|
this.class = '';
|
|
@@ -1929,11 +1961,30 @@ class DrPopoverDirective {
|
|
|
1929
1961
|
}
|
|
1930
1962
|
}
|
|
1931
1963
|
closePopover(res) {
|
|
1964
|
+
if (this.clickOutsideEvent) {
|
|
1965
|
+
this.clickOutsideEvent();
|
|
1966
|
+
}
|
|
1932
1967
|
if (this.popoverRef) {
|
|
1933
1968
|
this.popoverRef.close(res);
|
|
1934
1969
|
this.popoverRef = null;
|
|
1935
1970
|
}
|
|
1936
1971
|
}
|
|
1972
|
+
clickOutside(e) {
|
|
1973
|
+
var _a, _b, _c;
|
|
1974
|
+
const isTargetHost = this.elementRef instanceof ElementRef && (this.elementRef.nativeElement === e.target || this.elementRef.nativeElement.contains(e.target));
|
|
1975
|
+
const isTargetInPopover = (_c = (_b = (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.componentRef) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.nativeElement.contains(e.target);
|
|
1976
|
+
const isTargetInDatepicker = e.target.closest('mat-datepicker-popup');
|
|
1977
|
+
const isTargetInSelect = e.target.closest('ng-dropdown-panel');
|
|
1978
|
+
const isTargetInDatepickerContent = e.target.closest('mat-datepicker-content');
|
|
1979
|
+
if (!isTargetHost
|
|
1980
|
+
&& !isTargetInPopover
|
|
1981
|
+
&& !isTargetInDatepicker
|
|
1982
|
+
&& !isTargetInSelect
|
|
1983
|
+
&& !isTargetInDatepickerContent
|
|
1984
|
+
&& !this.manualClosing) {
|
|
1985
|
+
this.popoverRef.close();
|
|
1986
|
+
}
|
|
1987
|
+
}
|
|
1937
1988
|
renderPopover() {
|
|
1938
1989
|
const popoverRef = this.popoverRef = this.drPopoverService.open(this.content, {
|
|
1939
1990
|
hostRef: this.elementRef,
|
|
@@ -1948,6 +1999,7 @@ class DrPopoverDirective {
|
|
|
1948
1999
|
this.popoverClose.emit(res);
|
|
1949
2000
|
this.showStateChange.emit({ isShown: !!this.popoverRef });
|
|
1950
2001
|
});
|
|
2002
|
+
this.clickOutsideEvent = this.renderer.listen(this.document, 'click', this.clickOutside.bind(this));
|
|
1951
2003
|
}
|
|
1952
2004
|
ngOnDestroy() {
|
|
1953
2005
|
this.closePopover();
|
|
@@ -1960,7 +2012,9 @@ DrPopoverDirective.decorators = [
|
|
|
1960
2012
|
];
|
|
1961
2013
|
DrPopoverDirective.ctorParameters = () => [
|
|
1962
2014
|
{ type: ElementRef },
|
|
1963
|
-
{ type:
|
|
2015
|
+
{ type: Renderer2 },
|
|
2016
|
+
{ type: DrPopoverService },
|
|
2017
|
+
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
|
|
1964
2018
|
];
|
|
1965
2019
|
DrPopoverDirective.propDecorators = {
|
|
1966
2020
|
content: [{ type: Input, args: ['drPopover',] }],
|
|
@@ -2040,6 +2094,17 @@ class DrDropdownComponent {
|
|
|
2040
2094
|
return act.disabled(act.data);
|
|
2041
2095
|
}
|
|
2042
2096
|
}
|
|
2097
|
+
selected(act) {
|
|
2098
|
+
if (!act.selected) {
|
|
2099
|
+
return false;
|
|
2100
|
+
}
|
|
2101
|
+
if (typeof act.selected === 'boolean') {
|
|
2102
|
+
return act.selected;
|
|
2103
|
+
}
|
|
2104
|
+
else {
|
|
2105
|
+
return act.selected(act.data);
|
|
2106
|
+
}
|
|
2107
|
+
}
|
|
2043
2108
|
tooltipToShow(act) {
|
|
2044
2109
|
if (act.toolTipIfDisabled || this.disabled(act) || !act.toolTip) {
|
|
2045
2110
|
return '';
|
|
@@ -2067,9 +2132,9 @@ class DrDropdownComponent {
|
|
|
2067
2132
|
DrDropdownComponent.decorators = [
|
|
2068
2133
|
{ type: Component, args: [{
|
|
2069
2134
|
selector: 'dr-dropdown',
|
|
2070
|
-
template: "<div #menuContainer\r\n (clickOutside)=\"onClickedOutside()\"\r\n [drDropdownPosition]=\"option\"\r\n [position]=\"position\"\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)\"
|
|
2135
|
+
template: "<div #menuContainer\r\n (clickOutside)=\"onClickedOutside()\"\r\n [drDropdownPosition]=\"option\"\r\n [position]=\"position\"\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(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",
|
|
2071
2136
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2072
|
-
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.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}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.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-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
|
|
2137
|
+
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}.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-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
|
|
2073
2138
|
},] }
|
|
2074
2139
|
];
|
|
2075
2140
|
DrDropdownComponent.ctorParameters = () => [
|
|
@@ -2280,7 +2345,7 @@ DrTabsComponent.decorators = [
|
|
|
2280
2345
|
{ type: Component, args: [{
|
|
2281
2346
|
selector: 'dr-tabs',
|
|
2282
2347
|
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",
|
|
2283
|
-
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:\"
|
|
2348
|
+
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"]
|
|
2284
2349
|
},] }
|
|
2285
2350
|
];
|
|
2286
2351
|
DrTabsComponent.ctorParameters = () => [];
|
|
@@ -2362,7 +2427,17 @@ DrTagModule.decorators = [
|
|
|
2362
2427
|
},] }
|
|
2363
2428
|
];
|
|
2364
2429
|
|
|
2365
|
-
const components$1 = [
|
|
2430
|
+
const components$1 = [
|
|
2431
|
+
DrButtonComponent,
|
|
2432
|
+
RadioButtonComponent,
|
|
2433
|
+
CheckboxComponent,
|
|
2434
|
+
DrInputComponent,
|
|
2435
|
+
DrSelectComponent,
|
|
2436
|
+
DrToggleComponent,
|
|
2437
|
+
DrToggleButtonComponent,
|
|
2438
|
+
DrDatePickerComponent,
|
|
2439
|
+
DrDatePickerFormatDirective
|
|
2440
|
+
];
|
|
2366
2441
|
class DrInputsModule {
|
|
2367
2442
|
}
|
|
2368
2443
|
DrInputsModule.decorators = [
|
|
@@ -2506,5 +2581,5 @@ DrTabsModule.decorators = [
|
|
|
2506
2581
|
* Generated bundle index. Do not edit.
|
|
2507
2582
|
*/
|
|
2508
2583
|
|
|
2509
|
-
export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
|
|
2584
|
+
export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, 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, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
|
|
2510
2585
|
//# sourceMappingURL=datarailsshared-datarailsshared.js.map
|