@datarailsshared/datarailsshared 1.3.36 → 1.3.37

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -2926,6 +2926,7 @@
                 if (data) {
                     this.option = data.option;
                     this.position = data.position;
+                    this.drDropdownInHover = data.drDropdownInHover;
                     this.containerClass = data.class;
                     this.list = data.list || [];
                     this.list.forEach(function (item) {
@@ -2944,6 +2945,10 @@
             enumerable: false,
             configurable: true
         });
+        DrDropdownComponent.prototype.onMouseLeave = function () {
+            if (this.drDropdownInHover)
+                this.menuService.destroy();
+        };
         DrDropdownComponent.prototype.onClickedOutside = function () {
             if (this.firstInit) {
                 this.menuService.destroy();
@@ -3008,7 +3013,7 @@
     DrDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-dropdown',
-                    template: "<div #menuContainer\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     #dropdownPosition=\"dropdownPosition\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div #menuContainer\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     #dropdownPosition=\"dropdownPosition\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::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:hover{background-color:#f6f7f8}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(45%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
                 },] }
@@ -3032,7 +3037,18 @@
             this._document = _document;
             this.position = 'left';
         }
+        DrDropdownDirective.prototype.elementHover = function () {
+            if (!this.drDropdownInHover)
+                return;
+            this.openDropdown();
+        };
         DrDropdownDirective.prototype.elementClick = function () {
+            this.openDropdown();
+        };
+        DrDropdownDirective.prototype.documentClick = function (e) {
+            this.closeDropdown(e);
+        };
+        DrDropdownDirective.prototype.openDropdown = function () {
             var option = this.el.nativeElement.getBoundingClientRect();
             this._document.querySelectorAll('dr-dropdown').forEach(function (item) { return item.remove(); });
             if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
@@ -3043,13 +3059,14 @@
                 this.service.destroy();
                 this.showMenu({
                     option: option,
+                    drDropdownInHover: this.drDropdownInHover,
                     position: this.position,
                     list: this.drDropdown,
                     class: this.drDropdownClass
                 });
             }
         };
-        DrDropdownDirective.prototype.documentClick = function (e) {
+        DrDropdownDirective.prototype.closeDropdown = function (e) {
             var menuItem = e.target.classList;
             if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
                 return;
@@ -3090,7 +3107,9 @@
         position: [{ type: i0.Input }],
         drDropdown: [{ type: i0.Input }],
         drDropdownClass: [{ type: i0.Input }],
+        drDropdownInHover: [{ type: i0.Input }],
         contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
+        elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
         elementClick: [{ type: i0.HostListener, args: ['click',] }],
         documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };