@seniorsistemas/angular-components 14.4.1 → 14.7.0

package/fesm5/seniorsistemas-angular-components.js

@@ -13,9 +13,11 @@ import { trigger, state, style, transition, animate, group, query, animateChild
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl, FormGroup, NG_VALIDATORS, Validators, FormArray } from '@angular/forms';
 import { HttpClient, HttpEventType, HttpClientModule } from '@angular/common/http';
 import { Hotkey, HotkeysService, HotkeyModule } from 'angular2-hotkeys';
+import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
 import { Dialog, DialogModule } from 'primeng/dialog';
 import { Table, TableService, RowToggler, TableModule as TableModule$1 } from 'primeng/table';
+import { applyMask, AlignmentOptions, CurrencyMaskDirective as CurrencyMaskDirective$1 } from '@seniorsistemas/ng2-currency-mask';
 import { user } from '@seniorsistemas/senior-platform-data';
 import * as moment_ from 'moment';
 import { CookieService } from 'ngx-cookie-service';
@@ -991,16 +993,26 @@ var FieldType;
     FieldType["Chips"] = "Chips";
     FieldType["Date"] = "Date";
     FieldType["DateTime"] = "DateTime";
+    /**
+     * @deprecated Should use 'Number' instead
+     */
     FieldType["Double"] = "Double";
     FieldType["Enum"] = "Enum";
     FieldType["Blob"] = "Blob";
+    /**
+     * @deprecated Should use 'Number' instead
+     */
     FieldType["Integer"] = "Integer";
     FieldType["Lookup"] = "Lookup";
+    /**
+     * @deprecated Should use 'Number' instead
+     */
     FieldType["Money"] = "Money";
     FieldType["Radio"] = "Radio";
     FieldType["String"] = "String";
     FieldType["Text"] = "Text";
     FieldType["Time"] = "Time";
+    FieldType["Number"] = "Number";
 })(FieldType || (FieldType = {}));
 
 var FieldSize = /** @class */ (function () {
@@ -1046,48 +1058,6 @@ var AutocompleteField = /** @class */ (function (_super) {
     return AutocompleteField;
 }(Field));
 
-var BlobField = /** @class */ (function (_super) {
-    __extends(BlobField, _super);
-    function BlobField(config) {
-        var _this = _super.call(this, config) || this;
-        _this.accept = config.accept;
-        _this.files = config.files || [];
-        _this.chooseLabel = config.chooseLabel;
-        _this.removeLabel = config.removeLabel;
-        _this.cancelLabel = config.cancelLabel;
-        _this.successTooltip = config.successTooltip;
-        _this.multiple = config.multiple;
-        _this.onUploadFile = config.onUploadFile;
-        _this.onRemoveFile = config.onRemoveFile;
-        _this.onCancelUpload = config.onCancelUpload;
-        _this.onDownloadFile = config.onDownloadFile;
-        return _this;
-    }
-    return BlobField;
-}(Field));
-
-var BooleanOptionsLabel = /** @class */ (function () {
-    function BooleanOptionsLabel(config) {
-        this.true = config.true;
-        this.false = config.false;
-        this.empty = config.empty;
-    }
-    return BooleanOptionsLabel;
-}());
-var BooleanField = /** @class */ (function (_super) {
-    __extends(BooleanField, _super);
-    function BooleanField(config) {
-        var _this = _super.call(this, config) || this;
-        _this.verticalAlignment = config.verticalAlignment;
-        _this.optionsLabel = new BooleanOptionsLabel(config.optionsLabel);
-        _this.onBlur = config.onBlur;
-        _this.onFocus = config.onFocus;
-        _this.onClick = config.onClick;
-        return _this;
-    }
-    return BooleanField;
-}(Field));
-
 var CalendarLocaleOptions = /** @class */ (function () {
     function CalendarLocaleOptions(config) {
         var _this = this;
@@ -1200,6 +1170,54 @@ var LocaleService = /** @class */ (function () {
     return LocaleService;
 }());
 
+var LocalizedBignumberPipe = /** @class */ (function () {
+    function LocalizedBignumberPipe(localeService) {
+        this.localeService = localeService;
+    }
+    LocalizedBignumberPipe.prototype.transform = function (value, options) {
+        return value !== undefined && value !== null ? this.applyMask(value, options) : of(value);
+    };
+    LocalizedBignumberPipe.prototype.applyMask = function (value, options) {
+        return this.localeService.get().pipe(map(function (localeConfig) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var configs = {
+                prefix: (_c = (_a = options.prefix) !== null && _a !== void 0 ? _a : (_b = localeConfig === null || localeConfig === void 0 ? void 0 : localeConfig.number) === null || _b === void 0 ? void 0 : _b.currencySymbol) !== null && _c !== void 0 ? _c : "R$",
+                thousandsSeparator: (_f = (_d = options === null || options === void 0 ? void 0 : options.thousandsSeparator) !== null && _d !== void 0 ? _d : (_e = localeConfig === null || localeConfig === void 0 ? void 0 : localeConfig.number) === null || _e === void 0 ? void 0 : _e.thousandsSeparator) !== null && _f !== void 0 ? _f : ".",
+                decimalSeparator: (_j = (_g = options === null || options === void 0 ? void 0 : options.decimalSeparator) !== null && _g !== void 0 ? _g : (_h = localeConfig === null || localeConfig === void 0 ? void 0 : localeConfig.number) === null || _h === void 0 ? void 0 : _h.decimalSeparator) !== null && _j !== void 0 ? _j : ",",
+                scale: (_k = options === null || options === void 0 ? void 0 : options.scale) !== null && _k !== void 0 ? _k : 2
+            };
+            var isNumber = !(new BigNumber(value).isNaN());
+            return applyMask(value, configs, isNumber);
+        }));
+    };
+    LocalizedBignumberPipe.ctorParameters = function () { return [
+        { type: LocaleService }
+    ]; };
+    LocalizedBignumberPipe = __decorate([
+        Pipe({
+            name: "localizedBignumber",
+        })
+    ], LocalizedBignumberPipe);
+    return LocalizedBignumberPipe;
+}());
+
+var LocalizedBignumberImpurePipe = /** @class */ (function (_super) {
+    __extends(LocalizedBignumberImpurePipe, _super);
+    function LocalizedBignumberImpurePipe() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LocalizedBignumberImpurePipe.prototype.transform = function (value, options) {
+        return _super.prototype.transform.call(this, value, options);
+    };
+    LocalizedBignumberImpurePipe = __decorate([
+        Pipe({
+            name: "localizedBignumberImpure",
+            pure: false,
+        })
+    ], LocalizedBignumberImpurePipe);
+    return LocalizedBignumberImpurePipe;
+}(LocalizedBignumberPipe));
+
 var LocalizedCurrencyPipeOptions = /** @class */ (function (_super) {
     __extends(LocalizedCurrencyPipeOptions, _super);
     function LocalizedCurrencyPipeOptions(config) {
@@ -1210,6 +1228,9 @@ var LocalizedCurrencyPipeOptions = /** @class */ (function (_super) {
     }
     return LocalizedCurrencyPipeOptions;
 }(NumberLocaleOptions));
+/**
+ * @deprecated Should use localizedBignumberPipe instead
+ */
 var LocalizedCurrencyPipe = /** @class */ (function () {
     function LocalizedCurrencyPipe(localeService) {
         this.localeService = localeService;
@@ -1248,6 +1269,9 @@ var LocalizedCurrencyPipe = /** @class */ (function () {
     return LocalizedCurrencyPipe;
 }());
 
+/**
+ * @deprecated Should use localizedBignumberPipe instead
+ */
 var LocalizedCurrencyImpurePipe = /** @class */ (function (_super) {
     __extends(LocalizedCurrencyImpurePipe, _super);
     function LocalizedCurrencyImpurePipe() {
@@ -1300,6 +1324,9 @@ var LocalizedDateImpurePipe = /** @class */ (function (_super) {
     return LocalizedDateImpurePipe;
 }(LocalizedDatePipe));
 
+/**
+ * @deprecated Should use localizedBignumberPipe instead
+ */
 var LocalizedNumberPipe = /** @class */ (function () {
     function LocalizedNumberPipe(localeService) {
         this.localeService = localeService;
@@ -1373,6 +1400,8 @@ var LocaleModule = /** @class */ (function () {
                 LocalizedCurrencyImpurePipe,
                 LocalizedDateImpurePipe,
                 LocalizedTimeImpurePipe,
+                LocalizedBignumberPipe,
+                LocalizedBignumberImpurePipe
             ],
         };
     };
@@ -1393,6 +1422,8 @@ var LocaleModule = /** @class */ (function () {
                 LocalizedCurrencyImpurePipe,
                 LocalizedDateImpurePipe,
                 LocalizedTimeImpurePipe,
+                LocalizedBignumberPipe,
+                LocalizedBignumberImpurePipe
             ],
             declarations: [
                 LocalizedCurrencyPipe,
@@ -1402,12 +1433,78 @@ var LocaleModule = /** @class */ (function () {
                 LocalizedCurrencyImpurePipe,
                 LocalizedDateImpurePipe,
                 LocalizedTimeImpurePipe,
+                LocalizedBignumberPipe,
+                LocalizedBignumberImpurePipe
             ],
         })
     ], LocaleModule);
     return LocaleModule;
 }());
 
+var BignumberField = /** @class */ (function (_super) {
+    __extends(BignumberField, _super);
+    function BignumberField(config) {
+        var _a;
+        var _this = _super.call(this, config) || this;
+        _this.numberLocaleOptions = config.numberLocaleOptions || DEFAULT_NUMBER_LOCALE_OPTIONS;
+        _this.browserAutocomplete = config.browserAutocomplete;
+        _this.precision = config.precision;
+        _this.scale = (_a = config.scale) !== null && _a !== void 0 ? _a : 2;
+        _this.alignTo = _this.scale ? AlignmentOptions.RIGHT : AlignmentOptions.LEFT;
+        _this.mask = config.mask;
+        _this.leftAddon = config.leftAddon;
+        _this.rightAddon = config.rightAddon;
+        _this.onBlur = config.onBlur;
+        _this.onFocus = config.onFocus;
+        _this.onComplete = config.onComplete;
+        _this.onInput = config.onInput;
+        return _this;
+    }
+    return BignumberField;
+}(Field));
+
+var BlobField = /** @class */ (function (_super) {
+    __extends(BlobField, _super);
+    function BlobField(config) {
+        var _this = _super.call(this, config) || this;
+        _this.accept = config.accept;
+        _this.files = config.files || [];
+        _this.chooseLabel = config.chooseLabel;
+        _this.removeLabel = config.removeLabel;
+        _this.cancelLabel = config.cancelLabel;
+        _this.successTooltip = config.successTooltip;
+        _this.multiple = config.multiple;
+        _this.onUploadFile = config.onUploadFile;
+        _this.onRemoveFile = config.onRemoveFile;
+        _this.onCancelUpload = config.onCancelUpload;
+        _this.onDownloadFile = config.onDownloadFile;
+        return _this;
+    }
+    return BlobField;
+}(Field));
+
+var BooleanOptionsLabel = /** @class */ (function () {
+    function BooleanOptionsLabel(config) {
+        this.true = config.true;
+        this.false = config.false;
+        this.empty = config.empty;
+    }
+    return BooleanOptionsLabel;
+}());
+var BooleanField = /** @class */ (function (_super) {
+    __extends(BooleanField, _super);
+    function BooleanField(config) {
+        var _this = _super.call(this, config) || this;
+        _this.verticalAlignment = config.verticalAlignment;
+        _this.optionsLabel = new BooleanOptionsLabel(config.optionsLabel);
+        _this.onBlur = config.onBlur;
+        _this.onFocus = config.onFocus;
+        _this.onClick = config.onClick;
+        return _this;
+    }
+    return BooleanField;
+}(Field));
+
 var CalendarField = /** @class */ (function (_super) {
     __extends(CalendarField, _super);
     function CalendarField(config) {
@@ -1448,11 +1545,17 @@ var ChipsField = /** @class */ (function (_super) {
     return ChipsField;
 }(Field));
 
+/**
+ * @deprecated Should use 'AlignmentOptions' from @seniorsistemas/ng2-currency-mask instead
+ */
 var NumberAlignmentOption;
 (function (NumberAlignmentOption) {
     NumberAlignmentOption["RIGHT"] = "right";
     NumberAlignmentOption["LEFT"] = "left";
 })(NumberAlignmentOption || (NumberAlignmentOption = {}));
+/**
+ * @deprecated Should use BigNumberInput directive instead
+ */
 var NumberInputDirective = /** @class */ (function (_super) {
     __extends(NumberInputDirective, _super);
     function NumberInputDirective() {
@@ -1566,6 +1669,9 @@ var NumberInputDirective = /** @class */ (function (_super) {
     return NumberInputDirective;
 }(CurrencyMaskDirective));
 
+/**
+ * @deprecated Should use 'BignumberInputModule' instead
+ */
 var NumberInputModule = /** @class */ (function () {
     function NumberInputModule() {
     }
@@ -1579,6 +1685,9 @@ var NumberInputModule = /** @class */ (function () {
     return NumberInputModule;
 }());
 
+/**
+ * @deprecated Should use BignumberField instead
+ */
 var NumberField = /** @class */ (function (_super) {
     __extends(NumberField, _super);
     function NumberField(config) {
@@ -1599,6 +1708,9 @@ var NumberField = /** @class */ (function (_super) {
     return NumberField;
 }(Field));
 
+/**
+ * @deprecated Should use BignumberField instead
+ */
 var DecimalField = /** @class */ (function (_super) {
     __extends(DecimalField, _super);
     function DecimalField(config) {
@@ -1611,6 +1723,9 @@ var DecimalField = /** @class */ (function (_super) {
     return DecimalField;
 }(NumberField));
 
+/**
+ * @deprecated Should use BignumberField instead
+ */
 var CurrencyField = /** @class */ (function (_super) {
     __extends(CurrencyField, _super);
     function CurrencyField(config) {
@@ -1764,6 +1879,8 @@ var FormField = /** @class */ (function () {
                 return new NumberField(config);
             case FieldType.Double:
                 return new DecimalField(config);
+            case FieldType.Number:
+                return new BignumberField(config);
             case FieldType.String:
             case FieldType.Binary:
                 return new TextField(config);
@@ -1976,7 +2093,7 @@ var LookupComponent = /** @class */ (function () {
             return this.emptyFieldLabel;
     };
     LookupComponent.prototype.isNumber = function (obj, path) {
-        return typeof this.getFieldValue(obj, path) === "number";
+        return !(new BigNumber(this.getFieldValue(obj, path)).isNaN());
     };
     LookupComponent.prototype.setHotkeys = function () {
         var _this = this;
@@ -2018,6 +2135,15 @@ var LookupComponent = /** @class */ (function () {
     LookupComponent.prototype.isFunction = function (value) {
         return value instanceof Function;
     };
+    LookupComponent.prototype.getNumberMaskConfig = function (col) {
+        var _a, _b, _c;
+        return {
+            scale: this.getScale(col.scale),
+            decimalSeparator: (_a = col.numberLocaleOptions) === null || _a === void 0 ? void 0 : _a.decimalSeparator,
+            thousandsSeparator: (_b = col.numberLocaleOptions) === null || _b === void 0 ? void 0 : _b.thousandsSeparator,
+            prefix: (_c = col.numberLocaleOptions) === null || _c === void 0 ? void 0 : _c.currencySymbol
+        };
+    };
     var LookupComponent_1;
     LookupComponent.nextId = 0;
     LookupComponent.ctorParameters = function () { return [
@@ -2152,7 +2278,7 @@ var LookupComponent = /** @class */ (function () {
     LookupComponent = LookupComponent_1 = __decorate([
         Component({
             selector: "s-lookup",
-            template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"true\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\"\n    >\n    </p-autoComplete>\n\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\"\n    ></button>\n</div>\n\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog\n>\n    <div *ngIf=\"dialogVisible\" class=\"s-lookup-modal-container\">\n        <div *ngIf=\"searchFields && searchFields.length\" class=\"filter\"\n        [@collapseContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: transitionOptions }} : {value: 'visible', params: {transitionParams: transitionOptions}}\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form [formGroup]=\"formGroupDialog\" novalidate autocomplete=\"off\">\n                <div *ngIf=\"!collapsed\"\n                        [@childCollapseContent]=\"collapsed ? {value: ':leave', params: {transitionParams: transitionOptions }} : {value: ':enter', params: {transitionParams: transitionOptions}}\"\n                        class=\"form-content\">\n                    <div class=\"filter-title sds-section-title\">{{ filterTitle }}</div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form [fields]=\"searchFields\" [form]=\"formGroupDialog\"></s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel\"\n                                (onClick)=\"search()\"\n                                pTooltip=\"(ALT + SHIFT + F)\"\n                                showDelay=\"500\"\n                            ></s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                pTooltip=\"(ALT + SHIFT + L)\"\n                                showDelay=\"500\"\n                            ></s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>                \n        </div>\n        <div *ngIf=\"searchFields && searchFields.length\" class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button [id]=\"id + '-filter-toggle-button'\" type=\"button\" (click)=\"filterToggle()\">\n                <span class=\"fa\" [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\"></span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div class=\"content\" [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\"\n            ></s-empty-state>\n\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"loading\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\"\n            >\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col *ngIf=\"multiple\" style=\"width: 50px\" />\n                        <col *ngFor=\"let col of columns\" [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th *ngIf=\"multiple\" style=\"width: 50px\">\n                            <s-table-header-checkbox [useAllObject]=\"lookupRowProps ? false : true\" [rowProps]=\"lookupRowProps\"></s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\"\n                        >\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon [field]=\"col.name\" *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\"></p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"body\" let-rowData let-columns let-rowIndex=\"rowIndex\">\n                    <tr sNavigation [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n                        <td *ngIf=\"multiple\" style=\"width: 50px\" tabindex=\"0\">\n                            <p-tableCheckbox [value]=\"rowData\" [pSelectableRow]=\"rowData\"></p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\"\n                        >\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime | async }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedNumber: getScale(col.scale) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedCurrency | async }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{\n                            searchTotalRecordsLabel ||\n                                searchTotalRecords?.toString() + (searchTotalRecords === 1 ? recordLabel : recordsLabel)\n                        }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel\"\n            (onClick)=\"select()\"\n            pTooltip=\"(ALT + SHIFT + S)\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\"\n        ></s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel\"\n            (onClick)=\"hideDialog()\"\n            pTooltip=\"(ALT + SHIFT + C)\"\n            showDelay=\"500\"\n        ></s-button>\n    </p-footer>\n</p-dialog>\n\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">{{ emptyFieldLabel }}</span>\n</ng-template>\n",
+            template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"true\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\"\n    >\n    </p-autoComplete>\n\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\"\n    ></button>\n</div>\n\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog\n>\n    <div *ngIf=\"dialogVisible\" class=\"s-lookup-modal-container\">\n        <div *ngIf=\"searchFields && searchFields.length\" class=\"filter\"\n        [@collapseContent]=\"collapsed ? {value: 'hidden', params: {transitionParams: transitionOptions }} : {value: 'visible', params: {transitionParams: transitionOptions}}\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form [formGroup]=\"formGroupDialog\" novalidate autocomplete=\"off\">\n                <div *ngIf=\"!collapsed\"\n                        [@childCollapseContent]=\"collapsed ? {value: ':leave', params: {transitionParams: transitionOptions }} : {value: ':enter', params: {transitionParams: transitionOptions}}\"\n                        class=\"form-content\">\n                    <div class=\"filter-title sds-section-title\">{{ filterTitle }}</div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form [fields]=\"searchFields\" [form]=\"formGroupDialog\"></s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel\"\n                                (onClick)=\"search()\"\n                                pTooltip=\"(ALT + SHIFT + F)\"\n                                showDelay=\"500\"\n                            ></s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                pTooltip=\"(ALT + SHIFT + L)\"\n                                showDelay=\"500\"\n                            ></s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>                \n        </div>\n        <div *ngIf=\"searchFields && searchFields.length\" class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button [id]=\"id + '-filter-toggle-button'\" type=\"button\" (click)=\"filterToggle()\">\n                <span class=\"fa\" [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\"></span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div class=\"content\" [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\"\n            ></s-empty-state>\n\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"loading\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\"\n            >\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col *ngIf=\"multiple\" style=\"width: 50px\" />\n                        <col *ngFor=\"let col of columns\" [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th *ngIf=\"multiple\" style=\"width: 50px\">\n                            <s-table-header-checkbox [useAllObject]=\"lookupRowProps ? false : true\" [rowProps]=\"lookupRowProps\"></s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\"\n                        >\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon [field]=\"col.name\" *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\"></p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"body\" let-rowData let-columns let-rowIndex=\"rowIndex\">\n                    <tr sNavigation [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n                        <td *ngIf=\"multiple\" style=\"width: 50px\" tabindex=\"0\">\n                            <p-tableCheckbox [value]=\"rowData\" [pSelectableRow]=\"rowData\"></p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\"\n                        >\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime | async }}</span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedNumber: getScale(col.scale) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedCurrency | async }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{\n                            searchTotalRecordsLabel ||\n                                searchTotalRecords?.toString() + (searchTotalRecords === 1 ? recordLabel : recordsLabel)\n                        }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel\"\n            (onClick)=\"select()\"\n            pTooltip=\"(ALT + SHIFT + S)\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\"\n        ></s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel\"\n            (onClick)=\"hideDialog()\"\n            pTooltip=\"(ALT + SHIFT + C)\"\n            showDelay=\"500\"\n        ></s-button>\n    </p-footer>\n</p-dialog>\n\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">{{ emptyFieldLabel }}</span>\n</ng-template>\n",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -2208,6 +2334,7 @@ var DynamicType;
     DynamicType["String"] = "String";
     DynamicType["Text"] = "Text";
     DynamicType["Time"] = "Time";
+    DynamicType["Number"] = "Number";
 })(DynamicType || (DynamicType = {}));
 
 var Grid = /** @class */ (function () {
@@ -2275,6 +2402,8 @@ var DynamicConfig = /** @class */ (function () {
                 return new Fieldset(config);
             case DynamicType.Integer:
                 return new NumberField(config);
+            case DynamicType.Number:
+                return new BignumberField(config);
             case DynamicType.Lookup:
                 return new LookupField(config);
             case DynamicType.Money:
@@ -3049,6 +3178,115 @@ var MaskFormatterModule = /** @class */ (function () {
     return MaskFormatterModule;
 }());
 
+var BignumberInputDirective = /** @class */ (function (_super) {
+    __extends(BignumberInputDirective, _super);
+    function BignumberInputDirective() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.precision = 15;
+        _this.scale = 0;
+        _this.decimalSeparator = ",";
+        _this.thousandsSeparator = ".";
+        _this.alignTo = AlignmentOptions.LEFT;
+        _this.allowNegative = true;
+        return _this;
+    }
+    BignumberInputDirective_1 = BignumberInputDirective;
+    BignumberInputDirective.prototype.ngOnInit = function () {
+        this.updateVariables();
+        _super.prototype.ngOnInit.call(this);
+    };
+    BignumberInputDirective.prototype.ngOnChanges = function (changes) {
+        var placeholderChange = changes.placeholder && changes.placeholder.currentValue;
+        if (!placeholderChange && this.scale)
+            this.placeholder = "0" + this.decimalSeparator + "".padEnd(this.scale, "0");
+        if (changes.scale ||
+            changes.decimalSeparator ||
+            changes.thousandsSeparator ||
+            changes.alignTo ||
+            changes.precision ||
+            changes.allowNegative) {
+            this.updateVariables();
+        }
+    };
+    /**
+     * Update the options values according to the directive input values.
+     */
+    BignumberInputDirective.prototype.updateVariables = function () {
+        this.options = {
+            align: this.alignTo,
+            decimalSeparator: this.decimalSeparator,
+            thousandsSeparator: this.thousandsSeparator,
+            scale: this.scale || 0,
+            prefix: "",
+            suffix: "",
+            allowNegative: this.allowNegative
+        };
+        this.calculateMaxLength();
+    };
+    /**
+     * Responsible to calculate the field maximum length considering the separators.
+     */
+    BignumberInputDirective.prototype.calculateMaxLength = function () {
+        var decSepLength = this.decimalSeparator.length;
+        var thoSepLength = this.thousandsSeparator.length;
+        var maxLength = this.precision + (this.scale ? decSepLength : 0);
+        maxLength += Math.ceil((this.precision - (this.scale ? this.scale : 0)) / 3 - 1) * thoSepLength;
+        this.maxLength = maxLength;
+    };
+    var BignumberInputDirective_1;
+    __decorate([
+        Input()
+    ], BignumberInputDirective.prototype, "precision", void 0);
+    __decorate([
+        Input()
+    ], BignumberInputDirective.prototype, "scale", void 0);
+    __decorate([
+        Input()
+    ], BignumberInputDirective.prototype, "decimalSeparator", void 0);
+    __decorate([
+        Input()
+    ], BignumberInputDirective.prototype, "thousandsSeparator", void 0);
+    __decorate([
+        Input()
+    ], BignumberInputDirective.prototype, "alignTo", void 0);
+    __decorate([
+        Input()
+    ], BignumberInputDirective.prototype, "allowNegative", void 0);
+    __decorate([
+        Input(),
+        HostBinding("attr.placeholder")
+    ], BignumberInputDirective.prototype, "placeholder", void 0);
+    __decorate([
+        HostBinding("attr.maxLength")
+    ], BignumberInputDirective.prototype, "maxLength", void 0);
+    BignumberInputDirective = BignumberInputDirective_1 = __decorate([
+        Directive({
+            selector: "input[sBignumberInput]",
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return BignumberInputDirective_1; }),
+                    multi: true,
+                },
+            ],
+        })
+    ], BignumberInputDirective);
+    return BignumberInputDirective;
+}(CurrencyMaskDirective$1));
+
+var BignumberInputModule = /** @class */ (function () {
+    function BignumberInputModule() {
+    }
+    BignumberInputModule = __decorate([
+        NgModule({
+            imports: [CommonModule],
+            declarations: [BignumberInputDirective],
+            exports: [BignumberInputDirective],
+        })
+    ], BignumberInputModule);
+    return BignumberInputModule;
+}());
+
 var TableHeaderCheckboxComponent = /** @class */ (function () {
     function TableHeaderCheckboxComponent(table, tableService) {
         var _this = this;
@@ -3623,9 +3861,9 @@ var TableColumnsComponent = /** @class */ (function () {
     ], TableColumnsComponent.prototype, "locale", void 0);
     TableColumnsComponent = __decorate([
         Component({
-            template: "\n<ng-template #columnsTemplate>\n    <td *ngFor=\"let column of formattedColumns\" [ngStyle]=\"column.style\" (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\">\n\n        <div *ngIf=\"column.type !== 'TOKENS' || !isArray(column.columnValue); else tokensTemplate\">\n\n            <span *ngIf=\"column.type !== 'LINK'\" [pTooltip]=\"column.tooltip\" [escape]=\"false\" [ngClass]=\"column.badgeClass\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </span>\n\n            <a *ngIf=\"column.type === 'LINK'\" [pTooltip]=\"column.tooltip\" [escape]=\"false\" (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </a>\n\n            <ng-template #columnValueTemplate>\n                <span *ngFor=\"let value of getSplittedString(column)\">\n                    <span [ngClass]=\"{ 'sds-pale-text': value.isUninformed }\">{{value.value}}</span>\n                    <span>{{value.separator}}</span>\n                </span>\n            </ng-template>\n\n        </div>\n\n        <ng-template #tokensTemplate>\n            <s-token-list\n                [tokens]=\"column.columnValue\"\n                [hidePointerEvents]=\"true\"\n            >\n            </s-token-list>\n        </ng-template>\n\n    </td>\n</ng-template>\n",
+            template: "\n<ng-template #columnsTemplate>\n    <td *ngFor=\"let column of formattedColumns\" [ngStyle]=\"column.style\" (click)=\"column.onColumnClick ? column.onColumnClick(rowValue) : null\">\n\n        <div *ngIf=\"column.type !== 'TOKENS' || !isArray(column.columnValue); else tokensTemplate\">\n\n            <span *ngIf=\"column.type !== 'LINK'\" [pTooltip]=\"column.tooltip\" [escape]=\"false\" [ngClass]=\"column.badgeClass\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </span>\n\n            <a *ngIf=\"column.type === 'LINK'\" [pTooltip]=\"column.tooltip\" [escape]=\"false\" (click)=\"column.onLinkClick ? column.onLinkClick(rowValue) : null\">\n                <ng-container *ngTemplateOutlet=\"columnValueTemplate\"></ng-container> \n            </a>\n\n            <ng-template #columnValueTemplate>\n                <span *ngFor=\"let value of getSplittedString(column)\">\n                    <span [ngClass]=\"{ 'sds-empty-value': value.isUninformed }\">{{value.value}}</span>\n                    <span>{{value.separator}}</span>\n                </span>\n            </ng-template>\n\n        </div>\n\n        <ng-template #tokensTemplate>\n            <s-token-list\n                [tokens]=\"column.columnValue\"\n                [hidePointerEvents]=\"true\"\n            >\n            </s-token-list>\n        </ng-template>\n\n    </td>\n</ng-template>\n",
             selector: "s-table-columns",
-            styles: [".sds-pale-text{color:#999}:host{display:none}"]
+            styles: [":host{display:none}"]
         }),
         __param(2, Inject("hostProjectConfigs"))
     ], TableColumnsComponent);
@@ -3798,6 +4036,9 @@ var BaseFieldComponent = /** @class */ (function () {
     return BaseFieldComponent;
 }());
 
+/**
+ * @deprecated Should use bignumber instead
+ */
 var CurrencyFieldComponent = /** @class */ (function (_super) {
     __extends(CurrencyFieldComponent, _super);
     function CurrencyFieldComponent() {
@@ -3853,6 +4094,9 @@ var LookupFieldComponent = /** @class */ (function () {
     return LookupFieldComponent;
 }());
 
+/**
+ * @deprecated Should use bignumber instead
+ */
 var NumberFieldComponent = /** @class */ (function (_super) {
     __extends(NumberFieldComponent, _super);
     function NumberFieldComponent() {
@@ -4176,6 +4420,67 @@ var StructureType;
     StructureType["Section"] = "Section";
 })(StructureType || (StructureType = {}));
 
+var BignumberFieldComponent = /** @class */ (function (_super) {
+    __extends(BignumberFieldComponent, _super);
+    function BignumberFieldComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onInput = new EventEmitter();
+        _this.onFocus = new EventEmitter();
+        _this.onComplete = new EventEmitter();
+        _this.ngUnsubscribe = new Subject();
+        return _this;
+    }
+    BignumberFieldComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.onFocus.pipe(takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
+            if (_this.field.onFocus)
+                _this.field.onFocus(event);
+        });
+        this.onInput.pipe(takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
+            if (_this.field.onInput)
+                _this.field.onInput(event);
+        });
+        this.onComplete.pipe(takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
+            if (_this.field.onComplete)
+                _this.field.onComplete(event);
+        });
+    };
+    BignumberFieldComponent.prototype.ngOnDestroy = function () {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    };
+    Object.defineProperty(BignumberFieldComponent.prototype, "fieldType", {
+        get: function () {
+            return FieldType;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        Input()
+    ], BignumberFieldComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], BignumberFieldComponent.prototype, "formControl", void 0);
+    __decorate([
+        Output()
+    ], BignumberFieldComponent.prototype, "onInput", void 0);
+    __decorate([
+        Output()
+    ], BignumberFieldComponent.prototype, "onFocus", void 0);
+    __decorate([
+        Output()
+    ], BignumberFieldComponent.prototype, "onComplete", void 0);
+    BignumberFieldComponent = __decorate([
+        Component({
+            template: "<p-inputMask\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [pTooltip]=\"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\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span 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                [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                [pTooltip]=\"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            />\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span 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>",
+            encapsulation: ViewEncapsulation.None,
+            styles: ["s-number-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-number-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:#e44328}"]
+        })
+    ], BignumberFieldComponent);
+    return BignumberFieldComponent;
+}(BaseFieldComponent));
+
 var DynamicForm = /** @class */ (function () {
     function DynamicForm(_a) {
         var group = _a.group, errorMessages = _a.errorMessages;
@@ -4240,6 +4545,8 @@ var DynamicField = /** @class */ (function (_super) {
             case FieldType.Double:
             case FieldType.Integer:
                 return NumberFieldComponent;
+            case FieldType.Number:
+                return BignumberFieldComponent;
             case FieldType.Enum:
                 return SelectFieldComponent;
             case FieldType.Lookup:
@@ -4414,6 +4721,7 @@ var DynamicFormModule = /** @class */ (function () {
                 InputMaskModule,
                 DropdownModule,
                 NumberInputModule,
+                BignumberInputModule,
                 LocalizedNumberInputModule,
                 ControlErrorsModule,
                 LocaleModule,
@@ -4455,6 +4763,7 @@ var DynamicFormModule = /** @class */ (function () {
                 LookupComponent,
                 LookupFieldComponent,
                 NumberFieldComponent,
+                BignumberFieldComponent,
                 RadioButtonComponent,
                 RowComponent,
                 SectionComponent,
@@ -4473,6 +4782,7 @@ var DynamicFormModule = /** @class */ (function () {
                 FileUploadComponent$1,
                 LookupFieldComponent,
                 NumberFieldComponent,
+                BignumberFieldComponent,
                 RadioButtonComponent,
                 RowComponent,
                 SectionComponent,
@@ -6048,43 +6358,43 @@ var StatsCardComponent = /** @class */ (function () {
     });
     StatsCardComponent.prototype.updateDisplayValue = function () {
         var _this = this;
-        var previousRawValue = Number(this.previousValue.replace(/[^\d]/g, ""));
-        var rawValue = Number(this.value.replace(/[^\d]/g, ""));
-        var incrementValue = Math.ceil(Math.abs(rawValue - previousRawValue) / (this.ANIMATION_DURATION_MS / this.STEP_DURATION_MS));
-        var incremental = previousRawValue < rawValue;
+        var previousRawValue = new BigNumber$1(this.previousValue.replace(/\D/g, ""));
+        var rawValue = new BigNumber$1(this.value.replace(/\D/g, ""));
+        var eachAnimationDuration = new BigNumber$1(this.ANIMATION_DURATION_MS).dividedBy(new BigNumber$1(this.STEP_DURATION_MS));
+        var incrementValue = rawValue.minus(previousRawValue).absoluteValue().dividedBy(eachAnimationDuration).dp(0, 7);
+        var incremental = previousRawValue.isLessThan(rawValue);
         clearInterval(this.intervalId);
         this.displayValue = this.replaceNumericPositions(this.value);
         var counter = previousRawValue;
         this.intervalId = setInterval(function () {
-            if (incremental && counter < rawValue) {
-                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, String(counter));
-                counter += incrementValue;
+            if (incremental && counter.isLessThan(rawValue)) {
+                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, counter);
+                counter = counter.plus(incrementValue);
             }
-            else if (incremental) {
-                _this.displayValue = _this.value;
-                clearInterval(_this.intervalId);
+            else if (!incremental && counter.isGreaterThan(rawValue)) {
+                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, counter);
+                counter = counter.minus(incrementValue);
             }
-            else if (!incremental && counter > rawValue) {
-                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, String(counter));
-                counter -= incrementValue;
-            }
-            else if (!incremental) {
+            else {
                 _this.displayValue = _this.value;
                 clearInterval(_this.intervalId);
             }
         }, this.STEP_DURATION_MS);
     };
     StatsCardComponent.prototype.replaceNumericPositions = function (value, newValue) {
-        if (newValue === void 0) { newValue = ""; }
         var rawValue = value.replace(/[^\d]/g, "");
-        var newValueString = newValue.replace(/[^\d]/g, "").padStart(rawValue.length, "0");
+        var newValueString = newValue ? newValue.toString() : "";
+        var formattedNewValue = newValueString
+            .toString()
+            .replace(/\D/g, "")
+            .padStart(rawValue.length, "0");
         var newValueIndex = 0;
         return value
             .split("")
             .map(function (char) {
             var number = Number(char);
             if (number || char === "0")
-                return newValueString[newValueIndex++];
+                return formattedNewValue[newValueIndex++];
             return char;
         })
             .join("");
@@ -6668,5 +6978,5 @@ var AngularComponentsModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, AutocompleteField, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TextAreaField, TextField, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TokenListComponent, TokenListModule, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, TokenListModule as ɵb, FooterComponent as ɵba, InfoSignComponent as ɵbb, NumberLocaleOptions as ɵbc, ThumbnailService as ɵbd, InfiniteScrollModule as ɵbe, InfiniteScrollDirective as ɵbf, TableColumnsComponent as ɵc, InfoSignModule as ɵd, AutocompleteFieldComponent as ɵe, BooleanFieldComponent as ɵf, CalendarFieldComponent as ɵg, ChipsFieldComponent as ɵh, CurrencyFieldComponent as ɵi, BaseFieldComponent as ɵj, DynamicFieldComponent as ɵk, DynamicFormDirective as ɵl, FieldsetComponent as ɵm, FileUploadComponent$1 as ɵn, LookupFieldComponent as ɵo, NumberFieldComponent as ɵp, RadioButtonComponent as ɵq, RowComponent as ɵr, SectionComponent as ɵs, SelectFieldComponent as ɵt, TextAreaFieldComponent as ɵu, TextFieldComponent as ɵv, DecimalField as ɵx, StructureModule as ɵy, HeaderComponent as ɵz };
+export { AngularComponentsModule, AutocompleteField, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TextAreaField, TextField, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TokenListComponent, TokenListModule, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, DecimalField as ɵba, StructureModule as ɵbb, HeaderComponent as ɵbc, FooterComponent as ɵbd, InfoSignComponent as ɵbe, NumberLocaleOptions as ɵbf, ThumbnailService as ɵbg, InfiniteScrollModule as ɵbh, InfiniteScrollDirective as ɵbi, LocalizedBignumberImpurePipe as ɵc, TokenListModule as ɵd, TableColumnsComponent as ɵe, InfoSignModule as ɵf, AutocompleteFieldComponent as ɵg, BooleanFieldComponent as ɵh, CalendarFieldComponent as ɵi, ChipsFieldComponent as ɵj, CurrencyFieldComponent as ɵk, BaseFieldComponent as ɵl, DynamicFieldComponent as ɵm, DynamicFormDirective as ɵn, FieldsetComponent as ɵo, FileUploadComponent$1 as ɵp, LookupFieldComponent as ɵq, NumberFieldComponent as ɵr, BignumberFieldComponent as ɵs, RadioButtonComponent as ɵt, RowComponent as ɵu, SectionComponent as ɵv, SelectFieldComponent as ɵw, TextAreaFieldComponent as ɵx, TextFieldComponent as ɵy };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map