@seniorsistemas/angular-components 14.4.1 → 14.7.0

package/fesm2015/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';
@@ -952,16 +954,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 = {}));
 
 class FieldSize {
@@ -1000,41 +1012,6 @@ class AutocompleteField extends Field {
     }
 }
 
-class BlobField extends Field {
-    constructor(config) {
-        super(config);
-        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;
-    }
-}
-
-class BooleanOptionsLabel {
-    constructor(config) {
-        this.true = config.true;
-        this.false = config.false;
-        this.empty = config.empty;
-    }
-}
-class BooleanField extends Field {
-    constructor(config) {
-        super(config);
-        this.verticalAlignment = config.verticalAlignment;
-        this.optionsLabel = new BooleanOptionsLabel(config.optionsLabel);
-        this.onBlur = config.onBlur;
-        this.onFocus = config.onFocus;
-        this.onClick = config.onClick;
-    }
-}
-
 class CalendarLocaleOptions {
     constructor(config = {}) {
         this.hourFormat = "24";
@@ -1134,12 +1111,57 @@ LocaleService = __decorate([
     Injectable()
 ], LocaleService);
 
+let LocalizedBignumberPipe = class LocalizedBignumberPipe {
+    constructor(localeService) {
+        this.localeService = localeService;
+    }
+    transform(value, options) {
+        return value !== undefined && value !== null ? this.applyMask(value, options) : of(value);
+    }
+    applyMask(value, options) {
+        return this.localeService.get().pipe(map(localeConfig => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            const 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
+            };
+            const isNumber = !(new BigNumber(value).isNaN());
+            return applyMask(value, configs, isNumber);
+        }));
+    }
+};
+LocalizedBignumberPipe.ctorParameters = () => [
+    { type: LocaleService }
+];
+LocalizedBignumberPipe = __decorate([
+    Pipe({
+        name: "localizedBignumber",
+    })
+], LocalizedBignumberPipe);
+
+let LocalizedBignumberImpurePipe = class LocalizedBignumberImpurePipe extends LocalizedBignumberPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+};
+LocalizedBignumberImpurePipe = __decorate([
+    Pipe({
+        name: "localizedBignumberImpure",
+        pure: false,
+    })
+], LocalizedBignumberImpurePipe);
+
 class LocalizedCurrencyPipeOptions extends NumberLocaleOptions {
     constructor(config = {}) {
         super(config);
         this.scale = 2;
     }
 }
+/**
+ * @deprecated Should use localizedBignumberPipe instead
+ */
 let LocalizedCurrencyPipe = class LocalizedCurrencyPipe {
     constructor(localeService) {
         this.localeService = localeService;
@@ -1177,6 +1199,9 @@ LocalizedCurrencyPipe = __decorate([
     })
 ], LocalizedCurrencyPipe);
 
+/**
+ * @deprecated Should use localizedBignumberPipe instead
+ */
 let LocalizedCurrencyImpurePipe = class LocalizedCurrencyImpurePipe extends LocalizedCurrencyPipe {
     transform(value, options = new LocalizedCurrencyPipeOptions()) {
         return super.transform(value, options);
@@ -1216,6 +1241,9 @@ LocalizedDateImpurePipe = __decorate([
     })
 ], LocalizedDateImpurePipe);
 
+/**
+ * @deprecated Should use localizedBignumberPipe instead
+ */
 let LocalizedNumberPipe = class LocalizedNumberPipe {
     constructor(localeService) {
         this.localeService = localeService;
@@ -1279,6 +1307,8 @@ let LocaleModule = LocaleModule_1 = class LocaleModule {
                 LocalizedCurrencyImpurePipe,
                 LocalizedDateImpurePipe,
                 LocalizedTimeImpurePipe,
+                LocalizedBignumberPipe,
+                LocalizedBignumberImpurePipe
             ],
         };
     }
@@ -1299,6 +1329,8 @@ LocaleModule = LocaleModule_1 = __decorate([
             LocalizedCurrencyImpurePipe,
             LocalizedDateImpurePipe,
             LocalizedTimeImpurePipe,
+            LocalizedBignumberPipe,
+            LocalizedBignumberImpurePipe
         ],
         declarations: [
             LocalizedCurrencyPipe,
@@ -1308,10 +1340,66 @@ LocaleModule = LocaleModule_1 = __decorate([
             LocalizedCurrencyImpurePipe,
             LocalizedDateImpurePipe,
             LocalizedTimeImpurePipe,
+            LocalizedBignumberPipe,
+            LocalizedBignumberImpurePipe
         ],
     })
 ], LocaleModule);
 
+class BignumberField extends Field {
+    constructor(config) {
+        var _a;
+        super(config);
+        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;
+    }
+}
+
+class BlobField extends Field {
+    constructor(config) {
+        super(config);
+        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;
+    }
+}
+
+class BooleanOptionsLabel {
+    constructor(config) {
+        this.true = config.true;
+        this.false = config.false;
+        this.empty = config.empty;
+    }
+}
+class BooleanField extends Field {
+    constructor(config) {
+        super(config);
+        this.verticalAlignment = config.verticalAlignment;
+        this.optionsLabel = new BooleanOptionsLabel(config.optionsLabel);
+        this.onBlur = config.onBlur;
+        this.onFocus = config.onFocus;
+        this.onClick = config.onClick;
+    }
+}
+
 class CalendarField extends Field {
     constructor(config) {
         super(config);
@@ -1347,11 +1435,17 @@ class ChipsField extends Field {
 }
 
 var NumberInputDirective_1;
+/**
+ * @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
+ */
 let NumberInputDirective = NumberInputDirective_1 = class NumberInputDirective extends CurrencyMaskDirective {
     constructor() {
         super(...arguments);
@@ -1460,6 +1554,9 @@ NumberInputDirective = NumberInputDirective_1 = __decorate([
     })
 ], NumberInputDirective);
 
+/**
+ * @deprecated Should use 'BignumberInputModule' instead
+ */
 let NumberInputModule = class NumberInputModule {
 };
 NumberInputModule = __decorate([
@@ -1470,6 +1567,9 @@ NumberInputModule = __decorate([
     })
 ], NumberInputModule);
 
+/**
+ * @deprecated Should use BignumberField instead
+ */
 class NumberField extends Field {
     constructor(config) {
         super(config);
@@ -1487,6 +1587,9 @@ class NumberField extends Field {
     }
 }
 
+/**
+ * @deprecated Should use BignumberField instead
+ */
 class DecimalField extends NumberField {
     constructor(config) {
         super(config);
@@ -1496,6 +1599,9 @@ class DecimalField extends NumberField {
     }
 }
 
+/**
+ * @deprecated Should use BignumberField instead
+ */
 class CurrencyField extends DecimalField {
     constructor(config) {
         super(config);
@@ -1616,6 +1722,8 @@ class FormField {
                 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);
@@ -1824,7 +1932,7 @@ let LookupComponent = LookupComponent_1 = class LookupComponent {
             return this.emptyFieldLabel;
     }
     isNumber(obj, path) {
-        return typeof this.getFieldValue(obj, path) === "number";
+        return !(new BigNumber(this.getFieldValue(obj, path)).isNaN());
     }
     setHotkeys() {
         const clearHotkey = this.newHotkey("alt+shift+l", this.clear.bind(this));
@@ -1865,6 +1973,15 @@ let LookupComponent = LookupComponent_1 = class LookupComponent {
     isFunction(value) {
         return value instanceof Function;
     }
+    getNumberMaskConfig(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
+        };
+    }
 };
 LookupComponent.nextId = 0;
 LookupComponent.ctorParameters = () => [
@@ -1999,7 +2116,7 @@ __decorate([
 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,
@@ -2053,6 +2170,7 @@ var DynamicType;
     DynamicType["String"] = "String";
     DynamicType["Text"] = "Text";
     DynamicType["Time"] = "Time";
+    DynamicType["Number"] = "Number";
 })(DynamicType || (DynamicType = {}));
 
 class Grid {
@@ -2111,6 +2229,8 @@ class DynamicConfig {
                 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:
@@ -2837,6 +2957,108 @@ MaskFormatterModule = __decorate([
     })
 ], MaskFormatterModule);
 
+var BignumberInputDirective_1;
+let BignumberInputDirective = BignumberInputDirective_1 = class BignumberInputDirective extends CurrencyMaskDirective$1 {
+    constructor() {
+        super(...arguments);
+        this.precision = 15;
+        this.scale = 0;
+        this.decimalSeparator = ",";
+        this.thousandsSeparator = ".";
+        this.alignTo = AlignmentOptions.LEFT;
+        this.allowNegative = true;
+    }
+    ngOnInit() {
+        this.updateVariables();
+        super.ngOnInit();
+    }
+    ngOnChanges(changes) {
+        const 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.
+     */
+    updateVariables() {
+        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.
+     */
+    calculateMaxLength() {
+        const decSepLength = this.decimalSeparator.length;
+        const thoSepLength = this.thousandsSeparator.length;
+        let maxLength = this.precision + (this.scale ? decSepLength : 0);
+        maxLength += Math.ceil((this.precision - (this.scale ? this.scale : 0)) / 3 - 1) * thoSepLength;
+        this.maxLength = maxLength;
+    }
+};
+__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(() => BignumberInputDirective_1),
+                multi: true,
+            },
+        ],
+    })
+], BignumberInputDirective);
+
+let BignumberInputModule = class BignumberInputModule {
+};
+BignumberInputModule = __decorate([
+    NgModule({
+        imports: [CommonModule],
+        declarations: [BignumberInputDirective],
+        exports: [BignumberInputDirective],
+    })
+], BignumberInputModule);
+
 var TableHeaderCheckboxComponent_1;
 let TableHeaderCheckboxComponent = TableHeaderCheckboxComponent_1 = class TableHeaderCheckboxComponent {
     constructor(table, tableService) {
@@ -3384,9 +3606,9 @@ __decorate([
 ], 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);
@@ -3534,6 +3756,9 @@ class BaseFieldComponent {
     }
 }
 
+/**
+ * @deprecated Should use bignumber instead
+ */
 let CurrencyFieldComponent = class CurrencyFieldComponent extends BaseFieldComponent {
 };
 __decorate([
@@ -3576,6 +3801,9 @@ LookupFieldComponent = __decorate([
     })
 ], LookupFieldComponent);
 
+/**
+ * @deprecated Should use bignumber instead
+ */
 let NumberFieldComponent = class NumberFieldComponent extends BaseFieldComponent {
     constructor() {
         super(...arguments);
@@ -3908,6 +4136,59 @@ var StructureType;
     StructureType["Section"] = "Section";
 })(StructureType || (StructureType = {}));
 
+let BignumberFieldComponent = class BignumberFieldComponent extends BaseFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.onInput = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.onComplete = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.onFocus.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
+            if (this.field.onFocus)
+                this.field.onFocus(event);
+        });
+        this.onInput.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
+            if (this.field.onInput)
+                this.field.onInput(event);
+        });
+        this.onComplete.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
+            if (this.field.onComplete)
+                this.field.onComplete(event);
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    get fieldType() {
+        return FieldType;
+    }
+};
+__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);
+
 class DynamicForm {
     constructor({ group, errorMessages }) {
         this.group = group;
@@ -3967,6 +4248,8 @@ class DynamicField extends DynamicForm {
             case FieldType.Double:
             case FieldType.Integer:
                 return NumberFieldComponent;
+            case FieldType.Number:
+                return BignumberFieldComponent;
             case FieldType.Enum:
                 return SelectFieldComponent;
             case FieldType.Lookup:
@@ -4126,6 +4409,7 @@ DynamicFormModule = __decorate([
             InputMaskModule,
             DropdownModule,
             NumberInputModule,
+            BignumberInputModule,
             LocalizedNumberInputModule,
             ControlErrorsModule,
             LocaleModule,
@@ -4167,6 +4451,7 @@ DynamicFormModule = __decorate([
             LookupComponent,
             LookupFieldComponent,
             NumberFieldComponent,
+            BignumberFieldComponent,
             RadioButtonComponent,
             RowComponent,
             SectionComponent,
@@ -4185,6 +4470,7 @@ DynamicFormModule = __decorate([
             FileUploadComponent$1,
             LookupFieldComponent,
             NumberFieldComponent,
+            BignumberFieldComponent,
             RadioButtonComponent,
             RowComponent,
             SectionComponent,
@@ -5656,42 +5942,43 @@ let StatsCardComponent = StatsCardComponent_1 = class StatsCardComponent {
         return this._value;
     }
     updateDisplayValue() {
-        const previousRawValue = Number(this.previousValue.replace(/[^\d]/g, ""));
-        const rawValue = Number(this.value.replace(/[^\d]/g, ""));
-        const incrementValue = Math.ceil(Math.abs(rawValue - previousRawValue) / (this.ANIMATION_DURATION_MS / this.STEP_DURATION_MS));
-        const incremental = previousRawValue < rawValue;
+        const previousRawValue = new BigNumber$1(this.previousValue.replace(/\D/g, ""));
+        const rawValue = new BigNumber$1(this.value.replace(/\D/g, ""));
+        const eachAnimationDuration = new BigNumber$1(this.ANIMATION_DURATION_MS).dividedBy(new BigNumber$1(this.STEP_DURATION_MS));
+        const incrementValue = rawValue.minus(previousRawValue).absoluteValue().dividedBy(eachAnimationDuration).dp(0, 7);
+        const incremental = previousRawValue.isLessThan(rawValue);
         clearInterval(this.intervalId);
         this.displayValue = this.replaceNumericPositions(this.value);
         let counter = previousRawValue;
         this.intervalId = setInterval(() => {
-            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);
     }
-    replaceNumericPositions(value, newValue = "") {
+    replaceNumericPositions(value, newValue) {
         const rawValue = value.replace(/[^\d]/g, "");
-        const newValueString = newValue.replace(/[^\d]/g, "").padStart(rawValue.length, "0");
+        const newValueString = newValue ? newValue.toString() : "";
+        const formattedNewValue = newValueString
+            .toString()
+            .replace(/\D/g, "")
+            .padStart(rawValue.length, "0");
         let newValueIndex = 0;
         return value
             .split("")
             .map(char => {
             const number = Number(char);
             if (number || char === "0")
-                return newValueString[newValueIndex++];
+                return formattedNewValue[newValueIndex++];
             return char;
         })
             .join("");
@@ -6233,5 +6520,5 @@ AngularComponentsModule = AngularComponentsModule_1 = __decorate([
  * 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