@seniorsistemas/angular-components 17.9.5 → 17.9.7

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

@@ -641,13 +641,14 @@
         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();
@@ -767,6 +768,7 @@
          * @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();
@@ -774,6 +776,36 @@
                 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 exports.TooltipPosition.Top:
+                        this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
+                        this.componentRef.instance.top = Math.round(top_1 - 20 - 5);
+                        break;
+                    case exports.TooltipPosition.Bottom:
+                        this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
+                        this.componentRef.instance.top = Math.round(bottom + 20);
+                        break;
+                    case exports.TooltipPosition.Left:
+                        this.componentRef.instance.left = Math.round(left - 20);
+                        this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - 5);
+                        break;
+                    case exports.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 () {
@@ -788,8 +820,8 @@
             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;
@@ -808,7 +840,7 @@
                                 this.position = exports.TooltipPosition.Left;
                                 break;
                             }
-                            var topShift = top_1;
+                            var topShift = top_2;
                             if (topShift <= tooltipHeight + safeSpace) {
                                 this.position = exports.TooltipPosition.Bottom;
                                 invalidOptions.push(exports.TooltipPosition.Top);
@@ -816,7 +848,7 @@
                                 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;
                         }
@@ -849,7 +881,7 @@
                                 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;
                         }
@@ -866,7 +898,7 @@
                                 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;
                         }
@@ -4669,6 +4701,7 @@
             this.representedBy = config.representedBy;
             this.CustomFieldClass = config.CustomFieldClass;
             this.CustomFieldComponentClass = config.CustomFieldComponentClass;
+            this.displayTimeInfoSign = config.displayTimeInfoSign;
         }
         return Field;
     }());
@@ -6039,13 +6072,10 @@
         __decorate([
             core.Input()
         ], DynamicFormComponent.prototype, "errorMessages", void 0);
-        __decorate([
-            core.Input()
-        ], DynamicFormComponent.prototype, "displayTimeInfoSign", void 0);
         DynamicFormComponent = __decorate([
             core.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: core.ViewEncapsulation.None,
                 styles: ["label.required:after{content:\" *\";color:#c13018}"]
             })
@@ -6802,7 +6832,18 @@
             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);
@@ -6820,11 +6861,6 @@
                 this.viewContainer.createEmbeddedView(this.templateRef);
             }
         };
-        InfoSignDirective.prototype.ngOnDestroy = function () {
-            if (this.componentRef) {
-                this.componentRef.destroy();
-            }
-        };
         InfoSignDirective.ctorParameters = function () { return [
             { type: core.TemplateRef },
             { type: core.ViewContainerRef },
@@ -6841,7 +6877,7 @@
         ], InfoSignDirective.prototype, "focusedInputRef", void 0);
         InfoSignDirective = __decorate([
             core.Directive({
-                selector: "[sInfoSign]",
+                selector: "[sInfoSign]"
             })
         ], InfoSignDirective);
         return InfoSignDirective;
@@ -7387,10 +7423,11 @@
          * @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());
@@ -9198,8 +9235,21 @@
     }());
 
     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: core.ChangeDetectorRef },
+            { type: core.ElementRef }
+        ]; };
         __decorate([
             core.Input()
         ], AutocompleteFieldComponent.prototype, "field", void 0);
@@ -9208,7 +9258,7 @@
         ], AutocompleteFieldComponent.prototype, "formControl", void 0);
         AutocompleteFieldComponent = __decorate([
             core.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;
@@ -9228,7 +9278,7 @@
         ], BooleanFieldComponent.prototype, "formControl", void 0);
         BooleanFieldComponent = __decorate([
             core.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;
@@ -9252,8 +9302,10 @@
     }());
 
     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: [
@@ -9317,8 +9369,17 @@
                 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: core$1.TranslateService }
+            { type: core$1.TranslateService },
+            { type: core.ChangeDetectorRef },
+            { type: core.ElementRef }
         ]; };
         __decorate([
             core.Input()
@@ -9332,17 +9393,22 @@
         __decorate([
             core.Input()
         ], CalendarFieldComponent.prototype, "timeOnly", void 0);
+        __decorate([
+            core.ViewChild('calendar')
+        ], CalendarFieldComponent.prototype, "calendar", void 0);
         CalendarFieldComponent = __decorate([
             core.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;
         }
@@ -9362,8 +9428,17 @@
                 }
             }
         };
+        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.Clipboard }
+            { type: clipboard.Clipboard },
+            { type: core.ChangeDetectorRef },
+            { type: core.ElementRef }
         ]; };
         __decorate([
             core.Input()
@@ -9373,7 +9448,7 @@
         ], ChipsFieldComponent.prototype, "formControl", void 0);
         ChipsFieldComponent = __decorate([
             core.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);
@@ -9381,8 +9456,21 @@
     }());
 
     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: core.ChangeDetectorRef },
+            { type: core.ElementRef }
+        ]; };
         __decorate([
             core.Input()
         ], CountryPhonePickerFieldComponent.prototype, "field", void 0);
@@ -9391,7 +9479,7 @@
         ], CountryPhonePickerFieldComponent.prototype, "formControl", void 0);
         CountryPhonePickerFieldComponent = __decorate([
             core.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;
@@ -9423,18 +9511,48 @@
 
     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;
+            rxjs.fromEvent(document, 'click')
+                .pipe(operators.filter(function (event) { return !_this.elementRef.nativeElement.contains(event.target); }), operators.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: core.ChangeDetectorRef },
+            { type: core.ElementRef }
+        ]; };
         __decorate([
             core.Input()
         ], FileUploadComponent.prototype, "field", void 0);
         __decorate([
             core.Input()
         ], FileUploadComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.HostListener('click')
+        ], FileUploadComponent.prototype, "onClick", null);
         FileUploadComponent = __decorate([
             core.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;
@@ -9451,7 +9569,7 @@
         ], LookupFieldComponent.prototype, "formControl", void 0);
         LookupFieldComponent = __decorate([
             core.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;
@@ -9495,7 +9613,7 @@
         ], RadioButtonComponent.prototype, "onFocus", void 0);
         RadioButtonComponent = __decorate([
             core.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: core.ViewEncapsulation.None,
                 styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n    "]
             })
@@ -9539,7 +9657,7 @@
         ], SelectFieldComponent.prototype, "formControl", void 0);
         SelectFieldComponent = __decorate([
             core.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;
@@ -9654,7 +9772,7 @@
         ], SliderFieldComponent.prototype, "onSlideEnd", void 0);
         SliderFieldComponent = __decorate([
             core.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);
@@ -9662,17 +9780,27 @@
     }(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: core.ChangeDetectorRef }
+        ]; };
         __decorate([
             core.Input()
         ], TextAreaFieldComponent.prototype, "field", void 0);
         __decorate([
             core.Input()
         ], TextAreaFieldComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.ViewChild('inputRef')
+        ], TextAreaFieldComponent.prototype, "inputRef", void 0);
         TextAreaFieldComponent = __decorate([
             core.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;
@@ -9746,9 +9874,12 @@
         __decorate([
             core.Input()
         ], TextAreaIAFieldComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.ViewChild('inputRef')
+        ], TextAreaIAFieldComponent.prototype, "inputRef", void 0);
         TextAreaIAFieldComponent = __decorate([
             core.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);
@@ -9781,7 +9912,7 @@
         ], RowComponent.prototype, "errorMessages", void 0);
         RowComponent = __decorate([
             core.Component({
-                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <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;
@@ -9811,13 +9942,10 @@
         __decorate([
             core.Input()
         ], DynamicFieldComponent.prototype, "errorMessages", void 0);
-        __decorate([
-            core.Input()
-        ], DynamicFieldComponent.prototype, "displayTimeInfoSign", void 0);
         DynamicFieldComponent = __decorate([
             core.Component({
                 selector: "s-dynamic-field",
-                template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\"\n            >\n                <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;
@@ -9836,9 +9964,10 @@
 
     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 core.EventEmitter();
             _this.onFocus = new core.EventEmitter();
             _this.onComplete = new core.EventEmitter();
@@ -9903,8 +10032,12 @@
                 },
             });
         };
+        BignumberFieldComponent.prototype.ngAfterViewInit = function () {
+            this.changeDetectorRef.detectChanges();
+        };
         BignumberFieldComponent.ctorParameters = function () { return [
-            { type: LocaleService }
+            { type: LocaleService },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input()
@@ -9921,9 +10054,12 @@
         __decorate([
             core.Output()
         ], BignumberFieldComponent.prototype, "onComplete", void 0);
+        __decorate([
+            core.ViewChild('inputRef')
+        ], BignumberFieldComponent.prototype, "inputRef", void 0);
         BignumberFieldComponent = __decorate([
             core.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: core.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}"]
             })
@@ -10121,10 +10257,11 @@
      */
     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 () {
@@ -10158,9 +10295,13 @@
                 },
             });
         };
+        CurrencyFieldComponent.prototype.ngAfterViewInit = function () {
+            this.changeDetectorRef.detectChanges();
+        };
         CurrencyFieldComponent.ctorParameters = function () { return [
+            { type: CurrencyService },
             { type: LocaleService },
-            { type: CurrencyService }
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input()
@@ -10168,16 +10309,20 @@
         __decorate([
             core.Input()
         ], CurrencyFieldComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.ViewChild('inputRef')
+        ], CurrencyFieldComponent.prototype, "inputRef", void 0);
         CurrencyFieldComponent = __decorate([
             core.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 core.EventEmitter();
             this.onFocus = new core.EventEmitter();
             this.onComplete = new core.EventEmitter();
@@ -10215,6 +10360,12 @@
         PasswordFieldComponent.prototype.onChangeVisible = function () {
             this.passwordVisible = !this.passwordVisible;
         };
+        PasswordFieldComponent.prototype.ngAfterViewInit = function () {
+            this.changeDetectorRef.detectChanges();
+        };
+        PasswordFieldComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
         __decorate([
             core.Input()
         ], PasswordFieldComponent.prototype, "field", void 0);
@@ -10230,9 +10381,12 @@
         __decorate([
             core.Output()
         ], PasswordFieldComponent.prototype, "onComplete", void 0);
+        __decorate([
+            core.ViewChild('inputRef')
+        ], PasswordFieldComponent.prototype, "inputRef", void 0);
         PasswordFieldComponent = __decorate([
             core.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: core.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}"]
             })
@@ -10242,8 +10396,9 @@
 
     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 core.EventEmitter();
             _this.onFocus = new core.EventEmitter();
             _this.onComplete = new core.EventEmitter();
@@ -10265,10 +10420,16 @@
                     _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: core.ChangeDetectorRef }
+        ]; };
         __decorate([
             core.Input()
         ], TextFieldComponent.prototype, "field", void 0);
@@ -10284,9 +10445,12 @@
         __decorate([
             core.Output()
         ], TextFieldComponent.prototype, "onComplete", void 0);
+        __decorate([
+            core.ViewChild('inputRef')
+        ], TextFieldComponent.prototype, "inputRef", void 0);
         TextFieldComponent = __decorate([
             core.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: core.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}"]
             })
@@ -10305,7 +10469,7 @@
         ], ProfilePictureFieldComponent.prototype, "formControl", void 0);
         ProfilePictureFieldComponent = __decorate([
             core.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;
@@ -10559,15 +10723,50 @@
         __decorate([
             core.Input()
         ], DynamicFormDirective.prototype, "sDynamicForm", null);
-        __decorate([
-            core.Input("sDynamicFormDisplayTimeInfoSign")
-        ], DynamicFormDirective.prototype, "displayTimeInfoSign", void 0);
         DynamicFormDirective = __decorate([
             core.Directive({ selector: "[sDynamicForm]" })
         ], DynamicFormDirective);
         return DynamicFormDirective;
     }());
 
+    var FieldLabelComponent = /** @class */ (function () {
+        function FieldLabelComponent() {
+            this.displayTimeInfoSign = 5000;
+        }
+        __decorate([
+            core.Input()
+        ], FieldLabelComponent.prototype, "field", void 0);
+        __decorate([
+            core.Input()
+        ], FieldLabelComponent.prototype, "displayTimeInfoSign", void 0);
+        __decorate([
+            core.Input()
+        ], FieldLabelComponent.prototype, "fieldContainerRef", void 0);
+        FieldLabelComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    InfoSignModule
+                ],
+                declarations: [FieldLabelComponent],
+                exports: [FieldLabelComponent],
+            })
+        ], FieldLabelModule);
+        return FieldLabelModule;
+    }());
+
     var PasswordFieldModule = /** @class */ (function () {
         function PasswordFieldModule() {
         }
@@ -10581,6 +10780,7 @@
                     TooltipModule,
                     PasswordStrengthModule,
                     inputtext.InputTextModule,
+                    FieldLabelModule
                 ],
                 declarations: [PasswordFieldComponent],
                 exports: [PasswordFieldComponent],
@@ -10603,6 +10803,7 @@
                     inputmask.InputMaskModule,
                     inputtext.InputTextModule,
                     keyfilter.KeyFilterModule,
+                    FieldLabelModule
                 ],
                 declarations: [TextFieldComponent],
                 exports: [TextFieldComponent],
@@ -10613,9 +10814,11 @@
 
     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 core.EventEmitter();
             _this.onFocus = new core.EventEmitter();
             _this.onComplete = new core.EventEmitter();
@@ -10638,6 +10841,10 @@
                     _this.field.onComplete(event);
             });
         };
+        NumberFieldComponent.prototype.ngAfterViewInit = function () {
+            this.setInputRef();
+            this.changeDetectorRef.detectChanges();
+        };
         NumberFieldComponent.prototype.ngOnDestroy = function () {
             this.ngUnsubscribe.next();
             this.ngUnsubscribe.complete();
@@ -10684,8 +10891,14 @@
                 },
             });
         };
+        NumberFieldComponent.prototype.setInputRef = function () {
+            var input = this.elementRef.nativeElement.querySelector("input");
+            this.inputRef = input;
+        };
         NumberFieldComponent.ctorParameters = function () { return [
-            { type: LocaleService }
+            { type: LocaleService },
+            { type: core.ElementRef },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input()
@@ -10704,7 +10917,7 @@
         ], NumberFieldComponent.prototype, "onComplete", void 0);
         NumberFieldComponent = __decorate([
             core.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: core.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}"]
             })
@@ -10727,6 +10940,7 @@
                     TooltipModule,
                     inputmask.InputMaskModule,
                     inputtext.InputTextModule,
+                    FieldLabelModule
                 ],
                 declarations: [NumberFieldComponent],
                 exports: [NumberFieldComponent],
@@ -10740,7 +10954,16 @@
         }
         CurrencyFieldModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule, NumberInputModule, TooltipModule, inputmask.InputMaskModule, inputtext.InputTextModule],
+                imports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    NumberInputModule,
+                    TooltipModule,
+                    inputmask.InputMaskModule,
+                    inputtext.InputTextModule,
+                    FieldLabelModule
+                ],
                 declarations: [CurrencyFieldComponent],
                 exports: [CurrencyFieldComponent],
             })
@@ -10762,6 +10985,7 @@
                     TooltipModule,
                     inputmask.InputMaskModule,
                     inputtext.InputTextModule,
+                    FieldLabelModule
                 ],
                 declarations: [BignumberFieldComponent],
                 exports: [BignumberFieldComponent],
@@ -11527,6 +11751,7 @@
                     forms.FormsModule,
                     forms.ReactiveFormsModule,
                     ProfilePicturePickerModule,
+                    FieldLabelModule
                 ],
                 declarations: [ProfilePictureFieldComponent],
                 exports: [ProfilePictureFieldComponent],
@@ -11589,6 +11814,7 @@
                     CurrencyFieldModule,
                     BignumberFieldModule,
                     ProfilePictureModule,
+                    FieldLabelModule
                 ],
                 declarations: [
                     AutocompleteFieldComponent,
@@ -11793,6 +12019,7 @@
                 _this.formGroup.patchValue(_this.parseValuesForFields(_this.value));
                 _this.ready = true;
             });
+            this.addDisplayTimeInfoSignToFields();
         };
         CustomFieldsComponent.prototype.ngAfterViewInit = function () {
             this.enableOrDisableFields(this.disableFields);
@@ -12220,6 +12447,12 @@
         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 },
@@ -12270,7 +12503,7 @@
         CustomFieldsComponent = CustomFieldsComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
@@ -18729,6 +18962,7 @@
     exports.NumberInputDirective = NumberInputDirective;
     exports.NumberInputModule = NumberInputModule;
     exports.NumberLocaleOptions = NumberLocaleOptions;
+    exports.NumericService = NumericService;
     exports.ObjectCardComponent = ObjectCardComponent;
     exports.ObjectCardFieldComponent = ObjectCardFieldComponent;
     exports.ObjectCardMainComponent = ObjectCardMainComponent;
@@ -18797,78 +19031,80 @@
     exports.fallback = fallback;
     exports.ɵa = TooltipComponent;
     exports.ɵb = TooltipDirective;
-    exports.ɵba = TextFieldComponent;
-    exports.ɵbb = NumberFieldModule;
-    exports.ɵbc = LocalizedNumberInputModule;
-    exports.ɵbd = NumberInputModule;
-    exports.ɵbe = NumberFieldComponent;
-    exports.ɵbf = CurrencyFieldModule;
-    exports.ɵbg = CurrencyFieldComponent;
-    exports.ɵbh = BignumberFieldModule;
-    exports.ɵbi = BignumberInputModule;
-    exports.ɵbj = BignumberFieldComponent;
-    exports.ɵbk = ProfilePictureModule;
-    exports.ɵbl = ThumbnailService;
-    exports.ɵbm = StructureModule;
-    exports.ɵbn = HeaderComponent;
-    exports.ɵbo = FooterComponent;
-    exports.ɵbp = ProfilePictureFieldComponent;
-    exports.ɵbq = AutocompleteFieldComponent;
-    exports.ɵbr = BooleanFieldComponent;
-    exports.ɵbs = BooleanSwitchFieldComponent;
-    exports.ɵbt = CalendarFieldComponent;
-    exports.ɵbu = ChipsFieldComponent;
-    exports.ɵbv = CountryPhonePickerFieldComponent;
-    exports.ɵbw = DynamicFieldComponent;
-    exports.ɵbx = DynamicFormDirective;
-    exports.ɵby = FieldsetComponent;
-    exports.ɵbz = FileUploadComponent$1;
+    exports.ɵba = PasswordFieldComponent;
+    exports.ɵbb = TextFieldModule;
+    exports.ɵbc = TextFieldComponent;
+    exports.ɵbd = NumberFieldModule;
+    exports.ɵbe = LocalizedNumberInputModule;
+    exports.ɵbf = NumberInputModule;
+    exports.ɵbg = NumberFieldComponent;
+    exports.ɵbh = CurrencyFieldModule;
+    exports.ɵbi = CurrencyFieldComponent;
+    exports.ɵbj = BignumberFieldModule;
+    exports.ɵbk = BignumberInputModule;
+    exports.ɵbl = BignumberFieldComponent;
+    exports.ɵbm = ProfilePictureModule;
+    exports.ɵbn = ThumbnailService;
+    exports.ɵbo = StructureModule;
+    exports.ɵbp = HeaderComponent;
+    exports.ɵbq = FooterComponent;
+    exports.ɵbr = ProfilePictureFieldComponent;
+    exports.ɵbs = AutocompleteFieldComponent;
+    exports.ɵbt = BooleanFieldComponent;
+    exports.ɵbu = BooleanSwitchFieldComponent;
+    exports.ɵbv = CalendarFieldComponent;
+    exports.ɵbw = ChipsFieldComponent;
+    exports.ɵbx = CountryPhonePickerFieldComponent;
+    exports.ɵby = DynamicFieldComponent;
+    exports.ɵbz = DynamicFormDirective;
     exports.ɵc = TemplateDirective;
-    exports.ɵca = LookupFieldComponent;
-    exports.ɵcb = RadioButtonComponent;
-    exports.ɵcc = RowComponent;
-    exports.ɵcd = SectionComponent;
-    exports.ɵce = SelectFieldComponent;
-    exports.ɵcf = SliderFieldComponent;
-    exports.ɵcg = TextAreaFieldComponent;
-    exports.ɵch = TextAreaIAFieldComponent;
-    exports.ɵci = IAssistService;
-    exports.ɵck = DecimalField;
-    exports.ɵcl = SideTableComponent;
-    exports.ɵcm = InfiniteScrollModule;
-    exports.ɵcn = InfiniteScrollDirective;
-    exports.ɵco = IAInsightSidebarComponent;
-    exports.ɵcp = IAInsightCardComponent;
-    exports.ɵcq = IAInsightCardLoaderComponent;
-    exports.ɵcr = KanbanEventService;
-    exports.ɵcs = KanbanItemComponent;
-    exports.ɵct = KanbanColumnComponent;
-    exports.ɵcu = KanbanItemDraggingComponent;
-    exports.ɵcv = NumberLocaleOptions;
-    exports.ɵcw = TieredMenuEventService;
-    exports.ɵcx = TieredMenuService;
-    exports.ɵcy = TieredMenuGlobalService;
-    exports.ɵcz = TieredMenuComponent;
+    exports.ɵca = FieldsetComponent;
+    exports.ɵcb = FileUploadComponent$1;
+    exports.ɵcc = LookupFieldComponent;
+    exports.ɵcd = RadioButtonComponent;
+    exports.ɵce = RowComponent;
+    exports.ɵcf = SectionComponent;
+    exports.ɵcg = SelectFieldComponent;
+    exports.ɵch = SliderFieldComponent;
+    exports.ɵci = TextAreaFieldComponent;
+    exports.ɵcj = TextAreaIAFieldComponent;
+    exports.ɵck = IAssistService;
+    exports.ɵcm = DecimalField;
+    exports.ɵcn = SideTableComponent;
+    exports.ɵco = InfiniteScrollModule;
+    exports.ɵcp = InfiniteScrollDirective;
+    exports.ɵcq = IAInsightSidebarComponent;
+    exports.ɵcr = IAInsightCardComponent;
+    exports.ɵcs = IAInsightCardLoaderComponent;
+    exports.ɵct = KanbanEventService;
+    exports.ɵcu = KanbanItemComponent;
+    exports.ɵcv = KanbanColumnComponent;
+    exports.ɵcw = KanbanItemDraggingComponent;
+    exports.ɵcx = NumberLocaleOptions;
+    exports.ɵcy = TieredMenuEventService;
+    exports.ɵcz = TieredMenuService;
     exports.ɵd = TemplateModule;
-    exports.ɵda = TieredMenuNestedComponent;
-    exports.ɵdb = TieredMenuItemComponent;
-    exports.ɵdc = TieredMenuDividerComponent;
-    exports.ɵdd = BorderButtonModule;
-    exports.ɵde = BorderButtonComponent;
-    exports.ɵdf = ProgressBarDeterminateComponent;
-    exports.ɵdg = ProgressBarIndeterminateComponent;
-    exports.ɵdh = SelectButtonItemComponent;
-    exports.ɵdi = SlidePanelService;
-    exports.ɵdj = TimelineItemModule;
-    exports.ɵdk = TimelineIconItemComponent;
-    exports.ɵdl = HorizontalTimelineModule;
-    exports.ɵdm = HorizontalTimelineComponent;
-    exports.ɵdn = VerticalTimelineModule;
-    exports.ɵdo = VerticalTimelineComponent;
-    exports.ɵdp = RangeLineComponent;
-    exports.ɵdq = CollapseOptionComponent;
-    exports.ɵdr = CollapsedItemsComponent;
-    exports.ɵds = VerticalItemsComponent;
+    exports.ɵda = TieredMenuGlobalService;
+    exports.ɵdb = TieredMenuComponent;
+    exports.ɵdc = TieredMenuNestedComponent;
+    exports.ɵdd = TieredMenuItemComponent;
+    exports.ɵde = TieredMenuDividerComponent;
+    exports.ɵdf = BorderButtonModule;
+    exports.ɵdg = BorderButtonComponent;
+    exports.ɵdh = ProgressBarDeterminateComponent;
+    exports.ɵdi = ProgressBarIndeterminateComponent;
+    exports.ɵdj = SelectButtonItemComponent;
+    exports.ɵdk = SlidePanelService;
+    exports.ɵdl = TimelineItemModule;
+    exports.ɵdm = TimelineIconItemComponent;
+    exports.ɵdn = HorizontalTimelineModule;
+    exports.ɵdo = HorizontalTimelineComponent;
+    exports.ɵdp = VerticalTimelineModule;
+    exports.ɵdq = VerticalTimelineComponent;
+    exports.ɵdr = RangeLineComponent;
+    exports.ɵds = CollapseOptionComponent;
+    exports.ɵdt = CollapsedItemsComponent;
+    exports.ɵdu = VerticalItemsComponent;
     exports.ɵe = CustomTranslationsModule;
     exports.ɵf = CodeEditorComponent;
     exports.ɵg = CoreFacade;
@@ -18878,19 +19114,19 @@
     exports.ɵk = LocalizedBignumberPipe;
     exports.ɵl = LocalizedBignumberImpurePipe;
     exports.ɵm = NumericPipe;
-    exports.ɵn = NumericService;
-    exports.ɵo = EmptyStateGoBackComponent;
-    exports.ɵp = IAssistIconComponent;
-    exports.ɵq = SeniorIconComponent;
-    exports.ɵr = DotsIndicatorComponent;
-    exports.ɵs = LoadingIndicatorComponent;
-    exports.ɵt = FileUploadService;
-    exports.ɵu = InfoSignComponent;
-    exports.ɵv = TableColumnsComponent;
-    exports.ɵw = TablePagingComponent;
-    exports.ɵx = PasswordFieldModule;
-    exports.ɵy = PasswordFieldComponent;
-    exports.ɵz = TextFieldModule;
+    exports.ɵn = EmptyStateGoBackComponent;
+    exports.ɵo = IAssistIconComponent;
+    exports.ɵp = SeniorIconComponent;
+    exports.ɵq = DotsIndicatorComponent;
+    exports.ɵr = LoadingIndicatorComponent;
+    exports.ɵs = FileUploadService;
+    exports.ɵt = InfoSignComponent;
+    exports.ɵu = TableColumnsComponent;
+    exports.ɵv = TablePagingComponent;
+    exports.ɵw = PasswordFieldModule;
+    exports.ɵx = FieldLabelModule;
+    exports.ɵy = InfoSignModule;
+    exports.ɵz = FieldLabelComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });