@seniorsistemas/angular-components 16.7.5 → 16.8.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -3697,6 +3697,52 @@
         return ExportUtils;
     }());
 
+    var DEFAULT_TIMER = 300;
+    var DebounceUtils = /** @class */ (function () {
+        function DebounceUtils() {
+        }
+        DebounceUtils.prototype.debounce = function (func, timeout) {
+            var _this = this;
+            if (timeout === void 0) { timeout = DEFAULT_TIMER; }
+            var timer;
+            return function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                clearTimeout(timer);
+                timer = setTimeout(function () {
+                    func.apply(_this, args);
+                }, timeout);
+            };
+        };
+        DebounceUtils.prototype.debounceLeading = function (func, timeout) {
+            var _this = this;
+            if (timeout === void 0) { timeout = DEFAULT_TIMER; }
+            var timer;
+            return function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                if (!timer) {
+                    func.apply(_this, args);
+                }
+                clearTimeout(timer);
+                timer = setTimeout(function () {
+                    timer = null;
+                }, timeout);
+            };
+        };
+        DebounceUtils.ɵprov = core.ɵɵdefineInjectable({ factory: function DebounceUtils_Factory() { return new DebounceUtils(); }, token: DebounceUtils, providedIn: "root" });
+        DebounceUtils = __decorate([
+            core.Injectable({
+                providedIn: 'root',
+            })
+        ], DebounceUtils);
+        return DebounceUtils;
+    }());
+
     /**
      * Formats a JSON response to a JS object
      * @param response The response to format
@@ -4283,11 +4329,13 @@
     })(TooltipEvent || (TooltipEvent = {}));
 
     var TooltipDirective = /** @class */ (function () {
-        function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector) {
+        function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector, debounceUtils) {
+            var _this = this;
             this.elementRef = elementRef;
             this.appRef = appRef;
             this.componentFactoryResolver = componentFactoryResolver;
             this.injector = injector;
+            this.debounceUtils = debounceUtils;
             this.position = exports.TooltipPosition.Top;
             this.showDelay = 500;
             this.tooltipEvent = TooltipEvent.Hover;
@@ -4295,6 +4343,8 @@
             this.visible = true;
             this.mobileBehavior = MobileBehavior.Pressing;
             this.componentRef = null;
+            this.boundOnWindowMouseMoveFunction = this.onWindowMouseMove.bind(this);
+            this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(function () { return _this.createTootip(); });
         }
         TooltipDirective.prototype.ngOnInit = function () {
             this.validatePosition();
@@ -4302,6 +4352,25 @@
         TooltipDirective.prototype.ngOnDestroy = function () {
             this.destroy();
         };
+        TooltipDirective.prototype.onWindowMouseMove = function (event) {
+            if (!this.componentRef) {
+                return;
+            }
+            var elementRect = this.elementRef.nativeElement.getBoundingClientRect();
+            var toolTipRect = this.tooltipDivElement.getBoundingClientRect();
+            var totalElementArea = {
+                top: Math.min(elementRect.top, toolTipRect.top),
+                right: Math.max(elementRect.right, toolTipRect.right),
+                left: Math.min(elementRect.left, toolTipRect.left),
+                bottom: Math.max(elementRect.bottom, toolTipRect.bottom)
+            };
+            if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea)) {
+                this.destroy();
+            }
+        };
+        TooltipDirective.prototype.isMousePositionOutsideOfElement = function (mouseX, mouseY, elementArea) {
+            return mouseX < elementArea.left || mouseX >= elementArea.right || mouseY < elementArea.top || mouseY >= elementArea.bottom;
+        };
         // whenever the component with the tooltip is clicked I destroy the tooltip.
         // whenever a key is pressed on the component with the tooltip I destroy the tooltip.
         TooltipDirective.prototype.onClick = function () {
@@ -4329,12 +4398,12 @@
         };
         TooltipDirective.prototype.onMouseEnter = function () {
             if (this.tooltipEvent === TooltipEvent.Hover) {
-                this.createTootip();
+                this.debounceCreateTooltipFunction();
             }
         };
         TooltipDirective.prototype.onMouseLeave = function () {
             if (this.tooltipEvent === TooltipEvent.Hover) {
-                this.setHideTooltipTimeout();
+                this.destroy();
             }
         };
         TooltipDirective.prototype.onTouchStart = function () {
@@ -4347,7 +4416,7 @@
             if (this.tooltipEvent === TooltipEvent.Hover) {
                 if (this.mobileBehavior === MobileBehavior.Pressing) {
                     window.clearTimeout(this.touchTimeout);
-                    this.setHideTooltipTimeout();
+                    this.destroy();
                 }
             }
         };
@@ -4363,9 +4432,6 @@
                 throw new Error("Tooltip " + this.position + " position is unexpected");
             }
         };
-        TooltipDirective.prototype.setHideTooltipTimeout = function () {
-            this.destroy();
-        };
         TooltipDirective.prototype.createTootip = function () {
             var _a;
             if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -4376,6 +4442,7 @@
                 document.body.appendChild(domElem);
                 this.setTooltipComponentProperties();
                 this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
+                this.tooltipDivElement = domElem.querySelector('.tooltip');
                 if (this.displayTime) {
                     window.setTimeout(this.destroy.bind(this), this.displayTime);
                 }
@@ -4384,6 +4451,7 @@
         TooltipDirective.prototype.showTooltip = function () {
             if (this.componentRef !== null) {
                 this.componentRef.instance.visible = true;
+                window.addEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
             }
         };
         TooltipDirective.prototype.setTooltipComponentProperties = function () {
@@ -4488,13 +4556,16 @@
                 this.appRef.detachView(this.componentRef.hostView);
                 this.componentRef.destroy();
                 this.componentRef = null;
+                this.tooltipDivElement = null;
             }
+            window.removeEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
         };
         TooltipDirective.ctorParameters = function () { return [
             { type: core.ElementRef },
             { type: core.ApplicationRef },
             { type: core.ComponentFactoryResolver },
-            { type: core.Injector }
+            { type: core.Injector },
+            { type: DebounceUtils }
         ]; };
         __decorate([
             core.Input("sTooltip")
@@ -4537,7 +4608,8 @@
             core.HostListener("mouseenter")
         ], TooltipDirective.prototype, "onMouseEnter", null);
         __decorate([
-            core.HostListener("mouseleave")
+            core.HostListener("mouseleave"),
+            core.HostListener("wheel")
         ], TooltipDirective.prototype, "onMouseLeave", null);
         __decorate([
             core.HostListener("touchstart")
@@ -6597,7 +6669,7 @@
         ], RowComponent.prototype, "errorMessages", void 0);
         RowComponent = __decorate([
             core.Component({
-                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <label\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ 'required': field.required() }\"\n                        *sInfoSign=\"field.infoSign\"\n                        >\n                            {{ field.label }}\n                    </label>\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n                </div>\n            </ng-container>\n        </div>\n    "
+                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <label\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ 'required': field.required() }\"\n                        *sInfoSign=\"field.infoSign\"\n                        >\n                            {{ field.label }}\n                    </label>\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
             })
         ], RowComponent);
         return RowComponent;
@@ -12126,6 +12198,7 @@
     exports.DEFAULT_CALENDAR_LOCALE_OPTIONS = DEFAULT_CALENDAR_LOCALE_OPTIONS;
     exports.DEFAULT_LOCALE_OPTIONS = DEFAULT_LOCALE_OPTIONS;
     exports.DEFAULT_NUMBER_LOCALE_OPTIONS = DEFAULT_NUMBER_LOCALE_OPTIONS;
+    exports.DebounceUtils = DebounceUtils;
     exports.DoubleClickDirective = DoubleClickDirective;
     exports.DynamicConfig = DynamicConfig;
     exports.DynamicFormComponent = DynamicFormComponent;