@datarailsshared/datarailsshared 1.4.51 → 1.4.53-dragons
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/bundles/datarailsshared-datarailsshared.umd.js +31 -8
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.4.53-dragons.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-dropdown/dr-dropdown.component.js +6 -2
- package/esm2015/lib/dr-dropdown/dr-dropdown.directive.js +21 -5
- package/esm2015/lib/dr-tabs/dr-tabs.component.js +5 -3
- package/fesm2015/datarailsshared-datarailsshared.js +29 -7
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-dropdown/dr-dropdown.component.d.ts +2 -0
- package/lib/dr-dropdown/dr-dropdown.directive.d.ts +2 -0
- package/lib/dr-tabs/dr-tabs.component.d.ts +1 -0
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.4.51.tgz +0 -0
|
@@ -5,6 +5,7 @@ export class DrDropdownComponent {
|
|
|
5
5
|
this.menuService = menuService;
|
|
6
6
|
this.cdr = cdr;
|
|
7
7
|
this.position = 'left';
|
|
8
|
+
this.wasHovered = false;
|
|
8
9
|
}
|
|
9
10
|
set options(data) {
|
|
10
11
|
if (data) {
|
|
@@ -26,6 +27,9 @@ export class DrDropdownComponent {
|
|
|
26
27
|
this.cdr.markForCheck();
|
|
27
28
|
}
|
|
28
29
|
}
|
|
30
|
+
onMouseEnter() {
|
|
31
|
+
this.wasHovered = true;
|
|
32
|
+
}
|
|
29
33
|
onMouseLeave() {
|
|
30
34
|
if (this.drDropdownInHover)
|
|
31
35
|
this.menuService.destroy();
|
|
@@ -93,7 +97,7 @@ export class DrDropdownComponent {
|
|
|
93
97
|
DrDropdownComponent.decorators = [
|
|
94
98
|
{ type: Component, args: [{
|
|
95
99
|
selector: 'dr-dropdown',
|
|
96
|
-
template: "<div #menuContainer\n (mouseleave)=\"onMouseLeave()\"\n (clickOutside)=\"onClickedOutside()\"\n [drDropdownPosition]=\"option\"\n #dropdownPosition=\"dropdownPosition\"\n [position]=\"position\"\n [class]=\"containerClass\"\n class=\"dr-dropdown\">\n <div class=\"dr-dropdown__container\">\n <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n (click)=\"action(act)\"\n [drTooltip]=\"tooltipToShow(act)\"\n [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n [drTooltipOptions]=\"{ withoutArrow: true }\"\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n class=\"dr-dropdown__container__item\"\n [class.item-disabled]=\"disabled(act)\"\n [class.item-selected]=\"selected(act)\"\n [class.separate-line]=\"act.separateLine\">\n <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n <i *ngFor=\"let actionIcon of act.actionIcons\"\n [class]=\"actionIcon.icon\"\n [class.showOnHover]=\"actionIcon.showOnHover\"\n (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n </div>\n </div>\n</div>\n",
|
|
100
|
+
template: "<div #menuContainer\n (mouseleave)=\"onMouseLeave()\"\n (mouseenter)=\"onMouseEnter()\"\n (clickOutside)=\"onClickedOutside()\"\n [drDropdownPosition]=\"option\"\n #dropdownPosition=\"dropdownPosition\"\n [position]=\"position\"\n [class]=\"containerClass\"\n class=\"dr-dropdown\">\n <div class=\"dr-dropdown__container\">\n <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n (click)=\"action(act)\"\n [drTooltip]=\"tooltipToShow(act)\"\n [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n [drTooltipOptions]=\"{ withoutArrow: true }\"\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n class=\"dr-dropdown__container__item\"\n [class.item-disabled]=\"disabled(act)\"\n [class.item-selected]=\"selected(act)\"\n [class.separate-line]=\"act.separateLine\">\n <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n <i *ngFor=\"let actionIcon of act.actionIcons\"\n [class]=\"actionIcon.icon\"\n [class.showOnHover]=\"actionIcon.showOnHover\"\n (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n </div>\n </div>\n</div>\n",
|
|
97
101
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
98
102
|
styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item.separate-line{border-top:1px solid #BCBCBC}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.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(15%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
|
|
99
103
|
},] }
|
|
@@ -107,4 +111,4 @@ DrDropdownComponent.propDecorators = {
|
|
|
107
111
|
menuContainer: [{ type: ViewChild, args: ['menuContainer',] }],
|
|
108
112
|
options: [{ type: Input }]
|
|
109
113
|
};
|
|
110
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
114
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGF0YXJhaWxzc2hhcmVkL3NyYy9saWIvZHItZHJvcGRvd24vZHItZHJvcGRvd24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV4RyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQVExRCxNQUFNLE9BQU8sbUJBQW1CO0lBWTlCLFlBQXNCLFdBQThCLEVBQVUsR0FBc0I7UUFBOUQsZ0JBQVcsR0FBWCxXQUFXLENBQW1CO1FBQVUsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFQcEYsYUFBUSxHQUFxQyxNQUFNLENBQUM7UUFJN0MsZUFBVSxHQUFZLEtBQUssQ0FBQztJQUluQyxDQUFDO0lBRUQsSUFBYSxPQUFPLENBQUMsSUFBbUM7UUFDdEQsSUFBSSxJQUFJLEVBQUU7WUFDUixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7WUFDMUIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO1lBQzlCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7WUFDaEQsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksSUFBSSxFQUFFLENBQUM7WUFDNUIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7O2dCQUN2QixJQUFJLE1BQUEsSUFBSSxDQUFDLFFBQVEsMENBQUUsTUFBTSxFQUFFO29CQUN6QixJQUFJLENBQUMsWUFBWSxHQUFHO3dCQUNsQixJQUFJLEVBQUUsSUFBSSxDQUFDLFFBQVE7d0JBQ25CLEtBQUssRUFBRSxDQUFBLE1BQUEsSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFlBQVksMENBQUUsS0FBSyxLQUFJLEVBQUU7d0JBQ3RDLFFBQVEsRUFBRSxPQUFPO3FCQUNsQixDQUFDO2lCQUNIO1lBQ0gsQ0FBQyxDQUFDLENBQUM7WUFDSCxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUN6QixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksSUFBSSxDQUFDLGlCQUFpQjtZQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDekQsQ0FBQztJQUVELGdCQUFnQjtRQUNkLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQzVCO2FBQU07WUFDTCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztTQUN2QjtJQUNILENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsUUFBUSxDQUFDLEdBQXNEO1FBQzdELElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFO1lBQ2pCLE9BQU8sS0FBSyxDQUFDO1NBQ2Q7UUFDRCxJQUFJLE9BQU8sR0FBRyxDQUFDLFFBQVEsS0FBSyxTQUFTLEVBQUU7WUFDckMsT0FBTyxHQUFHLENBQUMsUUFBUSxDQUFDO1NBQ3JCO2FBQU07WUFDTCxPQUFPLEdBQUcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQy9CO0lBQ0gsQ0FBQztJQUVELFFBQVEsQ0FBQyxHQUEyQjtRQUNsQyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRTtZQUNqQixPQUFPLEtBQUssQ0FBQztTQUNkO1FBQ0QsSUFBSSxPQUFPLEdBQUcsQ0FBQyxRQUFRLEtBQUssU0FBUyxFQUFFO1lBQ3JDLE9BQU8sR0FBRyxDQUFDLFFBQVEsQ0FBQztTQUNyQjthQUFNO1lBQ0wsT0FBTyxHQUFHLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsR0FBMkI7UUFDdkMsSUFBSSxHQUFHLENBQUMsaUJBQWlCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQztZQUFFLE9BQU8sRUFBRSxDQUFDO1FBQzVELE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQztJQUNyQixDQUFDO0lBRUQsZUFBZSxDQUFDLGNBQXVCO1FBQ3JDLE9BQU8sY0FBYyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUMzQyxDQUFDO0lBRUQsTUFBTSxDQUFDLEdBQXVCO1FBQzVCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ3ZCLElBQUksR0FBRyxDQUFDLE1BQU0sRUFBRTtnQkFDZCxHQUFHLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUN0QjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLEtBQUssSUFBSSxHQUFHLENBQUMsS0FBSyxJQUFJLFNBQVMsRUFBRSxJQUFJLEVBQUUsR0FBRyxDQUFDLElBQUksRUFBQyxDQUFDLENBQUM7YUFDaEc7WUFDRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjtJQUNILENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxNQUFNLEVBQUUsVUFBb0MsRUFBRSxJQUFTO1FBQ3ZFLE1BQU0sQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN6QixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUM5QixVQUFVLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3hCLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNiO0lBQ0gsQ0FBQzs7O1lBN0dGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsYUFBYTtnQkFDdkIsNmhEQUEyQztnQkFFM0MsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2hEOzs7WUFQUSxpQkFBaUI7WUFGUSxpQkFBaUI7Ozt1QkFZaEQsU0FBUyxTQUFDLFVBQVU7NEJBQ3BCLFNBQVMsU0FBQyxlQUFlO3NCQVl6QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIElucHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElEcm9wZG93bkl0ZW0sIEVsUG9zaXRpb24sIElEcm9wZG93bkFjdGlvbkljb24sIElEcm9wZG93biwgSURyb3Bkb3duQ29vcmRpbmF0ZSB9IGZyb20gJy4uL21vZGVscy9kcm9wZG93bic7XG5pbXBvcnQgeyBEckRyb3Bkb3duU2VydmljZSB9IGZyb20gJy4vZHItZHJvcGRvd24uc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RyLWRyb3Bkb3duJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RyLWRyb3Bkb3duLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHItZHJvcGRvd24uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgRHJEcm9wZG93bkNvbXBvbmVudCB7XG5cbiAgQFZpZXdDaGlsZCgnbGlzdE1lbnUnKSB2aWV3TWVudTogSFRNTEVsZW1lbnQ7XG4gIEBWaWV3Q2hpbGQoJ21lbnVDb250YWluZXInKSBtZW51Q29udGFpbmVyOiBIVE1MRWxlbWVudDtcbiAgb3B0aW9uOiBhbnk7XG4gIHBvc2l0aW9uOiBFbFBvc2l0aW9uIHwgSURyb3Bkb3duQ29vcmRpbmF0ZSA9ICdsZWZ0JztcbiAgZHJEcm9wZG93bkluSG92ZXI6IGJvb2xlYW47XG4gIGxpc3Q6IElEcm9wZG93bkl0ZW08dW5rbm93bj5bXTtcbiAgY29udGFpbmVyQ2xhc3M6IHN0cmluZztcbiAgcHVibGljIHdhc0hvdmVyZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgcHJpdmF0ZSBmaXJzdEluaXQ6IGJvb2xlYW47XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIG1lbnVTZXJ2aWNlOiBEckRyb3Bkb3duU2VydmljZSwgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gIH1cblxuICBASW5wdXQoKSBzZXQgb3B0aW9ucyhkYXRhOiBJRHJvcGRvd248SURyb3Bkb3duSXRlbTxhbnk+Pikge1xuICAgIGlmIChkYXRhKSB7XG4gICAgICB0aGlzLm9wdGlvbiA9IGRhdGEub3B0aW9uO1xuICAgICAgdGhpcy5wb3NpdGlvbiA9IGRhdGEucG9zaXRpb247XG4gICAgICB0aGlzLmRyRHJvcGRvd25JbkhvdmVyID0gZGF0YS5kckRyb3Bkb3duSW5Ib3ZlcjtcbiAgICAgIHRoaXMuY29udGFpbmVyQ2xhc3MgPSBkYXRhLmNsYXNzO1xuICAgICAgdGhpcy5saXN0ID0gZGF0YS5saXN0IHx8IFtdO1xuICAgICAgdGhpcy5saXN0LmZvckVhY2goaXRlbSA9PiB7XG4gICAgICAgIGlmIChpdGVtLmNoaWxkcmVuPy5sZW5ndGgpIHtcbiAgICAgICAgICBpdGVtLmNoaWxkT3B0aW9ucyA9IHtcbiAgICAgICAgICAgIGxpc3Q6IGl0ZW0uY2hpbGRyZW4sXG4gICAgICAgICAgICBjbGFzczogaXRlbT8uY2hpbGRPcHRpb25zPy5jbGFzcyB8fCAnJyxcbiAgICAgICAgICAgIHBvc2l0aW9uOiAnY2hpbGQnXG4gICAgICAgICAgfTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG4gIH1cblxuICBvbk1vdXNlRW50ZXIoKTogdm9pZCB7XG4gICAgdGhpcy53YXNIb3ZlcmVkID0gdHJ1ZTtcbiAgfVxuXG4gIG9uTW91c2VMZWF2ZSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kckRyb3Bkb3duSW5Ib3ZlcikgdGhpcy5tZW51U2VydmljZS5kZXN0cm95KCk7XG4gIH1cblxuICBvbkNsaWNrZWRPdXRzaWRlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmZpcnN0SW5pdCkge1xuICAgICAgdGhpcy5tZW51U2VydmljZS5kZXN0cm95KCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZmlyc3RJbml0ID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBoaWRlKCk6IHZvaWQge1xuICAgIHRoaXMubWVudVNlcnZpY2UuZGVzdHJveSgpO1xuICB9XG5cbiAgZGlzYWJsZWQoYWN0OiBJRHJvcGRvd25JdGVtPHVua25vd24+IHwgSURyb3Bkb3duQWN0aW9uSWNvbjxhbnk+KTogYm9vbGVhbiB7XG4gICAgaWYgKCFhY3QuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG4gICAgaWYgKHR5cGVvZiBhY3QuZGlzYWJsZWQgPT09ICdib29sZWFuJykge1xuICAgICAgcmV0dXJuIGFjdC5kaXNhYmxlZDtcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIGFjdC5kaXNhYmxlZChhY3QuZGF0YSk7XG4gICAgfVxuICB9XG5cbiAgc2VsZWN0ZWQoYWN0OiBJRHJvcGRvd25JdGVtPHVua25vd24+KTogYm9vbGVhbiB7XG4gICAgaWYgKCFhY3Quc2VsZWN0ZWQpIHtcbiAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG4gICAgaWYgKHR5cGVvZiBhY3Quc2VsZWN0ZWQgPT09ICdib29sZWFuJykge1xuICAgICAgcmV0dXJuIGFjdC5zZWxlY3RlZDtcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIGFjdC5zZWxlY3RlZChhY3QuZGF0YSk7XG4gICAgfVxuICB9XG5cbiAgdG9vbHRpcFRvU2hvdyhhY3Q6IElEcm9wZG93bkl0ZW08dW5rbm93bj4pOiBzdHJpbmcge1xuICAgIGlmIChhY3QudG9vbFRpcElmRGlzYWJsZWQgJiYgIXRoaXMuZGlzYWJsZWQoYWN0KSkgcmV0dXJuICcnO1xuICAgIHJldHVybiBhY3QudG9vbFRpcDtcbiAgfVxuXG4gIHRvb2x0aXBQb3NpdGlvbih3aWR0aE1vcmVSaWdodDogYm9vbGVhbikge1xuICAgIHJldHVybiB3aWR0aE1vcmVSaWdodCA/ICdyaWdodCcgOiAnbGVmdCc7XG4gIH1cblxuICBhY3Rpb24oYWN0OiBJRHJvcGRvd25JdGVtPGFueT4pIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQoYWN0KSkge1xuICAgICAgaWYgKGFjdC5hY3Rpb24pIHtcbiAgICAgICAgYWN0LmFjdGlvbihhY3QuZGF0YSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLm1lbnVTZXJ2aWNlLmFjdGlvbkl0ZW0ubmV4dCh7ZXZlbnQ6IGFjdC5ldmVudCB8fCBhY3QudGl0bGUgfHwgJ2RlZmF1bHQnLCBkYXRhOiBhY3QuZGF0YX0pO1xuICAgICAgfVxuICAgICAgdGhpcy5oaWRlKCk7XG4gICAgfVxuICB9XG5cbiAgb25BY3Rpb25JY29uQ2xpY2soJGV2ZW50LCBhY3Rpb25JY29uOiBJRHJvcGRvd25BY3Rpb25JY29uPGFueT4sIGRhdGE6IGFueSkge1xuICAgICRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQoYWN0aW9uSWNvbikpIHtcbiAgICAgIGFjdGlvbkljb24uYWN0aW9uKGRhdGEpO1xuICAgICAgdGhpcy5oaWRlKCk7XG4gICAgfVxuICB9XG59XG5cbiJdfQ==
|
|
@@ -10,6 +10,7 @@ export class DrDropdownDirective {
|
|
|
10
10
|
this.el = el;
|
|
11
11
|
this._document = _document;
|
|
12
12
|
this.position = 'left';
|
|
13
|
+
this.mouseleaveTimeout = 200;
|
|
13
14
|
}
|
|
14
15
|
elementHover() {
|
|
15
16
|
if (!this.drDropdownInHover)
|
|
@@ -19,6 +20,16 @@ export class DrDropdownDirective {
|
|
|
19
20
|
elementClick() {
|
|
20
21
|
this.openDropdown();
|
|
21
22
|
}
|
|
23
|
+
leaveDropdownTriggerElement() {
|
|
24
|
+
if (this.drDropdownInHover) {
|
|
25
|
+
setTimeout(_ => {
|
|
26
|
+
if (this.contentCmpRef && !this.contentCmpRef.instance.wasHovered) {
|
|
27
|
+
this.contentCmpRef.destroy();
|
|
28
|
+
this.contentCmpRef = null;
|
|
29
|
+
}
|
|
30
|
+
}, this.mouseleaveTimeout);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
22
33
|
documentClick(e) {
|
|
23
34
|
this.closeDropdown(e);
|
|
24
35
|
}
|
|
@@ -41,12 +52,16 @@ export class DrDropdownDirective {
|
|
|
41
52
|
}
|
|
42
53
|
}
|
|
43
54
|
closeDropdown(e) {
|
|
44
|
-
|
|
45
|
-
if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
|
|
55
|
+
if (!this.contentCmpRef) {
|
|
46
56
|
return;
|
|
47
57
|
}
|
|
48
|
-
const
|
|
49
|
-
|
|
58
|
+
const clickTarget = e.target;
|
|
59
|
+
const triggerElement = this.el.nativeElement;
|
|
60
|
+
const dropdownElement = this.contentCmpRef.location.nativeElement;
|
|
61
|
+
const isClickTriggerElement = triggerElement.contains(clickTarget) || triggerElement === clickTarget;
|
|
62
|
+
const isClickDropdownContents = dropdownElement.contains(clickTarget);
|
|
63
|
+
if (!isClickTriggerElement && !isClickDropdownContents) {
|
|
64
|
+
const elems = this._document.querySelectorAll('dr-dropdown');
|
|
50
65
|
setTimeout(() => elems.forEach(item => item.remove()), 100);
|
|
51
66
|
}
|
|
52
67
|
}
|
|
@@ -84,6 +99,7 @@ DrDropdownDirective.propDecorators = {
|
|
|
84
99
|
contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
|
|
85
100
|
elementHover: [{ type: HostListener, args: ['mouseenter',] }],
|
|
86
101
|
elementClick: [{ type: HostListener, args: ['click',] }],
|
|
102
|
+
leaveDropdownTriggerElement: [{ type: HostListener, args: ['mouseleave',] }],
|
|
87
103
|
documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
|
|
88
104
|
};
|
|
89
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
105
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItZHJvcGRvd24uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGF0YXJhaWxzc2hhcmVkL3NyYy9saWIvZHItZHJvcGRvd24vZHItZHJvcGRvd24uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx3QkFBd0IsRUFDeEIsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFFTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUzQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUsxRCxNQUFNLE9BQU8sbUJBQW1CO0lBVTlCLFlBQW9CLHdCQUFrRCxFQUNsRCxnQkFBa0MsRUFDbEMsT0FBMEIsRUFDMUIsRUFBYyxFQUNJLFNBQWM7UUFKaEMsNkJBQXdCLEdBQXhCLHdCQUF3QixDQUEwQjtRQUNsRCxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQ2xDLFlBQU8sR0FBUCxPQUFPLENBQW1CO1FBQzFCLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDSSxjQUFTLEdBQVQsU0FBUyxDQUFLO1FBWjNDLGFBQVEsR0FBZSxNQUFNLENBQUM7UUFNdEIsc0JBQWlCLEdBQUcsR0FBRyxDQUFDO0lBT3pDLENBQUM7SUFFMkIsWUFBWTtRQUN0QyxJQUFJLENBQUMsSUFBSSxDQUFDLGlCQUFpQjtZQUFFLE9BQU87UUFDbEMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFc0IsWUFBWTtRQUNqQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUUyQiwyQkFBMkI7UUFDckQsSUFB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QyxhQUFhLENBQUMsV0FBVyxDQUFDLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ2pHLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7SUFDaEQsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDOUI7SUFDSCxDQUFDOzs7WUE3RkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2FBQ3pCOzs7WUFqQkMsd0JBQXdCO1lBUXhCLGdCQUFnQjtZQUtULGlCQUFpQjtZQVh4QixVQUFVOzRDQThCRyxNQUFNLFNBQUMsUUFBUTs7O3VCQVozQixLQUFLO3lCQUNMLEtBQUs7OEJBQ0wsS0FBSztnQ0FDTCxLQUFLOzRCQUNMLFNBQVMsU0FBQyxtQkFBbUIsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFDOzJCQVdyRSxZQUFZLFNBQUMsWUFBWTsyQkFLekIsWUFBWSxTQUFDLE9BQU87MENBSXBCLFlBQVksU0FBQyxZQUFZOzRCQVd6QixZQUFZLFNBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnRGYWN0b3J5LFxuICBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIFZpZXdDaGlsZCxcbiAgVmlld0NvbnRhaW5lclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERPQ1VNRU5UIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IElEcm9wZG93bkl0ZW0sIEVsUG9zaXRpb24sIElEcm9wZG93biB9IGZyb20gJy4uL21vZGVscy9kcm9wZG93bic7XG5pbXBvcnQgeyBEckRyb3Bkb3duQ29tcG9uZW50IH0gZnJvbSAnLi9kci1kcm9wZG93bi5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHJEcm9wZG93blNlcnZpY2UgfSBmcm9tICcuL2RyLWRyb3Bkb3duLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZHJEcm9wZG93bl0nXG59KVxuZXhwb3J0IGNsYXNzIERyRHJvcGRvd25EaXJlY3RpdmU8VD4gaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuXG4gIEBJbnB1dCgpIHBvc2l0aW9uOiBFbFBvc2l0aW9uID0gJ2xlZnQnO1xuICBASW5wdXQoKSBkckRyb3Bkb3duOiBJRHJvcGRvd25JdGVtPFQ+W107XG4gIEBJbnB1dCgpIGRyRHJvcGRvd25DbGFzczogc3RyaW5nO1xuICBASW5wdXQoKSBkckRyb3Bkb3duSW5Ib3ZlcjogYm9vbGVhbjtcbiAgQFZpZXdDaGlsZChEckRyb3Bkb3duQ29tcG9uZW50LCB7c3RhdGljOiB0cnVlLCByZWFkOiBWaWV3Q29udGFpbmVyUmVmfSkgY29udGVudENtcFJlZjtcblxuICBwcml2YXRlIHJlYWRvbmx5IG1vdXNlbGVhdmVUaW1lb3V0ID0gMjAwO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY29tcG9uZW50RmFjdG9yeVJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gICAgICAgICAgICAgIHByaXZhdGUgdmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZixcbiAgICAgICAgICAgICAgcHJpdmF0ZSBzZXJ2aWNlOiBEckRyb3Bkb3duU2VydmljZSxcbiAgICAgICAgICAgICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcbiAgICAgICAgICAgICAgQEluamVjdChET0NVTUVOVCkgcHJpdmF0ZSBfZG9jdW1lbnQ6IGFueSkge1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpIGVsZW1lbnRIb3ZlcigpIHtcbiAgICBpZiAoIXRoaXMuZHJEcm9wZG93bkluSG92ZXIpIHJldHVybjtcbiAgICAgIHRoaXMub3BlbkRyb3Bkb3duKCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpIGVsZW1lbnRDbGljaygpIHtcbiAgICB0aGlzLm9wZW5Ecm9wZG93bigpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VsZWF2ZScpIGxlYXZlRHJvcGRvd25UcmlnZ2VyRWxlbWVudCgpIHtcbiAgICBpZiAodGhpcy5kckRyb3Bkb3duSW5Ib3Zlcikge1xuICAgICAgc2V0VGltZW91dChfID0+IHtcbiAgICAgICAgaWYgKHRoaXMuY29udGVudENtcFJlZiAmJiAhdGhpcy5jb250ZW50Q21wUmVmLmluc3RhbmNlLndhc0hvdmVyZWQpIHtcbiAgICAgICAgICB0aGlzLmNvbnRlbnRDbXBSZWYuZGVzdHJveSgpO1xuICAgICAgICAgIHRoaXMuY29udGVudENtcFJlZiA9IG51bGw7XG4gICAgICAgIH1cbiAgICAgIH0sIHRoaXMubW91c2VsZWF2ZVRpbWVvdXQpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50Om1vdXNldXAnLCBbJyRldmVudCddKSBkb2N1bWVudENsaWNrKGUpIHtcbiAgICB0aGlzLmNsb3NlRHJvcGRvd24oZSk7XG4gIH1cblxuICBwcml2YXRlIG9wZW5Ecm9wZG93bigpOiB2b2lkIHtcbiAgICBjb25zdCBvcHRpb24gPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgdGhpcy5fZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnZHItZHJvcGRvd24nKS5mb3JFYWNoKGl0ZW0gPT4gaXRlbS5yZW1vdmUoKSk7XG4gICAgaWYgKHRoaXMuY29udGVudENtcFJlZiAmJiB0aGlzLmNvbnRlbnRDbXBSZWYuZGVzdHJveUNicykge1xuICAgICAgdGhpcy5jb250ZW50Q21wUmVmLmRlc3Ryb3koKTtcbiAgICAgIHRoaXMuY29udGVudENtcFJlZiA9IG51bGw7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuc2VydmljZS5kZXN0cm95KCk7XG4gICAgICB0aGlzLnNob3dNZW51KHtcbiAgICAgICAgb3B0aW9uLFxuICAgICAgICBkckRyb3Bkb3duSW5Ib3ZlcjogdGhpcy5kckRyb3Bkb3duSW5Ib3ZlcixcbiAgICAgICAgcG9zaXRpb246IHRoaXMucG9zaXRpb24sXG4gICAgICAgIGxpc3Q6IHRoaXMuZHJEcm9wZG93bixcbiAgICAgICAgY2xhc3M6IHRoaXMuZHJEcm9wZG93bkNsYXNzXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGNsb3NlRHJvcGRvd24oZSk6IHZvaWQge1xuXG4gICAgaWYgKCF0aGlzLmNvbnRlbnRDbXBSZWYpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBjbGlja1RhcmdldCA9IGUudGFyZ2V0O1xuICAgIGNvbnN0IHRyaWdnZXJFbGVtZW50ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IGRyb3Bkb3duRWxlbWVudCA9IHRoaXMuY29udGVudENtcFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IGlzQ2xpY2tUcmlnZ2VyRWxlbWVudCA9IHRyaWdnZXJFbGVtZW50LmNvbnRhaW5zKGNsaWNrVGFyZ2V0KSB8fCB0cmlnZ2VyRWxlbWVudCA9PT0gY2xpY2tUYXJnZXQ7XG4gICAgY29uc3QgaXNDbGlja0Ryb3Bkb3duQ29udGVudHMgPSBkcm9wZG93bkVsZW1lbnQuY29udGFpbnMoY2xpY2tUYXJnZXQpO1xuXG4gICAgaWYgKCFpc0NsaWNrVHJpZ2dlckVsZW1lbnQgJiYgIWlzQ2xpY2tEcm9wZG93bkNvbnRlbnRzKSB7XG4gICAgICBjb25zdCBlbGVtcyA9IHRoaXMuX2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJ2RyLWRyb3Bkb3duJyk7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IGVsZW1zLmZvckVhY2goaXRlbSA9PiBpdGVtLnJlbW92ZSgpKSwgMTAwKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHNob3dNZW51KG9wdGlvbnM6IElEcm9wZG93bjxUPikge1xuICAgIGxldCBjb21wb25lbnRGYWN0b3J5OiBDb21wb25lbnRGYWN0b3J5PERyRHJvcGRvd25Db21wb25lbnQ+O1xuICAgIGNvbXBvbmVudEZhY3RvcnkgPSB0aGlzLmNvbXBvbmVudEZhY3RvcnlSZXNvbHZlci5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShEckRyb3Bkb3duQ29tcG9uZW50KTtcbiAgICB0aGlzLmNvbnRlbnRDbXBSZWYgPSB0aGlzLnZpZXdDb250YWluZXJSZWYuY3JlYXRlQ29tcG9uZW50KGNvbXBvbmVudEZhY3RvcnkpO1xuICAgIHRoaXMuc2VydmljZS5hZGRNZW51ID0gdGhpcy5jb250ZW50Q21wUmVmO1xuICAgIHRoaXMuX2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ25iLWxheW91dCcpLmFwcGVuZENoaWxkKHRoaXMuY29udGVudENtcFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50KTtcbiAgICB0aGlzLmNvbnRlbnRDbXBSZWYuaW5zdGFuY2Uub3B0aW9ucyA9IG9wdGlvbnM7XG4gIH1cblxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKSB7XG4gICAgaWYgKHRoaXMuY29udGVudENtcFJlZikge1xuICAgICAgdGhpcy5jb250ZW50Q21wUmVmLmRlc3Ryb3koKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
|
|
@@ -3,6 +3,7 @@ import { DrTabComponent } from './dr-tab.component';
|
|
|
3
3
|
export class DrTabsComponent {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.selectedTab = 0;
|
|
6
|
+
this.noBodyPadding = false;
|
|
6
7
|
this.selectedTabChange = new EventEmitter();
|
|
7
8
|
}
|
|
8
9
|
selectedIndexChange($event) {
|
|
@@ -13,8 +14,8 @@ export class DrTabsComponent {
|
|
|
13
14
|
DrTabsComponent.decorators = [
|
|
14
15
|
{ type: Component, args: [{
|
|
15
16
|
selector: 'dr-tabs',
|
|
16
|
-
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
17
|
-
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-
|
|
17
|
+
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-body-padding]=\"noBodyPadding\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
18
|
+
styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}\n"]
|
|
18
19
|
},] }
|
|
19
20
|
];
|
|
20
21
|
DrTabsComponent.ctorParameters = () => [];
|
|
@@ -22,7 +23,8 @@ DrTabsComponent.propDecorators = {
|
|
|
22
23
|
selectedTab: [{ type: Input }],
|
|
23
24
|
withRadio: [{ type: Input }],
|
|
24
25
|
vertical: [{ type: Input }],
|
|
26
|
+
noBodyPadding: [{ type: Input }],
|
|
25
27
|
selectedTabChange: [{ type: Output }],
|
|
26
28
|
tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
|
|
27
29
|
};
|
|
28
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItdGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhcmFpbHNzaGFyZWQvc3JjL2xpYi9kci10YWJzL2RyLXRhYnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsZUFBZSxFQUVmLEtBQUssRUFDTCxZQUFZLEVBQ1osTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQU9wRCxNQUFNLE9BQU8sZUFBZTtJQVMxQjtRQVBTLGdCQUFXLEdBQVcsQ0FBQyxDQUFDO1FBR3hCLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLHNCQUFpQixHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0lBR3pELENBQUM7SUFFakIsbUJBQW1CLENBQUMsTUFBTTtRQUN4QixJQUFJLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQztRQUMxQixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3RDLENBQUM7OztZQW5CRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFNBQVM7Z0JBQ25CLHEyQkFBdUM7O2FBRXhDOzs7OzBCQUdFLEtBQUs7d0JBQ0wsS0FBSzt1QkFDTCxLQUFLOzRCQUNMLEtBQUs7Z0NBQ0wsTUFBTTs4QkFDTixlQUFlLFNBQUMsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBRdWVyeUxpc3QsXG4gIElucHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEclRhYkNvbXBvbmVudCB9IGZyb20gJy4vZHItdGFiLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RyLXRhYnMnLFxuICB0ZW1wbGF0ZVVybDogJy4vZHItdGFicy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2RyLXRhYnMuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgRHJUYWJzQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSBzZWxlY3RlZFRhYjogbnVtYmVyID0gMDtcbiAgQElucHV0KCkgd2l0aFJhZGlvOiBib29sZWFuO1xuICBASW5wdXQoKSB2ZXJ0aWNhbDogYm9vbGVhbjtcbiAgQElucHV0KCkgbm9Cb2R5UGFkZGluZyA9IGZhbHNlO1xuICBAT3V0cHV0KCkgc2VsZWN0ZWRUYWJDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBDb250ZW50Q2hpbGRyZW4oRHJUYWJDb21wb25lbnQpIHB1YmxpYyB0YWJzQ29udGVudExpc3Q6IFF1ZXJ5TGlzdDxEclRhYkNvbXBvbmVudD47XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBzZWxlY3RlZEluZGV4Q2hhbmdlKCRldmVudCkge1xuICAgIHRoaXMuc2VsZWN0ZWRUYWIgPSAkZXZlbnQ7XG4gICAgdGhpcy5zZWxlY3RlZFRhYkNoYW5nZS5lbWl0KCRldmVudCk7XG4gIH1cblxufVxuIl19
|
|
@@ -2235,6 +2235,7 @@ class DrDropdownComponent {
|
|
|
2235
2235
|
this.menuService = menuService;
|
|
2236
2236
|
this.cdr = cdr;
|
|
2237
2237
|
this.position = 'left';
|
|
2238
|
+
this.wasHovered = false;
|
|
2238
2239
|
}
|
|
2239
2240
|
set options(data) {
|
|
2240
2241
|
if (data) {
|
|
@@ -2256,6 +2257,9 @@ class DrDropdownComponent {
|
|
|
2256
2257
|
this.cdr.markForCheck();
|
|
2257
2258
|
}
|
|
2258
2259
|
}
|
|
2260
|
+
onMouseEnter() {
|
|
2261
|
+
this.wasHovered = true;
|
|
2262
|
+
}
|
|
2259
2263
|
onMouseLeave() {
|
|
2260
2264
|
if (this.drDropdownInHover)
|
|
2261
2265
|
this.menuService.destroy();
|
|
@@ -2323,7 +2327,7 @@ class DrDropdownComponent {
|
|
|
2323
2327
|
DrDropdownComponent.decorators = [
|
|
2324
2328
|
{ type: Component, args: [{
|
|
2325
2329
|
selector: 'dr-dropdown',
|
|
2326
|
-
template: "<div #menuContainer\n (mouseleave)=\"onMouseLeave()\"\n (clickOutside)=\"onClickedOutside()\"\n [drDropdownPosition]=\"option\"\n #dropdownPosition=\"dropdownPosition\"\n [position]=\"position\"\n [class]=\"containerClass\"\n class=\"dr-dropdown\">\n <div class=\"dr-dropdown__container\">\n <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n (click)=\"action(act)\"\n [drTooltip]=\"tooltipToShow(act)\"\n [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n [drTooltipOptions]=\"{ withoutArrow: true }\"\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n class=\"dr-dropdown__container__item\"\n [class.item-disabled]=\"disabled(act)\"\n [class.item-selected]=\"selected(act)\"\n [class.separate-line]=\"act.separateLine\">\n <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n <i *ngFor=\"let actionIcon of act.actionIcons\"\n [class]=\"actionIcon.icon\"\n [class.showOnHover]=\"actionIcon.showOnHover\"\n (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n </div>\n </div>\n</div>\n",
|
|
2330
|
+
template: "<div #menuContainer\n (mouseleave)=\"onMouseLeave()\"\n (mouseenter)=\"onMouseEnter()\"\n (clickOutside)=\"onClickedOutside()\"\n [drDropdownPosition]=\"option\"\n #dropdownPosition=\"dropdownPosition\"\n [position]=\"position\"\n [class]=\"containerClass\"\n class=\"dr-dropdown\">\n <div class=\"dr-dropdown__container\">\n <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\n (click)=\"action(act)\"\n [drTooltip]=\"tooltipToShow(act)\"\n [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\n [drTooltipOptions]=\"{ withoutArrow: true }\"\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\n class=\"dr-dropdown__container__item\"\n [class.item-disabled]=\"disabled(act)\"\n [class.item-selected]=\"selected(act)\"\n [class.separate-line]=\"act.separateLine\">\n <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\n <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\n <i *ngFor=\"let actionIcon of act.actionIcons\"\n [class]=\"actionIcon.icon\"\n [class.showOnHover]=\"actionIcon.showOnHover\"\n (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\n <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\n <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\n </div>\n </div>\n</div>\n",
|
|
2327
2331
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2328
2332
|
styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden;transition-delay:.2s}::ng-deep .dr-dropdown__container__item:hover>*>.dr-dropdown{visibility:visible;transition-delay:0s}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item.separate-line{border-top:1px solid #BCBCBC}.dr-dropdown__container__item:hover{background-color:#f9faff}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item i{color:#4e566c}.dr-dropdown__container__item i:hover{color:#4646ce}.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(15%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
|
|
2329
2333
|
},] }
|
|
@@ -2346,6 +2350,7 @@ class DrDropdownDirective {
|
|
|
2346
2350
|
this.el = el;
|
|
2347
2351
|
this._document = _document;
|
|
2348
2352
|
this.position = 'left';
|
|
2353
|
+
this.mouseleaveTimeout = 200;
|
|
2349
2354
|
}
|
|
2350
2355
|
elementHover() {
|
|
2351
2356
|
if (!this.drDropdownInHover)
|
|
@@ -2355,6 +2360,16 @@ class DrDropdownDirective {
|
|
|
2355
2360
|
elementClick() {
|
|
2356
2361
|
this.openDropdown();
|
|
2357
2362
|
}
|
|
2363
|
+
leaveDropdownTriggerElement() {
|
|
2364
|
+
if (this.drDropdownInHover) {
|
|
2365
|
+
setTimeout(_ => {
|
|
2366
|
+
if (this.contentCmpRef && !this.contentCmpRef.instance.wasHovered) {
|
|
2367
|
+
this.contentCmpRef.destroy();
|
|
2368
|
+
this.contentCmpRef = null;
|
|
2369
|
+
}
|
|
2370
|
+
}, this.mouseleaveTimeout);
|
|
2371
|
+
}
|
|
2372
|
+
}
|
|
2358
2373
|
documentClick(e) {
|
|
2359
2374
|
this.closeDropdown(e);
|
|
2360
2375
|
}
|
|
@@ -2377,12 +2392,16 @@ class DrDropdownDirective {
|
|
|
2377
2392
|
}
|
|
2378
2393
|
}
|
|
2379
2394
|
closeDropdown(e) {
|
|
2380
|
-
|
|
2381
|
-
if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
|
|
2395
|
+
if (!this.contentCmpRef) {
|
|
2382
2396
|
return;
|
|
2383
2397
|
}
|
|
2384
|
-
const
|
|
2385
|
-
|
|
2398
|
+
const clickTarget = e.target;
|
|
2399
|
+
const triggerElement = this.el.nativeElement;
|
|
2400
|
+
const dropdownElement = this.contentCmpRef.location.nativeElement;
|
|
2401
|
+
const isClickTriggerElement = triggerElement.contains(clickTarget) || triggerElement === clickTarget;
|
|
2402
|
+
const isClickDropdownContents = dropdownElement.contains(clickTarget);
|
|
2403
|
+
if (!isClickTriggerElement && !isClickDropdownContents) {
|
|
2404
|
+
const elems = this._document.querySelectorAll('dr-dropdown');
|
|
2386
2405
|
setTimeout(() => elems.forEach(item => item.remove()), 100);
|
|
2387
2406
|
}
|
|
2388
2407
|
}
|
|
@@ -2420,6 +2439,7 @@ DrDropdownDirective.propDecorators = {
|
|
|
2420
2439
|
contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
|
|
2421
2440
|
elementHover: [{ type: HostListener, args: ['mouseenter',] }],
|
|
2422
2441
|
elementClick: [{ type: HostListener, args: ['click',] }],
|
|
2442
|
+
leaveDropdownTriggerElement: [{ type: HostListener, args: ['mouseleave',] }],
|
|
2423
2443
|
documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
|
|
2424
2444
|
};
|
|
2425
2445
|
|
|
@@ -2560,6 +2580,7 @@ DrTabComponent.propDecorators = {
|
|
|
2560
2580
|
class DrTabsComponent {
|
|
2561
2581
|
constructor() {
|
|
2562
2582
|
this.selectedTab = 0;
|
|
2583
|
+
this.noBodyPadding = false;
|
|
2563
2584
|
this.selectedTabChange = new EventEmitter();
|
|
2564
2585
|
}
|
|
2565
2586
|
selectedIndexChange($event) {
|
|
@@ -2570,8 +2591,8 @@ class DrTabsComponent {
|
|
|
2570
2591
|
DrTabsComponent.decorators = [
|
|
2571
2592
|
{ type: Component, args: [{
|
|
2572
2593
|
selector: 'dr-tabs',
|
|
2573
|
-
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
2574
|
-
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-
|
|
2594
|
+
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-body-padding]=\"noBodyPadding\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\" >\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\" ></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
2595
|
+
styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #D5DAE5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#579bf2;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#579bf2!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#F6F7F8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #D5DAE5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #D5DAE5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}\n"]
|
|
2575
2596
|
},] }
|
|
2576
2597
|
];
|
|
2577
2598
|
DrTabsComponent.ctorParameters = () => [];
|
|
@@ -2579,6 +2600,7 @@ DrTabsComponent.propDecorators = {
|
|
|
2579
2600
|
selectedTab: [{ type: Input }],
|
|
2580
2601
|
withRadio: [{ type: Input }],
|
|
2581
2602
|
vertical: [{ type: Input }],
|
|
2603
|
+
noBodyPadding: [{ type: Input }],
|
|
2582
2604
|
selectedTabChange: [{ type: Output }],
|
|
2583
2605
|
tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
|
|
2584
2606
|
};
|