@seniorsistemas/angular-components 17.17.12 → 17.17.14

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

@@ -532,6 +532,8 @@
         return TooltipComponent;
     }());
 
+    var isNullOrUndefined = function (value) { return value === null || value === undefined; };
+
     var DEFAULT_TIMER = 300;
     var DebounceUtils = /** @class */ (function () {
         function DebounceUtils() {
@@ -606,8 +608,9 @@
             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();
@@ -628,7 +631,7 @@
                 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();
             }
         };
@@ -643,15 +646,17 @@
             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;
                     }
                 });
             }
@@ -682,7 +687,7 @@
         };
         TooltipDirective.prototype.onFocus = function () {
             if (this.tooltipEvent === TooltipEvent.Focus) {
-                this.createTootip();
+                this._createTooltip(true, true);
             }
         };
         TooltipDirective.prototype.onBlur = function () {
@@ -696,14 +701,18 @@
             }
         };
         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 () {
@@ -721,43 +730,37 @@
                 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 () {
@@ -767,11 +770,14 @@
                 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 = [
@@ -831,7 +837,7 @@
             }
         };
         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();
@@ -5390,8 +5396,6 @@
             .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;
@@ -5786,7 +5790,7 @@
     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);
             }
@@ -5813,6 +5817,7 @@
             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;
     }());
@@ -7844,6 +7849,7 @@
             this.viewContainer = viewContainer;
             this.componentFactoryResolver = componentFactoryResolver;
             this.displayTime = 5000;
+            this.useFocusedInputRef = true;
         }
         InfoSignDirective.prototype.ngOnChanges = function () {
             this.createInfoSign();
@@ -7861,10 +7867,13 @@
                 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;
@@ -7888,6 +7897,9 @@
         __decorate([
             core.Input('sInfoSignFocusedInputRef')
         ], InfoSignDirective.prototype, "focusedInputRef", void 0);
+        __decorate([
+            core.Input('sInfoSignUseFocusedInputRef')
+        ], InfoSignDirective.prototype, "useFocusedInputRef", void 0);
         InfoSignDirective = __decorate([
             core.Directive({
                 selector: "[sInfoSign]"
@@ -10316,9 +10328,7 @@
          */
         TablePagingComponent.prototype.mapNumberFormatOptionsExport = function (columns, tableData) {
             var hasNumberFormatOptionsColumns = columns.some(function (column) { return column.numberFormatOptions; });
-            var hasNumberFormatOptionsRows = tableData.some(function (rowData) {
-                return Object.keys(rowData).some(function (key) { var _a; return (_a = rowData[key].options) === null || _a === void 0 ? void 0 : _a.numberFormatOptions; });
-            });
+            var hasNumberFormatOptionsRows = tableData.some(function (rowData) { return Object.keys(rowData).some(function (key) { var _a, _b; return (_b = (_a = rowData[key]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.numberFormatOptions; }); });
             if (!hasNumberFormatOptionsColumns && !hasNumberFormatOptionsRows)
                 return tableData;
             var mappedTableData = __spread(tableData);
@@ -10334,8 +10344,9 @@
                             try {
                                 for (var attributes_1 = (e_2 = void 0, __values(attributes)), attributes_1_1 = attributes_1.next(); !attributes_1_1.done; attributes_1_1 = attributes_1.next()) {
                                     var attribute = attributes_1_1.value;
-                                    if ((_c = row[attribute].options) === null || _c === void 0 ? void 0 : _c.numberFormatOptions)
+                                    if ((_c = row[attribute].options) === null || _c === void 0 ? void 0 : _c.numberFormatOptions) {
                                         continue;
+                                    }
                                     var value = row[attribute];
                                     var mappedValue = numberFormatOptions.style === "percent" ? new BigNumber__default(value).times(100) : new BigNumber__default(value);
                                     var numberFormat = new Intl.NumberFormat("en-US", __assign(__assign({}, numberFormatOptions), { style: "decimal", useGrouping: false }));
@@ -10365,7 +10376,8 @@
                 mappedTableData = tableData.map(function (rowData) {
                     var e_3, _a;
                     var row = __assign({}, rowData);
-                    var keysWithNumberFormatOptions = Object.keys(row).filter(function (key) { var _a; return (_a = row[key].options) === null || _a === void 0 ? void 0 : _a.numberFormatOptions; });
+                    var keysWithNumberFormatOptions = Object.keys(row)
+                        .filter(function (key) { var _a, _b; return (_b = (_a = row[key]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.numberFormatOptions; });
                     try {
                         for (var keysWithNumberFormatOptions_1 = __values(keysWithNumberFormatOptions), keysWithNumberFormatOptions_1_1 = keysWithNumberFormatOptions_1.next(); !keysWithNumberFormatOptions_1_1.done; keysWithNumberFormatOptions_1_1 = keysWithNumberFormatOptions_1.next()) {
                             var key = keysWithNumberFormatOptions_1_1.value;
@@ -10905,9 +10917,9 @@
         ], RadioButtonComponent.prototype, "onFocus", void 0);
         RadioButtonComponent = __decorate([
             core.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: core.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;
@@ -11229,7 +11241,7 @@
         ], RowComponent.prototype, "errorMessages", void 0);
         RowComponent = __decorate([
             core.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;
@@ -11263,7 +11275,7 @@
         DynamicFieldComponent = __decorate([
             core.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;
@@ -12035,7 +12047,7 @@
         FieldLabelComponent = __decorate([
             core.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;