@seniorsistemas/angular-components 17.10.0 → 17.10.1

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

@@ -525,8 +525,8 @@
         }
         TooltipComponent = __decorate([
             core.Component({
-                template: "<div\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:150px;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)}"]
+                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)}"]
             })
         ], TooltipComponent);
         return TooltipComponent;
@@ -626,7 +626,7 @@
                 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)
+                bottom: Math.max(elementRect.bottom, toolTipRect.bottom),
             };
             if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea)) {
                 this.destroy();
@@ -643,12 +643,12 @@
             if (this.focusedInputRef) {
                 var inputFocus = this.focusedInputRef;
                 var icon_1 = this.getIconFromFocusedInput();
-                this.renderer.listen(this.focusedInputRef, 'focus', function () {
+                this.renderer.listen(this.focusedInputRef, "focus", function () {
                     if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                         _this.createTootipByFocus(icon_1);
                     }
                 });
-                this.renderer.listen(inputFocus, 'blur', function () {
+                this.renderer.listen(inputFocus, "blur", function () {
                     if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                         _this.removeTooltip(icon_1);
                         _this.destroy();
@@ -669,7 +669,7 @@
          * @returns true se o tooltip corresponde; caso contrário, false.
          */
         TooltipDirective.prototype.isMatchingTooltip = function (icon) {
-            var tooltipText = icon.getAttribute('ng-reflect-tooltip');
+            var tooltipText = icon.getAttribute("ng-reflect-tooltip");
             return this.tooltip === tooltipText;
         };
         /**
@@ -677,7 +677,7 @@
          * @param icon O ícone do input em focus.
          */
         TooltipDirective.prototype.removeTooltip = function (icon) {
-            var tooltip = icon.querySelector('.tooltip');
+            var tooltip = icon.querySelector(".tooltip");
             if (tooltip) {
                 tooltip.remove();
             }
@@ -685,9 +685,7 @@
         // 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 () {
-            if (this.tooltipEvent === TooltipEvent.Hover &&
-                !navigator.userAgent.match(/Android/i) &&
-                !navigator.userAgent.match(/iPhone/i)) {
+            if (this.tooltipEvent === TooltipEvent.Hover && !navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/iPhone/i)) {
                 this.destroy();
             }
         };
@@ -732,12 +730,7 @@
             }
         };
         TooltipDirective.prototype.validatePosition = function () {
-            var containsPosition = [
-                exports.TooltipPosition.Top,
-                exports.TooltipPosition.Right,
-                exports.TooltipPosition.Bottom,
-                exports.TooltipPosition.Left,
-            ].includes(this.position);
+            var containsPosition = [exports.TooltipPosition.Top, exports.TooltipPosition.Right, exports.TooltipPosition.Bottom, exports.TooltipPosition.Left].includes(this.position);
             if (!containsPosition) {
                 this.position = exports.TooltipPosition.Top;
                 throw new Error("Tooltip " + this.position + " position is unexpected");
@@ -750,7 +743,7 @@
                 document.body.appendChild(domElem);
                 this.setTooltipComponentProperties();
                 this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
-                this.tooltipDivElement = domElem.querySelector('.tooltip');
+                this.tooltipDivElement = domElem.querySelector(".tooltip");
                 if (this.displayTime) {
                     window.setTimeout(this.destroy.bind(this), this.displayTime);
                 }
@@ -772,142 +765,81 @@
             var _a;
             if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
                 var domElem = this.getDomElement();
-                var tooltip_1 = domElem.querySelector('.tooltip');
+                var tooltip_1 = domElem.querySelector(".tooltip");
                 icon.appendChild(tooltip_1);
                 this.setTooltipComponentProperties();
                 setTimeout(function () { return tooltip_1.classList.add("tooltip--visible"); }, 0);
-                this.renderer.listen(window, 'scroll', function () {
-                    _this.updateTooltipPosition();
+                this.renderer.listen(window, "scroll", function () {
+                    _this.setTooltipPositionProperty();
                 });
             }
         };
-        TooltipDirective.prototype.updateTooltipPosition = function () {
-            if (this.componentRef) {
-                var _a = this.elementRef.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right, top_1 = _a.top, bottom = _a.bottom;
-                var tooltipWidth = right - left;
-                var tooltipHeight = bottom - top_1;
-                switch (this.position) {
-                    case exports.TooltipPosition.Top:
-                        this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                        this.componentRef.instance.top = Math.round(top_1 - 20 - 5);
-                        break;
-                    case exports.TooltipPosition.Bottom:
-                        this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                        this.componentRef.instance.top = Math.round(bottom + 20);
-                        break;
-                    case exports.TooltipPosition.Left:
-                        this.componentRef.instance.left = Math.round(left - 20);
-                        this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - 5);
-                        break;
-                    case exports.TooltipPosition.Right:
-                        this.componentRef.instance.left = Math.round(right + 20);
-                        this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - 5);
-                        break;
-                    default:
-                        break;
-                }
-            }
-        };
         TooltipDirective.prototype.showTooltip = function () {
             if (this.componentRef !== null) {
                 this.componentRef.instance.visible = this.visible;
-                window.addEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
+                this.setTooltipPositionProperty();
+                window.addEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
             }
         };
-        TooltipDirective.prototype.setTooltipComponentProperties = function () {
+        TooltipDirective.prototype.setTooltipPositionProperty = function () {
+            var e_1, _a;
             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 positions = [
+                {
+                    pos: exports.TooltipPosition.Top,
+                    check: function () { return top > height; },
+                    set: function () { return ({ left: left + (right - left) / 2, top: top - margin - anchorSize }); },
+                },
+                {
+                    pos: exports.TooltipPosition.Bottom,
+                    check: function () { return document.body.clientHeight - bottom > height; },
+                    set: function () { return ({ left: left + (right - left) / 2, top: bottom + margin }); },
+                },
+                {
+                    pos: exports.TooltipPosition.Left,
+                    check: function () { return left > width; },
+                    set: function () { return ({ left: left - margin, top: top + height / 2 - anchorSize }); },
+                },
+                {
+                    pos: exports.TooltipPosition.Right,
+                    check: function () { return document.body.clientWidth - right > width; },
+                    set: function () { return ({ left: right + margin, top: top + height / 2 - anchorSize }); },
+                },
+            ];
+            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;
+                    }
+                }
+            }
+            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; }
+            }
+            // 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;
+        };
+        TooltipDirective.prototype.setTooltipComponentProperties = function () {
             if (this.componentRef !== null) {
                 this.componentRef.instance.tooltip = this.tooltip;
                 this.componentRef.instance.escape = this.escape;
-                var _a = this.elementRef.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right, top_2 = _a.top, bottom = _a.bottom;
-                var tooltipHeight = bottom - top_2;
-                var tooltipWidth = right - left;
-                var safeSpace = 150;
-                var positioned = false;
-                var invalidOptions = [];
-                while (!positioned) {
-                    if (invalidOptions.includes(exports.TooltipPosition.Top)
-                        && invalidOptions.includes(exports.TooltipPosition.Bottom)
-                        && invalidOptions.includes(exports.TooltipPosition.Left)
-                        && invalidOptions.includes(exports.TooltipPosition.Right)) {
-                        this.destroy();
-                        throw new Error("No space to show tooltip");
-                    }
-                    switch (this.position) {
-                        case exports.TooltipPosition.Top: {
-                            if (invalidOptions.includes(exports.TooltipPosition.Top)) {
-                                this.position = exports.TooltipPosition.Left;
-                                break;
-                            }
-                            var topShift = top_2;
-                            if (topShift <= tooltipHeight + safeSpace) {
-                                this.position = exports.TooltipPosition.Bottom;
-                                invalidOptions.push(exports.TooltipPosition.Top);
-                                positioned = false;
-                                break;
-                            }
-                            this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                            this.componentRef.instance.top = Math.round(top_2 - margin - anchorSize);
-                            positioned = true;
-                            break;
-                        }
-                        case exports.TooltipPosition.Bottom: {
-                            if (invalidOptions.includes(exports.TooltipPosition.Bottom)) {
-                                this.position = exports.TooltipPosition.Left;
-                                break;
-                            }
-                            var bottomShift = document.body.clientHeight - bottom;
-                            if (bottomShift <= tooltipHeight + safeSpace) {
-                                this.position = exports.TooltipPosition.Top;
-                                invalidOptions.push(exports.TooltipPosition.Bottom);
-                                break;
-                            }
-                            this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                            this.componentRef.instance.top = Math.round(bottom + margin);
-                            positioned = true;
-                            break;
-                        }
-                        case exports.TooltipPosition.Left: {
-                            if (invalidOptions.includes(exports.TooltipPosition.Left)) {
-                                this.position = exports.TooltipPosition.Top;
-                                break;
-                            }
-                            var leftShift = left;
-                            if (leftShift <= tooltipWidth + safeSpace) {
-                                this.position = exports.TooltipPosition.Right;
-                                invalidOptions.push(exports.TooltipPosition.Left);
-                                positioned = false;
-                                break;
-                            }
-                            this.componentRef.instance.left = Math.round(left - margin);
-                            this.componentRef.instance.top = Math.round(top_2 + tooltipHeight / 2 - anchorSize);
-                            positioned = true;
-                            break;
-                        }
-                        case exports.TooltipPosition.Right: {
-                            if (invalidOptions.includes(exports.TooltipPosition.Right)) {
-                                this.position = exports.TooltipPosition.Top;
-                                break;
-                            }
-                            var rightShift = document.body.clientWidth - right;
-                            if (rightShift <= tooltipWidth + safeSpace) {
-                                this.position = exports.TooltipPosition.Left;
-                                invalidOptions.push(exports.TooltipPosition.Right);
-                                positioned = false;
-                                break;
-                            }
-                            this.componentRef.instance.left = Math.round(right + margin);
-                            this.componentRef.instance.top = Math.round(top_2 + tooltipHeight / 2 - anchorSize);
-                            positioned = true;
-                            break;
-                        }
-                        default: {
-                            break;
-                        }
-                    }
-                    this.componentRef.instance.position = this.position;
-                }
             }
         };
         TooltipDirective.prototype.destroy = function () {
@@ -918,7 +850,7 @@
                 this.componentRef = null;
                 this.tooltipDivElement = null;
             }
-            window.removeEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
+            window.removeEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
         };
         TooltipDirective.ctorParameters = function () { return [
             { type: core.ElementRef },
@@ -9572,7 +9504,7 @@
         ], LookupFieldComponent.prototype, "formControl", void 0);
         LookupFieldComponent = __decorate([
             core.Component({
-                template: "<s-field-label [field]=\"field\">\n\n<div [sTooltip]=\"field.tooltip\" tooltipPosition=\"top\" [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"field.id || field.name\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [lookupSuggestions]=\"field.lookupSuggestions\"\n        [dataKey]=\"field.dataKey\"\n        [placeholder]=\"field.placeholder\"\n        [showSearch]=\"field.showSearch\"\n        [searchFields]=\"field.searchFields\"\n        [searchGridFields]=\"field.searchGridFields\"\n        [searchGridData]=\"field.gridData\"\n        (onLookupRequest)=\"field.onLookupRequest($event)\"\n        (onSearchRequest)=\"field.onSearchRequest($event)\"\n        [lookupDisplayField]=\"field.lookupDisplayField\"\n        [searchTotalRecords]=\"field.searchTotalRecords\"\n        [searchTotalRecordsLabel]=\"field.searchTotalRecordsLabel\"\n        [searchTitle]=\"field.searchTitle\"\n        [selectLabel]=\"field.selectLabel\"\n        [searchEmptyTitle]=\"field.searchEmptyTitle\"\n        [filterLabel]=\"field.filterLabel\"\n        [filterTitle]=\"field.filterTitle\"\n        [clearLabel]=\"field.clearLabel\"\n        [cancelLabel]=\"field.cancelLabel\"\n        [emptyFieldLabel]=\"field.emptyFieldLabel\"\n        (onSelect)=\"field.onSelect($event)\"\n        (onUnselect)=\"field.onUnselect($event)\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupAppendTo]=\"field.appendTo\"\n        [lookupEmptyMessage]=\"field.emptyMessage\"\n        [recordLabel]=\"field.recordLabel\"\n        [recordsLabel]=\"field.recordsLabel\"\n        [defaultFilter]=\"field.defaultFilter\"\n        [autocompleteForceSelection]=\"field.autocompleteForceSelection\"\n        [showAddOption]=\"field.showAddOption\"\n        [showEditOption]=\"field.showEditOption\"\n        [showRemoveOption]=\"field.showRemoveOption\"\n        (onAdd)=\"field.onAdd()\"\n        (onEdit)=\"field.onEdit($event)\"\n        (onRemove)=\"field.onRemove($event)\"\n    >\n    </s-lookup>\n</div>\n"
+                template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<div [sTooltip]=\"field.tooltip\" tooltipPosition=\"top\" [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"field.id || field.name\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [lookupSuggestions]=\"field.lookupSuggestions\"\n        [dataKey]=\"field.dataKey\"\n        [placeholder]=\"field.placeholder\"\n        [showSearch]=\"field.showSearch\"\n        [searchFields]=\"field.searchFields\"\n        [searchGridFields]=\"field.searchGridFields\"\n        [searchGridData]=\"field.gridData\"\n        (onLookupRequest)=\"field.onLookupRequest($event)\"\n        (onSearchRequest)=\"field.onSearchRequest($event)\"\n        [lookupDisplayField]=\"field.lookupDisplayField\"\n        [searchTotalRecords]=\"field.searchTotalRecords\"\n        [searchTotalRecordsLabel]=\"field.searchTotalRecordsLabel\"\n        [searchTitle]=\"field.searchTitle\"\n        [selectLabel]=\"field.selectLabel\"\n        [searchEmptyTitle]=\"field.searchEmptyTitle\"\n        [filterLabel]=\"field.filterLabel\"\n        [filterTitle]=\"field.filterTitle\"\n        [clearLabel]=\"field.clearLabel\"\n        [cancelLabel]=\"field.cancelLabel\"\n        [emptyFieldLabel]=\"field.emptyFieldLabel\"\n        (onSelect)=\"field.onSelect($event)\"\n        (onUnselect)=\"field.onUnselect($event)\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupAppendTo]=\"field.appendTo\"\n        [lookupEmptyMessage]=\"field.emptyMessage\"\n        [recordLabel]=\"field.recordLabel\"\n        [recordsLabel]=\"field.recordsLabel\"\n        [defaultFilter]=\"field.defaultFilter\"\n        [autocompleteForceSelection]=\"field.autocompleteForceSelection\"\n        [showAddOption]=\"field.showAddOption\"\n        [showEditOption]=\"field.showEditOption\"\n        [showRemoveOption]=\"field.showRemoveOption\"\n        (onAdd)=\"field.onAdd()\"\n        (onEdit)=\"field.onEdit($event)\"\n        (onRemove)=\"field.onRemove($event)\"\n    >\n    </s-lookup>\n</div>\n"
             })
         ], LookupFieldComponent);
         return LookupFieldComponent;