@datarailsshared/datarailsshared 1.4.51 → 1.4.53-dragons

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -2755,6 +2755,7 @@
             this.menuService = menuService;
             this.cdr = cdr;
             this.position = 'left';
+            this.wasHovered = false;
         }
         Object.defineProperty(DrDropdownComponent.prototype, "options", {
             set: function (data) {
@@ -2780,6 +2781,9 @@
             enumerable: false,
             configurable: true
         });
+        DrDropdownComponent.prototype.onMouseEnter = function () {
+            this.wasHovered = true;
+        };
         DrDropdownComponent.prototype.onMouseLeave = function () {
             if (this.drDropdownInHover)
                 this.menuService.destroy();
@@ -2848,7 +2852,7 @@
     DrDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-dropdown',
-                    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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     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"]
                 },] }
@@ -2871,6 +2875,7 @@
             this.el = el;
             this._document = _document;
             this.position = 'left';
+            this.mouseleaveTimeout = 200;
         }
         DrDropdownDirective.prototype.elementHover = function () {
             if (!this.drDropdownInHover)
@@ -2880,6 +2885,17 @@
         DrDropdownDirective.prototype.elementClick = function () {
             this.openDropdown();
         };
+        DrDropdownDirective.prototype.leaveDropdownTriggerElement = function () {
+            var _this = this;
+            if (this.drDropdownInHover) {
+                setTimeout(function (_) {
+                    if (_this.contentCmpRef && !_this.contentCmpRef.instance.wasHovered) {
+                        _this.contentCmpRef.destroy();
+                        _this.contentCmpRef = null;
+                    }
+                }, this.mouseleaveTimeout);
+            }
+        };
         DrDropdownDirective.prototype.documentClick = function (e) {
             this.closeDropdown(e);
         };
@@ -2902,13 +2918,17 @@
             }
         };
         DrDropdownDirective.prototype.closeDropdown = function (e) {
-            var menuItem = e.target.classList;
-            if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
+            if (!this.contentCmpRef) {
                 return;
             }
-            var elems = this._document.querySelectorAll('dr-dropdown');
-            if (!e.target.contains(this.el.nativeElement) && this.contentCmpRef || elems.length && !e.target.contains(this.el.nativeElement)) {
-                setTimeout(function () { return elems.forEach(function (item) { return item.remove(); }); }, 100);
+            var clickTarget = e.target;
+            var triggerElement = this.el.nativeElement;
+            var dropdownElement = this.contentCmpRef.location.nativeElement;
+            var isClickTriggerElement = triggerElement.contains(clickTarget) || triggerElement === clickTarget;
+            var isClickDropdownContents = dropdownElement.contains(clickTarget);
+            if (!isClickTriggerElement && !isClickDropdownContents) {
+                var elems_1 = this._document.querySelectorAll('dr-dropdown');
+                setTimeout(function () { return elems_1.forEach(function (item) { return item.remove(); }); }, 100);
             }
         };
         DrDropdownDirective.prototype.showMenu = function (options) {
@@ -2946,6 +2966,7 @@
         contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
         elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
         elementClick: [{ type: i0.HostListener, args: ['click',] }],
+        leaveDropdownTriggerElement: [{ type: i0.HostListener, args: ['mouseleave',] }],
         documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
@@ -3088,6 +3109,7 @@
     var DrTabsComponent = /** @class */ (function () {
         function DrTabsComponent() {
             this.selectedTab = 0;
+            this.noBodyPadding = false;
             this.selectedTabChange = new i0.EventEmitter();
         }
         DrTabsComponent.prototype.selectedIndexChange = function ($event) {
@@ -3099,8 +3121,8 @@
     DrTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-tabs',
-                    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",
-                    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"]
+                    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",
+                    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"]
                 },] }
     ];
     DrTabsComponent.ctorParameters = function () { return []; };
@@ -3108,6 +3130,7 @@
         selectedTab: [{ type: i0.Input }],
         withRadio: [{ type: i0.Input }],
         vertical: [{ type: i0.Input }],
+        noBodyPadding: [{ type: i0.Input }],
         selectedTabChange: [{ type: i0.Output }],
         tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
     };