@seniorsistemas/angular-components 14.9.8 → 14.9.11

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

@@ -1225,6 +1225,7 @@
             this.size = new FieldSize(config.size || {});
             this.errorMessages = config.errorMessages;
             this.gridClass = Object.keys(this.size).map(function (key) { return "ui-" + key + "-" + _this.size[key]; });
+            this.defaultValue = config.defaultValue;
         }
         return Field;
     }());
@@ -1364,7 +1365,7 @@
             return this.localeService.get().pipe(operators.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$",
+                    prefix: (_c = (_a = options === null || options === void 0 ? void 0 : 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
@@ -2126,6 +2127,7 @@
             this.selected = [];
             this.transitionOptions = "400ms cubic-bezier(0.86, 0, 0.07, 1)";
             this.ngUnsubscribe = new rxjs.Subject();
+            this.originalFormValues = {};
         }
         LookupComponent_1 = LookupComponent;
         LookupComponent.prototype.ngOnInit = function () {
@@ -2147,7 +2149,8 @@
                 return gridField;
             });
             var formGroup = this.searchFields.reduce(function (result, field) {
-                result[field.name] = new forms.FormControl();
+                result[field.name] = new forms.FormControl(field.defaultValue);
+                _this.originalFormValues[field.name] = field.defaultValue;
                 return result;
             }, {});
             this.formGroupDialog = new forms.FormGroup(formGroup);
@@ -2256,7 +2259,7 @@
             this.dialog.moveOnTop();
         };
         LookupComponent.prototype.clear = function () {
-            this.formGroupDialog.reset();
+            this.formGroupDialog.reset(this.originalFormValues);
             this.table.reset();
         };
         LookupComponent.prototype.select = function () {
@@ -2400,6 +2403,9 @@
         __decorate([
             core.Input()
         ], LookupComponent.prototype, "lookupDisplayField", void 0);
+        __decorate([
+            core.Input()
+        ], LookupComponent.prototype, "lookupDisplayFieldTooltip", void 0);
         __decorate([
             core.Input()
         ], LookupComponent.prototype, "lookupEmptyMessage", void 0);
@@ -2502,7 +2508,7 @@
         LookupComponent = LookupComponent_1 = __decorate([
             core.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: col.calendarLocaleOptions?.dateFormat || \"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: col.calendarLocaleOptions?.dateFormat || \"LTS\" | 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",
+                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    <ng-template let-item pTemplate=\"selectedItem\">\n        <span class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\" \n        [pTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\" \n        tooltipPosition=\"top\">\n            {{item[lookupDisplayField]}}\n        </span>\n    </ng-template>\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: col.calendarLocaleOptions?.dateFormat || \"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: col.calendarLocaleOptions?.dateFormat || \"LTS\" | 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: forms.NG_VALUE_ACCESSOR,
@@ -3014,6 +3020,9 @@
         __decorate([
             core.Input()
         ], FileUploadComponent.prototype, "ariaLabelRemove", void 0);
+        __decorate([
+            core.Input()
+        ], FileUploadComponent.prototype, "formGroup", void 0);
         __decorate([
             core.Output()
         ], FileUploadComponent.prototype, "uploadHandler", void 0);
@@ -3038,7 +3047,7 @@
         FileUploadComponent = FileUploadComponent_1 = __decorate([
             core.Component({
                 selector: "s-file-upload",
-                template: "<div class=\"s-fileupload\" [id]=\"id\">\n    <div class=\"s-fileupload-choose\">\n        <input type=\"file\" name=\"file\" [accept]=\"accept\" [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer ? $event.dataTransfer.files : $event.target.files)\" #inputUpload>\n        <s-button [id]=\"id + 'upload-button'\" [label]=\"chooseLabel\" (onClick)=\"inputUpload.click()\" priority=\"primary\"\n            [disabled]=\"false\" [auxiliary]=\"false\"></s-button>\n    </div>\n\n    <section [id]=\"id + 'fileupload-list'\" class=\"s-fileupload-list\" *ngIf=\"files.length\" role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div class=\"s-fileupload-list-file\" role=\"row\">\n                <div [id]=\"id + '-file-' + i + '-name'\" class=\"s-fileupload-list-file-name\" role=\"gridcell\">\n                    <ng-container\n                        *ngTemplateOutlet=\"file.savedFile || file.progress === 100 ? descriptionUrl : description; context: { $implicit: file, index: i }\">\n                    </ng-container>\n                </div>\n                <div class=\"s-fileupload-list-file-status\" role=\"gridcell\">\n                    <p-progressBar *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\" [showValue]=\"false\" role=\"alert\" [attr.aria-label]=\"ariaLabelProgress\">\n                    </p-progressBar>\n                    <span [id]=\"id + '-file-' + i + '-spin'\" class=\"fas fa-circle-notch fa-spin\"\n                        *ngIf=\"file.isUploading && isSmallDevice\" [attr.aria-label]=\"ariaLabelProgress\"></span>\n                    <span [id]=\"id + '-file-' + i + '-check'\" class=\"fas fa-check\" role=\"alert\"\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip\" [pTooltip]=\"successTooltip\"\n                        tooltipPosition=\"top\" showDelay=\"500\" [appendTo]=\"'body'\"></span>\n                    <span [id]=\"id + '-file-' + i + '-error'\" class=\"fas fa-times\" role=\"alert\"\n                        *ngIf=\"file.error?.message\" [pTooltip]=\"file.error?.message\" tooltipPosition=\"top\"\n                        showDelay=\"500\" [appendTo]=\"'body'\"></span>\n                </div>\n                <div class=\"s-fileupload-list-file-actions\" role=\"gridcell\">\n                    <a [id]=\"id + '-file-' + i + '-cancel'\" class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload($event, i)\" *ngIf=\"file.isUploading\">{{cancelLabel}}</a>\n                    <a role=\"button\" tabindex=\"0\" [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\" (click)=\"onRemoveFile($event, file)\"\n                        *ngIf=\"!file.isUploading\" [attr.aria-label]=\"ariaLabelRemove || removeLabel\">{{removeLabel}}</a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template #descriptionUrl let-file let-i = index>\n    <a [id]=\"id + '-file-' + i + '-name-link'\" tabindex=\"0\" (click)=\"onDowloadFile($event, i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}</a>\n    <a style=\"display: none;\" [href]=\"file.objectURL\" target=\"_blank\" download #anchor></a>\n</ng-template>\n\n<ng-template #description let-file>\n    <span tabindex=\"0\" [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
+                template: "<div class=\"s-fileupload\" [id]=\"id\">\n    <div class=\"s-fileupload-choose\">\n        <input type=\"file\" name=\"file\" [accept]=\"accept\" [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer ? $event.dataTransfer.files : $event.target.files)\" #inputUpload>\n        <s-button [id]=\"id + 'upload-button'\" [label]=\"chooseLabel\" (onClick)=\"inputUpload.click()\" priority=\"primary\"\n            [disabled]=\"!!formGroup?.disabled\" [auxiliary]=\"false\"></s-button>\n    </div>\n\n    <section [id]=\"id + 'fileupload-list'\" class=\"s-fileupload-list\" *ngIf=\"files.length\" role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div class=\"s-fileupload-list-file\" role=\"row\">\n                <div [id]=\"id + '-file-' + i + '-name'\" class=\"s-fileupload-list-file-name\" role=\"gridcell\">\n                    <ng-container\n                        *ngTemplateOutlet=\"file.savedFile || file.progress === 100 ? descriptionUrl : description; context: { $implicit: file, index: i }\">\n                    </ng-container>\n                </div>\n                <div class=\"s-fileupload-list-file-status\" role=\"gridcell\">\n                    <p-progressBar *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\" [showValue]=\"false\" role=\"alert\" [attr.aria-label]=\"ariaLabelProgress\">\n                    </p-progressBar>\n                    <span [id]=\"id + '-file-' + i + '-spin'\" class=\"fas fa-circle-notch fa-spin\"\n                        *ngIf=\"file.isUploading && isSmallDevice\" [attr.aria-label]=\"ariaLabelProgress\"></span>\n                    <span [id]=\"id + '-file-' + i + '-check'\" class=\"fas fa-check\" role=\"alert\"\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip\" [pTooltip]=\"successTooltip\"\n                        tooltipPosition=\"top\" showDelay=\"500\" [appendTo]=\"'body'\"></span>\n                    <span [id]=\"id + '-file-' + i + '-error'\" class=\"fas fa-times\" role=\"alert\"\n                        *ngIf=\"file.error?.message\" [pTooltip]=\"file.error?.message\" tooltipPosition=\"top\"\n                        showDelay=\"500\" [appendTo]=\"'body'\"></span>\n                </div>\n                <div class=\"s-fileupload-list-file-actions\" role=\"gridcell\">\n                    <a [id]=\"id + '-file-' + i + '-cancel'\" class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload($event, i)\" *ngIf=\"file.isUploading\">{{cancelLabel}}</a>\n                    <a role=\"button\" tabindex=\"0\" [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\" (click)=\"onRemoveFile($event, file)\"\n                        *ngIf=\"!file.isUploading\" [attr.aria-label]=\"ariaLabelRemove || removeLabel\">{{removeLabel}}</a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template #descriptionUrl let-file let-i = index>\n    <a [id]=\"id + '-file-' + i + '-name-link'\" tabindex=\"0\" (click)=\"onDowloadFile($event, i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}</a>\n    <a style=\"display: none;\" [href]=\"file.objectURL\" target=\"_blank\" download #anchor></a>\n</ng-template>\n\n<ng-template #description let-file>\n    <span tabindex=\"0\" [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
                 styles: [".s-fileupload .s-fileupload-choose{position:relative;margin:15px 0;width:-webkit-max-content;width:max-content}.s-fileupload input[type=file]{display:none}.s-fileupload-list{border:1px solid #ccc}.s-fileupload-list-file:not(:first-child){border-top:1px solid #ccc}.s-fileupload-list .s-fileupload-list-file{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name>a{cursor:pointer;text-decoration:none}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.s-fileupload-list .s-fileupload-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-check{color:#0c9348;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-times{color:#c13018;font-size:12px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin-top:15px;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;width:100%}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action{text-decoration:none;color:#428bca}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :focus,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :visited,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action:hover{text-decoration:none}@media (min-width:768px){.s-fileupload-list .s-fileupload-list-file{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{width:auto;-ms-flex-positive:2;flex-grow:2}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{margin:0 15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin:0;width:auto}}"]
             })
         ], FileUploadComponent);
@@ -4283,7 +4292,7 @@
         ], FileUploadComponent.prototype, "formControl", void 0);
         FileUploadComponent = __decorate([
             core.Component({
-                template: "<s-file-upload [id]=\"(field.id || field.name)\" [accept]=\"field.accept\" [files]=\"field.files\" [multiple]=\"field.multiple\"\n    [chooseLabel]=\"field.chooseLabel\" [removeLabel]=\"field.removeLabel\" [cancelLabel]=\"field.cancelLabel\"\n    [successTooltip]=\"field.successTooltip\" (uploadHandler)=\"field.onUploadFile($event, field)\"\n    (removeFile)=\"field.onRemoveFile($event, field)\" (cancelUpload)=\"field.onCancelUpload($event, field)\"\n    (downloadFile)=\"field.onDownloadFile($event, field)\">\n</s-file-upload>\n"
+                template: "<s-file-upload [id]=\"(field.id || field.name)\" [accept]=\"field.accept\" [files]=\"field.files\" [multiple]=\"field.multiple\"\n    [chooseLabel]=\"field.chooseLabel\" [removeLabel]=\"field.removeLabel\" [cancelLabel]=\"field.cancelLabel\"\n    [successTooltip]=\"field.successTooltip\" (uploadHandler)=\"field.onUploadFile($event, field)\"\n    (removeFile)=\"field.onRemoveFile($event, field)\" (cancelUpload)=\"field.onCancelUpload($event, field)\"\n    (downloadFile)=\"field.onDownloadFile($event, field)\" [formGroup]=\"formControl\"> \n</s-file-upload>\n"
             })
         ], FileUploadComponent);
         return FileUploadComponent;