@seniorsistemas/angular-components 17.9.5 → 17.9.7

package/fesm5/seniorsistemas-angular-components.js

@@ -1,7 +1,7 @@
 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, 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 { Subject, of, from, ReplaySubject, throwError, fromEvent, forkJoin } from 'rxjs';
 import { takeUntil, tap, map, switchMap, catchError, first, filter, take, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup, NG_VALIDATORS, FormBuilder, Validators, FormArray, ControlContainer } from '@angular/forms';
@@ -495,13 +495,14 @@ var TooltipDirective = /** @class */ (function () {
     TooltipDirective.prototype.updateTooltipVisibilityWhenFocusOnInput = function () {
         var _this = this;
         if (this.focusedInputRef) {
+            var inputFocus = this.focusedInputRef;
             var icon_1 = this.getIconFromFocusedInput();
             this.renderer.listen(this.focusedInputRef, 'focus', function () {
                 if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                     _this.createTootipByFocus(icon_1);
                 }
             });
-            this.renderer.listen(this.focusedInputRef, 'blur', function () {
+            this.renderer.listen(inputFocus, 'blur', function () {
                 if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                     _this.removeTooltip(icon_1);
                     _this.destroy();
@@ -621,6 +622,7 @@ var TooltipDirective = /** @class */ (function () {
      * @param icon O ícone do input em focus.
      */
     TooltipDirective.prototype.createTootipByFocus = function (icon) {
+        var _this = this;
         var _a;
         if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
             var domElem = this.getDomElement();
@@ -628,6 +630,36 @@ var TooltipDirective = /** @class */ (function () {
             icon.appendChild(tooltip_1);
             this.setTooltipComponentProperties();
             setTimeout(function () { return tooltip_1.classList.add("tooltip--visible"); }, 0);
+            this.renderer.listen(window, 'scroll', function () {
+                _this.updateTooltipPosition();
+            });
+        }
+    };
+    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 TooltipPosition.Top:
+                    this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
+                    this.componentRef.instance.top = Math.round(top_1 - 20 - 5);
+                    break;
+                case TooltipPosition.Bottom:
+                    this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
+                    this.componentRef.instance.top = Math.round(bottom + 20);
+                    break;
+                case TooltipPosition.Left:
+                    this.componentRef.instance.left = Math.round(left - 20);
+                    this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - 5);
+                    break;
+                case 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 () {
@@ -642,8 +674,8 @@ var TooltipDirective = /** @class */ (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_1 = _a.top, bottom = _a.bottom;
-            var tooltipHeight = bottom - top_1;
+            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;
@@ -662,7 +694,7 @@ var TooltipDirective = /** @class */ (function () {
                             this.position = TooltipPosition.Left;
                             break;
                         }
-                        var topShift = top_1;
+                        var topShift = top_2;
                         if (topShift <= tooltipHeight + safeSpace) {
                             this.position = TooltipPosition.Bottom;
                             invalidOptions.push(TooltipPosition.Top);
@@ -670,7 +702,7 @@ var TooltipDirective = /** @class */ (function () {
                             break;
                         }
                         this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                        this.componentRef.instance.top = Math.round(top_1 - margin - anchorSize);
+                        this.componentRef.instance.top = Math.round(top_2 - margin - anchorSize);
                         positioned = true;
                         break;
                     }
@@ -703,7 +735,7 @@ var TooltipDirective = /** @class */ (function () {
                             break;
                         }
                         this.componentRef.instance.left = Math.round(left - margin);
-                        this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - anchorSize);
+                        this.componentRef.instance.top = Math.round(top_2 + tooltipHeight / 2 - anchorSize);
                         positioned = true;
                         break;
                     }
@@ -720,7 +752,7 @@ var TooltipDirective = /** @class */ (function () {
                             break;
                         }
                         this.componentRef.instance.left = Math.round(right + margin);
-                        this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - anchorSize);
+                        this.componentRef.instance.top = Math.round(top_2 + tooltipHeight / 2 - anchorSize);
                         positioned = true;
                         break;
                     }
@@ -4523,6 +4555,7 @@ var Field = /** @class */ (function () {
         this.representedBy = config.representedBy;
         this.CustomFieldClass = config.CustomFieldClass;
         this.CustomFieldComponentClass = config.CustomFieldComponentClass;
+        this.displayTimeInfoSign = config.displayTimeInfoSign;
     }
     return Field;
 }());
@@ -5893,13 +5926,10 @@ var DynamicFormComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], DynamicFormComponent.prototype, "errorMessages", void 0);
-    __decorate([
-        Input()
-    ], DynamicFormComponent.prototype, "displayTimeInfoSign", void 0);
     DynamicFormComponent = __decorate([
         Component({
             selector: "s-dynamic-form",
-            template: "<div *ngIf=\"configs; else templateFields\">\n    <ng-container *ngFor=\"let config of configs\">\n        <ng-container\n            *sDynamicForm=\"{\n                id: id,\n                config: config,\n                group: form,\n                errorMessages: errorMessages\n            }\">\n        </ng-container>\n    </ng-container>\n</div>\n\n<ng-template #templateFields>\n    <s-dynamic-field\n        [id]=\"id\"\n        [fields]=\"fields\"\n        [form]=\"form\"\n        [errorMessages]=\"errorMessages\"\n        [displayTimeInfoSign]=\"displayTimeInfoSign\">\n    </s-dynamic-field>\n</ng-template>\n",
+            template: "<div *ngIf=\"configs; else templateFields\">\n    <ng-container *ngFor=\"let config of configs\">\n        <ng-container\n            *sDynamicForm=\"{\n                id: id,\n                config: config,\n                group: form,\n                errorMessages: errorMessages\n            }\">\n        </ng-container>\n    </ng-container>\n</div>\n\n<ng-template #templateFields>\n    <s-dynamic-field\n        [id]=\"id\"\n        [fields]=\"fields\"\n        [form]=\"form\"\n        [errorMessages]=\"errorMessages\">\n    </s-dynamic-field>\n</ng-template>\n",
             encapsulation: ViewEncapsulation.None,
             styles: ["label.required:after{content:\" *\";color:#c13018}"]
         })
@@ -6656,7 +6686,18 @@ var InfoSignDirective = /** @class */ (function () {
         this.componentFactoryResolver = componentFactoryResolver;
         this.displayTime = 5000;
     }
+    InfoSignDirective.prototype.ngOnChanges = function () {
+        this.createInfoSign();
+    };
     InfoSignDirective.prototype.ngOnInit = function () {
+        this.createInfoSign();
+    };
+    InfoSignDirective.prototype.ngOnDestroy = function () {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    };
+    InfoSignDirective.prototype.createInfoSign = function () {
         if (!this.componentRef && this.sInfoSign) {
             this.viewContainer.clear();
             var componentFactory = this.componentFactoryResolver.resolveComponentFactory(InfoSignComponent);
@@ -6674,11 +6715,6 @@ var InfoSignDirective = /** @class */ (function () {
             this.viewContainer.createEmbeddedView(this.templateRef);
         }
     };
-    InfoSignDirective.prototype.ngOnDestroy = function () {
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
-    };
     InfoSignDirective.ctorParameters = function () { return [
         { type: TemplateRef },
         { type: ViewContainerRef },
@@ -6695,7 +6731,7 @@ var InfoSignDirective = /** @class */ (function () {
     ], InfoSignDirective.prototype, "focusedInputRef", void 0);
     InfoSignDirective = __decorate([
         Directive({
-            selector: "[sInfoSign]",
+            selector: "[sInfoSign]"
         })
     ], InfoSignDirective);
     return InfoSignDirective;
@@ -7241,10 +7277,11 @@ var NumericService = /** @class */ (function () {
      * @return `string` The formatted value.
      */
     NumericService.prototype.instant = function (value, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         options = __assign(__assign({}, options), { locale: (_c = (_a = options === null || options === void 0 ? void 0 : options.locale) !== null && _a !== void 0 ? _a : (_b = this.localeService.getLocaleOptions()) === null || _b === void 0 ? void 0 : _b.locale) !== null && _c !== void 0 ? _c : "pt-BR", numberFormatOptions: __assign(__assign({}, options === null || options === void 0 ? void 0 : options.numberFormatOptions), { currency: ((_d = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _d === void 0 ? void 0 : _d.style) === "currency" ? ((_f = (_e = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _e === void 0 ? void 0 : _e.currency) !== null && _f !== void 0 ? _f : "BRL") : undefined, currencyDisplay: ((_g = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _g === void 0 ? void 0 : _g.style) === "currency"
                     ? ((_j = (_h = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _h === void 0 ? void 0 : _h.currencyDisplay) !== null && _j !== void 0 ? _j : "narrowSymbol")
-                    : undefined, minimumFractionDigits: (_l = (_k = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _k === void 0 ? void 0 : _k.minimumFractionDigits) !== null && _l !== void 0 ? _l : 2, maximumFractionDigits: (_o = (_m = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _m === void 0 ? void 0 : _m.maximumFractionDigits) !== null && _o !== void 0 ? _o : 2 }) });
+                    : undefined, minimumFractionDigits: (_o = (_l = (_k = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _k === void 0 ? void 0 : _k.minimumFractionDigits) !== null && _l !== void 0 ? _l : (_m = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _m === void 0 ? void 0 : _m.maximumFractionDigits) !== null && _o !== void 0 ? _o : 2, maximumFractionDigits: (_s = (_q = (_p = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _p === void 0 ? void 0 : _p.maximumFractionDigits) !== null && _q !== void 0 ? _q : (_r = options === null || options === void 0 ? void 0 : options.numberFormatOptions) === null || _r === void 0 ? void 0 : _r.minimumFractionDigits) !== null && _s !== void 0 ? _s : 2 }) });
+        options.numberFormatOptions["roundingMode"] = "trunc";
         options.numberFormatOptions["trailingZeroDisplay"] = "stripIfInteger";
         // From https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
         return new Intl.NumberFormat(options.locale, options.numberFormatOptions).format(this.getType(value) === "number" || this.getType(value) === "string" ? value : value.toString());
@@ -9052,8 +9089,21 @@ var TableHeaderCheckboxModule = /** @class */ (function () {
 }());
 
 var AutocompleteFieldComponent = /** @class */ (function () {
-    function AutocompleteFieldComponent() {
+    function AutocompleteFieldComponent(changeDetectorRef, elementRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
     }
+    AutocompleteFieldComponent.prototype.ngAfterViewInit = function () {
+        this.setInputRef();
+        this.changeDetectorRef.detectChanges();
+    };
+    AutocompleteFieldComponent.prototype.setInputRef = function () {
+        this.inputRef = this.elementRef.nativeElement.querySelector('input');
+    };
+    AutocompleteFieldComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
+    ]; };
     __decorate([
         Input()
     ], AutocompleteFieldComponent.prototype, "field", void 0);
@@ -9062,7 +9112,7 @@ var AutocompleteFieldComponent = /** @class */ (function () {
     ], AutocompleteFieldComponent.prototype, "formControl", void 0);
     AutocompleteFieldComponent = __decorate([
         Component({
-            template: "<div\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"(field.id || field.name)\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [placeholder]=\"field.placeholder\"\n        [lookupSuggestions]=\"field.suggestions\"\n        [dataKey]=\"field.dataKey\"\n        (onLookupRequest)=\"field.onSearch($event)\"\n        [lookupDisplayField]=\"field.displayField\"\n        [showSearch]=\"false\"\n        [lookupAppendTo]=\"field.appendTo\"\n        (onSelect)=\"field.onSelect ? field.onSelect($event) : null\"\n        (onUnselect)=\"field.onUnselect ? field.onUnselect($event) : null\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupEmptyMessage]=\"field.emptyMessage\">\n    </s-lookup>\n</div>\n"
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n    \n<div\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"(field.id || field.name)\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [placeholder]=\"field.placeholder\"\n        [lookupSuggestions]=\"field.suggestions\"\n        [dataKey]=\"field.dataKey\"\n        (onLookupRequest)=\"field.onSearch($event)\"\n        [lookupDisplayField]=\"field.displayField\"\n        [showSearch]=\"false\"\n        [lookupAppendTo]=\"field.appendTo\"\n        (onSelect)=\"field.onSelect ? field.onSelect($event) : null\"\n        (onUnselect)=\"field.onUnselect ? field.onUnselect($event) : null\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupEmptyMessage]=\"field.emptyMessage\">\n    </s-lookup>\n</div>\n"
         })
     ], AutocompleteFieldComponent);
     return AutocompleteFieldComponent;
@@ -9082,7 +9132,7 @@ var BooleanFieldComponent = /** @class */ (function () {
     ], BooleanFieldComponent.prototype, "formControl", void 0);
     BooleanFieldComponent = __decorate([
         Component({
-            template: "<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"true\"\n                [label]=\"field.optionsLabel.true\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-1'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"false\"\n                [label]=\"field.optionsLabel.false\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-2'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div\n            *ngIf=\"!field.showClear && !field.required()\"\n            class=\"ui-g-12\">\n            <p-radioButton                \n                [name]=\"field.name\"\n                [value]=\"null\"\n                [label]=\"field.optionsLabel.empty\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-3'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>            \n        </div>\n        <div>\n            <s-button\n                *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n                [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n                (onClick)=\"onClear()\"\n                priority=\"link\">\n            </s-button>\n        </div>\n\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"true\"\n            [label]=\"field.optionsLabel.true\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-1'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n    \n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"false\"\n            [label]=\"field.optionsLabel.false\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-2'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <p-radioButton\n            *ngIf=\"!field.showClear && !field.required()\"\n            [name]=\"field.name\"\n            [value]=\"null\"\n            [label]=\"field.optionsLabel.empty\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-3'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            style=\"margin-left: 40px;\"\n            [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\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 class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"true\"\n                [label]=\"field.optionsLabel.true\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-1'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"false\"\n                [label]=\"field.optionsLabel.false\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-2'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div\n            *ngIf=\"!field.showClear && !field.required()\"\n            class=\"ui-g-12\">\n            <p-radioButton                \n                [name]=\"field.name\"\n                [value]=\"null\"\n                [label]=\"field.optionsLabel.empty\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-3'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>            \n        </div>\n        <div>\n            <s-button\n                *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n                [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n                (onClick)=\"onClear()\"\n                priority=\"link\">\n            </s-button>\n        </div>\n\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"true\"\n            [label]=\"field.optionsLabel.true\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-1'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n    \n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"false\"\n            [label]=\"field.optionsLabel.false\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-2'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <p-radioButton\n            *ngIf=\"!field.showClear && !field.required()\"\n            [name]=\"field.name\"\n            [value]=\"null\"\n            [label]=\"field.optionsLabel.empty\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-3'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            style=\"margin-left: 40px;\"\n            [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-template>\n"
         })
     ], BooleanFieldComponent);
     return BooleanFieldComponent;
@@ -9106,8 +9156,10 @@ var BooleanSwitchFieldComponent = /** @class */ (function () {
 }());
 
 var CalendarFieldComponent = /** @class */ (function () {
-    function CalendarFieldComponent(translateService) {
+    function CalendarFieldComponent(translateService, changeDetectorRef, elementRef) {
         this.translateService = translateService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
         this.locale = {
             firstDayOfWeek: 0,
             dayNames: [
@@ -9171,8 +9223,17 @@ var CalendarFieldComponent = /** @class */ (function () {
             hourFormat: this.translateService.instant("platform.angular_components.hour_format"),
         };
     }
+    CalendarFieldComponent.prototype.ngAfterViewInit = function () {
+        this.setInputRef();
+        this.changeDetectorRef.detectChanges();
+    };
+    CalendarFieldComponent.prototype.setInputRef = function () {
+        this.inputRef = this.elementRef.nativeElement.querySelector('input');
+    };
     CalendarFieldComponent.ctorParameters = function () { return [
-        { type: TranslateService }
+        { type: TranslateService },
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
     ]; };
     __decorate([
         Input()
@@ -9186,17 +9247,22 @@ var CalendarFieldComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], CalendarFieldComponent.prototype, "timeOnly", void 0);
+    __decorate([
+        ViewChild('calendar')
+    ], CalendarFieldComponent.prototype, "calendar", void 0);
     CalendarFieldComponent = __decorate([
         Component({
-            template: "<div\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\">\n    <!-- Remover as propriedades [showTransitionOptions] e [hideTransitionOptions] quando atualizar para o PrimeNG v10, esses atributos foram\n    usados para remover um bug ocasionado pela anima\u00E7\u00E3o do componente p-calendar, bug explicado nas issues: #ERPROM-5534, #ERPROM-8248 e #DSN-1045. -->\n    <p-calendar\n        #calendar\n        sCalendarMask\n        [inputId]=\"(field.id || field.name)\"\n        [name]=\"field.name\"\n        [showIcon]=\"true\"\n        [timeOnly]=\"timeOnly\"\n        [selectionMode]=\"field.selectionMode\"\n        [rangeSeparator]=\"field.rangeSeparator\"\n        [showTime]=\"showTime\"\n        [showSeconds]=\"field.showSeconds\"\n        [showOnFocus]=\"field.showOnFocus\"\n        [formControl]=\"formControl\"\n        [icon]=\"timeOnly ? 'fa fa-clock' : 'fa fa-calendar'\"\n        [minDate]=\"field.minDate\"\n        [maxDate]=\"field.maxDate\"\n        [defaultDate]=\"field.defaultDate\"\n        [locale]=\"field.calendarLocaleOptions || locale\"\n        [dateFormat]=\"field.calendarLocaleOptions?.dateFormat || 'platform.angular_components.date_format' | translate\"\n        [hourFormat]=\"field.calendarLocaleOptions?.hourFormat || 'platform.angular_components.hour_format' | translate\"\n        [view]=\"field.view\"\n        [placeholder]=\"field.placeholder\"\n        inputStyleClass=\"mousetrap\"\n        [appendTo]=\"field.appendTo\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (onFocus)=\"field.onFocus ? field.onFocus($event): null\"\n        (onSelect)=\"field.onSelect ? field.onSelect($event) : null\"\n        (onClose)=\"field.onClose ? field.onClose($event) : null\"\n        (onTodayClick)=\"field.onTodayClick ? field.onTodayClick($event) : null\"\n        (onClearClick)=\"field.onClearClick ? field.onClearClick($event) : null\"\n        (onMonthChange)=\"field.onMonthChange ? field.onMonthChange($event) : null\"\n        (onYearChange)=\"field.onYearChange ? field.onYearChange($event) : null\"\n        [showTransitionOptions]=\"'0ms'\"\n        [hideTransitionOptions]=\"'0ms'\">\n    </p-calendar>\n</div>\n"
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n\n<div\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\">\n    <!-- Remover as propriedades [showTransitionOptions] e [hideTransitionOptions] quando atualizar para o PrimeNG v10, esses atributos foram\n    usados para remover um bug ocasionado pela anima\u00E7\u00E3o do componente p-calendar, bug explicado nas issues: #ERPROM-5534, #ERPROM-8248 e #DSN-1045. -->\n    <p-calendar\n        #calendar\n        sCalendarMask\n        [inputId]=\"(field.id || field.name)\"\n        [name]=\"field.name\"\n        [showIcon]=\"true\"\n        [timeOnly]=\"timeOnly\"\n        [selectionMode]=\"field.selectionMode\"\n        [rangeSeparator]=\"field.rangeSeparator\"\n        [showTime]=\"showTime\"\n        [showSeconds]=\"field.showSeconds\"\n        [showOnFocus]=\"field.showOnFocus\"\n        [formControl]=\"formControl\"\n        [icon]=\"timeOnly ? 'fa fa-clock' : 'fa fa-calendar'\"\n        [minDate]=\"field.minDate\"\n        [maxDate]=\"field.maxDate\"\n        [defaultDate]=\"field.defaultDate\"\n        [locale]=\"field.calendarLocaleOptions || locale\"\n        [dateFormat]=\"field.calendarLocaleOptions?.dateFormat || 'platform.angular_components.date_format' | translate\"\n        [hourFormat]=\"field.calendarLocaleOptions?.hourFormat || 'platform.angular_components.hour_format' | translate\"\n        [view]=\"field.view\"\n        [placeholder]=\"field.placeholder\"\n        inputStyleClass=\"mousetrap\"\n        [appendTo]=\"field.appendTo\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (onFocus)=\"field.onFocus ? field.onFocus($event): null\"\n        (onSelect)=\"field.onSelect ? field.onSelect($event) : null\"\n        (onClose)=\"field.onClose ? field.onClose($event) : null\"\n        (onTodayClick)=\"field.onTodayClick ? field.onTodayClick($event) : null\"\n        (onClearClick)=\"field.onClearClick ? field.onClearClick($event) : null\"\n        (onMonthChange)=\"field.onMonthChange ? field.onMonthChange($event) : null\"\n        (onYearChange)=\"field.onYearChange ? field.onYearChange($event) : null\"\n        [showTransitionOptions]=\"'0ms'\"\n        [hideTransitionOptions]=\"'0ms'\">\n    </p-calendar>\n</div>\n"
         })
     ], CalendarFieldComponent);
     return CalendarFieldComponent;
 }());
 
 var ChipsFieldComponent = /** @class */ (function () {
-    function ChipsFieldComponent(clipboard) {
+    function ChipsFieldComponent(clipboard, changeDetectorRef, elementRef) {
         this.clipboard = clipboard;
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
         this.feedbackMessageVisible = false;
         this.copyButtonVisible = true;
     }
@@ -9216,8 +9282,17 @@ var ChipsFieldComponent = /** @class */ (function () {
             }
         }
     };
+    ChipsFieldComponent.prototype.ngAfterViewInit = function () {
+        this.setInputRef();
+        this.changeDetectorRef.detectChanges();
+    };
+    ChipsFieldComponent.prototype.setInputRef = function () {
+        this.inputRef = this.elementRef.nativeElement.querySelector('input');
+    };
     ChipsFieldComponent.ctorParameters = function () { return [
-        { type: Clipboard }
+        { type: Clipboard },
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
     ]; };
     __decorate([
         Input()
@@ -9227,7 +9302,7 @@ var ChipsFieldComponent = /** @class */ (function () {
     ], ChipsFieldComponent.prototype, "formControl", void 0);
     ChipsFieldComponent = __decorate([
         Component({
-            template: "<div class=\"chips-field-wrapper\">\n    <div style=\"width: 100%;\">\n        <p-chips\n            *ngIf=\"field.keyFilter\"\n            [inputId]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [placeholder]=\"field.placeholder\"\n            [allowDuplicate]=\"false\"\n            [addOnTab]=\"true\"\n            [addOnBlur]=\"true\"\n            (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n            (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n            (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n            [pKeyFilter]=\"field.keyFilter\">\n            <ng-template let-item pTemplate=\"item\">\n                <span\n                    class=\"chip-content\"\n                    [sTooltip]=\"item\">\n                    {{ item }}\n                </span>\n            </ng-template>\n        </p-chips>\n        \n        <p-chips\n            *ngIf=\"!field.keyFilter\"\n            [inputId]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [placeholder]=\"field.placeholder\"\n            [allowDuplicate]=\"false\"\n            [addOnTab]=\"true\"\n            [addOnBlur]=\"true\"\n            (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n            (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n            (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            <ng-template let-item pTemplate=\"item\">\n                <span\n                    class=\"chip-content\"\n                    [sTooltip]=\"item\">\n                    {{ item }}\n                </span>\n            </ng-template>\n        </p-chips>\n    </div>\n    \n    <button\n        *ngIf=\"field.showCopyButton && formControl.value?.length > 0 && copyButtonVisible\"\n        class=\"copy-content-button\"\n        (click)=\"onCopyFieldContent()\">\n        {{ \"platform.angular_components.copy_field_content\" | translate }}\n    </button>\n    \n    <span\n        *ngIf=\"feedbackMessageVisible\"\n        class=\"feedback-message\">\n        {{ \"platform.angular_components.copied_to_clipboard\" | translate }}\n    </span>\n</div>\n",
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n    \n<div class=\"chips-field-wrapper\">\n    <div style=\"width: 100%;\">\n        <p-chips\n            *ngIf=\"field.keyFilter\"\n            [inputId]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [placeholder]=\"field.placeholder\"\n            [allowDuplicate]=\"false\"\n            [addOnTab]=\"true\"\n            [addOnBlur]=\"true\"\n            (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n            (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n            (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n            [pKeyFilter]=\"field.keyFilter\">\n            <ng-template let-item pTemplate=\"item\">\n                <span\n                    class=\"chip-content\"\n                    [sTooltip]=\"item\">\n                    {{ item }}\n                </span>\n            </ng-template>\n        </p-chips>\n        \n        <p-chips\n            *ngIf=\"!field.keyFilter\"\n            [inputId]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [placeholder]=\"field.placeholder\"\n            [allowDuplicate]=\"false\"\n            [addOnTab]=\"true\"\n            [addOnBlur]=\"true\"\n            (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n            (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n            (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            <ng-template let-item pTemplate=\"item\">\n                <span\n                    class=\"chip-content\"\n                    [sTooltip]=\"item\">\n                    {{ item }}\n                </span>\n            </ng-template>\n        </p-chips>\n    </div>\n    \n    <button\n        *ngIf=\"field.showCopyButton && formControl.value?.length > 0 && copyButtonVisible\"\n        class=\"copy-content-button\"\n        (click)=\"onCopyFieldContent()\">\n        {{ \"platform.angular_components.copy_field_content\" | translate }}\n    </button>\n    \n    <span\n        *ngIf=\"feedbackMessageVisible\"\n        class=\"feedback-message\">\n        {{ \"platform.angular_components.copied_to_clipboard\" | translate }}\n    </span>\n</div>\n",
             styles: [".chips-field-wrapper{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.chips-field-wrapper .chip-content{display:block;overflow:hidden;padding-right:1rem;text-overflow:ellipsis}.chips-field-wrapper .copy-content-button{background-color:transparent;border:none;color:#2a6496;cursor:pointer;margin-top:8px}.chips-field-wrapper .feedback-message{color:#0c9348;display:block;margin-top:8px;-webkit-user-select:none;-ms-user-select:none;user-select:none}"]
         })
     ], ChipsFieldComponent);
@@ -9235,8 +9310,21 @@ var ChipsFieldComponent = /** @class */ (function () {
 }());
 
 var CountryPhonePickerFieldComponent = /** @class */ (function () {
-    function CountryPhonePickerFieldComponent() {
+    function CountryPhonePickerFieldComponent(changeDetectorRef, elementRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
     }
+    CountryPhonePickerFieldComponent.prototype.ngAfterViewInit = function () {
+        this.setInputRef();
+        this.changeDetectorRef.detectChanges();
+    };
+    CountryPhonePickerFieldComponent.prototype.setInputRef = function () {
+        this.inputRef = this.elementRef.nativeElement.querySelector('input');
+    };
+    CountryPhonePickerFieldComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
+    ]; };
     __decorate([
         Input()
     ], CountryPhonePickerFieldComponent.prototype, "field", void 0);
@@ -9245,7 +9333,7 @@ var CountryPhonePickerFieldComponent = /** @class */ (function () {
     ], CountryPhonePickerFieldComponent.prototype, "formControl", void 0);
     CountryPhonePickerFieldComponent = __decorate([
         Component({
-            template: "<s-country-phone-picker\n    [formControl]=\"formControl\"\n    [ordination]=\"field.ordination\"\n    [countries]=\"field.countries\"\n    (selected)=\"field.onSelected\"\n    (focusLost)=\"field.onFocusLost\">\n</s-country-phone-picker>"
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n\n<s-country-phone-picker\n    [formControl]=\"formControl\"\n    [ordination]=\"field.ordination\"\n    [countries]=\"field.countries\"\n    (selected)=\"field.onSelected\"\n    (focusLost)=\"field.onFocusLost\">\n</s-country-phone-picker>"
         })
     ], CountryPhonePickerFieldComponent);
     return CountryPhonePickerFieldComponent;
@@ -9277,18 +9365,48 @@ var FieldsetComponent = /** @class */ (function () {
 
 var FileUploadComponent$1 = /** @class */ (function (_super) {
     __extends(FileUploadComponent, _super);
-    function FileUploadComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function FileUploadComponent(changeDetectorRef, elementRef) {
+        var _this = _super.call(this) || this;
+        _this.changeDetectorRef = changeDetectorRef;
+        _this.elementRef = elementRef;
+        return _this;
     }
+    FileUploadComponent.prototype.onClick = function () {
+        this.dispatchFocusInputRef();
+        this.addEventOnBlur();
+    };
+    FileUploadComponent.prototype.ngAfterViewInit = function () {
+        this.setInputRef();
+        this.changeDetectorRef.detectChanges();
+    };
+    FileUploadComponent.prototype.addEventOnBlur = function () {
+        var _this = this;
+        fromEvent(document, 'click')
+            .pipe(filter(function (event) { return !_this.elementRef.nativeElement.contains(event.target); }), take(1))
+            .subscribe(function () { return _this.inputRef.dispatchEvent(new Event('blur')); });
+    };
+    FileUploadComponent.prototype.setInputRef = function () {
+        this.inputRef = this.elementRef.nativeElement.querySelector('input');
+    };
+    FileUploadComponent.prototype.dispatchFocusInputRef = function () {
+        this.inputRef.dispatchEvent(new Event('focus'));
+    };
+    FileUploadComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
+    ]; };
     __decorate([
         Input()
     ], FileUploadComponent.prototype, "field", void 0);
     __decorate([
         Input()
     ], FileUploadComponent.prototype, "formControl", void 0);
+    __decorate([
+        HostListener('click')
+    ], FileUploadComponent.prototype, "onClick", null);
     FileUploadComponent = __decorate([
         Component({
-            template: "<s-file-upload [id]=\"(field.id || field.name)\" [accept]=\"field.accept\" [files]=\"field.files\" [multiple]=\"field.multiple\"\n    [chooseLabel]=\"field.chooseLabel\" [removeLabel]=\"field.removeLabel\" [cancelLabel]=\"field.cancelLabel\"\n    [successTooltip]=\"field.successTooltip\" (uploadHandler)=\"field.onUploadFile($event, field)\"\n    (removeFile)=\"field.onRemoveFile($event, field)\" (cancelUpload)=\"field.onCancelUpload($event, field)\"\n    (downloadFile)=\"field.onDownloadFile($event, field)\" [formGroup]=\"formControl\"\n    [showFileUploadDate]=\"field.showFileUploadDate\"> \n</s-file-upload>\n"
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n    \n<s-file-upload\n    [id]=\"(field.id || field.name)\"\n    [accept]=\"field.accept\"\n    [files]=\"field.files\"\n    [multiple]=\"field.multiple\"\n    [chooseLabel]=\"field.chooseLabel\"\n    [removeLabel]=\"field.removeLabel\"\n    [cancelLabel]=\"field.cancelLabel\"\n    [successTooltip]=\"field.successTooltip\"\n    (uploadHandler)=\"field.onUploadFile($event, field)\"\n    (removeFile)=\"field.onRemoveFile($event, field)\"\n    (cancelUpload)=\"field.onCancelUpload($event, field)\"\n    (downloadFile)=\"field.onDownloadFile($event, field)\"\n    [formGroup]=\"formControl\"\n    [showFileUploadDate]=\"field.showFileUploadDate\"> \n</s-file-upload>\n"
         })
     ], FileUploadComponent);
     return FileUploadComponent;
@@ -9305,7 +9423,7 @@ var LookupFieldComponent = /** @class */ (function () {
     ], LookupFieldComponent.prototype, "formControl", void 0);
     LookupFieldComponent = __decorate([
         Component({
-            template: "<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\">\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;
@@ -9349,7 +9467,7 @@ var RadioButtonComponent = /** @class */ (function () {
     ], RadioButtonComponent.prototype, "onFocus", void 0);
     RadioButtonComponent = __decorate([
         Component({
-            template: "<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\">\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",
             encapsulation: ViewEncapsulation.None,
             styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n    "]
         })
@@ -9393,7 +9511,7 @@ var SelectFieldComponent = /** @class */ (function (_super) {
     ], SelectFieldComponent.prototype, "formControl", void 0);
     SelectFieldComponent = __decorate([
         Component({
-            template: "<p-dropdown\n    *ngIf=\"!field.multiple\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [options]=\"isFunction(field.options) ? field.options() : field.options\"\n    [placeholder]=\"field.placeholder || ' '\"\n    [formControl]=\"formControl\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    [showClear]=\"field.showClear\"\n    dataKey=\"{{field.dataKey}}\"\n    optionLabel=\"{{field.optionLabel}}\"\n    [autoDisplayFirst]=\"field.autoDisplayFirst\"\n    [appendTo]=\"field.appendTo || 'body'\"\n    (onClick)=\"field.onClick ? field.onClick($event) : null\"\n    (onChange)=\"field.onChange ? field.onChange($event) : null\">\n</p-dropdown>\n<p-multiSelect\n    *ngIf=\"field.multiple\"\n    [formControl]=\"formControl\"\n    [name]=\"field.name\"\n    [inputId]=\"(field.id || field.name)\"\n    [options]=\"isFunction(field.options) ? field.options() : field.options\"\n    [defaultLabel]=\"field.placeholder\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [emptyFilterMessage]=\"field.emptyMessage || 'platform.angular_components.no_records_found' | translate\"\n    [showDelay]=\"500\"\n    [selectedItemsLabel]=\"field.multipleSelectedLabel || 'platform.angular_components.total_records_selected' | translate\"\n    [appendTo]=\"field.appendTo || 'body'\"\n    (onClick)=\"field.onClick ? field.onClick($event) : null\"\n    (onChange)=\"field.onChange ? field.onChange($event) : null\">\n</p-multiSelect>\n\n"
+            template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<p-dropdown\n    *ngIf=\"!field.multiple\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [options]=\"isFunction(field.options) ? field.options() : field.options\"\n    [placeholder]=\"field.placeholder || ' '\"\n    [formControl]=\"formControl\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    [showClear]=\"field.showClear\"\n    dataKey=\"{{field.dataKey}}\"\n    optionLabel=\"{{field.optionLabel}}\"\n    [autoDisplayFirst]=\"field.autoDisplayFirst\"\n    [appendTo]=\"field.appendTo || 'body'\"\n    (onClick)=\"field.onClick ? field.onClick($event) : null\"\n    (onChange)=\"field.onChange ? field.onChange($event) : null\">\n</p-dropdown>\n<p-multiSelect\n    *ngIf=\"field.multiple\"\n    [formControl]=\"formControl\"\n    [name]=\"field.name\"\n    [inputId]=\"(field.id || field.name)\"\n    [options]=\"isFunction(field.options) ? field.options() : field.options\"\n    [defaultLabel]=\"field.placeholder\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [emptyFilterMessage]=\"field.emptyMessage || 'platform.angular_components.no_records_found' | translate\"\n    [showDelay]=\"500\"\n    [selectedItemsLabel]=\"field.multipleSelectedLabel || 'platform.angular_components.total_records_selected' | translate\"\n    [appendTo]=\"field.appendTo || 'body'\"\n    (onClick)=\"field.onClick ? field.onClick($event) : null\"\n    (onChange)=\"field.onChange ? field.onChange($event) : null\">\n</p-multiSelect>\n\n"
         })
     ], SelectFieldComponent);
     return SelectFieldComponent;
@@ -9508,7 +9626,7 @@ var SliderFieldComponent = /** @class */ (function (_super) {
     ], SliderFieldComponent.prototype, "onSlideEnd", void 0);
     SliderFieldComponent = __decorate([
         Component({
-            template: "<ng-container>\n    <div class=\"slider-group\">\n        <div class=\"slider-label\">\n            <span>{{label}}</span>\n        </div>\n        <p-slider \n            [id]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [range]=\"field.range\"\n            [orientation]=\"field.orientation\"\n            [min]=\"field.min\" \n            [max]=\"field.max\"\n            [step]=\"field.step\"\n            [animate]=\"field.animate\" \n            (onChange)=\"field.onChange ? field.onChange($event) : null\"\n            (onSlideEnd)=\"field.onSlideEnd ? field.onSlideEnd($event) : null\">\n        </p-slider>\n    </div>\n</ng-container>",
+            template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container>\n    <div class=\"slider-group\">\n        <div class=\"slider-label\">\n            <span>{{label}}</span>\n        </div>\n        <p-slider \n            [id]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [range]=\"field.range\"\n            [orientation]=\"field.orientation\"\n            [min]=\"field.min\" \n            [max]=\"field.max\"\n            [step]=\"field.step\"\n            [animate]=\"field.animate\" \n            (onChange)=\"field.onChange ? field.onChange($event) : null\"\n            (onSlideEnd)=\"field.onSlideEnd ? field.onSlideEnd($event) : null\">\n        </p-slider>\n    </div>\n</ng-container>",
             styles: [".slider-label{margin-bottom:5px;margin-left:-10px}.slider-group{margin-left:9px;margin-right:11px}"]
         })
     ], SliderFieldComponent);
@@ -9516,17 +9634,27 @@ var SliderFieldComponent = /** @class */ (function (_super) {
 }(BaseFieldComponent));
 
 var TextAreaFieldComponent = /** @class */ (function () {
-    function TextAreaFieldComponent() {
+    function TextAreaFieldComponent(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
     }
+    TextAreaFieldComponent.prototype.ngAfterViewInit = function () {
+        this.changeDetectorRef.detectChanges();
+    };
+    TextAreaFieldComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
     __decorate([
         Input()
     ], TextAreaFieldComponent.prototype, "field", void 0);
     __decorate([
         Input()
     ], TextAreaFieldComponent.prototype, "formControl", void 0);
+    __decorate([
+        ViewChild('inputRef')
+    ], TextAreaFieldComponent.prototype, "inputRef", void 0);
     TextAreaFieldComponent = __decorate([
         Component({
-            template: "<textarea\n    [id]=\"(field.id || field.name)\"\n    *ngIf=\"!field.keyFilter\"\n    pInputTextarea\n    [rows]=\"field.rows\"\n    [cols]=\"field.cols\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [ngStyle]=\"field.style\"\n    [readonly]=\"field.readonly ? field.readonly() : false\"\n></textarea>\n<textarea\n    [id]=\"(field.id || field.name)\"\n    *ngIf=\"field.keyFilter\"\n    pInputTextarea\n    [rows]=\"field.rows\"\n    [cols]=\"field.cols\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [pKeyFilter]=\"field.keyFilter\"\n    [ngStyle]=\"field.style\"\n    [readonly]=\"field.readonly ? field.readonly() : false\"\n></textarea>\n"
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef?.nativeElement\"></s-field-label>\n\n<textarea #inputRef\n    [id]=\"(field.id || field.name)\"\n    *ngIf=\"!field.keyFilter\"\n    pInputTextarea\n    [rows]=\"field.rows\"\n    [cols]=\"field.cols\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [ngStyle]=\"field.style\"\n    [readonly]=\"field.readonly ? field.readonly() : false\"\n></textarea>\n<textarea #inputRef\n    [id]=\"(field.id || field.name)\"\n    *ngIf=\"field.keyFilter\"\n    pInputTextarea\n    [rows]=\"field.rows\"\n    [cols]=\"field.cols\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [pKeyFilter]=\"field.keyFilter\"\n    [ngStyle]=\"field.style\"\n    [readonly]=\"field.readonly ? field.readonly() : false\"\n></textarea>\n"
         })
     ], TextAreaFieldComponent);
     return TextAreaFieldComponent;
@@ -9600,9 +9728,12 @@ var TextAreaIAFieldComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TextAreaIAFieldComponent.prototype, "formControl", void 0);
+    __decorate([
+        ViewChild('inputRef')
+    ], TextAreaIAFieldComponent.prototype, "inputRef", void 0);
     TextAreaIAFieldComponent = __decorate([
         Component({
-            template: "<s-loading-state\n    [loading]=\"isLoading\"\n    [blockWindow]=\"true\">    \n</s-loading-state>\n\n<p-dialog\n    [(visible)]=\"isVisible\"\n    [modal]=\"true\"\n    [style]=\"{ width: '50vw' }\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    (onHide)=\"onHideDialog()\">\n    <p-header>\n        <div class=\"dialog-header\">\n            <span class=\"iassist-icon\">\n                <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n            </span>\n            IAssist - Content Generator\n        </div>\n    </p-header>\n    <s-dynamic-form\n        [fields]=\"fields\"\n        [form]=\"formGroup\">\n    </s-dynamic-form>\n    <p-footer>\n        <div class=\"footer-content\">\n            <s-button\n                id=\"-submit-button\"\n                type=\"button\"\n                [label]=\"'platform.angular_components.generate_text' | translate\"\n                (onClick)=\"submitContext()\"\n                sTooltip=\"(ALT + SHIFT + S)\"\n                showDelay=\"500\">\n            </s-button>\n            <s-button\n                id=\"-cancel-button\"\n                type=\"button\"\n                priority=\"link\"\n                [label]=\"'platform.angular_components.cancel' | translate\"\n                (onClick)=\"hideDialog()\"\n                sTooltip=\"(ALT + SHIFT + C)\"\n                showDelay=\"500\">\n            </s-button>\n        </div>\n    </p-footer>\n</p-dialog>\n\n<div class=\"textarea-ia\">\n    <textarea\n        [id]=\"(field.id || field.name)\"\n        pInputTextarea\n        [rows]=\"field.rows\"\n        [cols]=\"field.cols\"\n        [formControl]=\"formControl\"\n        style=\"resize: vertical;\"\n        [ngStyle]=\"field.style\"\n        [readOnly]=\"field.readonly ? field.readonly() : false\">\n    </textarea>\n    <button\n        class=\"iassist-button\"\n        (click)=\"showDialog()\"\n        sTooltip=\"IAssist - Content Generator\">\n        <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n    </button>\n</div>\n\n<ng-template #iassistIcon>\n    <svg style=\"width: 100%; height: 100%;\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.81451 18.1054L5.99593 17.6059L7.52166 13.4099L7.60877 13.1726L7.61277 13.1614L7.94285 12.2543L8.01159 12.0648L8.05394 11.949L5.2998 8.52426L5.02726 8.18379C5.00569 8.15821 4.9881 8.13104 4.97292 8.10226C4.90099 7.9632 4.85063 7.81294 4.82186 7.6531C4.73075 7.1344 4.90418 6.60771 5.28382 6.24326C5.29421 6.23447 5.3038 6.22567 5.31419 6.21688L5.47164 6.0914L9.3439 3.00238L9.5469 2.84094L9.57088 2.82096L10.4101 2.15041L11.8007 1.04188C11.2181 0.925188 10.6163 0.863647 10.0001 0.863647C4.95374 0.863647 0.863281 4.9541 0.863281 9.99963C0.863281 13.5346 2.87254 16.5989 5.80971 18.1182\" fill=\"#0FA389\"/>\n        <path d=\"M14.099 1.83472L13.9495 2.24632L11.997 7.61074L11.9427 7.7594L11.9003 7.87369L14.7448 11.4103C14.7463 11.4127 14.7479 11.4143 14.7495 11.4167L14.9414 11.654C14.9541 11.67 14.9661 11.6868 14.9765 11.7044C15.0764 11.8698 15.1444 12.0505 15.1779 12.2431C15.273 12.7826 15.0812 13.3284 14.676 13.6897C14.656 13.7129 14.6345 13.7344 14.6105 13.7536L11.8563 15.9507L11.6789 16.0922L11.6022 16.1537L10.7406 16.8402V16.841L10.3937 17.1176L9.85747 17.5452L9.39951 17.9112L8.11035 18.9398C8.72016 19.0677 9.35155 19.1364 9.99973 19.1364C15.0461 19.1364 19.1365 15.046 19.1365 9.99964C19.1365 6.42789 17.0857 3.33727 14.099 1.83472Z\" fill=\"#0FA389\"/>\n        <path d=\"M14.7287 12.3222C14.7047 12.1832 14.6551 12.0545 14.5864 11.941L14.3954 11.7036C14.3954 11.7036 14.3946 11.7028 14.3938 11.7028L11.3839 7.96005L10.5031 6.86511L10.4256 6.7676L9.03255 5.03487L8.83674 4.79191C8.79278 4.71678 8.75681 4.63446 8.73204 4.54814C8.72085 4.51058 8.71286 4.47222 8.70566 4.43465C8.68568 4.32196 8.68408 4.21007 8.69847 4.10217L8.62334 4.16291L8.44511 4.30438L5.75731 6.44871L5.60066 6.57339C5.34011 6.82275 5.20584 7.19279 5.27218 7.57482C5.29296 7.68751 5.32892 7.79541 5.37927 7.89292C5.37927 7.89292 5.37927 7.89292 5.38007 7.89371L5.6566 8.23818L8.57139 11.8627L8.63293 11.9394L9.53047 13.0559L9.59041 13.1303L9.98363 13.6186L11.0178 14.9046C11.0186 14.9054 11.0194 14.9069 11.0202 14.9077L11.1361 15.0516V15.0524C11.2184 15.1755 11.2768 15.317 11.3048 15.4728C11.3239 15.5807 11.3263 15.6878 11.3143 15.7925L11.3175 15.7965L11.3943 15.735L11.5717 15.5935L14.3266 13.3964L14.3218 13.3908C14.6335 13.1438 14.8022 12.7394 14.7287 12.3222Z\" fill=\"#F3F3F5\"/>\n        <path d=\"M10.6822 15.0082C10.6814 15.0074 10.6806 15.0058 10.6806 15.005L10.5672 14.8643L10.3809 14.6325L10.3282 14.567L10.2211 14.4335L9.40028 13.4129L9.32835 13.3242L8.77289 12.6345L8.68098 12.5194L8.44121 12.2205L8.37168 12.4099L8.04159 13.317L8.0376 13.329L7.95128 13.5664L6.42475 17.7623L6.24333 18.2618L5.90605 19.1881L5.73262 19.6645C5.73182 19.6661 5.73102 19.6677 5.73102 19.6685C5.72863 19.6749 5.72703 19.6821 5.72543 19.6885C5.71584 19.7228 5.71424 19.758 5.72063 19.7948C5.74461 19.929 5.87329 20.0193 6.00836 19.9962C6.04112 19.9898 6.07229 19.9778 6.09867 19.9602C6.09867 19.9602 6.09947 19.9602 6.10027 19.9594L6.14103 19.9266L7.39422 18.9268L9.11496 17.5537L9.57292 17.1877L10.1092 16.7601L10.4561 16.4827L10.4537 16.4811C10.7582 16.2382 10.9236 15.8402 10.8509 15.4294C10.8237 15.2735 10.7654 15.1313 10.6822 15.0082Z\" fill=\"#0C847B\"/>\n        <path d=\"M9.17644 4.56325C9.2124 4.68713 9.26915 4.80062 9.34268 4.90053C9.34348 4.90053 9.34428 4.90213 9.34428 4.90213L9.40342 4.97645C9.40502 4.97805 9.40582 4.97885 9.40662 4.98045L9.56806 5.17946L9.64878 5.28096L9.67915 5.31932L9.8414 5.51993L10.5559 6.40947L10.7054 6.59569L11.2169 7.23188L11.5142 7.60192L11.5693 7.45247L13.5202 2.08964L14.1596 0.332135C14.1596 0.330536 14.1604 0.328139 14.1612 0.32654C14.174 0.288177 14.1772 0.246617 14.17 0.205058C14.1468 0.0699879 14.0182 -0.0195258 13.8823 0.00365186C13.8407 0.0116442 13.8024 0.028428 13.7712 0.0540033L12.578 1.00589L12.498 1.06982L10.6958 2.50844L9.85658 3.17819L9.8326 3.19737L9.6296 3.35961L9.45297 3.50028C9.2116 3.73925 9.08692 4.08931 9.15006 4.44976C9.15726 4.48813 9.16525 4.52649 9.17644 4.56325Z\" fill=\"#0C847B\"/>\n    </svg>\n</ng-template>",
+            template: "<s-field-label [field]=\"field\"\n    [fieldContainerRef]=\"inputRef?.nativeElement\"></s-field-label>\n\n<s-loading-state\n    [loading]=\"isLoading\"\n    [blockWindow]=\"true\">    \n</s-loading-state>\n\n<p-dialog\n    [(visible)]=\"isVisible\"\n    [modal]=\"true\"\n    [style]=\"{ width: '50vw' }\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    (onHide)=\"onHideDialog()\">\n    <p-header>\n        <div class=\"dialog-header\">\n            <span class=\"iassist-icon\">\n                <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n            </span>\n            IAssist - Content Generator\n        </div>\n    </p-header>\n    <s-dynamic-form\n        [fields]=\"fields\"\n        [form]=\"formGroup\">\n    </s-dynamic-form>\n    <p-footer>\n        <div class=\"footer-content\">\n            <s-button\n                id=\"-submit-button\"\n                type=\"button\"\n                [label]=\"'platform.angular_components.generate_text' | translate\"\n                (onClick)=\"submitContext()\"\n                sTooltip=\"(ALT + SHIFT + S)\"\n                showDelay=\"500\">\n            </s-button>\n            <s-button\n                id=\"-cancel-button\"\n                type=\"button\"\n                priority=\"link\"\n                [label]=\"'platform.angular_components.cancel' | translate\"\n                (onClick)=\"hideDialog()\"\n                sTooltip=\"(ALT + SHIFT + C)\"\n                showDelay=\"500\">\n            </s-button>\n        </div>\n    </p-footer>\n</p-dialog>\n\n<div class=\"textarea-ia\">\n    <textarea #inputRef\n        [id]=\"(field.id || field.name)\"\n        pInputTextarea\n        [rows]=\"field.rows\"\n        [cols]=\"field.cols\"\n        [formControl]=\"formControl\"\n        style=\"resize: vertical;\"\n        [ngStyle]=\"field.style\"\n        [readOnly]=\"field.readonly ? field.readonly() : false\">\n    </textarea>\n    <button\n        class=\"iassist-button\"\n        (click)=\"showDialog()\"\n        sTooltip=\"IAssist - Content Generator\">\n        <ng-container [ngTemplateOutlet]=\"iassistIcon\"></ng-container>\n    </button>\n</div>\n\n<ng-template #iassistIcon>\n    <svg style=\"width: 100%; height: 100%;\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.81451 18.1054L5.99593 17.6059L7.52166 13.4099L7.60877 13.1726L7.61277 13.1614L7.94285 12.2543L8.01159 12.0648L8.05394 11.949L5.2998 8.52426L5.02726 8.18379C5.00569 8.15821 4.9881 8.13104 4.97292 8.10226C4.90099 7.9632 4.85063 7.81294 4.82186 7.6531C4.73075 7.1344 4.90418 6.60771 5.28382 6.24326C5.29421 6.23447 5.3038 6.22567 5.31419 6.21688L5.47164 6.0914L9.3439 3.00238L9.5469 2.84094L9.57088 2.82096L10.4101 2.15041L11.8007 1.04188C11.2181 0.925188 10.6163 0.863647 10.0001 0.863647C4.95374 0.863647 0.863281 4.9541 0.863281 9.99963C0.863281 13.5346 2.87254 16.5989 5.80971 18.1182\" fill=\"#0FA389\"/>\n        <path d=\"M14.099 1.83472L13.9495 2.24632L11.997 7.61074L11.9427 7.7594L11.9003 7.87369L14.7448 11.4103C14.7463 11.4127 14.7479 11.4143 14.7495 11.4167L14.9414 11.654C14.9541 11.67 14.9661 11.6868 14.9765 11.7044C15.0764 11.8698 15.1444 12.0505 15.1779 12.2431C15.273 12.7826 15.0812 13.3284 14.676 13.6897C14.656 13.7129 14.6345 13.7344 14.6105 13.7536L11.8563 15.9507L11.6789 16.0922L11.6022 16.1537L10.7406 16.8402V16.841L10.3937 17.1176L9.85747 17.5452L9.39951 17.9112L8.11035 18.9398C8.72016 19.0677 9.35155 19.1364 9.99973 19.1364C15.0461 19.1364 19.1365 15.046 19.1365 9.99964C19.1365 6.42789 17.0857 3.33727 14.099 1.83472Z\" fill=\"#0FA389\"/>\n        <path d=\"M14.7287 12.3222C14.7047 12.1832 14.6551 12.0545 14.5864 11.941L14.3954 11.7036C14.3954 11.7036 14.3946 11.7028 14.3938 11.7028L11.3839 7.96005L10.5031 6.86511L10.4256 6.7676L9.03255 5.03487L8.83674 4.79191C8.79278 4.71678 8.75681 4.63446 8.73204 4.54814C8.72085 4.51058 8.71286 4.47222 8.70566 4.43465C8.68568 4.32196 8.68408 4.21007 8.69847 4.10217L8.62334 4.16291L8.44511 4.30438L5.75731 6.44871L5.60066 6.57339C5.34011 6.82275 5.20584 7.19279 5.27218 7.57482C5.29296 7.68751 5.32892 7.79541 5.37927 7.89292C5.37927 7.89292 5.37927 7.89292 5.38007 7.89371L5.6566 8.23818L8.57139 11.8627L8.63293 11.9394L9.53047 13.0559L9.59041 13.1303L9.98363 13.6186L11.0178 14.9046C11.0186 14.9054 11.0194 14.9069 11.0202 14.9077L11.1361 15.0516V15.0524C11.2184 15.1755 11.2768 15.317 11.3048 15.4728C11.3239 15.5807 11.3263 15.6878 11.3143 15.7925L11.3175 15.7965L11.3943 15.735L11.5717 15.5935L14.3266 13.3964L14.3218 13.3908C14.6335 13.1438 14.8022 12.7394 14.7287 12.3222Z\" fill=\"#F3F3F5\"/>\n        <path d=\"M10.6822 15.0082C10.6814 15.0074 10.6806 15.0058 10.6806 15.005L10.5672 14.8643L10.3809 14.6325L10.3282 14.567L10.2211 14.4335L9.40028 13.4129L9.32835 13.3242L8.77289 12.6345L8.68098 12.5194L8.44121 12.2205L8.37168 12.4099L8.04159 13.317L8.0376 13.329L7.95128 13.5664L6.42475 17.7623L6.24333 18.2618L5.90605 19.1881L5.73262 19.6645C5.73182 19.6661 5.73102 19.6677 5.73102 19.6685C5.72863 19.6749 5.72703 19.6821 5.72543 19.6885C5.71584 19.7228 5.71424 19.758 5.72063 19.7948C5.74461 19.929 5.87329 20.0193 6.00836 19.9962C6.04112 19.9898 6.07229 19.9778 6.09867 19.9602C6.09867 19.9602 6.09947 19.9602 6.10027 19.9594L6.14103 19.9266L7.39422 18.9268L9.11496 17.5537L9.57292 17.1877L10.1092 16.7601L10.4561 16.4827L10.4537 16.4811C10.7582 16.2382 10.9236 15.8402 10.8509 15.4294C10.8237 15.2735 10.7654 15.1313 10.6822 15.0082Z\" fill=\"#0C847B\"/>\n        <path d=\"M9.17644 4.56325C9.2124 4.68713 9.26915 4.80062 9.34268 4.90053C9.34348 4.90053 9.34428 4.90213 9.34428 4.90213L9.40342 4.97645C9.40502 4.97805 9.40582 4.97885 9.40662 4.98045L9.56806 5.17946L9.64878 5.28096L9.67915 5.31932L9.8414 5.51993L10.5559 6.40947L10.7054 6.59569L11.2169 7.23188L11.5142 7.60192L11.5693 7.45247L13.5202 2.08964L14.1596 0.332135C14.1596 0.330536 14.1604 0.328139 14.1612 0.32654C14.174 0.288177 14.1772 0.246617 14.17 0.205058C14.1468 0.0699879 14.0182 -0.0195258 13.8823 0.00365186C13.8407 0.0116442 13.8024 0.028428 13.7712 0.0540033L12.578 1.00589L12.498 1.06982L10.6958 2.50844L9.85658 3.17819L9.8326 3.19737L9.6296 3.35961L9.45297 3.50028C9.2116 3.73925 9.08692 4.08931 9.15006 4.44976C9.15726 4.48813 9.16525 4.52649 9.17644 4.56325Z\" fill=\"#0C847B\"/>\n    </svg>\n</ng-template>",
             styles: [".footer-content{display:-ms-flexbox;display:flex;-ms-flex-positive:0;flex-grow:0}.textarea-ia{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;gap:8px}.iassist-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:none;border-radius:50%;box-shadow:none;cursor:pointer;height:32px;width:32px}.dialog-header{display:-ms-flexbox;display:flex;gap:12px}.dialog-header .iassist-icon{display:block;height:24px;width:24px}"]
         })
     ], TextAreaIAFieldComponent);
@@ -9635,7 +9766,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                    <label\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ 'required': field.required() }\"\n                        *sInfoSign=\"field.infoSign\"\n                        >\n                            {{ field.label }}\n                    </label>\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 *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;
@@ -9665,13 +9796,10 @@ var DynamicFieldComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], DynamicFieldComponent.prototype, "errorMessages", void 0);
-    __decorate([
-        Input()
-    ], DynamicFieldComponent.prototype, "displayTimeInfoSign", void 0);
     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                <span *ngIf=\"field.label\">\n                    <label\n                        *sInfoSign=\"\n                            field.infoSign;\n                            displayTime: displayTimeInfoSign\n                        \"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </span>\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\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;
@@ -9690,9 +9818,10 @@ var StructureType;
 
 var BignumberFieldComponent = /** @class */ (function (_super) {
     __extends(BignumberFieldComponent, _super);
-    function BignumberFieldComponent(localeService) {
+    function BignumberFieldComponent(localeService, changeDetectorRef) {
         var _this = _super.call(this) || this;
         _this.localeService = localeService;
+        _this.changeDetectorRef = changeDetectorRef;
         _this.onInput = new EventEmitter();
         _this.onFocus = new EventEmitter();
         _this.onComplete = new EventEmitter();
@@ -9757,8 +9886,12 @@ var BignumberFieldComponent = /** @class */ (function (_super) {
             },
         });
     };
+    BignumberFieldComponent.prototype.ngAfterViewInit = function () {
+        this.changeDetectorRef.detectChanges();
+    };
     BignumberFieldComponent.ctorParameters = function () { return [
-        { type: LocaleService }
+        { type: LocaleService },
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
@@ -9775,9 +9908,12 @@ var BignumberFieldComponent = /** @class */ (function (_super) {
     __decorate([
         Output()
     ], BignumberFieldComponent.prototype, "onComplete", void 0);
+    __decorate([
+        ViewChild('inputRef')
+    ], BignumberFieldComponent.prototype, "inputRef", void 0);
     BignumberFieldComponent = __decorate([
         Component({
-            template: "<p-inputMask\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\"\n    [autoClear]=\"field.autoClear\">\n</p-inputMask>\n\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled() : field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{field.leftAddon.label}}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container>\n\n            <input\n                [id]=\"(field.id || field.name)\"\n                type=\"text\"\n                [name]=\"field.name\"\n                sBignumberInput\n                [allowNegative]=\"field.allowNegative\"\n                [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n                [scale]=\"isFunction(field.scale) ? trigger(field.scale) : field.scale\"\n                [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n                [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n                [alignTo]=\"field.alignTo\"\n                [sTooltip]=\"field.tooltip\"\n                tooltipPosition=\"top\"\n                [placeholder]=\"field.placeholder\"\n                [showDelay]=\"500\"\n                pInputText\n                [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n                [ngClass]=\"'mousetrap'\"\n                (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n                (focus)=\"onFocus.next($event)\"\n                [formControl]=\"formControl\" />\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{field.rightAddon.label}}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n",
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef?.nativeElement\"></s-field-label>\n    \n<p-inputMask #inputRef\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\"\n    [autoClear]=\"field.autoClear\">\n</p-inputMask>\n\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled() : field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{field.leftAddon.label}}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container>\n\n            <input #inputRef\n                [id]=\"(field.id || field.name)\"\n                type=\"text\"\n                [name]=\"field.name\"\n                sBignumberInput\n                [allowNegative]=\"field.allowNegative\"\n                [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n                [scale]=\"isFunction(field.scale) ? trigger(field.scale) : field.scale\"\n                [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n                [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n                [alignTo]=\"field.alignTo\"\n                [sTooltip]=\"field.tooltip\"\n                tooltipPosition=\"top\"\n                [placeholder]=\"field.placeholder\"\n                [showDelay]=\"500\"\n                pInputText\n                [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n                [ngClass]=\"'mousetrap'\"\n                (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n                (focus)=\"onFocus.next($event)\"\n                [formControl]=\"formControl\" />\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{field.rightAddon.label}}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n",
             encapsulation: ViewEncapsulation.None,
             styles: ["s-number-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-number-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:#e44328}.addon-button{border:1px solid #c1c1cc}.addon-button s-button .s-button-with-text,.addon-button s-button button{height:100%;min-width:40px!important}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}"]
         })
@@ -9975,10 +10111,11 @@ var CurrencyService = /** @class */ (function () {
  */
 var CurrencyFieldComponent = /** @class */ (function (_super) {
     __extends(CurrencyFieldComponent, _super);
-    function CurrencyFieldComponent(localeService, currencyService) {
+    function CurrencyFieldComponent(currencyService, localeService, changeDetectorRef) {
         var _this = _super.call(this) || this;
-        _this.localeService = localeService;
         _this.currencyService = currencyService;
+        _this.localeService = localeService;
+        _this.changeDetectorRef = changeDetectorRef;
         return _this;
     }
     CurrencyFieldComponent.prototype.ngOnInit = function () {
@@ -10012,9 +10149,13 @@ var CurrencyFieldComponent = /** @class */ (function (_super) {
             },
         });
     };
+    CurrencyFieldComponent.prototype.ngAfterViewInit = function () {
+        this.changeDetectorRef.detectChanges();
+    };
     CurrencyFieldComponent.ctorParameters = function () { return [
+        { type: CurrencyService },
         { type: LocaleService },
-        { type: CurrencyService }
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
@@ -10022,16 +10163,20 @@ var CurrencyFieldComponent = /** @class */ (function (_super) {
     __decorate([
         Input()
     ], CurrencyFieldComponent.prototype, "formControl", void 0);
+    __decorate([
+        ViewChild('inputRef')
+    ], CurrencyFieldComponent.prototype, "inputRef", void 0);
     CurrencyFieldComponent = __decorate([
         Component({
-            template: "<div class=\"ui-inputgroup\">\n    <span\n        *ngIf=\"field.currency || field.numberLocaleOptions?.currencySymbol\"\n        class=\"ui-inputgroup-addon\"\n    >\n        {{\n            field.currency\n                ? currencyService.getCurrencySymbol({\n                      currency: field.currency()\n                  })\n                : field.numberLocaleOptions.currencySymbol\n        }}\n    </span>\n\n    <input\n        *ngIf=\"!field.mask\"\n        type=\"text\"\n        [id]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [formControl]=\"formControl\"\n        sNumberInput\n        [precision]=\"\n            field.precision\n                ? isFunction(field.precision)\n                    ? trigger(field.precision)\n                    : field.precision\n                : field.currency && field.currency()\n                ? currencyService.currencies[field.currency()].precision\n                : 15\n        \"\n        [scale]=\"\n            field.scale\n                ? isFunction(field.scale)\n                    ? trigger(field.scale)\n                    : field.scale\n                : field.currency && field.currency()\n                ? currencyService.currencies[field.currency()].scale\n                : 0\n        \"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n        [alignTo]=\"field.alignTo\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"field.onFocus ? field.onFocus($event) : null\"\n    />\n\n    <p-inputMask\n        *ngIf=\"field.mask\"\n        type=\"text\"\n        [inputId]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [formControl]=\"formControl\"\n        [mask]=\"field.mask\"\n        [placeholder]=\"field.placeholder\"\n        slotChar=\"_\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        styleClass=\"mousetrap\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n        (onComplete)=\"field.onComplete ? field.onComplete($event) : null\"\n        (onInput)=\"field.onInput ? field.onInput($event) : null\"\n    ></p-inputMask>\n</div>\n"
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef?.nativeElement\"></s-field-label>\n    \n<div class=\"ui-inputgroup\">\n    <span\n        *ngIf=\"field.currency || field.numberLocaleOptions?.currencySymbol\"\n        class=\"ui-inputgroup-addon\"\n    >\n        {{\n            field.currency\n                ? currencyService.getCurrencySymbol({\n                      currency: field.currency()\n                  })\n                : field.numberLocaleOptions.currencySymbol\n        }}\n    </span>\n    <input #inputRef\n        *ngIf=\"!field.mask\"\n        type=\"text\"\n        [id]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [formControl]=\"formControl\"\n        sNumberInput\n        [precision]=\"\n            field.precision\n                ? isFunction(field.precision)\n                    ? trigger(field.precision)\n                    : field.precision\n                : field.currency && field.currency()\n                ? currencyService.currencies[field.currency()].precision\n                : 15\n        \"\n        [scale]=\"\n            field.scale\n                ? isFunction(field.scale)\n                    ? trigger(field.scale)\n                    : field.scale\n                : field.currency && field.currency()\n                ? currencyService.currencies[field.currency()].scale\n                : 0\n        \"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n        [alignTo]=\"field.alignTo\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"field.onFocus ? field.onFocus($event): null\" />\n    <p-inputMask #inputRef\n        *ngIf=\"field.mask\"\n        type=\"text\"\n        [inputId]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [formControl]=\"formControl\"\n        [mask]=\"field.mask\"\n        [placeholder]=\"field.placeholder\"\n        slotChar=\"_\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        styleClass=\"mousetrap\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n        (onComplete)=\"field.onComplete ? field.onComplete($event) : null\"\n        (onInput)=\"field.onInput ? field.onInput($event) : null\"\n    ></p-inputMask>\n</div>\n"
         })
     ], CurrencyFieldComponent);
     return CurrencyFieldComponent;
 }(BaseFieldComponent));
 
 var PasswordFieldComponent = /** @class */ (function () {
-    function PasswordFieldComponent() {
+    function PasswordFieldComponent(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
         this.onInput = new EventEmitter();
         this.onFocus = new EventEmitter();
         this.onComplete = new EventEmitter();
@@ -10069,6 +10214,12 @@ var PasswordFieldComponent = /** @class */ (function () {
     PasswordFieldComponent.prototype.onChangeVisible = function () {
         this.passwordVisible = !this.passwordVisible;
     };
+    PasswordFieldComponent.prototype.ngAfterViewInit = function () {
+        this.changeDetectorRef.detectChanges();
+    };
+    PasswordFieldComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
     __decorate([
         Input()
     ], PasswordFieldComponent.prototype, "field", void 0);
@@ -10084,9 +10235,12 @@ var PasswordFieldComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], PasswordFieldComponent.prototype, "onComplete", void 0);
+    __decorate([
+        ViewChild('inputRef')
+    ], PasswordFieldComponent.prototype, "inputRef", void 0);
     PasswordFieldComponent = __decorate([
         Component({
-            template: "<div class=\"password-field\" [ngClass]=\"{ 'password-field--toggle': field.showToggle }\">\n    <input\n        [type]=\"passwordVisible ? 'text' : 'password'\"\n        [id]=\"field.id || field.name\"\n        class=\"password-input\"\n        [name]=\"field.name\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        [maxLength]=\"field.maxLength\"\n        pInputText\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl\"\n        [ngStyle]=\"field.style\"\n        [sPasswordStrength]=\"field.passwordStrength\"\n        [psDescription]=\"field.passwordStrengthOptions?.description\"\n        [psWeakTitle]=\"field.passwordStrengthOptions?.weakTitle\"\n        [psMediumTitle]=\"field.passwordStrengthOptions?.mediumTitle\"\n        [psStrongTitle]=\"field.passwordStrengthOptions?.strongTitle\"\n        [psValidation]=\"field.passwordStrengthOptions?.validation\"\n    />\n    <span *ngIf=\"field.showToggle\" class=\"toggle-button\">\n      <s-button\n        [iconClass]=\"passwordVisible ? 'fas fa-eye-slash' : 'fas fa-eye'\"\n        priority=\"default\"\n        (onClick)=\"onChangeVisible()\">\n      </s-button>\n    </span>\n</div>\n",
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n    \n<div class=\"password-field\" [ngClass]=\"{ 'password-field--toggle': field.showToggle }\">\n    <input #inputRef\n        [type]=\"passwordVisible ? 'text' : 'password'\"\n        [id]=\"field.id || field.name\"\n        class=\"password-input\"\n        [name]=\"field.name\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        [maxLength]=\"field.maxLength\"\n        pInputText\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl\"\n        [ngStyle]=\"field.style\"\n        [sPasswordStrength]=\"field.passwordStrength\"\n        [psDescription]=\"field.passwordStrengthOptions?.description\"\n        [psWeakTitle]=\"field.passwordStrengthOptions?.weakTitle\"\n        [psMediumTitle]=\"field.passwordStrengthOptions?.mediumTitle\"\n        [psStrongTitle]=\"field.passwordStrengthOptions?.strongTitle\"\n        [psValidation]=\"field.passwordStrengthOptions?.validation\"\n    />\n    <span *ngIf=\"field.showToggle\" class=\"toggle-button\">\n      <s-button\n        [iconClass]=\"passwordVisible ? 'fas fa-eye-slash' : 'fas fa-eye'\"\n        priority=\"default\"\n        (onClick)=\"onChangeVisible()\">\n      </s-button>\n    </span>\n</div>\n",
             encapsulation: ViewEncapsulation.None,
             styles: ["s-text-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-text-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:#e44328}.password-field{display:-ms-flexbox;display:flex}.password-field--toggle .password-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.password-field--toggle .toggle-button s-button button{border-bottom-left-radius:0;border-top-left-radius:0}"]
         })
@@ -10096,8 +10250,9 @@ var PasswordFieldComponent = /** @class */ (function () {
 
 var TextFieldComponent = /** @class */ (function (_super) {
     __extends(TextFieldComponent, _super);
-    function TextFieldComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function TextFieldComponent(changeDetectorRef) {
+        var _this = _super.call(this) || this;
+        _this.changeDetectorRef = changeDetectorRef;
         _this.onInput = new EventEmitter();
         _this.onFocus = new EventEmitter();
         _this.onComplete = new EventEmitter();
@@ -10119,10 +10274,16 @@ var TextFieldComponent = /** @class */ (function (_super) {
                 _this.field.onComplete(event);
         });
     };
+    TextFieldComponent.prototype.ngAfterViewInit = function () {
+        this.changeDetectorRef.detectChanges();
+    };
     TextFieldComponent.prototype.ngOnDestroy = function () {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     };
+    TextFieldComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef }
+    ]; };
     __decorate([
         Input()
     ], TextFieldComponent.prototype, "field", void 0);
@@ -10138,9 +10299,12 @@ var TextFieldComponent = /** @class */ (function (_super) {
     __decorate([
         Output()
     ], TextFieldComponent.prototype, "onComplete", void 0);
+    __decorate([
+        ViewChild('inputRef')
+    ], TextFieldComponent.prototype, "inputRef", void 0);
     TextFieldComponent = __decorate([
         Component({
-            template: "<p-inputMask\n    *ngIf=\"field.mask; else noMask\"\n    [type]=\"field.inputType || 'text'\"\n    [inputId]=\"field.id || field.name\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\"\n    [readonly]=\"field.readonly ? field.readonly() : false\">\n</p-inputMask>\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled(): field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{ field.leftAddon.label }}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container> \n\n            <ng-container *ngTemplateOutlet=\"field.keyFilter ? inputKeyFilter : input\"></ng-container>\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{ field.rightAddon.label }}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>            \n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #input>\n    <input\n        [type]=\"field.inputType || 'text'\"\n        [id]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        [maxLength]=\"field.maxLength\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl\"\n        [ngStyle]=\"field.style\"\n        [readOnly]=\"field.readonly ? field.readonly() : false\" />\n</ng-template>\n<ng-template #inputKeyFilter>\n    <input\n        #inputText\n        [type]=\"field.inputType || 'text'\"\n        [id]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        [maxLength]=\"field.maxLength\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [pKeyFilter]=\"field.keyFilter\"\n        [formControl]=\"formControl\"\n        [ngStyle]=\"field.style\"\n        [readOnly]=\"field.readonly ? field.readonly() : false\" />\n</ng-template>\n",
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef?.nativeElement\"></s-field-label>\n\n<p-inputMask #inputRef\n    *ngIf=\"field.mask; else noMask\"\n    [type]=\"field.inputType || 'text'\"\n    [inputId]=\"field.id || field.name\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\"\n    [readonly]=\"field.readonly ? field.readonly() : false\">\n</p-inputMask>\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled(): field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{ field.leftAddon.label }}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container> \n\n            <ng-container *ngTemplateOutlet=\"field.keyFilter ? inputKeyFilter : input\"></ng-container>\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{ field.rightAddon.label }}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>            \n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #input>\n    <input #inputRef\n        [type]=\"field.inputType || 'text'\"\n        [id]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        [maxLength]=\"field.maxLength\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl\"\n        [ngStyle]=\"field.style\"\n        [readOnly]=\"field.readonly ? field.readonly() : false\" />\n</ng-template>\n<ng-template #inputKeyFilter>\n    <input #inputText\n        [type]=\"field.inputType || 'text'\"\n        [id]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        [maxLength]=\"field.maxLength\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [pKeyFilter]=\"field.keyFilter\"\n        [formControl]=\"formControl\"\n        [ngStyle]=\"field.style\"\n        [readOnly]=\"field.readonly ? field.readonly() : false\" />\n</ng-template>\n",
             encapsulation: ViewEncapsulation.None,
             styles: ["s-text-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-text-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:#e44328}.addon-button{border:1px solid #c1c1cc}.addon-button s-button .s-button-with-text,.addon-button s-button button{height:100%;min-width:40px}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}"]
         })
@@ -10159,7 +10323,7 @@ var ProfilePictureFieldComponent = /** @class */ (function () {
     ], ProfilePictureFieldComponent.prototype, "formControl", void 0);
     ProfilePictureFieldComponent = __decorate([
         Component({
-            template: "<s-profile-picture-picker\n    [formControl]=\"formControl\"\n    [simpleTitle]=\"field.simpleTitle\"\n    [actionTitle]=\"field.actionTitle\"\n    [subtitle]=\"field.subtitle\"\n    [aspectRatio]=\"field.aspectRatio\"\n    [cropperLabelsConfig]=\"field.cropperLabelsConfig\"\n    [removeButtonLabel]=\"field.removeButtonLabel\"\n    [changeButtonLabel]=\"field.changeButtonLabel\"\n    [confirmationTexts]=\"field.confirmationTexts\"\n    [maxFileSize]=\"field.maxFileSize\"\n    [accept]=\"field.accept\"\n    [supportedExtensions]=\"field.supportedExtensions\"\n    (changedImage)=\"field.onChangeImage ? field.onChangeImage($event) : null\"\n    (removedImage)=\"field.onRemovedImage ? field.onRemovedImage() : null\"\n    (invalidFile)=\"field.onInvalidFile ? field.onInvalidFile($event) : null\">\n</s-profile-picture-picker>"
+            template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<s-profile-picture-picker\n    [formControl]=\"formControl\"\n    [simpleTitle]=\"field.simpleTitle\"\n    [actionTitle]=\"field.actionTitle\"\n    [subtitle]=\"field.subtitle\"\n    [aspectRatio]=\"field.aspectRatio\"\n    [cropperLabelsConfig]=\"field.cropperLabelsConfig\"\n    [removeButtonLabel]=\"field.removeButtonLabel\"\n    [changeButtonLabel]=\"field.changeButtonLabel\"\n    [confirmationTexts]=\"field.confirmationTexts\"\n    [maxFileSize]=\"field.maxFileSize\"\n    [accept]=\"field.accept\"\n    [supportedExtensions]=\"field.supportedExtensions\"\n    (changedImage)=\"field.onChangeImage ? field.onChangeImage($event) : null\"\n    (removedImage)=\"field.onRemovedImage ? field.onRemovedImage() : null\"\n    (invalidFile)=\"field.onInvalidFile ? field.onInvalidFile($event) : null\">\n</s-profile-picture-picker>"
         })
     ], ProfilePictureFieldComponent);
     return ProfilePictureFieldComponent;
@@ -10413,15 +10577,50 @@ var DynamicFormDirective = /** @class */ (function () {
     __decorate([
         Input()
     ], DynamicFormDirective.prototype, "sDynamicForm", null);
-    __decorate([
-        Input("sDynamicFormDisplayTimeInfoSign")
-    ], DynamicFormDirective.prototype, "displayTimeInfoSign", void 0);
     DynamicFormDirective = __decorate([
         Directive({ selector: "[sDynamicForm]" })
     ], DynamicFormDirective);
     return DynamicFormDirective;
 }());
 
+var FieldLabelComponent = /** @class */ (function () {
+    function FieldLabelComponent() {
+        this.displayTimeInfoSign = 5000;
+    }
+    __decorate([
+        Input()
+    ], FieldLabelComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], FieldLabelComponent.prototype, "displayTimeInfoSign", void 0);
+    __decorate([
+        Input()
+    ], FieldLabelComponent.prototype, "fieldContainerRef", void 0);
+    FieldLabelComponent = __decorate([
+        Component({
+            selector: 's-field-label',
+            template: "<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"\n            field.infoSign;\n            displayTime: field.displayTimeInfoSign;\n            focusedInputRef: fieldContainerRef\n        \"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\">\n        {{ field.label }}\n    </label>\n</span>\n"
+        })
+    ], FieldLabelComponent);
+    return FieldLabelComponent;
+}());
+
+var FieldLabelModule = /** @class */ (function () {
+    function FieldLabelModule() {
+    }
+    FieldLabelModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                InfoSignModule
+            ],
+            declarations: [FieldLabelComponent],
+            exports: [FieldLabelComponent],
+        })
+    ], FieldLabelModule);
+    return FieldLabelModule;
+}());
+
 var PasswordFieldModule = /** @class */ (function () {
     function PasswordFieldModule() {
     }
@@ -10435,6 +10634,7 @@ var PasswordFieldModule = /** @class */ (function () {
                 TooltipModule,
                 PasswordStrengthModule,
                 InputTextModule,
+                FieldLabelModule
             ],
             declarations: [PasswordFieldComponent],
             exports: [PasswordFieldComponent],
@@ -10457,6 +10657,7 @@ var TextFieldModule = /** @class */ (function () {
                 InputMaskModule,
                 InputTextModule,
                 KeyFilterModule,
+                FieldLabelModule
             ],
             declarations: [TextFieldComponent],
             exports: [TextFieldComponent],
@@ -10467,9 +10668,11 @@ var TextFieldModule = /** @class */ (function () {
 
 var NumberFieldComponent = /** @class */ (function (_super) {
     __extends(NumberFieldComponent, _super);
-    function NumberFieldComponent(localeService) {
+    function NumberFieldComponent(localeService, elementRef, changeDetectorRef) {
         var _this = _super.call(this) || this;
         _this.localeService = localeService;
+        _this.elementRef = elementRef;
+        _this.changeDetectorRef = changeDetectorRef;
         _this.onInput = new EventEmitter();
         _this.onFocus = new EventEmitter();
         _this.onComplete = new EventEmitter();
@@ -10492,6 +10695,10 @@ var NumberFieldComponent = /** @class */ (function (_super) {
                 _this.field.onComplete(event);
         });
     };
+    NumberFieldComponent.prototype.ngAfterViewInit = function () {
+        this.setInputRef();
+        this.changeDetectorRef.detectChanges();
+    };
     NumberFieldComponent.prototype.ngOnDestroy = function () {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
@@ -10538,8 +10745,14 @@ var NumberFieldComponent = /** @class */ (function (_super) {
             },
         });
     };
+    NumberFieldComponent.prototype.setInputRef = function () {
+        var input = this.elementRef.nativeElement.querySelector("input");
+        this.inputRef = input;
+    };
     NumberFieldComponent.ctorParameters = function () { return [
-        { type: LocaleService }
+        { type: LocaleService },
+        { type: ElementRef },
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
@@ -10558,7 +10771,7 @@ var NumberFieldComponent = /** @class */ (function (_super) {
     ], NumberFieldComponent.prototype, "onComplete", void 0);
     NumberFieldComponent = __decorate([
         Component({
-            template: "<p-inputMask\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\" >\n</p-inputMask>\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled() : field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{field.leftAddon.label}}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"field.type === fieldType.Double && field.alignTo === numberAlignmentOption.LEFT ? localizedNumber : input\"></ng-container>\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{field.rightAddon.label}}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #input>\n    <input\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sNumberInput\n        [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n        [scale]=\"isFunction(field.scale) ? trigger(field.scale) : field.scale\"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n        [alignTo]=\"field.alignTo\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl\" />\n</ng-template>\n<ng-template #localizedNumber>\n    <input\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sLocalizedNumberInput\n        [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl\" />\n</ng-template>\n",
+            template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n\n<p-inputMask #inputRef\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\" >\n</p-inputMask>\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled() : field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{field.leftAddon.label}}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"field.type === fieldType.Double && field.alignTo === numberAlignmentOption.LEFT ? localizedNumber : input\"></ng-container>\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{field.rightAddon.label}}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #input>\n    <input #inputRef\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sNumberInput\n        [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n        [scale]=\"isFunction(field.scale) ? trigger(field.scale) : field.scale\"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n        [alignTo]=\"field.alignTo\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl\" />\n</ng-template>\n<ng-template #localizedNumber>\n    <input #inputRef\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sLocalizedNumberInput\n        [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"field.placeholder\"\n        [showDelay]=\"500\"\n        pInputText\n        [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl\" />\n</ng-template>\n",
             encapsulation: ViewEncapsulation.None,
             styles: ["s-number-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-number-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:#e44328}.addon-button{border:1px solid #c1c1cc}.addon-button s-button .s-button-with-text,.addon-button s-button button{height:100%;min-width:40px}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}"]
         })
@@ -10581,6 +10794,7 @@ var NumberFieldModule = /** @class */ (function () {
                 TooltipModule,
                 InputMaskModule,
                 InputTextModule,
+                FieldLabelModule
             ],
             declarations: [NumberFieldComponent],
             exports: [NumberFieldComponent],
@@ -10594,7 +10808,16 @@ var CurrencyFieldModule = /** @class */ (function () {
     }
     CurrencyFieldModule = __decorate([
         NgModule({
-            imports: [CommonModule, FormsModule, ReactiveFormsModule, NumberInputModule, TooltipModule, InputMaskModule, InputTextModule],
+            imports: [
+                CommonModule,
+                FormsModule,
+                ReactiveFormsModule,
+                NumberInputModule,
+                TooltipModule,
+                InputMaskModule,
+                InputTextModule,
+                FieldLabelModule
+            ],
             declarations: [CurrencyFieldComponent],
             exports: [CurrencyFieldComponent],
         })
@@ -10616,6 +10839,7 @@ var BignumberFieldModule = /** @class */ (function () {
                 TooltipModule,
                 InputMaskModule,
                 InputTextModule,
+                FieldLabelModule
             ],
             declarations: [BignumberFieldComponent],
             exports: [BignumberFieldComponent],
@@ -11381,6 +11605,7 @@ var ProfilePictureModule = /** @class */ (function () {
                 FormsModule,
                 ReactiveFormsModule,
                 ProfilePicturePickerModule,
+                FieldLabelModule
             ],
             declarations: [ProfilePictureFieldComponent],
             exports: [ProfilePictureFieldComponent],
@@ -11443,6 +11668,7 @@ var DynamicFormModule = /** @class */ (function () {
                 CurrencyFieldModule,
                 BignumberFieldModule,
                 ProfilePictureModule,
+                FieldLabelModule
             ],
             declarations: [
                 AutocompleteFieldComponent,
@@ -11647,6 +11873,7 @@ var CustomFieldsComponent = /** @class */ (function () {
             _this.formGroup.patchValue(_this.parseValuesForFields(_this.value));
             _this.ready = true;
         });
+        this.addDisplayTimeInfoSignToFields();
     };
     CustomFieldsComponent.prototype.ngAfterViewInit = function () {
         this.enableOrDisableFields(this.disableFields);
@@ -12074,6 +12301,12 @@ var CustomFieldsComponent = /** @class */ (function () {
     CustomFieldsComponent.prototype.getTranslateLabel = function (label) {
         return this.translateService.instant(this.domain + "." + this.service + "." + label);
     };
+    CustomFieldsComponent.prototype.addDisplayTimeInfoSignToFields = function () {
+        var _this = this;
+        this.fields.forEach(function (field) {
+            field.displayTimeInfoSign = _this.displayTimeInfoSign;
+        });
+    };
     var CustomFieldsComponent_1;
     CustomFieldsComponent.ctorParameters = function () { return [
         { type: CustomFieldsService },
@@ -12124,7 +12357,7 @@ var CustomFieldsComponent = /** @class */ (function () {
     CustomFieldsComponent = CustomFieldsComponent_1 = __decorate([
         Component({
             selector: "s-custom-fields",
-            template: "<s-dynamic-form [fields]=\"fields\"\n    [form]=\"formGroup\"\n    [errorMessages]=\"{pattern: invalidErrorLabel, required: requiredErrorMessage}\"\n    [displayTimeInfoSign]=\"displayTimeInfoSign\"></s-dynamic-form>",
+            template: "<s-dynamic-form [fields]=\"fields\"\n    [form]=\"formGroup\"\n    [errorMessages]=\"{\n        pattern: invalidErrorLabel,\n        required: requiredErrorMessage}\">\n</s-dynamic-form>",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -18487,5 +18720,5 @@ var fallback = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, AlertComponent, AlertModule, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, CardComponent, CardModule, CardTemplateTypes, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CurrencyService, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileUploadPermissions, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, IAInsightComponent, IAInsightModule, IAInsightTemplateTypes, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationButtonComponent, NavigationButtonModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, SVGFactoryDirective, SVGFactoryModule, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, convertToMomentDateFormat, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, TextFieldComponent as ɵba, NumberFieldModule as ɵbb, LocalizedNumberInputModule as ɵbc, NumberInputModule as ɵbd, NumberFieldComponent as ɵbe, CurrencyFieldModule as ɵbf, CurrencyFieldComponent as ɵbg, BignumberFieldModule as ɵbh, BignumberInputModule as ɵbi, BignumberFieldComponent as ɵbj, ProfilePictureModule as ɵbk, ThumbnailService as ɵbl, StructureModule as ɵbm, HeaderComponent as ɵbn, FooterComponent as ɵbo, ProfilePictureFieldComponent as ɵbp, AutocompleteFieldComponent as ɵbq, BooleanFieldComponent as ɵbr, BooleanSwitchFieldComponent as ɵbs, CalendarFieldComponent as ɵbt, ChipsFieldComponent as ɵbu, CountryPhonePickerFieldComponent as ɵbv, DynamicFieldComponent as ɵbw, DynamicFormDirective as ɵbx, FieldsetComponent as ɵby, FileUploadComponent$1 as ɵbz, TemplateDirective as ɵc, LookupFieldComponent as ɵca, RadioButtonComponent as ɵcb, RowComponent as ɵcc, SectionComponent as ɵcd, SelectFieldComponent as ɵce, SliderFieldComponent as ɵcf, TextAreaFieldComponent as ɵcg, TextAreaIAFieldComponent as ɵch, IAssistService as ɵci, DecimalField as ɵck, SideTableComponent as ɵcl, InfiniteScrollModule as ɵcm, InfiniteScrollDirective as ɵcn, IAInsightSidebarComponent as ɵco, IAInsightCardComponent as ɵcp, IAInsightCardLoaderComponent as ɵcq, KanbanEventService as ɵcr, KanbanItemComponent as ɵcs, KanbanColumnComponent as ɵct, KanbanItemDraggingComponent as ɵcu, NumberLocaleOptions as ɵcv, TieredMenuEventService as ɵcw, TieredMenuService as ɵcx, TieredMenuGlobalService as ɵcy, TieredMenuComponent as ɵcz, TemplateModule as ɵd, TieredMenuNestedComponent as ɵda, TieredMenuItemComponent as ɵdb, TieredMenuDividerComponent as ɵdc, BorderButtonModule as ɵdd, BorderButtonComponent as ɵde, ProgressBarDeterminateComponent as ɵdf, ProgressBarIndeterminateComponent as ɵdg, SelectButtonItemComponent as ɵdh, SlidePanelService as ɵdi, TimelineItemModule as ɵdj, TimelineIconItemComponent as ɵdk, HorizontalTimelineModule as ɵdl, HorizontalTimelineComponent as ɵdm, VerticalTimelineModule as ɵdn, VerticalTimelineComponent as ɵdo, RangeLineComponent as ɵdp, CollapseOptionComponent as ɵdq, CollapsedItemsComponent as ɵdr, VerticalItemsComponent as ɵds, CustomTranslationsModule as ɵe, CodeEditorComponent as ɵf, CoreFacade as ɵg, CodeMirror6Core as ɵh, CountryPhonePickerService as ɵi, LocalizedCurrencyImpurePipe as ɵj, LocalizedBignumberPipe as ɵk, LocalizedBignumberImpurePipe as ɵl, NumericPipe as ɵm, NumericService as ɵn, EmptyStateGoBackComponent as ɵo, IAssistIconComponent as ɵp, SeniorIconComponent as ɵq, DotsIndicatorComponent as ɵr, LoadingIndicatorComponent as ɵs, FileUploadService as ɵt, InfoSignComponent as ɵu, TableColumnsComponent as ɵv, TablePagingComponent as ɵw, PasswordFieldModule as ɵx, PasswordFieldComponent as ɵy, TextFieldModule as ɵz };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, AlertComponent, AlertModule, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, CardComponent, CardModule, CardTemplateTypes, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CurrencyService, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileUploadPermissions, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, IAInsightComponent, IAInsightModule, IAInsightTemplateTypes, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationButtonComponent, NavigationButtonModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, NumericService, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, SVGFactoryDirective, SVGFactoryModule, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, convertToMomentDateFormat, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, PasswordFieldComponent as ɵba, TextFieldModule as ɵbb, TextFieldComponent as ɵbc, NumberFieldModule as ɵbd, LocalizedNumberInputModule as ɵbe, NumberInputModule as ɵbf, NumberFieldComponent as ɵbg, CurrencyFieldModule as ɵbh, CurrencyFieldComponent as ɵbi, BignumberFieldModule as ɵbj, BignumberInputModule as ɵbk, BignumberFieldComponent as ɵbl, ProfilePictureModule as ɵbm, ThumbnailService as ɵbn, StructureModule as ɵbo, HeaderComponent as ɵbp, FooterComponent as ɵbq, ProfilePictureFieldComponent as ɵbr, AutocompleteFieldComponent as ɵbs, BooleanFieldComponent as ɵbt, BooleanSwitchFieldComponent as ɵbu, CalendarFieldComponent as ɵbv, ChipsFieldComponent as ɵbw, CountryPhonePickerFieldComponent as ɵbx, DynamicFieldComponent as ɵby, DynamicFormDirective as ɵbz, TemplateDirective as ɵc, FieldsetComponent as ɵca, FileUploadComponent$1 as ɵcb, LookupFieldComponent as ɵcc, RadioButtonComponent as ɵcd, RowComponent as ɵce, SectionComponent as ɵcf, SelectFieldComponent as ɵcg, SliderFieldComponent as ɵch, TextAreaFieldComponent as ɵci, TextAreaIAFieldComponent as ɵcj, IAssistService as ɵck, DecimalField as ɵcm, SideTableComponent as ɵcn, InfiniteScrollModule as ɵco, InfiniteScrollDirective as ɵcp, IAInsightSidebarComponent as ɵcq, IAInsightCardComponent as ɵcr, IAInsightCardLoaderComponent as ɵcs, KanbanEventService as ɵct, KanbanItemComponent as ɵcu, KanbanColumnComponent as ɵcv, KanbanItemDraggingComponent as ɵcw, NumberLocaleOptions as ɵcx, TieredMenuEventService as ɵcy, TieredMenuService as ɵcz, TemplateModule as ɵd, TieredMenuGlobalService as ɵda, TieredMenuComponent as ɵdb, TieredMenuNestedComponent as ɵdc, TieredMenuItemComponent as ɵdd, TieredMenuDividerComponent as ɵde, BorderButtonModule as ɵdf, BorderButtonComponent as ɵdg, ProgressBarDeterminateComponent as ɵdh, ProgressBarIndeterminateComponent as ɵdi, SelectButtonItemComponent as ɵdj, SlidePanelService as ɵdk, TimelineItemModule as ɵdl, TimelineIconItemComponent as ɵdm, HorizontalTimelineModule as ɵdn, HorizontalTimelineComponent as ɵdo, VerticalTimelineModule as ɵdp, VerticalTimelineComponent as ɵdq, RangeLineComponent as ɵdr, CollapseOptionComponent as ɵds, CollapsedItemsComponent as ɵdt, VerticalItemsComponent as ɵdu, CustomTranslationsModule as ɵe, CodeEditorComponent as ɵf, CoreFacade as ɵg, CodeMirror6Core as ɵh, CountryPhonePickerService as ɵi, LocalizedCurrencyImpurePipe as ɵj, LocalizedBignumberPipe as ɵk, LocalizedBignumberImpurePipe as ɵl, NumericPipe as ɵm, EmptyStateGoBackComponent as ɵn, IAssistIconComponent as ɵo, SeniorIconComponent as ɵp, DotsIndicatorComponent as ɵq, LoadingIndicatorComponent as ɵr, FileUploadService as ɵs, InfoSignComponent as ɵt, TableColumnsComponent as ɵu, TablePagingComponent as ɵv, PasswordFieldModule as ɵw, FieldLabelModule as ɵx, InfoSignModule as ɵy, FieldLabelComponent as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map