@seniorsistemas/angular-components 17.17.13 → 17.17.14

package/fesm5/seniorsistemas-angular-components.js

@@ -387,6 +387,8 @@ var TooltipComponent = /** @class */ (function () {
     return TooltipComponent;
 }());
 
+var isNullOrUndefined = function (value) { return value === null || value === undefined; };
+
 var DEFAULT_TIMER = 300;
 var DebounceUtils = /** @class */ (function () {
     function DebounceUtils() {
@@ -461,8 +463,9 @@ var TooltipDirective = /** @class */ (function () {
         this.visible = true;
         this.mobileBehavior = MobileBehavior.Pressing;
         this.componentRef = null;
+        this.existFocusedInputRefTooltip = false;
         this.boundOnWindowMouseMoveFunction = this.onWindowMouseMove.bind(this);
-        this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(function () { return _this.createTootip(); });
+        this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(function () { return _this._createTooltip(true, true); });
     }
     TooltipDirective.prototype.ngOnInit = function () {
         this.validatePosition();
@@ -483,7 +486,7 @@ var TooltipDirective = /** @class */ (function () {
             left: Math.min(elementRect.left, toolTipRect.left),
             bottom: Math.max(elementRect.bottom, toolTipRect.bottom),
         };
-        if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea)) {
+        if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea) && !this.existFocusedInputRefTooltip) {
             this.destroy();
         }
     };
@@ -498,15 +501,17 @@ var TooltipDirective = /** @class */ (function () {
         if (this.focusedInputRef) {
             var inputFocus = this.focusedInputRef;
             var icon_1 = this.getIconFromFocusedInput();
-            this.renderer.listen(this.focusedInputRef, "focus", function () {
+            this.renderer.listen(inputFocus, "focus", function () {
                 if (icon_1) {
-                    _this.createTootipByFocus(icon_1);
+                    _this.existFocusedInputRefTooltip = true;
+                    _this._createTooltip(false, false);
                 }
             });
             this.renderer.listen(inputFocus, "blur", function () {
                 if (icon_1) {
                     _this.removeTooltip(icon_1);
                     _this.destroy();
+                    _this.existFocusedInputRefTooltip = false;
                 }
             });
         }
@@ -537,7 +542,7 @@ var TooltipDirective = /** @class */ (function () {
     };
     TooltipDirective.prototype.onFocus = function () {
         if (this.tooltipEvent === TooltipEvent.Focus) {
-            this.createTootip();
+            this._createTooltip(true, true);
         }
     };
     TooltipDirective.prototype.onBlur = function () {
@@ -551,14 +556,18 @@ var TooltipDirective = /** @class */ (function () {
         }
     };
     TooltipDirective.prototype.onMouseLeave = function () {
-        if (this.tooltipEvent === TooltipEvent.Hover) {
+        if (this.tooltipEvent === TooltipEvent.Hover && !this.existFocusedInputRefTooltip) {
             this.destroy();
         }
     };
     TooltipDirective.prototype.onTouchStart = function () {
+        var _this = this;
         if (this.tooltipEvent === TooltipEvent.Hover) {
             window.clearTimeout(this.touchTimeout);
-            this.touchTimeout = window.setTimeout(this.createTootip.bind(this), this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0);
+            var _delay = this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0;
+            this.touchTimeout = window.setTimeout(function () {
+                _this._createTooltip(true, true);
+            }, _delay);
         }
     };
     TooltipDirective.prototype.onTouchEnd = function () {
@@ -576,43 +585,37 @@ var TooltipDirective = /** @class */ (function () {
             throw new Error("Tooltip " + this.position + " position is unexpected");
         }
     };
-    TooltipDirective.prototype.createTootip = function () {
-        var _a;
-        if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-            var domElem = this.getDomElement();
-            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);
-            }
-        }
-    };
     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) {
+    TooltipDirective.prototype._createTooltip = function (useShowDelay, autoDestroy) {
         var _this = this;
+        if (useShowDelay === void 0) { useShowDelay = false; }
+        if (autoDestroy === void 0) { autoDestroy = true; }
         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();
-            this.setTooltipPositionProperty(icon);
-            setTimeout(function () { return tooltip_1.classList.add("tooltip--visible"); }, 0);
-            this.renderer.listen(window, "scroll", function () {
-                _this.setTooltipPositionProperty(icon);
-            });
+        var hasText = ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        var hasComponentRef = this.componentRef !== null;
+        if (!hasText || hasComponentRef) {
+            return;
+        }
+        var domElement = this.getDomElement();
+        document.body.appendChild(domElement);
+        this.tooltipDivElement = domElement.querySelector(".tooltip");
+        this.setTooltipComponentProperties();
+        var _showDelay = useShowDelay ? this.showDelay : 0;
+        setTimeout(function () {
+            _this.showTooltip();
+        }, _showDelay);
+        this.renderer.listen(window, "scroll", function () {
+            _this.setTooltipPositionProperty();
+        });
+        if (autoDestroy && this.displayTime) {
+            setTimeout(function () {
+                _this.destroy();
+            }, this.displayTime);
         }
     };
     TooltipDirective.prototype.showTooltip = function () {
@@ -622,11 +625,14 @@ var TooltipDirective = /** @class */ (function () {
             window.addEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
         }
     };
-    TooltipDirective.prototype.setTooltipPositionProperty = function (element) {
+    TooltipDirective.prototype.setTooltipPositionProperty = function () {
         var e_1, _a;
+        if (!this.componentRef) {
+            return;
+        }
         var margin = 20;
         var anchorSize = 5;
-        var domElem = element || this.componentRef.hostView.rootNodes[0].querySelector("#tooltip");
+        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 = [
@@ -686,7 +692,7 @@ var TooltipDirective = /** @class */ (function () {
         }
     };
     TooltipDirective.prototype.destroy = function () {
-        if (this.componentRef !== null) {
+        if (!isNullOrUndefined(this.componentRef)) {
             window.clearTimeout(this.showTimeout);
             this.appRef.detachView(this.componentRef.hostView);
             this.componentRef.destroy();
@@ -5245,8 +5251,6 @@ var convertToMomentDateFormat = function (format) {
         .replace(/\byy\b/, "YYYY"); // year (four digits)
 };
 
-var isNullOrUndefined = function (value) { return value === null || value === undefined; };
-
 var CountryPhonePickerComponent = /** @class */ (function () {
     function CountryPhonePickerComponent(_countryPhonePickerService, _translate, _eRef, platformId) {
         var _this = this;
@@ -5641,7 +5645,7 @@ var FieldSize = /** @class */ (function () {
 var Field = /** @class */ (function () {
     function Field(config) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if ((_a = config.footer) === null || _a === void 0 ? void 0 : _a.help) {
             config.footer.help = __assign({ visible: function () { return true; } }, (_b = config.footer) === null || _b === void 0 ? void 0 : _b.help);
         }
@@ -5668,6 +5672,7 @@ var Field = /** @class */ (function () {
         this.CustomFieldClass = config.CustomFieldClass;
         this.CustomFieldComponentClass = config.CustomFieldComponentClass;
         this.displayTimeInfoSign = (_e = config.displayTimeInfoSign) !== null && _e !== void 0 ? _e : 5000;
+        this.useInfoSignFocusedInputRef = (_f = config.useInfoSignFocusedInputRef) !== null && _f !== void 0 ? _f : true;
     }
     return Field;
 }());
@@ -7699,6 +7704,7 @@ var InfoSignDirective = /** @class */ (function () {
         this.viewContainer = viewContainer;
         this.componentFactoryResolver = componentFactoryResolver;
         this.displayTime = 5000;
+        this.useFocusedInputRef = true;
     }
     InfoSignDirective.prototype.ngOnChanges = function () {
         this.createInfoSign();
@@ -7716,10 +7722,13 @@ var InfoSignDirective = /** @class */ (function () {
             this.viewContainer.clear();
             var componentFactory = this.componentFactoryResolver.resolveComponentFactory(InfoSignComponent);
             this.componentRef = this.viewContainer.createComponent(componentFactory);
-            this.componentRef.instance.templateRef = this.templateRef;
-            this.componentRef.instance.tooltip = this.sInfoSign;
-            this.componentRef.instance.displayTime = this.displayTime;
-            this.componentRef.instance.focusedInputRef = this.focusedInputRef;
+            var _infoSignComponent = this.componentRef.instance;
+            _infoSignComponent.templateRef = this.templateRef;
+            _infoSignComponent.tooltip = this.sInfoSign;
+            _infoSignComponent.displayTime = this.displayTime;
+            if (this.useFocusedInputRef) {
+                _infoSignComponent.focusedInputRef = this.focusedInputRef;
+            }
         }
         else if (this.componentRef && this.sInfoSign) {
             this.componentRef.instance.tooltip = this.sInfoSign;
@@ -7743,6 +7752,9 @@ var InfoSignDirective = /** @class */ (function () {
     __decorate([
         Input('sInfoSignFocusedInputRef')
     ], InfoSignDirective.prototype, "focusedInputRef", void 0);
+    __decorate([
+        Input('sInfoSignUseFocusedInputRef')
+    ], InfoSignDirective.prototype, "useFocusedInputRef", void 0);
     InfoSignDirective = __decorate([
         Directive({
             selector: "[sInfoSign]"
@@ -10760,9 +10772,9 @@ var RadioButtonComponent = /** @class */ (function () {
     ], RadioButtonComponent.prototype, "onFocus", void 0);
     RadioButtonComponent = __decorate([
         Component({
-            template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
+            template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g horizontal-radio-buttons-container\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        class=\"radio-button-item\"\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
             encapsulation: ViewEncapsulation.None,
-            styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n    "]
+            styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n\n        .horizontal-radio-buttons-container {\n            gap: 20px 40px;\n            .radio-button-item {\n                margin: 0;\n            }\n        }\n    "]
         })
     ], RadioButtonComponent);
     return RadioButtonComponent;
@@ -11084,7 +11096,7 @@ var RowComponent = /** @class */ (function () {
     ], RowComponent.prototype, "errorMessages", void 0);
     RowComponent = __decorate([
         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                    <ng-container *ngIf=\"field.type === FieldType.Custom && field.label\" >\n                        <label *sInfoSign=\"field.infoSign\" [for]=\"field.name\" [ngClass]=\"{ required: field.required() }\" >\n                            {{ field.label }}\n                        </label>\n                    </ng-container>\n\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\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                    <ng-container *ngIf=\"field.type === FieldType.Custom && field.label\" >\n                        <label *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef\" [for]=\"field.name\" [ngClass]=\"{ required: field.required() }\" >\n                            {{ field.label }}\n                        </label>\n                    </ng-container>\n\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
         })
     ], RowComponent);
     return RowComponent;
@@ -11118,7 +11130,7 @@ var DynamicFieldComponent = /** @class */ (function () {
     DynamicFieldComponent = __decorate([
         Component({
             selector: "s-dynamic-field",
-            template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"\n                            field.infoSign;\n                            displayTime: field.displayTimeInfoSign\n                        \"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
+            template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef\"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
         })
     ], DynamicFieldComponent);
     return DynamicFieldComponent;
@@ -11890,7 +11902,7 @@ var FieldLabelComponent = /** @class */ (function () {
     FieldLabelComponent = __decorate([
         Component({
             selector: 's-field-label',
-            template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
+            template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef; useFocusedInputRef: field.useInfoSignFocusedInputRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
         })
     ], FieldLabelComponent);
     return FieldLabelComponent;