@seniorsistemas/angular-components 17.9.0 → 17.9.1

package/fesm5/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __assign, __extends, __spread, __awaiter, __generator, __param, __values, __rest, __read } from 'tslib';
-import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, KeyValueDiffers, HostBinding, Renderer2, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, ContentChild, Optional, ViewChildren } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Renderer2, Directive, KeyValueDiffers, HostBinding, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, ContentChild, Optional, ViewChildren } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, forkJoin } from 'rxjs';
 import { takeUntil, tap, map, switchMap, catchError, first, filter, take, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
@@ -445,13 +445,14 @@ var TooltipEvent;
 })(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 = TooltipPosition.Top;
         this.showDelay = 500;
         this.tooltipEvent = TooltipEvent.Hover;
@@ -464,6 +465,7 @@ var TooltipDirective = /** @class */ (function () {
     }
     TooltipDirective.prototype.ngOnInit = function () {
         this.validatePosition();
+        this.updateTooltipVisibilityWhenFocusOnInput();
     };
     TooltipDirective.prototype.ngOnDestroy = function () {
         this.destroy();
@@ -487,6 +489,59 @@ var TooltipDirective = /** @class */ (function () {
     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 () {
@@ -551,10 +606,7 @@ var TooltipDirective = /** @class */ (function () {
     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);
@@ -564,6 +616,27 @@ var TooltipDirective = /** @class */ (function () {
             }
         }
     };
+    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;
@@ -681,7 +754,8 @@ var TooltipDirective = /** @class */ (function () {
         { type: ApplicationRef },
         { type: ComponentFactoryResolver },
         { type: Injector },
-        { type: DebounceUtils }
+        { type: DebounceUtils },
+        { type: Renderer2 }
     ]; };
     __decorate([
         Input("sTooltip")
@@ -707,6 +781,9 @@ var TooltipDirective = /** @class */ (function () {
     __decorate([
         Input()
     ], TooltipDirective.prototype, "mobileBehavior", void 0);
+    __decorate([
+        Input()
+    ], TooltipDirective.prototype, "focusedInputRef", void 0);
     __decorate([
         HostListener("click"),
         HostListener("keydown")
@@ -6572,7 +6649,7 @@ var InfoSignComponent = /** @class */ (function () {
     InfoSignComponent = __decorate([
         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);
@@ -6594,6 +6671,7 @@ var InfoSignDirective = /** @class */ (function () {
             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;
@@ -6619,6 +6697,9 @@ var InfoSignDirective = /** @class */ (function () {
     __decorate([
         Input('sInfoSignDisplayTime')
     ], InfoSignDirective.prototype, "displayTime", void 0);
+    __decorate([
+        Input('sInfoSignFocusedInputRef')
+    ], InfoSignDirective.prototype, "focusedInputRef", void 0);
     InfoSignDirective = __decorate([
         Directive({
             selector: "[sInfoSign]",