@seniorsistemas/angular-components 17.25.6 → 17.25.7

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

@@ -534,19 +534,12 @@
         TooltipComponent = __decorate([
             core.Component({
                 template: "<div\n   id=\"tooltip\"\n   class=\"tooltip\"\n   [ngClass]=\"['tooltip--' + position]\"\n   [class.tooltip--visible]=\"visible\"\n   [ngStyle]=\"{\n      'left': left + 'px',\n      'top': top + 'px'\n   }\">\n   <ng-template\n      *ngIf=\"escape;\n         then escapeTemplate;\n         else noEscapeTemplate\">\n   </ng-template>   \n</div>\n\n<ng-template #noEscapeTemplate>\n   <span\n      class=\"tooltip__content\"\n      [innerHTML]=\"tooltip\">\n   </span>\n</ng-template>\n\n<ng-template #escapeTemplate>\n   <span class=\"tooltip__content\">\n      {{ tooltip }}\n   </span>\n</ng-template>",
-                styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;margin-top:5px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:8px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:8px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
+                styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:5px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:5px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
             })
         ], TooltipComponent);
         return TooltipComponent;
     }());
 
-    var isNullOrUndefined = function (value) { return value === null || value === undefined; };
-    var isMousePositionOutsideOfElement = function (event, elementArea) {
-        var eventX = event.clientX;
-        var eventY = event.clientY;
-        return eventX < elementArea.left || eventX >= elementArea.right || eventY < elementArea.top || eventY >= elementArea.bottom;
-    };
-
     var DEFAULT_TIMER = 300;
     var DebounceUtils = /** @class */ (function () {
         function DebounceUtils() {
@@ -593,6 +586,45 @@
         return DebounceUtils;
     }());
 
+    var isNullOrUndefined = function (value) { return value === null || value === undefined; };
+    var isMousePositionOutsideOfElement = function (event, elementArea) {
+        var eventX = event.clientX;
+        var eventY = event.clientY;
+        return eventX < elementArea.left || eventX >= elementArea.right || eventY < elementArea.top || eventY >= elementArea.bottom;
+    };
+    var getElementPositionInfo = function (element) {
+        var rect = element.getBoundingClientRect();
+        var scrollTop = window.scrollY || document.documentElement.scrollTop;
+        var scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+        var elementHeight = rect.height;
+        var elementWidth = rect.width;
+        var elementVerticalCenter = elementHeight / 2;
+        var elementHorizontalCenter = elementWidth / 2;
+        return {
+            top: rect.top + scrollTop,
+            left: rect.left + scrollLeft,
+            right: rect.left + scrollLeft + elementWidth,
+            elementHeight: elementHeight,
+            elementWidth: elementWidth,
+            elementVerticalCenter: elementVerticalCenter,
+            elementHorizontalCenter: elementHorizontalCenter
+        };
+    };
+    var getElementLeftoverContentAvailable = function (element) {
+        var windowWidth = window.innerWidth;
+        var popoverElementTriggerRect = element.getBoundingClientRect();
+        var freeDistanceToBottom = window.innerHeight - popoverElementTriggerRect.bottom;
+        var freeDistanceToTop = popoverElementTriggerRect.top;
+        var freeDistanceToLeft = popoverElementTriggerRect.left;
+        var freeDistanceToRight = windowWidth - popoverElementTriggerRect.right;
+        return {
+            freeDistanceToBottom: freeDistanceToBottom,
+            freeDistanceToTop: freeDistanceToTop,
+            freeDistanceToLeft: freeDistanceToLeft,
+            freeDistanceToRight: freeDistanceToRight
+        };
+    };
+
     var MobileBehavior;
     (function (MobileBehavior) {
         MobileBehavior["Pressing"] = "pressing";
@@ -781,64 +813,98 @@
             }
         };
         TooltipDirective.prototype.setTooltipPositionProperty = function () {
-            var e_1, _a;
+            var _this = this;
             if (!this.componentRef) {
                 return;
             }
-            var margin = 20;
             var anchorSize = 5;
-            var domElem = this.componentRef.hostView.rootNodes[0].querySelector("#tooltip");
-            var _b = domElem.getBoundingClientRect(), height = _b.height, width = _b.width;
-            var _c = this.elementRef.nativeElement.getBoundingClientRect(), left = _c.left, right = _c.right, top = _c.top, bottom = _c.bottom;
+            var _a = this.elementRef.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right;
+            var tooltipElementPosition = getElementPositionInfo(this.tooltipDivElement);
+            var elementLeftover = getElementLeftoverContentAvailable(this.elementRef.nativeElement);
+            var elementTriggerPosition = getElementPositionInfo(this.elementRef.nativeElement);
+            var isPositionHorizontal = [exports.TooltipPosition.Left, exports.TooltipPosition.Right].includes(this.position);
+            var distanceToBorders = isPositionHorizontal ? tooltipElementPosition.elementWidth : tooltipElementPosition.elementHorizontalCenter;
+            var canSetAtTop = elementLeftover.freeDistanceToTop > tooltipElementPosition.elementHeight;
+            var canSetAtLeft = elementLeftover.freeDistanceToLeft > distanceToBorders;
+            var canSetAtRight = elementLeftover.freeDistanceToRight > distanceToBorders;
+            var canSetAtBottom = elementLeftover.freeDistanceToBottom > tooltipElementPosition.elementHeight;
+            var topVertical = elementTriggerPosition.top + elementTriggerPosition.elementVerticalCenter;
+            var checkTopPosition = function () {
+                return canSetAtTop && canSetAtLeft && canSetAtRight;
+            };
+            var checkBottomPosition = function () {
+                return canSetAtBottom && canSetAtLeft && canSetAtRight;
+            };
+            var checkLeftPosition = function () {
+                return canSetAtLeft && canSetAtTop && canSetAtBottom;
+            };
+            var checkRightPosition = function () {
+                return canSetAtRight && canSetAtTop && canSetAtBottom;
+            };
+            var setTopPosition = function () {
+                return {
+                    left: left + (right - left) / 2,
+                    top: elementTriggerPosition.top - anchorSize
+                };
+            };
+            var setBottomPosition = function () {
+                return {
+                    left: left + (right - left) / 2,
+                    top: elementTriggerPosition.top + elementTriggerPosition.elementHeight
+                };
+            };
+            var setLeftPosition = function () {
+                return {
+                    left: left,
+                    top: topVertical
+                };
+            };
+            var setRightPosition = function () {
+                return {
+                    left: right,
+                    top: topVertical
+                };
+            };
             var positions = [
                 {
                     pos: exports.TooltipPosition.Top,
-                    check: function () { return top > height; },
-                    set: function () { return ({ left: left + (right - left) / 2, top: top - margin - anchorSize }); },
+                    check: checkTopPosition,
+                    set: setTopPosition
                 },
                 {
                     pos: exports.TooltipPosition.Bottom,
-                    check: function () { return document.body.clientHeight - bottom > height; },
-                    set: function () { return ({ left: left + (right - left) / 2, top: bottom + margin }); },
+                    check: checkBottomPosition,
+                    set: setBottomPosition
                 },
                 {
                     pos: exports.TooltipPosition.Left,
-                    check: function () { return left > width; },
-                    set: function () { return ({ left: left - margin, top: top + height / 2 - anchorSize }); },
+                    check: checkLeftPosition,
+                    set: setLeftPosition
                 },
                 {
                     pos: exports.TooltipPosition.Right,
-                    check: function () { return document.body.clientWidth - right > width; },
-                    set: function () { return ({ left: right + margin, top: top + height / 2 - anchorSize }); },
-                },
-            ];
-            if (this.componentRef) {
-                try {
-                    for (var positions_1 = __values(positions), positions_1_1 = positions_1.next(); !positions_1_1.done; positions_1_1 = positions_1.next()) {
-                        var _d = positions_1_1.value, pos = _d.pos, check = _d.check, set = _d.set;
-                        if (check()) {
-                            this.position = pos;
-                            var _e = set(), left_1 = _e.left, top_1 = _e.top;
-                            this.componentRef.instance.left = Math.round(left_1);
-                            this.componentRef.instance.top = Math.round(top_1);
-                            this.componentRef.instance.position = this.position;
-                            return;
-                        }
-                    }
+                    check: checkRightPosition,
+                    set: setRightPosition
                 }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (positions_1_1 && !positions_1_1.done && (_a = positions_1.return)) _a.call(positions_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
+            ];
+            var positionDefined = positions.find(function (position) { return position.pos === _this.position; });
+            var validPosition = positionDefined;
+            var canUseDefinedPosition = positionDefined.check();
+            if (canUseDefinedPosition) {
+                validPosition = positionDefined;
+            }
+            else if (!canUseDefinedPosition) {
+                var validAlternativePosition = positions.find(function (position) { return position.check(); });
+                if (validAlternativePosition) {
+                    validPosition = validAlternativePosition;
                 }
-                // Se não conseguir posicionar, mostrar abaixo
-                this.position = exports.TooltipPosition.Bottom;
-                this.componentRef.instance.left = Math.round(left + (right - left) / 2);
-                this.componentRef.instance.top = Math.round(bottom + margin);
-                this.componentRef.instance.position = this.position;
             }
+            var _position = validPosition.set();
+            var positionLeft = _position.left;
+            var positionTop = _position.top;
+            this.componentRef.instance.left = Math.round(positionLeft);
+            this.componentRef.instance.top = Math.round(positionTop);
+            this.componentRef.instance.position = validPosition.pos;
         };
         TooltipDirective.prototype.setTooltipComponentProperties = function () {
             if (this.componentRef !== null) {
@@ -22077,18 +22143,7 @@
             return top;
         };
         HelpPopoverDirective.prototype.getLeftoverContentAvailableForPopover = function () {
-            var windowWidth = window.innerWidth;
-            var popoverElementTriggerRect = this.element.nativeElement.getBoundingClientRect();
-            var freeDistanceToBottom = window.innerHeight - popoverElementTriggerRect.bottom;
-            var freeDistanceToTop = popoverElementTriggerRect.top;
-            var freeDistanceToLeft = popoverElementTriggerRect.left;
-            var freeDistanceToRight = windowWidth - popoverElementTriggerRect.right;
-            return {
-                freeDistanceToBottom: freeDistanceToBottom,
-                freeDistanceToTop: freeDistanceToTop,
-                freeDistanceToLeft: freeDistanceToLeft,
-                freeDistanceToRight: freeDistanceToRight
-            };
+            return getElementLeftoverContentAvailable(this.element.nativeElement);
         };
         Object.defineProperty(HelpPopoverDirective.prototype, "getPopoverElement", {
             get: function () {
@@ -22216,21 +22271,6 @@
         ], HelpPopoverDirective);
         return HelpPopoverDirective;
     }());
-    var getElementPositionInfo = function (element) {
-        var rect = element.getBoundingClientRect();
-        var scrollTop = window.scrollY || document.documentElement.scrollTop;
-        var scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-        var elementHeight = rect.height;
-        var elementWidth = rect.width;
-        return {
-            top: rect.top + scrollTop,
-            left: rect.left + scrollLeft,
-            right: rect.left + scrollLeft + elementWidth,
-            elementHeight: elementHeight,
-            elementWidth: elementWidth,
-        };
-    };
-    var ɵ0$4 = getElementPositionInfo;
 
     var HelpPopoverModule = /** @class */ (function () {
         function HelpPopoverModule() {
@@ -22794,6 +22834,8 @@
     exports.convertToMomentDateFormat = convertToMomentDateFormat;
     exports.countries = countries;
     exports.fallback = fallback;
+    exports.getElementLeftoverContentAvailable = getElementLeftoverContentAvailable;
+    exports.getElementPositionInfo = getElementPositionInfo;
     exports.isMousePositionOutsideOfElement = isMousePositionOutsideOfElement;
     exports.isNullOrUndefined = isNullOrUndefined;
     exports.parseItensPickList = parseItensPickList;