@senior-gestao-pessoas/payroll-core 9.5.0-01923a3e-20f4-4cb3-9565-a0584abd00d1 → 9.5.0-32c4c8b1-bb0c-491c-8ec0-0eef83fe1088

package/fesm5/senior-gestao-pessoas-payroll-core.js

@@ -9318,6 +9318,7 @@ var FormatUtilsService = /** @class */ (function () {
      */
     FormatUtilsService.formatCpfInputEvent = function (event) {
         var cpf = event.target.value;
+        console.log("FormatUtilsService.formatCpfInputEvent.cpf: " + cpf);
         // Permite apagar nos pontos sensíveis
         if (event.keyCode === 8 && (cpf.length === 4 || cpf.length === 8 || cpf.length === 12)) {
             return;
@@ -9330,6 +9331,7 @@ var FormatUtilsService = /** @class */ (function () {
      */
     FormatUtilsService.formatCnpjInputEvent = function (event) {
         var cnpj = event.target.value;
+        console.log("FormatUtilsService.formatCnpjInputEvent.cnpj: " + cnpj);
         // Permite apagar nos pontos sensíveis
         if (event.keyCode === 8 && (cnpj.length === 3 || cnpj.length === 7 || cnpj.length === 11 || cnpj.length === 16)) {
             return;
@@ -9351,6 +9353,10 @@ var SharedStateService = /** @class */ (function () {
         this.showEditMode$ = this.showEditMode.asObservable();
         this.activeValidatorsOnEditModalOpen = new Subject();
         this.activeValidatorsOnEditModalOpen$ = this.activeValidatorsOnEditModalOpen.asObservable();
+        this.hideBtnAddForViewMode = new BehaviorSubject(false);
+        this.hideBtnAddForViewMode$ = this.hideBtnAddForViewMode.asObservable();
+        this.activeHideOptionsOnView = new BehaviorSubject(true);
+        this.activeHideOptionsOnView$ = this.activeHideOptionsOnView.asObservable();
     }
     SharedStateService.prototype.setHideField = function (value) {
         this.hideFieldSubject.next(value);
@@ -9367,6 +9373,18 @@ var SharedStateService = /** @class */ (function () {
     SharedStateService.prototype.triggerActiveValidatorsOnEditModalOpen = function () {
         this.activeValidatorsOnEditModalOpen.next();
     };
+    SharedStateService.prototype.setHideBtnAddForViewMode = function (value) {
+        this.hideBtnAddForViewMode.next(value);
+    };
+    SharedStateService.prototype.resetHideField = function () {
+        this.hideFieldSubject.next(true);
+    };
+    SharedStateService.prototype.setActiveHideOptionsOnView = function (value) {
+        this.activeHideOptionsOnView.next(value);
+    };
+    SharedStateService.prototype.getActiveHideOptionsOnView = function () {
+        return this.activeHideOptionsOnView.getValue();
+    };
     SharedStateService.ngInjectableDef = ɵɵdefineInjectable({ factory: function SharedStateService_Factory() { return new SharedStateService(); }, token: SharedStateService, providedIn: "root" });
     SharedStateService = __decorate([
         Injectable({
@@ -9673,10 +9691,17 @@ var HistoricakPixAccountBase = /** @class */ (function () {
             case "RANDOM_KEY":
                 pixKey.setValidators(Validators.required);
                 break;
+            case "BANK_ACCOUNT":
+                pixKey.clearValidators();
+                pixKey.setValue('');
+                break;
             default:
                 pixKey.clearValidators();
         }
-        if (isEditMode) {
+        if (this.pixKeyType === "BANK_ACCOUNT") {
+            pixKey.disable();
+        }
+        else if (isEditMode) {
             pixKey.enable();
         }
         pixKey.updateValueAndValidity();
@@ -9764,6 +9789,9 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
         _this.addExistentHistoricData = [];
         _this.getListPixAccount = [];
         _this.isEditModeForSave = false;
+        _this.showField = false;
+        _this.hideBtnAddForViewMode = false;
+        _this.showButtonView = true;
         _this.isViewModeActive = new EventEmitter();
         _this.isEditModeActive = new EventEmitter();
         _this.isDeleteModeActive = new EventEmitter();
@@ -9781,12 +9809,12 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
         _this.loading = true;
         _this.listData = [];
         _this.listDataNoPage = [];
-        _this.showButtonView = true;
         _this.showEditMode = false;
         _this.hasRecordsPix = true;
         _this.hideFields = _this.sharedStateService.hideField$;
         _this.suggestions = [];
         _this.formGroupByRow = {};
+        _this.isSyncingPercentage = false;
         _this.cols = [
             {
                 label: _this.translateService.instant("hcm.payroll.employees_addition_pix_key_type"),
@@ -9865,14 +9893,17 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
     }
     HistoricalPixAccountComponent.prototype.ngOnInit = function () {
         var _this = this;
+        this.showFields = this.showField;
         this.formGroup.setControl(this.fieldFormGroup, this.historicalPixAccountList);
-        this.sharedStateService.showButton$.subscribe(function (value) {
-            _this.showButtonView = value;
-        });
         this.sharedStateService.showEditMode$.subscribe(function (value) {
             _this.showEditMode = value;
             _this.isEditModeForSave = value;
         });
+        this.sharedStateService.activeHideOptionsOnView$.subscribe(function (value) {
+            if (value) {
+                _this.showButtonView = false;
+            }
+        });
         this.sharedStateService.activeValidatorsOnEditModalOpen$
             .subscribe(function () {
             Object.values(_this.formGroupByRow).forEach(function (fg) {
@@ -9883,6 +9914,7 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
             });
             _this.emitFormValidity();
         });
+        this.resetFormState();
     };
     HistoricalPixAccountComponent.prototype.ngOnChanges = function (changes) {
         if (changes['listDataReciever'] && changes['listDataReciever'].currentValue) {
@@ -9895,6 +9927,10 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
             var newData = changes['addExistentHistoricData'].currentValue;
             this.rebuildFormGroupMap(newData);
         }
+        if (changes['isEditMode']) {
+            this.isEditMode = changes['isEditMode'].currentValue;
+            this.cd.detectChanges();
+        }
     };
     HistoricalPixAccountComponent.prototype.createFormGroup = function () {
         this.historicalPixAccountList = this.formBuilder.group({
@@ -9909,9 +9945,31 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
         this.cd.detectChanges();
     };
     HistoricalPixAccountComponent.prototype.emitFormValidity = function () {
-        var allValid = Object.values(this.formGroupByRow).every(function (fg) {
+        if (!this.formGroupByRow || Object.keys(this.formGroupByRow).length === 0) {
+            this.isValidChangeForm.emit(false);
+            return;
+        }
+        var allValid = true;
+        Object.values(this.formGroupByRow).forEach(function (fg) {
+            // Verifica cada controle individualmente
+            Object.keys(fg.controls).forEach(function (key) {
+                var control = fg.get(key);
+                // Verifica se o controle é obrigatório e está vazio
+                if (control.validator && control.validator({})) {
+                    var validatorFn = control.validator({});
+                    if (validatorFn && validatorFn.required && !control.value) {
+                        allValid = false;
+                    }
+                }
+                // Verifica se o controle tem erros
+                if (control.errors) {
+                    allValid = false;
+                }
+            });
             fg.updateValueAndValidity();
-            return fg.valid;
+            if (!fg.valid) {
+                allValid = false;
+            }
         });
         this.isValidChangeForm.emit(allValid);
     };
@@ -9932,65 +9990,27 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
     };
     HistoricalPixAccountComponent.prototype.createPixRowFormGroup = function () {
         return this.formBuilder.group({
+            id: [null],
             pixKeyType: [null, Validators.required],
             pixKey: [null],
             percentage: [0, Validators.compose(__spread(this.initialValidatorOfPercentage, [
                     Validators.max(this.maxValuePercentage),
-                ]))]
+                ]))],
+            externalId: [null],
         });
     };
-    HistoricalPixAccountComponent.prototype.onPixKeyInput = function (event, index) {
-        var inputValue = event.target.value;
-        var inputRawValue = inputValue.replace(/\D/g, '');
-        var form = this.formGroupByRow[index];
-        var pixKeyControl = form.get('pixKey');
-        if (pixKeyControl) {
-            pixKeyControl.setValue(inputRawValue, { emitEvent: false });
-            pixKeyControl.markAsDirty();
-            pixKeyControl.updateValueAndValidity();
-        }
-        this.setPixKeyValidators(true, form);
-        this.emitFormValidity();
-    };
-    HistoricalPixAccountComponent.prototype.onBlurPixCpfAndCnpj = function (index) {
-        var form = this.formGroupByRow[index];
-        var pixKeyControl = form.get('pixKey');
-        var pixKeyTypeControl = form.get('pixKeyType');
-        if (!pixKeyControl || !pixKeyTypeControl)
-            return;
-        var currentValue = pixKeyControl.value;
-        var pixKeyType = pixKeyTypeControl.value.key;
-        var rawValue = (currentValue || '').replace(/\D/g, '');
-        pixKeyControl.setValue(rawValue, { emitEvent: false });
-        if (pixKeyControl.valid) {
-            form.patchValue({
-                pixKeyFormatted: FormatUtilsService.getFormattedSubscriptionNumber(rawValue, pixKeyType)
+    /**
+     * Sincroniza todos os dados do NgModel para os FormGroups antes de enviar ao componente pai
+     */
+    HistoricalPixAccountComponent.prototype.syncPixDataToParentForm = function () {
+        this.syncAllModelToForm();
+        var historicalPix = __spread(this.addExistentHistoricData);
+        this.historicalPixAccountList.get("historicalPixAccountList").setValue(historicalPix);
+        if (this.formGroup) {
+            this.formGroup.get(this.fieldFormGroup).patchValue({
+                historicalPixAccountList: historicalPix
             });
         }
-        this.emitFormValidity();
-    };
-    HistoricalPixAccountComponent.prototype.getFormattedPixKey = function (type, value) {
-        return FormatUtilsService.getFormattedSubscriptionNumber(value, type);
-    };
-    HistoricalPixAccountComponent.prototype.syncPixDataToParentForm = function () {
-        if (!this.isEditModeForSave)
-            return;
-        var values = Object.values(this.formGroupByRow).map(function (fg) {
-            var value = fg.getRawValue();
-            var pixKeyType = value.pixKeyType.key;
-            if (pixKeyType === 'CPF' || pixKeyType === 'CNPJ') {
-                value.pixKey = (value.pixKey || '').replace(/[.\-\/]/g, '');
-            }
-            else if (pixKeyType === 'TELEPHONE') {
-                value.pixKey = (value.pixKey || '').replace(/[()\s\-]/g, '');
-            }
-            return value;
-        });
-        this.formGroup
-            .get(this.fieldFormGroup)
-            .get('historicalPixAccountList')
-            .setValue(values);
-        this.emitFormValidity();
     };
     HistoricalPixAccountComponent.prototype.syncResetPixFormToParent = function () {
         this.formGroupByRow = {};
@@ -10000,6 +10020,46 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
             this.rebuildFormGroupMap(this.addExistentHistoricData);
         }
     };
+    /**
+     * Valida todos os formulários
+     */
+    HistoricalPixAccountComponent.prototype.validateAllForms = function () {
+        var _this = this;
+        this.forceCloseAllCellEditors();
+        this.syncAllModelToForm();
+        if (!this.formGroupByRow || Object.keys(this.formGroupByRow).length === 0) {
+            return true;
+        }
+        var isAllValid = true;
+        Object.keys(this.formGroupByRow).forEach(function (indexKey) {
+            var index = Number(indexKey);
+            var form = _this.formGroupByRow[index];
+            if (form) {
+                Object.keys(form.controls).forEach(function (controlName) {
+                    var control = form.get(controlName);
+                    control.markAsTouched();
+                    if (controlName === 'pixKey') {
+                        var pixKeyTypeControl = form.get('pixKeyType');
+                        if (pixKeyTypeControl.value) {
+                            _this.validateDocumentField(index, pixKeyTypeControl.value.key);
+                        }
+                    }
+                });
+                form.updateValueAndValidity();
+                if (form.invalid) {
+                    isAllValid = false;
+                }
+            }
+        });
+        if (isAllValid && this.addExistentHistoricData && this.addExistentHistoricData.length > 0) {
+            var totalPercentage = this.addExistentHistoricData.reduce(function (sum, item) { return sum + (parseFloat(item.percentage) || 0); }, 0);
+            if (Math.abs(totalPercentage - 100) > 0.01) {
+                isAllValid = false;
+            }
+        }
+        this.isValidChangeForm.emit(isAllValid);
+        return isAllValid;
+    };
     HistoricalPixAccountComponent.prototype.onLazyLoad = function (event) {
         var _this = this;
         var first = event && event.first ? event.first : 0;
@@ -10047,9 +10107,11 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
     };
     HistoricalPixAccountComponent.prototype.addPix = function () {
         var newItem = {
+            id: null,
             pixKeyType: {},
             pixKey: '',
-            percentage: 0
+            percentage: '',
+            externalId: '',
         };
         var index = this.addExistentHistoricData.length;
         this.addExistentHistoricData = __spread(this.addExistentHistoricData, [
@@ -10060,11 +10122,27 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
         this.emitFormValidity();
     };
     HistoricalPixAccountComponent.prototype.deletePix = function (index) {
+        var _this = this;
         if (this.dataListPix.editingCell) {
             this.dataListPix.editingCell = null;
         }
         this.addExistentHistoricData = this.addExistentHistoricData.filter(function (_, i) { return i !== index; });
+        var currentList = this.historicalPixAccountList.get("historicalPixAccountList").value || [];
+        var updatedList = currentList.filter(function (_, i) { return i !== index; });
+        this.historicalPixAccountList.get("historicalPixAccountList").setValue(updatedList);
+        if (this.formGroup) {
+            this.formGroup.get(this.fieldFormGroup).patchValue({
+                historicalPixAccountList: updatedList
+            });
+        }
         this.rebuildFormGroupMap(this.addExistentHistoricData);
+        this.addExistentHistoricData.forEach(function (_, i) {
+            if (_this.formGroupByRow[i]) {
+                var allValues = _this.addExistentHistoricData
+                    .map(function (item, idx) { return idx === i ? 0 : (parseFloat(item.percentage) || 0); });
+                _this.validatePercentageValid(allValues, _this.formGroupByRow[i]);
+            }
+        });
         this.emitFormValidity();
     };
     HistoricalPixAccountComponent.prototype.rebuildFormGroupMap = function (data) {
@@ -10139,6 +10217,7 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
             }
             $event["dateChange"] = this.dateChange;
             newDataList.push($event);
+            this.addExistentHistoricData.push(__assign({}, $event));
         }
         this.historicalPixAccountList.get("historicalPixAccountList").setValue(newDataList);
         this.verifyTotalPercentage();
@@ -10168,7 +10247,14 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
             this.msgTotalLimitByPercentage = null;
         }
     };
+    HistoricalPixAccountComponent.prototype.formatPercentage = function (value) {
+        if (value == null || value === '' || isNaN(Number(value))) {
+            return '0.00';
+        }
+        return Number(value).toFixed(2);
+    };
     HistoricalPixAccountComponent.prototype.onSyncValue = function (field, index) {
+        var _this = this;
         if (this.formGroupByRow &&
             this.formGroupByRow[index] &&
             this.formGroupByRow[index].get(field)) {
@@ -10177,14 +10263,352 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
             this.addExistentHistoricData[index][field] = value;
             control.markAsDirty();
             control.markAsTouched();
+            if (field === 'percentage') {
+                var currentList = this.addExistentHistoricData
+                    .map(function (item, i) { return i === index ? 0 : (parseFloat(item.percentage) || 0); });
+                this.validatePercentageValid(currentList, this.formGroupByRow[index]);
+                if (!this.isSyncingPercentage) {
+                    this.isSyncingPercentage = true;
+                    setTimeout(function () {
+                        _this.syncPixDataToParentForm();
+                        _this.isSyncingPercentage = false;
+                    }, 0);
+                }
+            }
             control.updateValueAndValidity();
-            var currentList = this.addExistentHistoricData.map(function (item, i) {
-                return i === index ? 0 : item.percentage;
+            this.formGroupByRow[index].updateValueAndValidity();
+            this.emitFormValidity();
+        }
+    };
+    HistoricalPixAccountComponent.prototype.close = function () {
+        this.visible = false;
+    };
+    HistoricalPixAccountComponent.prototype.getFormattedTelephoneNumber = function (telephoneNumber) {
+        return FormatUtilsService.getFormattedTelephoneNumber(telephoneNumber);
+    };
+    HistoricalPixAccountComponent.prototype.getFormattedCpf = function (cpf) {
+        return FormatUtilsService.getFormattedCpf(cpf);
+    };
+    HistoricalPixAccountComponent.prototype.getFormattedCnpj = function (cnpj) {
+        return FormatUtilsService.getFormattedCnpj(cnpj);
+    };
+    HistoricalPixAccountComponent.prototype.getFormattedPercentage = function (value) {
+        return FormatUtilsService.getFormattedPercentage(value);
+    };
+    /**
+     * Reseta completamente o estado do formulário e controles
+     */
+    HistoricalPixAccountComponent.prototype.resetFormState = function () {
+        if (this.formGroupByRow) {
+            Object.values(this.formGroupByRow).forEach(function (form) {
+                if (form) {
+                    Object.keys(form.controls).forEach(function (controlName) {
+                        var control = form.get(controlName);
+                        if (control) {
+                            control.setErrors(null);
+                            control.markAsUntouched();
+                            control.markAsPristine();
+                        }
+                    });
+                    form.updateValueAndValidity();
+                }
             });
-            this.validatePercentageValid(currentList, this.formGroupByRow[index]);
+        }
+        if (this.dataListPix) {
+            if (typeof this.dataListPix.closeAllCellEditors === 'function') {
+                try {
+                    this.dataListPix.closeAllCellEditors();
+                }
+                catch (e) {
+                    console.error('Erro ao tentar fechar cell editors:', e);
+                }
+            }
+            else if (this.dataListPix.editingCell) {
+                this.dataListPix.editingCell = null;
+            }
+            if (this.dataListPix.editing !== undefined) {
+                this.dataListPix.editing = false;
+            }
+        }
+        this.cd.detectChanges();
+    };
+    /**
+     * Formata a chave PIX para exibição baseada no tipo
+     */
+    HistoricalPixAccountComponent.prototype.getFormattedPixKey = function (pixKeyType, pixKey) {
+        if (!pixKey)
+            return '';
+        switch (pixKeyType) {
+            case 'CPF':
+                return FormatUtilsService.getFormattedCpf(pixKey);
+            case 'CNPJ':
+                return FormatUtilsService.getFormattedCnpj(pixKey);
+            case 'TELEPHONE':
+                return FormatUtilsService.getFormattedTelephoneNumber(pixKey);
+            case 'EMAIL':
+            case 'RANDOM_KEY':
+            default:
+                return pixKey;
+        }
+    };
+    /**
+     * Obtém o tipo de chave PIX do item atual
+     */
+    HistoricalPixAccountComponent.prototype.getPixKeyType = function (item) {
+        return item && item.pixKeyType && item.pixKeyType.key || '';
+    };
+    /**
+    * Verifica se um controle está inválido para os campos editáveis
+    */
+    HistoricalPixAccountComponent.prototype.isInvalid = function (index, controlName) {
+        var form = this.formGroupByRow[index];
+        if (!form)
+            return false;
+        var control = form.get(controlName);
+        if (!control)
+            return false;
+        return control.invalid && (control.touched || control.dirty);
+    };
+    /**
+     * Método chamado quando uma célula entra no modo de edição
+     */
+    HistoricalPixAccountComponent.prototype.onCellEditInit = function (event) {
+        var rowIndex = this.addExistentHistoricData.findIndex(function (item) { return item === event.data; });
+        if (rowIndex < 0)
+            return;
+        var form = this.formGroupByRow[rowIndex];
+        if (form && form.get('pixKey')) {
+            var pixKeyControl = form.get('pixKey');
+            var currentValue = this.addExistentHistoricData[rowIndex].pixKey;
+            pixKeyControl.setValue(currentValue);
+        }
+    };
+    /**
+     * Recupera o FormControl específico para um campo em determinado índice
+     */
+    HistoricalPixAccountComponent.prototype.getFormControl = function (index, controlName) {
+        var form = this.formGroupByRow[index];
+        if (!form)
+            return null;
+        return form.get(controlName);
+    };
+    /**
+     * Valida campos de documento (CPF, CNPJ) quando o usuário termina de digitar no form de edição
+     */
+    HistoricalPixAccountComponent.prototype.validateDocumentField = function (index, fieldType) {
+        var _a;
+        var form = this.formGroupByRow[index];
+        var item = this.addExistentHistoricData[index];
+        if (!form || !item)
+            return;
+        var pixKeyControl = form.get('pixKey');
+        if (!pixKeyControl)
+            return;
+        var value = item.pixKey;
+        pixKeyControl.setValue(value);
+        if (fieldType === 'CPF' || fieldType === 'CNPJ' || fieldType === 'TELEPHONE') {
+            value = value ? value.toString().replace(/\D/g, '') : '';
+            item.pixKey = value;
+            pixKeyControl.setValue(value);
+        }
+        if (!value || value.toString().trim() === '') {
+            pixKeyControl.setErrors({ required: true });
+            pixKeyControl.markAsTouched();
+            form.updateValueAndValidity();
             this.emitFormValidity();
+            return;
+        }
+        var cleanValue = value;
+        if (fieldType === 'CPF' || fieldType === 'CNPJ') {
+            cleanValue = value.toString().replace(/\D/g, '');
+            item.pixKey = cleanValue;
+            pixKeyControl.setValue(cleanValue);
+        }
+        var isValid = false;
+        switch (fieldType) {
+            case 'CPF':
+                isValid = cleanValue.length === 11 && GenericValidator.isValidCpf({ value: cleanValue }) === null;
+                break;
+            case 'CNPJ':
+                isValid = cleanValue.length === 14 && GenericValidator.isValidCnpj({ value: cleanValue }) === null;
+                break;
+            case 'TELEPHONE':
+                cleanValue = value.toString().replace(/\D/g, '');
+                isValid = GenericValidator.isValidPhoneNumber({ value: cleanValue }) === null;
+                break;
+            case 'EMAIL':
+                isValid = GenericValidator.isValidEmail({ value: value }) === null;
+                break;
+            case 'RANDOM_KEY':
+                isValid = true;
+                break;
+            default:
+                isValid = true;
         }
+        pixKeyControl.markAsTouched();
+        if (isValid) {
+            pixKeyControl.setErrors(null);
+        }
+        else {
+            var errorType = this.getErrorTypeForField(fieldType);
+            pixKeyControl.setErrors((_a = {}, _a[errorType] = true, _a));
+        }
+        form.updateValueAndValidity();
+        this.emitFormValidity();
+        this.cd.detectChanges();
+    };
+    /**
+     * Obtém o tipo de erro para cada tipo de campo editável
+     */
+    HistoricalPixAccountComponent.prototype.getErrorTypeForField = function (fieldType) {
+        switch (fieldType) {
+            case 'CPF': return 'invalidCpf';
+            case 'CNPJ': return 'invalidCnpj';
+            case 'TELEPHONE': return 'invalidPhoneNumber';
+            case 'EMAIL': return 'invalidEmail';
+            default: return 'required';
+        }
+    };
+    /**
+     * Retorna a mensagem de erro apropriada para um campo
+     */
+    HistoricalPixAccountComponent.prototype.getErrorMessage = function (index, controlName) {
+        var form = this.formGroupByRow[index];
+        if (!form)
+            return '';
+        var control = form.get(controlName);
+        if (!control || !control.errors)
+            return '';
+        var fieldValue = control.value || '';
+        if (control.hasError('required')) {
+            return this.translateService.instant('hcm.payroll.required');
+        }
+        if (control.hasError('invalidCpf')) {
+            return this.translateService.instant('hcm.payroll.employees_addition_cpf_error');
+        }
+        else if (control.hasError('invalidCnpj')) {
+            return this.translateService.instant('hcm.payroll.employees_addition_cnpj_error');
+        }
+        else if (control.hasError('invalidEmail')) {
+            return this.translateService.instant('hcm.payroll.employees_addition_email_invalid');
+        }
+        else if (control.hasError('invalidPhoneNumber')) {
+            return this.translateService.instant('hcm.payroll.employees_addition_invalid_phone_number', { value: fieldValue });
+        }
+        return '';
+    };
+    /**
+     * Tratamento ao perder o foco em campos de documento
+     */
+    HistoricalPixAccountComponent.prototype.onDocumentBlur = function (index) {
+        var form = this.formGroupByRow[index];
+        var item = this.addExistentHistoricData[index];
+        if (!form || !item)
+            return;
+        var pixKeyControl = form.get('pixKey');
+        var pixKeyTypeControl = form.get('pixKeyType');
+        if (!pixKeyControl || !pixKeyTypeControl.value)
+            return;
+        var pixKeyType = pixKeyTypeControl.value.key;
+        var value = item.pixKey;
+        if (pixKeyType === 'CPF' || pixKeyType === 'CNPJ' || pixKeyType === 'TELEPHONE') {
+            value = value ? value.toString().replace(/\D/g, '') : '';
+            item.pixKey = value;
+        }
+        pixKeyControl.setValue(value);
+        this.validateDocumentField(index, pixKeyType);
+        if (value) {
+            if (pixKeyType === 'CPF') {
+                item.pixKeyFormatted = FormatUtilsService.getFormattedCpf(value);
+            }
+            else if (pixKeyType === 'CNPJ') {
+                item.pixKeyFormatted = FormatUtilsService.getFormattedCnpj(value);
+            }
+            else if (pixKeyType === 'TELEPHONE') {
+                item.pixKeyFormatted = FormatUtilsService.getFormattedTelephoneNumber(value);
+            }
+            else {
+                item.pixKeyFormatted = value;
+            }
+        }
+        this.finishEditing();
+    };
+    HistoricalPixAccountComponent.prototype.finishEditing = function () {
+        this.syncAllModelToForm();
+        this.cd.detectChanges();
     };
+    HistoricalPixAccountComponent.prototype.clearErrorsTemporarily = function (rowIndex) {
+        var form = this.formGroupByRow[rowIndex];
+        if (form && form.get('pixKey')) {
+            var currentValue = form.get('pixKey').value;
+            form.get('pixKey').setErrors(null);
+            form.get('pixKey').setValue(currentValue);
+        }
+    };
+    HistoricalPixAccountComponent.prototype.closeEditModeManually = function () {
+        var _this = this;
+        setTimeout(function () {
+            if (_this.dataListPix) {
+                if (typeof _this.dataListPix.closeAllCellEditors === 'function') {
+                    _this.dataListPix.closeAllCellEditors();
+                }
+                else if (_this.dataListPix.editingCell) {
+                    _this.dataListPix.editingCell = null;
+                }
+                _this.cd.detectChanges();
+            }
+        }, 100);
+    };
+    HistoricalPixAccountComponent.prototype.syncAllModelToForm = function () {
+        var _this = this;
+        if (!this.addExistentHistoricData || !this.formGroupByRow)
+            return;
+        this.addExistentHistoricData.forEach(function (item, index) {
+            var form = _this.formGroupByRow[index];
+            if (form) {
+                Object.keys(form.controls).forEach(function (controlName) {
+                    var control = form.get(controlName);
+                    if (control && item[controlName] !== undefined) {
+                        control.setValue(item[controlName]);
+                    }
+                });
+                var pixKeyTypeControl = form.get('pixKeyType');
+                if (pixKeyTypeControl.value) {
+                    _this.validateDocumentField(index, pixKeyTypeControl.value.key);
+                }
+            }
+        });
+    };
+    /**
+    * Método para forçar o fechamento de todas as células em edição
+    */
+    HistoricalPixAccountComponent.prototype.forceCloseAllCellEditors = function () {
+        this.finishEditing();
+        this.syncAllModelToForm();
+    };
+    HistoricalPixAccountComponent.prototype.isPixKeyType = function (item, type) {
+        return item && item.pixKeyType && item.pixKeyType.key === type;
+    };
+    HistoricalPixAccountComponent.prototype.getPixKey = function (rowData) {
+        return rowData ? rowData.pixKey : null;
+    };
+    HistoricalPixAccountComponent.prototype.setPixKey = function (rowData, value) {
+        if (rowData) {
+            rowData.pixKey = value;
+        }
+    };
+    Object.defineProperty(HistoricalPixAccountComponent.prototype, "isTotalPercentage100", {
+        get: function () {
+            if (!this.addExistentHistoricData || this.addExistentHistoricData.length === 0) {
+                return false;
+            }
+            var totalPercentage = this.addExistentHistoricData
+                .reduce(function (sum, item) { return sum + (parseFloat(item.percentage) || 0); }, 0);
+            return totalPercentage >= 100;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(HistoricalPixAccountComponent.prototype, "scopedActions", {
         get: function () {
             return this.actions.bind(this);
@@ -10194,7 +10618,8 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(HistoricalPixAccountComponent.prototype, "recordsMessage", {
         get: function () {
-            return (this.totalRecords || 0) + " " + (this.totalRecords === 1 ? this.translateService.instant("hcm.payroll.admission_register") : this.translateService.instant("hcm.payroll.admission_registers"));
+            return (this.totalRecords || 0) + " " + (this.totalRecords === 1 ?
+                this.translateService.instant("hcm.payroll.admission_register") : this.translateService.instant("hcm.payroll.admission_registers"));
         },
         enumerable: true,
         configurable: true
@@ -10269,21 +10694,6 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    HistoricalPixAccountComponent.prototype.close = function () {
-        this.visible = false;
-    };
-    HistoricalPixAccountComponent.prototype.getFormattedTelephoneNumber = function (telephoneNumber) {
-        return FormatUtilsService.getFormattedTelephoneNumber(telephoneNumber);
-    };
-    HistoricalPixAccountComponent.prototype.getFormattedCpf = function (cpf) {
-        return FormatUtilsService.getFormattedCpf(cpf);
-    };
-    HistoricalPixAccountComponent.prototype.getFormattedCnpj = function (cnpj) {
-        return FormatUtilsService.getFormattedCnpj(cnpj);
-    };
-    HistoricalPixAccountComponent.prototype.getFormattedPercentage = function (value) {
-        return FormatUtilsService.getFormattedPercentage(value);
-    };
     Object.defineProperty(HistoricalPixAccountComponent.prototype, "isAllowToAddHistorical", {
         get: function () {
             return (this.permission["incluir"]);
@@ -10379,6 +10789,15 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
     __decorate([
         Input()
     ], HistoricalPixAccountComponent.prototype, "isEditModeForSave", void 0);
+    __decorate([
+        Input()
+    ], HistoricalPixAccountComponent.prototype, "showField", void 0);
+    __decorate([
+        Input()
+    ], HistoricalPixAccountComponent.prototype, "hideBtnAddForViewMode", void 0);
+    __decorate([
+        Input()
+    ], HistoricalPixAccountComponent.prototype, "showButtonView", void 0);
     __decorate([
         Output()
     ], HistoricalPixAccountComponent.prototype, "isViewModeActive", void 0);
@@ -10413,8 +10832,8 @@ var HistoricalPixAccountComponent = /** @class */ (function (_super) {
         Component({
             // tslint:disable-next-line:component-selector
             selector: "c-historical-pix-account",
-            template: "<s-sidebar *ngIf=\"withSideBar\" [visible]=\"visible\" (visibleChange)=\"close()\"\n           header=\"{{'hcm.payroll.historical_pix_account_title_form'|translate}}\">\n<pix-account [(visible)]=\"visible\"\n              [isEditAndViewValue]=\"pixAccountItemInput\"\n              [currency]=\"currency\"\n              [customEntity]=\"customEntity\"\n              [customService]=\"customService\"\n              [getListPixAccount]=\"listDataNoPage\"\n              [paramsForm]=\"paramsForm\"\n              (pixAccountItemToList)=\"addItemInList($event)\"\n              [defaultCpfNumber]=\"defaultCpfNumber\"></pix-account>\n</s-sidebar>\n\n<div *ngIf=\"!withSideBar\">\n    <pix-account [(visible)]=\"visible\"\n                  [isEditAndViewValue]=\"pixAccountItemInput\"\n                  [currency]=\"currency\"\n                  [customEntity]=\"customEntity\"\n                  [customService]=\"customService\"\n                  [getListPixAccount]=\"listDataNoPage\"\n                  [withSideBar]=\"false\"\n                  [isViewMode]=\"isViewMode\"\n                  [paramsForm]=\"paramsForm\"\n                  (pixAccountItemToList)=\"addItemInList($event)\"\n                  [defaultCpfNumber]=\"defaultCpfNumber\"></pix-account>\n</div>\n\n<div class=\"ui-g-1\" *ngIf=\"withSideBar && !isEditMode\">\n    <div class=\"form-group \">\n        <s-button id=\"ta-addPayAnnuity\"\n                  [disabled]=\"getTooltipAndDisableButtonAdd || msgTotalLimitByPercentage\"\n                  (onClick)=\"add()\"\n                  [pTooltip]=\"getTooltipAndDisableButtonAdd || msgTotalLimitByPercentage\"\n                  tooltipPosition=\"top\"\n                  label=\"{{'hcm.payroll.historical_pix_account_add'|translate}}\"></s-button>\n    </div>\n</div>\n<div *ngIf=\"!showEditMode || !(hideFields | async)\" class=\"ui-g-12\">\n    <p-table\n        id=\"table-annuity\"\n        [value]=\"listData\"\n        [columns]=\"cols\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [lazy]=\"true\"\n        [scrollable]=\"true\"\n        [paginator]=\"true\"\n        [totalRecords]=\"totalRecords\"\n        [sortMode]=\"'multiple'\"\n        *sLoadingState=\"loading\"\n        [rows]=\"recordByRow\"\n        dataKey=\"id\">\n        <ng-template pTemplate=\"colgroup\" let-coumns>\n            <colgroup>\n                <col [ngClass]=\"'col-default-m'\">\n                <col [ngClass]=\"'col-default-m'\">\n                <col [ngClass]=\"'col-default-s'\">\n                <col *ngIf=\"showButtonView\" [ngClass]=\"'col-action'\">\n            </colgroup>\n        </ng-template>\n        <ng-template pTemplate=\"header\" let-columns>\n            <!-- Cabe\u00E7alhos quando da table \u00E9 permitido ordenar as colunas -->\n            <tr>\n                <!-- Cabe\u00E7alhos das colunas da tabela -->\n                <th\n                    [pSortableColumn]=\"'pixKeyType'\"\n                    [pTooltip]=\"'hcm.payroll.employees_addition_pix_key_type' | translate\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\"\n                >\n                    <div class=\"senior-header\" id=\"table-0\">\n                        <span\n                            id=\"table-annuity-s-0\">{{ 'hcm.payroll.employees_addition_pix_key_type' | translate }}</span>\n                        <p-sortIcon class=\"p-sorticon-status\"\n                                    [field]=\"'hcm.payroll.employees_addition_pix_key_type' | translate\"></p-sortIcon>\n                    </div>\n                </th>\n\n                <th\n                    [pSortableColumn]=\"'pixKey'\"\n                    [pTooltip]=\"'hcm.payroll.employees_addition_pix_key' | translate\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\"\n                >\n                    <div class=\"senior-header\">\n                        <span>{{ 'hcm.payroll.employees_addition_pix_key' | translate }}</span>\n                        <p-sortIcon class=\"p-sorticon-status\"\n                                    [field]=\"'hcm.payroll.employees_addition_pix_key' | translate\"></p-sortIcon>\n                    </div>\n                </th>\n\n                <th\n                    [pSortableColumn]=\"'percentage'\"\n                    [pTooltip]=\"'hcm.payroll.historical_pix_account_label_percentage' | translate\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\"\n                >\n                    <div class=\"senior-header\">\n                        <span>{{ 'hcm.payroll.historical_pix_account_label_percentage' | translate }}</span>\n                        <p-sortIcon class=\"p-sorticon-status\"\n                                    [field]=\"'hcm.payroll.historical_pix_account_label_percentage' | translate\"></p-sortIcon>\n                    </div>\n                </th>\n                <!-- Cabe\u00E7alho da coluna de a\u00E7\u00F5es -->\n                <th *ngIf=\"showButtonView\" id=\"col-actions\"></th>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-key=\"rowIndex\">\n\n            <tr [ngClass]=\"'row'+key\" [pSelectableRow]=\"rowData\">\n                <td [pTooltip]=\"rowData?.pixKeyType.value\" tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    <span>{{ rowData?.pixKeyType.value }}</span>\n                </td>\n\n                <ng-container [ngSwitch]=\"rowData?.pixKeyType.key\">\n                    <td *ngSwitchCase=\"'TELEPHONE'\"\n                        [pTooltip]=\"getFormattedTelephoneNumber(rowData?.pixKey)\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ getFormattedTelephoneNumber(rowData?.pixKey) }}</span>\n                    </td>\n                    <td *ngSwitchCase=\"'CPF'\"\n                        [pTooltip]=\"getFormattedCpf(rowData?.pixKey)\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ getFormattedCpf(rowData?.pixKey) }}</span>\n                    </td>\n                    <td *ngSwitchCase=\"'CNPJ'\"\n                        [pTooltip]=\"getFormattedCnpj(rowData?.pixKey)\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ getFormattedCnpj(rowData?.pixKey) }}</span>\n                    </td>\n                    <td *ngSwitchDefault\n                        [pTooltip]=\"rowData?.pixKey\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ rowData?.pixKey }}</span>\n                    </td>\n                </ng-container>\n                <td [pTooltip]=\"getFormattedPercentage(rowData?.percentage)\" tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    <span>{{ getFormattedPercentage(rowData?.percentage) }}</span>\n                </td>\n                <td id=\"col-actions-{{key}}\" class=\"col-actions \"\n                    *ngIf=\"actions && actions(rowData, key)?.length && showButtonView\">\n                    <s-button id=\"table-admission-btn-actions-{{key}}\"\n                              *ngIf=\"!isViewMode &&  actions(rowData, key).length > 1\" [label]=\"actionLabel\"\n                              priority=\"default\" [model]=\"scopedActions(rowData, key)\"\n                              [disabled]=\"false\" [auxiliary]=\"true\"></s-button>\n\n                    <s-button id=\"table-admission-btn-action-{{key}}\"\n                              *ngIf=\"!isViewMode && actions(rowData, key).length <= 1\"\n                              [label]=\"scopedActions(rowData, key)[0].label\"\n                              priority=\"default\"\n                              (click)=\"scopedActions(rowData, key)[0].command()\"\n                              [disabled]=\"false\" [auxiliary]=\"true\"></s-button>\n                </td>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\" let-columns>\n            <tr>\n                <td [attr.colspan]=\"columns.length +2\">\n                    {{'hcm.payroll.admission_empty_message'|translate}}\n                </td>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\">\n            <span *ngIf=\"totalRecords\">{{recordsMessage}}</span>\n        </ng-template>\n    </p-table>\n</div>\n\n<!-- Template exlusivo para edi\u00E7\u00E3o de pix via modal-->\n<div *ngIf=\"showEditMode && (hideFields | async)\" class=\"ui-g-12\">\n    <!-- Bot\u00E3o Adicionar -->\n    <div class=\"ui-g\">\n        <div class=\"ui-g-12\">\n            <s-button\n                id=\"btn-save\"\n                label=\"{{ 'hcm.payroll.historical_pix_account_add' | translate}}\"\n                priority=\"primary\"\n                (onClick)=\"addPix()\">\n            </s-button>\n        </div>\n    </div>\n\n    <!-- Tabela -->\n    <p-table #dataListPix sortField=\"percentage\"\n        [columns]=\"cols\"\n        [value]=\"addExistentHistoricData\"\n        [pageLinks]=\"3\"\n        [paginator]=\"true\"\n        [responsive]=\"true\"\n        [rows]=\"10\"\n        [resetPageOnSort]=\"false\"\n        [tableStyle]=\"{'margin-top': '2rem'}\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"header\" let-columns>\n            <tr>\n                <th *ngFor=\"let col of cols\">\n                    {{ col.label }}\n                </th>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-item let-rowIndex=\"rowIndex\">\n            <ng-container *ngIf=\"formGroupByRow[rowIndex]\" [formGroup]=\"formGroupByRow[rowIndex]\">\n              <tr>\n                <!-- Tipo de Chave -->\n                <td class=\"ui-md-6 ui-sm-12 required\"\n                    [pEditableColumn]=\"item.pixKeyType\" pEditableColumnField=\"pixKeyType\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <div style=\"width: 100%; position: relative;\">\n                        <p-autoComplete\n                          [suggestions]=\"suggestions\"\n                          (completeMethod)=\"filterPixKeyType($event)\"\n                          formControlName=\"pixKeyType\"\n                          [dropdown]=\"true\"\n                          (onSelect)=\"onPixKeyTypeChange($event, rowIndex)\"\n                          (onClear)=\"onPixKeyTypeClear(rowIndex)\"\n                          (ngModelChange)=\"onSyncValue('pixKeyType', rowIndex)\"\n                          field=\"value\"\n                          placeholder=\"{{'hcm.payroll.select' | translate}}\"\n                          appendTo=\"body\"\n                          [panelStyle]=\"{ maxWidth: '300px', width: '100%' }\"\n                          [inputStyle]=\"{ width: '100%' }\"\n                        ></p-autoComplete>\n\n                        <s-control-errors [control]=\"formGroupByRow[rowIndex]?.get('pixKeyType')\"\n                          [errorMessages]=\"{\n                            required: 'hcm.payroll.required' | translate,\n                            pixKeyTypeBankAccountDuplicate: 'hcm.payroll.historical_pix_key_type_bank_account_duplicate' | translate\n                          }\">\n                        </s-control-errors>\n                      </div>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ item.pixKeyType?.value }}\n                    </ng-template>\n                  </p-cellEditor>\n                </td>\n\n                <!-- Chave Pix -->\n                <td class=\"ui-md-6 ui-sm-12 required\"\n                    [pEditableColumn]=\"item.pixKey\" pEditableColumnField=\"pixKey\"\n                    [ngClass]=\"{'required': item.pixKeyType.key !== 'BANK_ACCOUNT',\n                        'disabled': item.pixKeyType && item.pixKeyType.key === 'BANK_ACCOUNT'\n                    }\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <ng-container [ngSwitch]=\"item.pixKeyType.key\">\n                        <input *ngSwitchCase=\"'TELEPHONE'\"\n                            only-number\n                            pInputText\n                            type=\"text\"\n                            formControlName=\"pixKey\"\n                            (keyup)=\"phoneMask($event)\"\n                            (ngModelChange)=\"onSyncValue('pixKey', rowIndex)\"\n                            maxlength=\"15\"\n                            placeholder=\"(__) ____-____\" />\n\n                        <input *ngSwitchCase=\"'CPF'\"\n                            type=\"text\"\n                            pInputText\n                            formControlName=\"pixKey\"\n                            maxlength=\"14\"\n                            placeholder=\"___.___.___-__\"\n                            (input)=\"onPixKeyInput($event, rowIndex)\"\n                            (blur)=\"onBlurPixCpfAndCnpj(rowIndex)\"\n                            (keyup)=\"cpfMask($event)\"\n                            (ngModelChange)=\"onSyncValue('pixKey', rowIndex)\" />\n\n                        <input *ngSwitchCase=\"'CNPJ'\"\n                            type=\"text\"\n                            pInputText\n                            formControlName=\"pixKey\"\n                            maxlength=\"18\"\n                            placeholder=\"___.___.___/____-__\"\n                            (input)=\"onPixKeyInput($event, rowIndex)\"\n                            (blur)=\"onBlurPixCpfAndCnpj(rowIndex)\"\n                            (keyup)=\"cnpjMask($event)\"\n                            (ngModelChange)=\"onSyncValue('pixKey', rowIndex)\" />\n\n                        <input *ngSwitchCase=\"'EMAIL'\"\n                            pInputText\n                            type=\"email\"\n                            formControlName=\"pixKey\"\n                            (ngModelChange)=\"onSyncValue('pixKey', rowIndex)\"\n                            placeholder=\"{{ 'hcm.payroll.employees_addition_email' | translate }}\" />\n\n                        <input *ngSwitchCase=\"'BANK_ACCOUNT'\"\n                            pInputText\n                            formControlName=\"pixKey\"\n                            (ngModelChange)=\"onSyncValue('pixKey', rowIndex)\"\n                            [disabled]=\"true\" />\n\n                        <input *ngSwitchDefault\n                            pInputText\n                            type=\"text\"\n                            formControlName=\"pixKey\"\n                            (ngModelChange)=\"onSyncValue('pixKey', rowIndex)\"\n                            maxlength=\"100\" />\n                      </ng-container>\n\n                      <s-control-errors *ngIf=\"isShowPixKeyFieldValidatorMessage\"\n                        [control]=\"formGroupByRow[rowIndex]?.get('pixKey')\"\n                        [errorMessages]=\"{\n                          required: 'hcm.payroll.required' | translate,\n                          invalidPhoneNumber: 'hcm.payroll.employees_addition_invalid_phone_number' | translate: { value: formGroupByRow[rowIndex]?.get('pixKey').value },\n                          invalidEmail: 'hcm.payroll.employees_addition_email_invalid' | translate,\n                          cpfNotValid: 'hcm.payroll.employees_addition_cpf_error' | translate,\n                          cnpjNotValid: 'hcm.payroll.employees_addition_cnpj_error' | translate\n                        }\">\n                      </s-control-errors>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                        {{ getFormattedPixKey(item.pixKeyType?.key, item.pixKey) }}\n                    </ng-template>\n                  </p-cellEditor>\n                </td>\n\n                <!-- Percentual -->\n                <td class=\"ui-md-6 ui-sm-12 required\"\n                    [pEditableColumn]=\"item.percentage\" pEditableColumnField=\"percentage\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText type=\"number\"\n                        formControlName=\"percentage\"\n                        (ngModelChange)=\"onSyncValue('percentage', rowIndex)\"\n                      >\n                      <s-control-errors\n                        [control]=\"formGroupByRow[rowIndex]?.get('percentage')\"\n                        [errorMessages]=\"{\n                          required: 'hcm.payroll.required' | translate,\n                          maxlength: 'hcm.payroll.error_max_length' | translate: { value: '6' },\n                          max: 'hcm.payroll.error_max_value_number' | translate: { value: maxValuePercentage },\n                          min: 'hcm.payroll.error_min_value_number' | translate: { value: '0,01' }\n                        }\">\n                      </s-control-errors>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                        {{ item.percentage?.toFixed(2).replace('.', ',') }}%\n                    </ng-template>\n                  </p-cellEditor>\n                </td>\n\n                <!-- Bot\u00E3o de excluir -->\n                <td>\n                  <s-button\n                    id=\"btn-delete\"\n                    label=\"{{ 'hcm.payroll.delete' | translate }}\"\n                    priority=\"default\"\n                    (onClick)=\"deletePix(rowIndex)\">\n                </s-button>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-template>\n    </p-table>\n</div>\n",
-            styles: [".refresh{width:100%!important}#table-annuity .col-default-s{width:10%}#table-annuity .col-default-m{width:12%}#table-annuity .col-default-l{width:16%}#table-annuity .col-action{width:10%}#table-annuity .icon-warning{text-align:center!important;color:#ff6d00c7!important}@media screen and (max-width:612px){#table-annuity .col-default-1,#table-annuity .col-default-2{width:16%}#table-annuity .col-default-3{width:26%}#table-annuity .col-icon{width:10%}#table-annuity .col-action{width:27%}}#main{display:-webkit-box;display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}#main form{height:100%}#main .footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;flex-shrink:0;margin-bottom:-18px}#main .footer-s-border{padding-left:7px;flex-shrink:0;margin-bottom:-18px}"]
+            template: "<s-sidebar *ngIf=\"withSideBar\" [visible]=\"visible\" (visibleChange)=\"close()\"\n           header=\"{{'hcm.payroll.historical_pix_account_title_form'|translate}}\">\n<pix-account [(visible)]=\"visible\"\n              [isEditAndViewValue]=\"pixAccountItemInput\"\n              [currency]=\"currency\"\n              [customEntity]=\"customEntity\"\n              [customService]=\"customService\"\n              [getListPixAccount]=\"listDataNoPage\"\n              [paramsForm]=\"paramsForm\"\n              [showField]=\"showFields\"\n              (pixAccountItemToList)=\"addItemInList($event)\"\n              [defaultCpfNumber]=\"defaultCpfNumber\"></pix-account>\n</s-sidebar>\n\n<div *ngIf=\"!withSideBar\">\n    <pix-account [(visible)]=\"visible\"\n                  [isEditAndViewValue]=\"pixAccountItemInput\"\n                  [currency]=\"currency\"\n                  [customEntity]=\"customEntity\"\n                  [customService]=\"customService\"\n                  [getListPixAccount]=\"listDataNoPage\"\n                  [withSideBar]=\"false\"\n                  [isViewMode]=\"isViewMode\"\n                  [paramsForm]=\"paramsForm\"\n                  (pixAccountItemToList)=\"addItemInList($event)\"\n                  [defaultCpfNumber]=\"defaultCpfNumber\"></pix-account>\n</div>\n<div class=\"ui-g-1\" *ngIf=\"withSideBar && !isEditMode && !hideBtnAddForViewMode\">\n    <div class=\"form-group \">\n        <s-button id=\"ta-addPayAnnuity\"\n                  [disabled]=\"getTooltipAndDisableButtonAdd || msgTotalLimitByPercentage\"\n                  (onClick)=\"add()\"\n                  [pTooltip]=\"getTooltipAndDisableButtonAdd || msgTotalLimitByPercentage\"\n                  tooltipPosition=\"top\"\n                  label=\"{{'hcm.payroll.historical_pix_account_add'|translate}}\"></s-button>\n    </div>\n</div>\n<div *ngIf=\"showFields || !showEditMode || !(hideFields | async)\" class=\"ui-g-12\">\n    <p-table\n        id=\"table-annuity\"\n        [value]=\"listData\"\n        [columns]=\"cols\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [lazy]=\"true\"\n        [scrollable]=\"true\"\n        [paginator]=\"true\"\n        [totalRecords]=\"totalRecords\"\n        [sortMode]=\"'multiple'\"\n        *sLoadingState=\"loading\"\n        [rows]=\"recordByRow\"\n        dataKey=\"id\">\n        <ng-template pTemplate=\"colgroup\" let-coumns>\n            <colgroup>\n                <col [ngClass]=\"'col-default-m'\">\n                <col [ngClass]=\"'col-default-m'\">\n                <col [ngClass]=\"'col-default-s'\">\n                <col *ngIf=\"showButtonView\" [ngClass]=\"'col-action'\">\n            </colgroup>\n        </ng-template>\n        <ng-template pTemplate=\"header\" let-columns>\n            <!-- Cabe\u00E7alhos quando da table \u00E9 permitido ordenar as colunas -->\n            <tr>\n                <!-- Cabe\u00E7alhos das colunas da tabela -->\n                <th\n                    [pSortableColumn]=\"'pixKeyType'\"\n                    [pTooltip]=\"'hcm.payroll.employees_addition_pix_key_type' | translate\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\"\n                >\n                    <div class=\"senior-header\" id=\"table-0\">\n                        <span\n                            id=\"table-annuity-s-0\">{{ 'hcm.payroll.employees_addition_pix_key_type' | translate }}</span>\n                        <p-sortIcon class=\"p-sorticon-status\"\n                                    [field]=\"'hcm.payroll.employees_addition_pix_key_type' | translate\"></p-sortIcon>\n                    </div>\n                </th>\n\n                <th\n                    [pSortableColumn]=\"'pixKey'\"\n                    [pTooltip]=\"'hcm.payroll.employees_addition_pix_key' | translate\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\"\n                >\n                    <div class=\"senior-header\">\n                        <span>{{ 'hcm.payroll.employees_addition_pix_key' | translate }}</span>\n                        <p-sortIcon class=\"p-sorticon-status\"\n                                    [field]=\"'hcm.payroll.employees_addition_pix_key' | translate\"></p-sortIcon>\n                    </div>\n                </th>\n\n                <th\n                    [pSortableColumn]=\"'percentage'\"\n                    [pTooltip]=\"'hcm.payroll.historical_pix_account_label_percentage' | translate\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\"\n                >\n                    <div class=\"senior-header\">\n                        <span>{{ 'hcm.payroll.historical_pix_account_label_percentage' | translate }}</span>\n                        <p-sortIcon class=\"p-sorticon-status\"\n                                    [field]=\"'hcm.payroll.historical_pix_account_label_percentage' | translate\"></p-sortIcon>\n                    </div>\n                </th>\n                <!-- Cabe\u00E7alho da coluna de a\u00E7\u00F5es -->\n                <th *ngIf=\"showButtonView\" id=\"col-actions\"></th>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-key=\"rowIndex\">\n\n            <tr [ngClass]=\"'row'+key\" [pSelectableRow]=\"rowData\">\n                <td [pTooltip]=\"rowData?.pixKeyType.value\" tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    <span>{{ rowData?.pixKeyType.value }}</span>\n                </td>\n\n                <ng-container [ngSwitch]=\"rowData?.pixKeyType.key\">\n                    <td *ngSwitchCase=\"'TELEPHONE'\"\n                        [pTooltip]=\"getFormattedTelephoneNumber(rowData?.pixKey)\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ getFormattedTelephoneNumber(rowData?.pixKey) }}</span>\n                    </td>\n                    <td *ngSwitchCase=\"'CPF'\"\n                        [pTooltip]=\"getFormattedCpf(rowData?.pixKey)\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ getFormattedCpf(rowData?.pixKey) }}</span>\n                    </td>\n                    <td *ngSwitchCase=\"'CNPJ'\"\n                        [pTooltip]=\"getFormattedCnpj(rowData?.pixKey)\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ getFormattedCnpj(rowData?.pixKey) }}</span>\n                    </td>\n                    <td *ngSwitchDefault\n                        [pTooltip]=\"rowData?.pixKey\" tooltipPosition=\"top\"\n                        showDelay=\"500\">\n                        <span>{{ rowData?.pixKey }}</span>\n                    </td>\n                </ng-container>\n                <td [pTooltip]=\"getFormattedPercentage(rowData?.percentage)\" tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    <span>{{ getFormattedPercentage(rowData?.percentage) }}</span>\n                </td>\n                <td id=\"col-actions-{{key}}\" class=\"col-actions \"\n                    *ngIf=\"actions && actions(rowData, key)?.length && showButtonView\">\n                    <s-button id=\"table-admission-btn-actions-{{key}}\"\n                              *ngIf=\"!isViewMode &&  actions(rowData, key).length > 1\" [label]=\"actionLabel\"\n                              priority=\"default\" [model]=\"scopedActions(rowData, key)\"\n                              [disabled]=\"false\" [auxiliary]=\"true\"></s-button>\n\n                    <s-button id=\"table-admission-btn-action-{{key}}\"\n                              *ngIf=\"!isViewMode && actions(rowData, key).length <= 1\"\n                              [label]=\"scopedActions(rowData, key)[0].label\"\n                              priority=\"default\"\n                              (click)=\"scopedActions(rowData, key)[0].command()\"\n                              [disabled]=\"false\" [auxiliary]=\"true\"></s-button>\n                </td>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\" let-columns>\n            <tr>\n                <td [attr.colspan]=\"columns.length +2\">\n                    {{'hcm.payroll.admission_empty_message'|translate}}\n                </td>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\">\n            <span *ngIf=\"totalRecords\">{{recordsMessage}}</span>\n        </ng-template>\n    </p-table>\n</div>\n\n<!-- Template exlusivo para edi\u00E7\u00E3o de pix via modal-->\n<div *ngIf=\"!withSideBar && showEditMode && (hideFields | async)\" class=\"ui-g-12\">\n    <!-- Bot\u00E3o Adicionar -->\n    <div class=\"ui-g\">\n        <div class=\"ui-g-12\">\n            <s-button\n            id=\"btn-save\"\n            label=\"{{ 'hcm.payroll.historical_pix_account_add' | translate}}\"\n            priority=\"primary\"\n            [disabled]=\"isTotalPercentage100\"\n            [pTooltip]=\"isTotalPercentage100 ? ('hcm.payroll.historical_pix_account_msg_limit_total_by_percentage' | translate) : ''\"\n            tooltipPosition=\"top\"\n            (onClick)=\"addPix()\">\n        </s-button>\n        </div>\n    </div>\n\n    <!-- Tabela -->\n    <p-table #dataListPix sortField=\"percentage\"\n        [columns]=\"cols\"\n        [value]=\"addExistentHistoricData\"\n        [pageLinks]=\"3\"\n        [paginator]=\"true\"\n        [responsive]=\"true\"\n        [rows]=\"10\"\n        [resetPageOnSort]=\"false\"\n        [tableStyle]=\"{'margin-top': '2rem'}\"\n        [customSort]=\"true\"\n        (onEditInit)=\"onCellEditInit($event)\">\n        <ng-template pTemplate=\"header\" let-columns>\n            <tr>\n                <th *ngFor=\"let col of cols\">\n                    {{ col.label }}\n                </th>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-item let-rowIndex=\"rowIndex\">\n            <ng-container *ngIf=\"formGroupByRow[rowIndex]\" [formGroup]=\"formGroupByRow[rowIndex]\">\n              <tr>\n                <!-- Tipo de Chave -->\n                <td class=\"ui-md-6 ui-sm-12 required\"\n                    [pEditableColumn]=\"item.pixKeyType\" pEditableColumnField=\"pixKeyType\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <div style=\"width: 100%; position: relative;\">\n                        <p-autoComplete\n                          [suggestions]=\"suggestions\"\n                          (completeMethod)=\"filterPixKeyType($event)\"\n                          formControlName=\"pixKeyType\"\n                          [dropdown]=\"true\"\n                          (onSelect)=\"onPixKeyTypeChange($event, rowIndex)\"\n                          (onClear)=\"onPixKeyTypeClear(rowIndex)\"\n                          (ngModelChange)=\"onSyncValue('pixKeyType', rowIndex)\"\n                          field=\"value\"\n                          placeholder=\"{{'hcm.payroll.select' | translate}}\"\n                          appendTo=\"body\"\n                          [panelStyle]=\"{ maxWidth: '300px', width: '100%' }\"\n                          [inputStyle]=\"{ width: '100%' }\"\n                        ></p-autoComplete>\n\n                        <s-control-errors [control]=\"formGroupByRow[rowIndex]?.get('pixKeyType')\"\n                          [errorMessages]=\"{\n                            required: 'hcm.payroll.required' | translate,\n                            pixKeyTypeBankAccountDuplicate: 'hcm.payroll.historical_pix_key_type_bank_account_duplicate' | translate\n                          }\">\n                        </s-control-errors>\n                      </div>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ item.pixKeyType?.value }}\n                    </ng-template>\n                  </p-cellEditor>\n                </td>\n\n                <!-- Chave Pix -->\n                <td class=\"ui-md-6 ui-sm-12 required\"\n                    [pEditableColumn]=\"item.pixKey\" pEditableColumnField=\"pixKey\">\n                    <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                            <div class=\"ui-fluid\">\n                              <!-- \u00C1rea de inputs din\u00E2micos -->\n                              <div [ngSwitch]=\"getPixKeyType(item)\" class=\"ui-fluid\">\n                                <!-- CPF -->\n                                <p-inputMask *ngSwitchCase=\"'CPF'\"\n                                  mask=\"999.999.999-99\"\n                                  unmask=\"true\"\n                                  [(ngModel)]=\"item.pixKey\"\n                                  [ngModelOptions]=\"{standalone: true}\"\n                                  styleClass=\"full-width-input\"\n                                  [ngClass]=\"{'ng-invalid': isInvalid(rowIndex, 'pixKey')}\"\n                                  (onComplete)=\"validateDocumentField(rowIndex, 'CPF')\"\n                                  (onBlur)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.enter)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.esc)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.esc)=\"onDocumentBlur(rowIndex)\">\n                                </p-inputMask>\n\n                                <!-- CNPJ -->\n                                <p-inputMask *ngSwitchCase=\"'CNPJ'\"\n                                  mask=\"99.999.999/9999-99\"\n                                  unmask=\"true\"\n                                  [(ngModel)]=\"item.pixKey\"\n                                  [ngModelOptions]=\"{standalone: true}\"\n                                  styleClass=\"full-width-input\"\n                                  [ngClass]=\"{'ng-invalid': isInvalid(rowIndex, 'pixKey')}\"\n                                  (onComplete)=\"validateDocumentField(rowIndex, 'CNPJ')\"\n                                  (onBlur)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.enter)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.esc)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.esc)=\"onDocumentBlur(rowIndex)\">\n                                </p-inputMask>\n\n                                <!-- TELEPHONE -->\n                                <p-inputMask *ngSwitchCase=\"'TELEPHONE'\"\n                                  mask=\"(99) 99999-9999\"\n                                  unmask=\"true\"\n                                  [(ngModel)]=\"item.pixKey\"\n                                  [ngModelOptions]=\"{standalone: true}\"\n                                  styleClass=\"full-width-input\"\n                                  [ngClass]=\"{'ng-invalid': isInvalid(rowIndex, 'pixKey')}\"\n                                  (onComplete)=\"validateDocumentField(rowIndex, 'TELEPHONE')\"\n                                  (onBlur)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.enter)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.esc)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.esc)=\"onDocumentBlur(rowIndex)\">\n                                </p-inputMask>\n\n                                <!-- EMAIL -->\n                                <input *ngSwitchCase=\"'EMAIL'\"\n                                  type=\"email\"\n                                  pInputText\n                                  class=\"p-inputtext p-component full-width-input\"\n                                  [(ngModel)]=\"item.pixKey\"\n                                  [ngModelOptions]=\"{standalone: true}\"\n                                  [ngClass]=\"{'ng-invalid': isInvalid(rowIndex, 'pixKey')}\"\n                                  (blur)=\"validateDocumentField(rowIndex, 'EMAIL'); onDocumentBlur(rowIndex)\"\n                                  (keydown.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.enter)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.esc)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.esc)=\"onDocumentBlur(rowIndex)\">\n\n                                <!-- RANDOM_KEY -->\n                                <input *ngSwitchCase=\"'RANDOM_KEY'\"\n                                  type=\"text\"\n                                  pInputText\n                                  class=\"p-inputtext p-component full-width-input\"\n                                  [(ngModel)]=\"item.pixKey\"\n                                  [ngModelOptions]=\"{standalone: true}\"\n                                  [ngClass]=\"{'ng-invalid': isInvalid(rowIndex, 'pixKey')}\"\n                                  (blur)=\"validateDocumentField(rowIndex, 'RANDOM_KEY'); onDocumentBlur(rowIndex)\"\n                                  (keydown.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.tab)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.enter)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.esc)=\"onDocumentBlur(rowIndex)\"\n                                  (keydown.shift.esc)=\"onDocumentBlur(rowIndex)\">\n\n                                  <!-- BANK_ACCOUNT -->\n                                <input *ngSwitchCase=\"'BANK_ACCOUNT'\"\n                                  type=\"text\"\n                                  pInputText\n                                  class=\"p-inputtext p-component full-width-input\"\n                                  [disabled]=\"true\">\n                              </div>\n\n                              <!-- \u00DAnico s-control-errors para todos os tipos -->\n                              <small *ngIf=\"isInvalid(rowIndex, 'pixKey')\" class=\"p-error error-text\">\n                                {{getErrorMessage(rowIndex, 'pixKey')}}\n                              </small>\n                            </div>\n                          </ng-template>\n                        <ng-template pTemplate=\"output\">\n                            {{getFormattedPixKey(getPixKeyType(item), item.pixKey)}}\n                        </ng-template>\n                      </p-cellEditor>\n                </td>\n\n                <!-- Percentual -->\n                <td class=\"ui-md-6 ui-sm-12 required\"\n                    [pEditableColumn]=\"item.percentage\" pEditableColumnField=\"percentage\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText type=\"number\"\n                        formControlName=\"percentage\"\n                        (ngModelChange)=\"onSyncValue('percentage', rowIndex)\"\n                      >\n                      <s-control-errors\n                        [control]=\"formGroupByRow[rowIndex]?.get('percentage')\"\n                        [errorMessages]=\"{\n                          required: 'hcm.payroll.required' | translate,\n                          maxlength: 'hcm.payroll.error_max_length' | translate: { value: '6' },\n                          max: 'hcm.payroll.error_max_value_number' | translate: { value: maxValuePercentage },\n                          min: 'hcm.payroll.error_min_value_number' | translate: { value: '0,01' }\n                        }\">\n                      </s-control-errors>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                        {{ formatPercentage(item.percentage) }}%\n                    </ng-template>\n                  </p-cellEditor>\n                </td>\n\n                <!-- Bot\u00E3o de excluir -->\n                <td>\n                  <s-button\n                    id=\"btn-delete\"\n                    label=\"{{ 'hcm.payroll.delete' | translate }}\"\n                    priority=\"default\"\n                    (onClick)=\"deletePix(rowIndex)\">\n                </s-button>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-template>\n    </p-table>\n</div>\n",
+            styles: [".refresh{width:100%!important}#table-annuity .col-default-s{width:10%}#table-annuity .col-default-m{width:12%}#table-annuity .col-default-l{width:16%}#table-annuity .col-action{width:10%}#table-annuity .icon-warning{text-align:center!important;color:#ff6d00c7!important}@media screen and (max-width:612px){#table-annuity .col-default-1,#table-annuity .col-default-2{width:16%}#table-annuity .col-default-3{width:26%}#table-annuity .col-icon{width:10%}#table-annuity .col-action{width:27%}}#main{display:-webkit-box;display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}#main form{height:100%}#main .footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;flex-shrink:0;margin-bottom:-18px}#main .footer-s-border{padding-left:7px;flex-shrink:0;margin-bottom:-18px}:host ::ng-deep .p-cell-editing{padding:0!important}:host ::ng-deep .full-width-input{width:100%!important;min-height:34px!important;padding:6px 12px!important}:host ::ng-deep .p-inputtext{width:100%;min-height:34px;padding:6px 12px}:host ::ng-deep .p-inputmask{width:100%;display:block}:host ::ng-deep .p-inputmask .p-inputmask-input{width:100%!important;min-height:34px!important;padding:6px 12px!important}:host ::ng-deep p-celleditor{width:100%}:host ::ng-deep p-celleditor .ui-fluid{width:100%;display:block;padding:0}:host ::ng-deep .p-error{margin-top:4px;font-size:12px}:host ::ng-deep .error-text{color:#f44336;display:block;margin-top:4px;font-size:.875em}"]
         })
     ], HistoricalPixAccountComponent);
     return HistoricalPixAccountComponent;
@@ -10428,6 +10847,7 @@ var HistoricalPixAccountFormComponent = /** @class */ (function (_super) {
         _this.sharedStateService = sharedStateService;
         _this.withSideBar = true;
         _this.isEditMode = false;
+        _this.showField = false;
         _this.visibleChange = new EventEmitter();
         _this.pixAccountItemToList = new EventEmitter();
         _this.ngUnsubscribe = new Subject();
@@ -10514,8 +10934,6 @@ var HistoricalPixAccountFormComponent = /** @class */ (function (_super) {
         this.visible = false;
     };
     HistoricalPixAccountFormComponent.prototype.addItem = function () {
-        this.pixAccountFormGroup.updateValueAndValidity();
-        verifyValidationsForm.call(this.pixAccountFormGroup);
         if (this.pixAccountFormGroup.valid) {
             if (this.employeeId) {
                 this.pixAccountFormGroup.get("employee").setValue({
@@ -10614,6 +11032,9 @@ var HistoricalPixAccountFormComponent = /** @class */ (function (_super) {
     __decorate([
         Input()
     ], HistoricalPixAccountFormComponent.prototype, "isEditMode", void 0);
+    __decorate([
+        Input()
+    ], HistoricalPixAccountFormComponent.prototype, "showField", void 0);
     __decorate([
         Output()
     ], HistoricalPixAccountFormComponent.prototype, "visibleChange", void 0);
@@ -10641,8 +11062,8 @@ var HistoricalPixAccountFormComponent = /** @class */ (function (_super) {
     HistoricalPixAccountFormComponent = __decorate([
         Component({
             selector: "pix-account",
-            template: "<div id=\"main\">\n    <form *ngIf=\"!(hideFields | async)\"  [formGroup]=\"pixAccountFormGroup\" autocomplete=\"off\">\n        <div class=\"ui-fluid\">\n            <div class=\"ui-g\">\n                <!-- Tipo de chave -->\n                <div class=\"ui-md-6 ui-sm-12 required\">\n                    <label>{{'hcm.payroll.employees_addition_pix_key_type'|translate}}</label>\n                    <input-rest-auto-complete-enum [dropdown]=\"true\" server=\"payroll\"\n                                                   enumeration=\"PixKeyType\"\n                                                   placeholder=\"{{'hcm.payroll.select' | translate}}\"\n                                                   name=\"pixKeyType\" [form]=\"pixAccountFormGroup\"\n                                                   (onSelect)=\"onChangePixKeyType($event)\"\n                                                   (onClear)=\"onClearPixKeyType()\"\n                                                   id=\"ta-pixKeyType\"></input-rest-auto-complete-enum>\n                    <s-control-errors [control]=\"pixAccountFormGroup.get('pixKeyType')\"\n                                      [errorMessages]=\"{\n                                        required: 'hcm.payroll.required' | translate,\n                                        pixKeyTypeBankAccountDuplicate: 'hcm.payroll.historical_pix_key_type_bank_account_duplicate' | translate\n                                    }\">\n                    </s-control-errors>\n                </div>\n                <!--Chave Pix-->\n                <div class=\"ui-md-6 ui-sm-12\" [ngClass]=\"{'required': pixKeyType !== 'BANK_ACCOUNT'}\">\n                    <label>{{'hcm.payroll.employees_addition_pix_key' | translate}}</label>\n                    <ng-container [ngSwitch]=\"pixKeyType\">\n                        <input *ngSwitchCase=\"'TELEPHONE'\" only-number\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                (keyup)=\"phoneMask($event)\" maxlength=\"15\"\n                                placeholder=\"(__) ____-____\">\n                        <p-inputMask *ngSwitchCase=\"'CPF'\"\n                                id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                placeholder=\"___.___.___-__\"\n                                mask=\"999.999.999-99\" [unmask]=\"true\"></p-inputMask>\n                        <p-inputMask *ngSwitchCase=\"'CNPJ'\"\n                                id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                placeholder=\"__.___.___/____-__\"\n                                mask=\"99.999.999/9999-99\" [unmask]=\"true\"></p-inputMask>\n                        <input *ngSwitchCase=\"'EMAIL'\"\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                placeholder=\"{{'hcm.payroll.employees_addition_email'|translate}}\"/>\n                        <input *ngSwitchCase=\"'BANK_ACCOUNT'\" disabled\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"/>\n                        <input *ngSwitchDefault\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\" maxlength=\"100\" />\n                    </ng-container>\n                    <s-control-errors *ngIf=\"isShowPixKeyFieldValidatorMessage\" id=\"er-pix-key\"\n                        [control]=\"pixAccountFormGroup.get('pixKey')\"\n                        [errorMessages]=\"{\n                            required: 'hcm.payroll.required' | translate,\n                            invalidPhoneNumber: 'hcm.payroll.employees_addition_invalid_phone_number' | translate: { value: pixAccountFormGroup.get('pixKey').value },\n                            invalidEmail: 'hcm.payroll.employees_addition_email_invalid' | translate,\n                            cpfNotValid: 'hcm.payroll.employees_addition_cpf_error' | translate,\n                            cnpjNotValid: 'hcm.payroll.employees_addition_cnpj_error' | translate\n                        }\">\n                    </s-control-errors>\n                </div>\n                <!--Percentual-->\n                <div class=\"ui-md-6 ui-sm-12 required\">\n                    <label id=\"lb-percentage\"\n                           for=\"ff-percentage\">{{ 'hcm.payroll.historical_bank_account_label_percentage' | translate }}</label>\n                    <div class=\"ui-inputgroup\">\n                        <span class=\"ui-inputgroup-addon\">%</span>\n                        <input pInputText id=\"ff-percentage\" name=\"percentage\"\n                               formControlName=\"percentage\"\n                               currencyMask\n                               [options]=\"optionsPercentage\"\n                               [placeholder]=\"percentagePlaceholder\"/>\n                    </div>\n                    <s-control-errors [control]=\"pixAccountFormGroup.get('percentage')\"\n                                      [errorMessages]=\"{\n                                required: 'hcm.payroll.required' | translate,\n                                maxlength: 'hcm.payroll.error_max_length' | translate: { value: '6' },\n                                max: 'hcm.payroll.error_max_value_number' | translate: { value: maxValuePercentage },\n                                min: 'hcm.payroll.error_min_value_number' | translate: { value: '0,01' }\n                    }\">\n                    </s-control-errors>\n                </div>\n                <div class=\"ui-g-12\">\n                    <p-fieldset\n                        legend=\"{{ 'hcm.payroll.custom_fields' | translate }}\"\n                        [attr.data-hidden]=\"!customFields || !customFields.fields.length\"\n                    >\n                        <s-custom-fields\n                            domain=\"hcm\"\n                            service=\"{{customService}}\"\n                            entity=\"{{customEntity}}\"\n                            formControlName=\"customFields\"\n                            [invalidErrorLabel]=\"'hcm.payroll.employees_invalid_field' | translate\"\n                        >\n                        </s-custom-fields>\n                    </p-fieldset>\n                </div>\n            </div>\n        </div>\n    </form>\n\n    <div [ngClass]=\"withSideBar ? 'footer' : 'footer-s-border'\">\n        <div class=\"form-group\">\n                <s-button id=\"btn-save\" label=\"{{ labelBtnAdd | translate}}\" priority=\"primary\"\n                          (onClick)=\"addItem()\" *ngIf=\"visibleBtnSave && !this.isView\"></s-button>\n                <s-button *ngIf=\"withSideBar\" id=\"btn-close\" label=\"{{'hcm.payroll.cancel'|translate}}\" priority=\"secondary\"\n                          priority=\"link\" (onClick)=\"close()\"></s-button>\n        </div>\n    </div>\n</div>\n",
-            styles: [".refresh{width:100%!important}#table-annuity .col-default-s{width:10%}#table-annuity .col-default-m{width:12%}#table-annuity .col-default-l{width:16%}#table-annuity .col-action{width:10%}#table-annuity .icon-warning{text-align:center!important;color:#ff6d00c7!important}@media screen and (max-width:612px){#table-annuity .col-default-1,#table-annuity .col-default-2{width:16%}#table-annuity .col-default-3{width:26%}#table-annuity .col-icon{width:10%}#table-annuity .col-action{width:27%}}#main{display:-webkit-box;display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}#main form{height:100%}#main .footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;flex-shrink:0;margin-bottom:-18px}#main .footer-s-border{padding-left:7px;flex-shrink:0;margin-bottom:-18px}"]
+            template: "<div id=\"main\">\n    <form *ngIf=\"showField || !(hideFields | async)\"  [formGroup]=\"pixAccountFormGroup\" autocomplete=\"off\">\n        <div class=\"ui-fluid\">\n            <div class=\"ui-g\">\n                <!-- Tipo de chave -->\n                <div class=\"ui-md-6 ui-sm-12 required\">\n                    <label>{{'hcm.payroll.employees_addition_pix_key_type'|translate}}</label>\n                    <input-rest-auto-complete-enum [dropdown]=\"true\" server=\"payroll\"\n                                                   enumeration=\"PixKeyType\"\n                                                   placeholder=\"{{'hcm.payroll.select' | translate}}\"\n                                                   name=\"pixKeyType\" [form]=\"pixAccountFormGroup\"\n                                                   (onSelect)=\"onChangePixKeyType($event)\"\n                                                   (onClear)=\"onClearPixKeyType()\"\n                                                   id=\"ta-pixKeyType\"></input-rest-auto-complete-enum>\n                    <s-control-errors [control]=\"pixAccountFormGroup.get('pixKeyType')\"\n                                      [errorMessages]=\"{\n                                        required: 'hcm.payroll.required' | translate,\n                                        pixKeyTypeBankAccountDuplicate: 'hcm.payroll.historical_pix_key_type_bank_account_duplicate' | translate\n                                    }\">\n                    </s-control-errors>\n                </div>\n                <!--Chave Pix-->\n                <div class=\"ui-md-6 ui-sm-12\" [ngClass]=\"{'required': pixKeyType !== 'BANK_ACCOUNT'}\">\n                    <label>{{'hcm.payroll.employees_addition_pix_key' | translate}}</label>\n                    <ng-container [ngSwitch]=\"pixKeyType\">\n                        <input *ngSwitchCase=\"'TELEPHONE'\" only-number\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                (keyup)=\"phoneMask($event)\" maxlength=\"15\"\n                                placeholder=\"(__) ____-____\">\n                        <p-inputMask *ngSwitchCase=\"'CPF'\"\n                                id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                placeholder=\"___.___.___-__\"\n                                mask=\"999.999.999-99\" [unmask]=\"true\"></p-inputMask>\n                        <p-inputMask *ngSwitchCase=\"'CNPJ'\"\n                                id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                placeholder=\"__.___.___/____-__\"\n                                mask=\"99.999.999/9999-99\" [unmask]=\"true\"></p-inputMask>\n                        <input *ngSwitchCase=\"'EMAIL'\"\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"\n                                placeholder=\"{{'hcm.payroll.employees_addition_email'|translate}}\"/>\n                        <input *ngSwitchCase=\"'BANK_ACCOUNT'\" disabled\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\"/>\n                        <input *ngSwitchDefault\n                                pInputText id=\"ta-pixKey\" name=\"pixKey\" formControlName=\"pixKey\" maxlength=\"100\" />\n                    </ng-container>\n                    <s-control-errors *ngIf=\"isShowPixKeyFieldValidatorMessage\" id=\"er-pix-key\"\n                        [control]=\"pixAccountFormGroup.get('pixKey')\"\n                        [errorMessages]=\"{\n                            required: 'hcm.payroll.required' | translate,\n                            invalidPhoneNumber: 'hcm.payroll.employees_addition_invalid_phone_number' | translate: { value: pixAccountFormGroup.get('pixKey').value },\n                            invalidEmail: 'hcm.payroll.employees_addition_email_invalid' | translate,\n                            cpfNotValid: 'hcm.payroll.employees_addition_cpf_error' | translate,\n                            cnpjNotValid: 'hcm.payroll.employees_addition_cnpj_error' | translate\n                        }\">\n                    </s-control-errors>\n                </div>\n                <!--Percentual-->\n                <div class=\"ui-md-6 ui-sm-12 required\">\n                    <label id=\"lb-percentage\"\n                           for=\"ff-percentage\">{{ 'hcm.payroll.historical_bank_account_label_percentage' | translate }}</label>\n                    <div class=\"ui-inputgroup\">\n                        <span class=\"ui-inputgroup-addon\">%</span>\n                        <input pInputText id=\"ff-percentage\" name=\"percentage\"\n                               formControlName=\"percentage\"\n                               currencyMask\n                               [options]=\"optionsPercentage\"\n                               [placeholder]=\"percentagePlaceholder\"/>\n                    </div>\n                    <s-control-errors [control]=\"pixAccountFormGroup.get('percentage')\"\n                                      [errorMessages]=\"{\n                                required: 'hcm.payroll.required' | translate,\n                                maxlength: 'hcm.payroll.error_max_length' | translate: { value: '6' },\n                                max: 'hcm.payroll.error_max_value_number' | translate: { value: maxValuePercentage },\n                                min: 'hcm.payroll.error_min_value_number' | translate: { value: '0,01' }\n                    }\">\n                    </s-control-errors>\n                </div>\n                <div class=\"ui-g-12\">\n                    <p-fieldset\n                        legend=\"{{ 'hcm.payroll.custom_fields' | translate }}\"\n                        [attr.data-hidden]=\"!customFields || !customFields.fields.length\"\n                    >\n                        <s-custom-fields\n                            domain=\"hcm\"\n                            service=\"{{customService}}\"\n                            entity=\"{{customEntity}}\"\n                            formControlName=\"customFields\"\n                            [invalidErrorLabel]=\"'hcm.payroll.employees_invalid_field' | translate\"\n                        >\n                        </s-custom-fields>\n                    </p-fieldset>\n                </div>\n            </div>\n        </div>\n    </form>\n\n    <div [ngClass]=\"withSideBar ? 'footer' : 'footer-s-border'\">\n        <div class=\"form-group\">\n                <s-button id=\"btn-save\" label=\"{{ labelBtnAdd | translate}}\" priority=\"primary\"\n                          (onClick)=\"addItem()\" *ngIf=\"visibleBtnSave && !this.isView\"></s-button>\n                <s-button *ngIf=\"withSideBar\" id=\"btn-close\" label=\"{{'hcm.payroll.cancel'|translate}}\" priority=\"secondary\"\n                          priority=\"link\" (onClick)=\"close()\"></s-button>\n        </div>\n    </div>\n</div>\n",
+            styles: [".refresh{width:100%!important}#table-annuity .col-default-s{width:10%}#table-annuity .col-default-m{width:12%}#table-annuity .col-default-l{width:16%}#table-annuity .col-action{width:10%}#table-annuity .icon-warning{text-align:center!important;color:#ff6d00c7!important}@media screen and (max-width:612px){#table-annuity .col-default-1,#table-annuity .col-default-2{width:16%}#table-annuity .col-default-3{width:26%}#table-annuity .col-icon{width:10%}#table-annuity .col-action{width:27%}}#main{display:-webkit-box;display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}#main form{height:100%}#main .footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;flex-shrink:0;margin-bottom:-18px}#main .footer-s-border{padding-left:7px;flex-shrink:0;margin-bottom:-18px}:host ::ng-deep .p-cell-editing{padding:0!important}:host ::ng-deep .full-width-input{width:100%!important;min-height:34px!important;padding:6px 12px!important}:host ::ng-deep .p-inputtext{width:100%;min-height:34px;padding:6px 12px}:host ::ng-deep .p-inputmask{width:100%;display:block}:host ::ng-deep .p-inputmask .p-inputmask-input{width:100%!important;min-height:34px!important;padding:6px 12px!important}:host ::ng-deep p-celleditor{width:100%}:host ::ng-deep p-celleditor .ui-fluid{width:100%;display:block;padding:0}:host ::ng-deep .p-error{margin-top:4px;font-size:12px}:host ::ng-deep .error-text{color:#f44336;display:block;margin-top:4px;font-size:.875em}"]
         })
     ], HistoricalPixAccountFormComponent);
     return HistoricalPixAccountFormComponent;
@@ -10732,10 +11153,13 @@ var HistoricalPixAccountListComponent = /** @class */ (function () {
         this.endPoint = "hcm/payroll/queries/historicalEmployeePixQuery";
         this.keyPayload = "historicalEmployeePix";
         this.withSidebar = true;
+        this.showActionsButtonOnAdd = false;
         this.isOnlyView = new EventEmitter();
         this.isOnlyEdit = new EventEmitter();
         this.enableView = new EventEmitter();
         this.isEditJudicialDependentPix = new EventEmitter();
+        this.isHideBtnAddForViewMode = new EventEmitter();
+        this.isShowActionsButton = new EventEmitter();
         this.ngUnsubscribe = new Subject();
         this.loading = true;
         this.columns = [
@@ -10776,16 +11200,21 @@ var HistoricalPixAccountListComponent = /** @class */ (function () {
                 command: function () {
                     if (_this.isAllowToViewHistorical) {
                         _this.sharedStateService.setHideField(true);
-                        _this.sharedStateService.setShowButton(false);
+                        _this.isShowActionsButton.emit(false);
                         _this.sharedStateService.setShowEditMode(false);
                         var dateChange = rowData && rowData.dateChange && moment$e(rowData.dateChange, _this.dateFormat).format("YYYY-MM-DD");
                         if (_this.withSidebar) {
                             _this.isOnlyView.emit(true);
+                            _this.isOnlyEdit.emit(false);
+                            _this.isHideBtnAddForViewMode.emit(true);
+                            _this.sharedStateService.setHideBtnAddForViewMode(true);
+                            _this.sharedStateService.setActiveHideOptionsOnView(true);
                             _this.router.navigate(["historical-pix-account/" + dateChange], {
                                 relativeTo: _this.activatedRoute,
                             });
                         }
                         else {
+                            _this.sharedStateService.setActiveHideOptionsOnView(true);
                             _this.sharedStateService.setSaveButton(false);
                             _this.enableView.emit(dateChange);
                         }
@@ -10800,15 +11229,21 @@ var HistoricalPixAccountListComponent = /** @class */ (function () {
                 command: function () {
                     if (_this.isAllowToEditHistorical) {
                         _this.sharedStateService.setHideField(true);
-                        _this.sharedStateService.setShowButton(false);
+                        _this.isShowActionsButton.emit(true);
                         _this.sharedStateService.setShowEditMode(true);
                         var dateChange = rowData && rowData.dateChange && moment$e(rowData.dateChange, _this.dateFormat).format("YYYY-MM-DD");
                         if (_this.withSidebar) {
+                            _this.isOnlyView.emit(false);
+                            _this.isOnlyEdit.emit(true);
+                            _this.isHideBtnAddForViewMode.emit(false);
+                            _this.sharedStateService.setHideBtnAddForViewMode(false);
+                            _this.sharedStateService.setActiveHideOptionsOnView(false);
                             _this.router.navigate(["historical-pix-account/" + dateChange], {
                                 relativeTo: _this.activatedRoute,
                             });
                         }
                         else {
+                            _this.sharedStateService.setActiveHideOptionsOnView(false);
                             setTimeout(function () {
                                 _this.sharedStateService.triggerActiveValidatorsOnEditModalOpen();
                             });
@@ -10998,6 +11433,9 @@ var HistoricalPixAccountListComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], HistoricalPixAccountListComponent.prototype, "hideField", void 0);
+    __decorate([
+        Input()
+    ], HistoricalPixAccountListComponent.prototype, "showActionsButtonOnAdd", void 0);
     __decorate([
         Output()
     ], HistoricalPixAccountListComponent.prototype, "isOnlyView", void 0);
@@ -11010,6 +11448,12 @@ var HistoricalPixAccountListComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], HistoricalPixAccountListComponent.prototype, "isEditJudicialDependentPix", void 0);
+    __decorate([
+        Output()
+    ], HistoricalPixAccountListComponent.prototype, "isHideBtnAddForViewMode", void 0);
+    __decorate([
+        Output()
+    ], HistoricalPixAccountListComponent.prototype, "isShowActionsButton", void 0);
     __decorate([
         Input()
     ], HistoricalPixAccountListComponent.prototype, "hideFieldsOnAdd$", null);