@seniorsistemas/angular-components 17.9.0 → 17.9.1

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

@@ -591,13 +591,14 @@
     })(TooltipEvent || (TooltipEvent = {}));
 
     var TooltipDirective = /** @class */ (function () {
-        function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector, debounceUtils) {
+        function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector, debounceUtils, renderer) {
             var _this = this;
             this.elementRef = elementRef;
             this.appRef = appRef;
             this.componentFactoryResolver = componentFactoryResolver;
             this.injector = injector;
             this.debounceUtils = debounceUtils;
+            this.renderer = renderer;
             this.position = exports.TooltipPosition.Top;
             this.showDelay = 500;
             this.tooltipEvent = TooltipEvent.Hover;
@@ -610,6 +611,7 @@
         }
         TooltipDirective.prototype.ngOnInit = function () {
             this.validatePosition();
+            this.updateTooltipVisibilityWhenFocusOnInput();
         };
         TooltipDirective.prototype.ngOnDestroy = function () {
             this.destroy();
@@ -633,6 +635,59 @@
         TooltipDirective.prototype.isMousePositionOutsideOfElement = function (mouseX, mouseY, elementArea) {
             return mouseX < elementArea.left || mouseX >= elementArea.right || mouseY < elementArea.top || mouseY >= elementArea.bottom;
         };
+        /**
+         * Manipula a visibilidade do tooltip quando houver uma referência de input.
+         */
+        TooltipDirective.prototype.updateTooltipVisibilityWhenFocusOnInput = function () {
+            var _this = this;
+            if (this.focusedInputRef) {
+                var inputFocus = this.focusedInputRef;
+                var icon_1 = this.getIconFromFocusedInput(inputFocus);
+                this.renderer.listen(inputFocus, 'focus', function () {
+                    if (icon_1 && _this.isMatchingTooltip(icon_1)) {
+                        _this.createTootipByFocus(icon_1);
+                    }
+                });
+                this.renderer.listen(inputFocus, 'blur', function () {
+                    if (icon_1 && _this.isMatchingTooltip(icon_1)) {
+                        _this.removeTooltip(icon_1);
+                        _this.destroy();
+                    }
+                });
+            }
+        };
+        /**
+         * Obtém o elemento do ícone associado ao label do input em focus.
+         * @param focusedInput O input em focus.
+         * @returns O ícone do input em focus ou null.
+         */
+        TooltipDirective.prototype.getIconFromFocusedInput = function (focusedInput) {
+            var label = document.querySelector("label[for='" + focusedInput.id + "']");
+            if (label) {
+                var icon = label.nextElementSibling;
+                return (icon === null || icon === void 0 ? void 0 : icon.classList.contains('info-sign__icon')) ? icon : null;
+            }
+            return null;
+        };
+        /**
+         * Verifica se o ícone tem o tooltip correspondente ao atual.
+         * @param icon O ícone do input em focus.
+         * @returns true se o tooltip corresponde; caso contrário, false.
+         */
+        TooltipDirective.prototype.isMatchingTooltip = function (icon) {
+            var tooltipText = icon.getAttribute('ng-reflect-tooltip');
+            return this.tooltip === tooltipText;
+        };
+        /**
+         * Remove o tooltip associado ao ícone do input em focus.
+         * @param icon O ícone do input em focus.
+         */
+        TooltipDirective.prototype.removeTooltip = function (icon) {
+            var tooltip = icon.querySelector('.tooltip');
+            if (tooltip) {
+                tooltip.remove();
+            }
+        };
         // 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 () {
@@ -697,10 +752,7 @@
         TooltipDirective.prototype.createTootip = function () {
             var _a;
             if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
-                this.componentRef = componentFactory.create(this.injector);
-                this.appRef.attachView(this.componentRef.hostView);
-                var domElem = this.componentRef.hostView.rootNodes[0];
+                var domElem = this.getDomElement();
                 document.body.appendChild(domElem);
                 this.setTooltipComponentProperties();
                 this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
@@ -710,6 +762,27 @@
                 }
             }
         };
+        TooltipDirective.prototype.getDomElement = function () {
+            var componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
+            this.componentRef = componentFactory.create(this.injector);
+            this.appRef.attachView(this.componentRef.hostView);
+            return this.componentRef.hostView.rootNodes[0];
+        };
+        /**
+         * Cria um tooltip para o icone do input em focus.
+         *
+         * @param icon O ícone do input em focus.
+         */
+        TooltipDirective.prototype.createTootipByFocus = function (icon) {
+            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');
+                icon.appendChild(tooltip_1);
+                this.setTooltipComponentProperties();
+                setTimeout(function () { return tooltip_1.classList.add("tooltip--visible"); }, 0);
+            }
+        };
         TooltipDirective.prototype.showTooltip = function () {
             if (this.componentRef !== null) {
                 this.componentRef.instance.visible = this.visible;
@@ -827,7 +900,8 @@
             { type: core.ApplicationRef },
             { type: core.ComponentFactoryResolver },
             { type: core.Injector },
-            { type: DebounceUtils }
+            { type: DebounceUtils },
+            { type: core.Renderer2 }
         ]; };
         __decorate([
             core.Input("sTooltip")
@@ -853,6 +927,9 @@
         __decorate([
             core.Input()
         ], TooltipDirective.prototype, "mobileBehavior", void 0);
+        __decorate([
+            core.Input()
+        ], TooltipDirective.prototype, "focusedInputRef", void 0);
         __decorate([
             core.HostListener("click"),
             core.HostListener("keydown")
@@ -6718,7 +6795,7 @@
         InfoSignComponent = __decorate([
             core.Component({
                 selector: "s-info-sign-component",
-                template: "<span class=\"info-sign\">\n    <span *ngTemplateOutlet=\"templateRef\"></span>\n    <i\n        class=\"info-sign__icon fa fa-info-circle\"\n        aria-hidden=\"true\"\n        [sTooltip]=\"tooltip\"\n        [escape]=\"false\"\n        tooltipPosition=\"top\"\n        [displayTime]=\"displayTime\"\n        mobileBehavior=\"tap\"\n        showDelay=\"0\">\n    </i>\n</span>",
+                template: "<span class=\"info-sign\">\n    <span *ngTemplateOutlet=\"templateRef\"></span>\n    <i\n        class=\"info-sign__icon fa fa-info-circle\"\n        aria-hidden=\"true\"\n        [sTooltip]=\"tooltip\"\n        [escape]=\"false\"\n        tooltipPosition=\"top\"\n        [displayTime]=\"displayTime\"\n        mobileBehavior=\"tap\"\n        showDelay=\"0\"\n        [focusedInputRef]=\"focusedInputRef\">\n    </i>\n</span>\n",
                 styles: [".info-sign{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start}.info-sign .info-sign__icon{padding:0 12px}"]
             })
         ], InfoSignComponent);
@@ -6740,6 +6817,7 @@
                 this.componentRef.instance.templateRef = this.templateRef;
                 this.componentRef.instance.tooltip = this.sInfoSign;
                 this.componentRef.instance.displayTime = this.displayTime;
+                this.componentRef.instance.focusedInputRef = this.focusedInputRef;
             }
             else if (this.componentRef && this.sInfoSign) {
                 this.componentRef.instance.tooltip = this.sInfoSign;
@@ -6765,6 +6843,9 @@
         __decorate([
             core.Input('sInfoSignDisplayTime')
         ], InfoSignDirective.prototype, "displayTime", void 0);
+        __decorate([
+            core.Input('sInfoSignFocusedInputRef')
+        ], InfoSignDirective.prototype, "focusedInputRef", void 0);
         InfoSignDirective = __decorate([
             core.Directive({
                 selector: "[sInfoSign]",