tnx-shared 5.0.58 → 5.0.60

package/bundles/tnx-shared.umd.js

@@ -3702,6 +3702,7 @@
             _this.prefix = '';
             _this.suffix = '';
             _this.decimalPlaces = 2;
+            _this.thousandSeperator = '.';
             for (var key in init) {
                 _this[key] = init[key];
             }
@@ -11179,25 +11180,37 @@
                 });
             });
         };
+        DataListBase.prototype.validateEdit = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
         DataListBase.prototype._edit = function (rowData, scopeDataEdit) {
             if (scopeDataEdit === void 0) { scopeDataEdit = {}; }
             return __awaiter(this, void 0, void 0, function () {
-                var flashShow;
+                var resultValidate, flashShow;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
+                        case 0: return [4 /*yield*/, this.validateEdit(rowData)];
+                        case 1:
+                            resultValidate = _a.sent();
+                            if (!resultValidate) {
+                                return [2 /*return*/];
+                            }
                             flashShow = rowData[KeyFlashShow];
                             delete rowData[KeyFlashShow];
                             this.formModel.formState = exports.FormState.EDIT;
                             return [4 /*yield*/, this.beforeEdit()];
-                        case 1:
+                        case 2:
                             _a.sent();
                             this.setting.popupHeader = "C\u1EADp nh\u1EADt " + this.setting.objectName;
                             this.setting.maskClass = flashShow ? 'hide' : null;
                             this.scopeDataEdit = scopeDataEdit;
                             this.formModel.data = this.cloneData(rowData);
                             return [4 /*yield*/, this.modifyEditModel(rowData)];
-                        case 2:
+                        case 3:
                             _a.sent();
                             this.formModel.data[KeyFlashShow] = flashShow;
                             this.showDetailForm = true;
@@ -11228,34 +11241,56 @@
         DataListBase.prototype.getPromiseDeleteItem = function (rowData) {
             return this.setting.baseService.delete(rowData.id);
         };
+        DataListBase.prototype.validateDelete = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
         DataListBase.prototype._delete = function (rowData) {
-            var _this = this;
-            if (rowData.__disableDelete) {
-                return;
-            }
-            this._notifierService.showDeleteConfirm().then(function (rs) {
-                if (!rs) {
-                    return;
-                }
-                if (_this.setting.baseService) {
-                    _this.getPromiseDeleteItem(rowData)
-                        .then(function (response) {
-                        if (response.success) {
-                            if (_this.setting.showVersionButton) {
-                                _this.context.fireEvent(ComCtxConstants.COMMON.RELOAD_DATA_VERSION, {}, true);
+            return __awaiter(this, void 0, void 0, function () {
+                var resultValidate;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (rowData.__disableDelete) {
+                                return [2 /*return*/];
                             }
-                            else {
-                                _this._triggerProcessData();
+                            return [4 /*yield*/, this.validateDelete(rowData)];
+                        case 1:
+                            resultValidate = _a.sent();
+                            if (!resultValidate) {
+                                return [2 /*return*/];
                             }
-                            _this._notifierService.showDeleteDataSuccess();
-                        }
-                        else {
-                            _this._notifierService.showWarningByReponse(response);
-                        }
-                    }, function (error) {
-                        _this._notifierService.showDeleteDataError();
-                    });
-                }
+                            this._notifierService.showDeleteConfirm().then(function (rs) {
+                                if (!rs) {
+                                    return;
+                                }
+                                if (_this.setting.baseService) {
+                                    _this.getPromiseDeleteItem(rowData)
+                                        .then(function (response) {
+                                        if (response.success) {
+                                            if (_this.setting.showVersionButton) {
+                                                _this.context.fireEvent(ComCtxConstants.COMMON.RELOAD_DATA_VERSION, {}, true);
+                                            }
+                                            else {
+                                                _this._triggerProcessData();
+                                            }
+                                            _this._notifierService.showDeleteDataSuccess();
+                                        }
+                                        else {
+                                            _this._notifierService.showWarningByReponse(response);
+                                        }
+                                    }, function (error) {
+                                        _this._notifierService.showDeleteDataError();
+                                    });
+                                }
+                            });
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
         DataListBase.prototype.getPromiseDeleteItems = function (items) {
@@ -16995,7 +17030,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\" style=\"padding: 0.5rem 0.5rem 0\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngIf=\"!isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"labelValueViewMode; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #labelValueViewMode let-data=\"data\" let-control=\"control\" let-path=\"path\" let-parentPath=\"parentPath\"\r\n    let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} type-{{control.dataType}} view-mode\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel && control.label\">\r\n            <label [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}<span *ngIf=\"control.required\"\r\n                    class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container *ngIf=\"data[control.field] === null || data[control.field] === undefined\">\r\n            <span class=\"no-value\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!(data[control.field] === null || data[control.field] === undefined)\">\r\n            <ng-container [ngSwitch]=\"control.dataType\">\r\n                <ng-container *ngSwitchCase=\"'container'\">\r\n                    <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                        [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                        <ng-container *ngFor=\"let subControl of control.controls\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"labelValueViewMode; context: {control: subControl, data: data[control.field], showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                    <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\"\r\n                        [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\r\n                        [maxFileSize]=\"control.maxFileSize\"\r\n                        [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                        [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                        [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                        [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                        [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                        [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [readonly]=\"true\">\r\n                    </file-manager>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'fileUpload'\">\r\n                    <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                        [maxFileSize]=\"control.maxFileSize\"\r\n                        [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                        [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                        [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                        [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                        [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                        [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [readonly]=\"true\"\r\n                        [accept]=\"control.accept\">\r\n                    </file-upload>\r\n                </span>\r\n                <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                    <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                        [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\">\r\n                    </service-file-upload>\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'label'\">\r\n                    <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\"\r\n                        [attr.label-index]=\"control.indexLabel\" [pTooltip]=\"control.title\" tooltipPosition=\"top\"\r\n                        tooltipStyleClass=\"wrap\" [escape]=\"false\" [for]=\"control.for\">{{control.text |\r\n                        translate}}</label>\r\n                    <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n                        [attr.label-index]=\"control.indexLabel\"></label>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'text'\">\r\n                    {{data[control.field]}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'money'\">\r\n                    {{data[control.field] | number}} VN\u0110\r\n                </span>\r\n                <span *ngSwitchCase=\"'date'\">\r\n                    {{data[control.field] | date:'dd/MM/yyyy'}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'datetime'\">\r\n                    {{_crudService.renderDateTime(data[control.field], control.format)}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'user'\">\r\n                    {{data[control.field] | userFormat | async}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'hasDataSource'\">\r\n                    <span *ngIf=\"!control.freeText\">\r\n                        {{getItemInArrayByValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field], control)}}\r\n                    </span>\r\n                    <span *ngIf=\"control.freeText\">\r\n                        {{getItemInArrayByTextValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field])}}\r\n                    </span>\r\n                </span>\r\n                <span *ngSwitchCase=\"'colorPicker'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.field]}\">\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                    <span *ngIf=\"!control.ishtml\">{{data[control.sourceField]}}</span>\r\n                    <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.sourceField]\"></span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'colorControl'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\">\r\n                </span>\r\n                <span *ngSwitchCase=\"'boolean'\">\r\n                    <i class=\"{{data[control.field] | booleanFormat}}\"></i>\r\n                </span>\r\n                <span *ngSwitchCase=\"'html'\">\r\n                    <div [innerHTML]=\"data[control.field]\" *ngIf=\"data[control.field]==null?'':data[control.field]\">\r\n                    </div>\r\n                </span>\r\n                <span *ngSwitchCase=\"'mask'\">\r\n                    <tn-mask [viewMode]=\"true\" [prefix]=\"control.prefix\" [suffix]=\"control.suffix\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [decimalPlaces]=\"control.decimalPlaces\"\r\n                        [maskType]=\"control.maskType\" [(ngModel)]=\"data[control.field]\" [min]=\"control.min\"\r\n                        [max]=\"control.max\">\r\n                    </tn-mask>\r\n                </span>\r\n                <span *ngSwitchCase=\"'address'\">\r\n                    <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\" [viewMode]=\"true\"\r\n                        [(data)]=\"data[control.field]\">\r\n                    </address-picker>\r\n                </span>\r\n                <span *ngSwitchCase=\"'numberrange'\">\r\n                    <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\" [maskType]=\"control.maskType\"\r\n                        [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\">\r\n                    </tn-number-picker-range>\r\n                </span>\r\n                <span *ngSwitchCase=\"'string'\">{{data[control.field]}}</span>\r\n                <span *ngSwitchCase=\"'button'\">\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'table'\">\r\n                    <div [class]=\"control.class\">\r\n                        <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                            <p-table [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\"\r\n                                [responsive]=\"true\" class=\"new-table scr-table table-control\">\r\n                                <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                    pTemplate=\"header\" let-columns>\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                    </ng-container>\r\n                                </ng-template>\r\n                                <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader  + control.field)\"\r\n                                    pTemplate=\"header\" let-columns>\r\n                                    <tr>\r\n                                        <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 2.5rem\">\r\n                                            {{ 'TT' |translate}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                        <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                            <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                                [pTooltip]=\"subControl.fullLabel || subControl.label\"\r\n                                                tooltipPosition=\"top\" [style.width]=\"subControl.width\"\r\n                                                style=\"text-align: center;\">\r\n                                                {{subControl.label}}\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                    <tr>\r\n                                        <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                            *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                            <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</span>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                        <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                            <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                                class=\"control-inside\" [style]=\"subControl.style\">\r\n                                                <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"labelValueViewMode; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </tn-custom-scrollbar>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    <ng-container [ngTemplateOutlet]=\"getComponentByType(control.viewModedataType)\"\r\n                        [ngTemplateOutletContext]=\"{data: data, control: control, isViewMode: true}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                        pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                    [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    [(ngModel)]=\"data[control.field]\" (onFocus)=\"onFocusTextControl($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText type=\"tel\" [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (focus)=\"onFocusTextControl($event)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    type=\"tel\" pInputText [(ngModel)]=\"data[control.field]\" (focus)=\"onFocusTextControl($event)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea (focus)=\"onFocusTextControl($event)\" [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [readonly]=\"control.disabled\"\r\n                    [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager>\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </service-file-upload>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [(ngModel)]=\"data[control.field]\" [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.checkboxLabel ? control.checkboxLabel : control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [parentPath]=\"parentPath\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </vanban-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\" [responsive]=\"true\"\r\n                            class=\"new-table scr-table table-control\" [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 2.5rem\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            [style.width]=\"subControl.width\" style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\"\r\n                                        [style.width]=\"getTableFunctionColumnWidth(control)\"\r\n                                        class=\"table-function column-function\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                        *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                        <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                            </ng-container>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td style=\"text-align:center\" *ngIf=\"control.showFunction\" class=\"column-function\">\r\n                                        <div class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n                                                [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-pencil\"\r\n                                                [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-danger\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                            <!-- <button *ngFor=\"let bt of control.rowButtons\" type=\"button\" pButton\r\n                                                [class]=\"bt.class\" [icon]=\"bt.icon\" [pTooltip]=\"bt.label | translate\"\r\n                                                tooltipPosition=\"top\" style=\"width: 2.143em;\"\r\n                                                (click)=\"messageRow(ri, control, path)\"></button> -->\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form>\r\n</tn-dialog>\r\n",
+                    template: "<div [class]=\"_styleClass\" style=\"padding: 0.5rem 0.5rem 0\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngIf=\"!isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"labelValueViewMode; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #labelValueViewMode let-data=\"data\" let-control=\"control\" let-path=\"path\" let-parentPath=\"parentPath\"\r\n    let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} type-{{control.dataType}} view-mode\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel && control.label\">\r\n            <label [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}<span *ngIf=\"control.required\"\r\n                    class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container *ngIf=\"data[control.field] === null || data[control.field] === undefined\">\r\n            <span class=\"no-value\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!(data[control.field] === null || data[control.field] === undefined)\">\r\n            <ng-container [ngSwitch]=\"control.dataType\">\r\n                <ng-container *ngSwitchCase=\"'container'\">\r\n                    <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                        [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                        <ng-container *ngFor=\"let subControl of control.controls\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"labelValueViewMode; context: {control: subControl, data: data[control.field], showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                    <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\"\r\n                        [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\r\n                        [maxFileSize]=\"control.maxFileSize\"\r\n                        [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                        [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                        [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                        [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                        [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                        [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [readonly]=\"true\">\r\n                    </file-manager>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'fileUpload'\">\r\n                    <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                        [maxFileSize]=\"control.maxFileSize\"\r\n                        [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                        [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                        [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                        [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                        [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                        [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [readonly]=\"true\"\r\n                        [accept]=\"control.accept\">\r\n                    </file-upload>\r\n                </span>\r\n                <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                    <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                        [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\">\r\n                    </service-file-upload>\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'label'\">\r\n                    <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\"\r\n                        [attr.label-index]=\"control.indexLabel\" [pTooltip]=\"control.title\" tooltipPosition=\"top\"\r\n                        tooltipStyleClass=\"wrap\" [escape]=\"false\" [for]=\"control.for\">{{control.text |\r\n                        translate}}</label>\r\n                    <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n                        [attr.label-index]=\"control.indexLabel\"></label>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'text'\">\r\n                    {{data[control.field]}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'money'\">\r\n                    {{data[control.field] | number}} VN\u0110\r\n                </span>\r\n                <span *ngSwitchCase=\"'date'\">\r\n                    {{data[control.field] | date:'dd/MM/yyyy'}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'datetime'\">\r\n                    {{_crudService.renderDateTime(data[control.field], control.format)}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'user'\">\r\n                    {{data[control.field] | userFormat | async}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'hasDataSource'\">\r\n                    <span *ngIf=\"!control.freeText\">\r\n                        {{getItemInArrayByValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field], control)}}\r\n                    </span>\r\n                    <span *ngIf=\"control.freeText\">\r\n                        {{getItemInArrayByTextValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field])}}\r\n                    </span>\r\n                </span>\r\n                <span *ngSwitchCase=\"'colorPicker'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.field]}\">\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                    <span *ngIf=\"!control.ishtml\">{{data[control.sourceField]}}</span>\r\n                    <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.sourceField]\"></span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'colorControl'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\">\r\n                </span>\r\n                <span *ngSwitchCase=\"'boolean'\">\r\n                    <i class=\"{{data[control.field] | booleanFormat}}\"></i>\r\n                </span>\r\n                <span *ngSwitchCase=\"'html'\">\r\n                    <div [innerHTML]=\"data[control.field]\" *ngIf=\"data[control.field]==null?'':data[control.field]\">\r\n                    </div>\r\n                </span>\r\n                <span *ngSwitchCase=\"'mask'\">\r\n                    <tn-mask [viewMode]=\"true\" [prefix]=\"control.prefix\" [suffix]=\"control.suffix\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [decimalPlaces]=\"control.decimalPlaces\"\r\n                        [maskType]=\"control.maskType\" [thousandSeperator]=\"control.thousandSeperator\" [(ngModel)]=\"data[control.field]\" [min]=\"control.min\"\r\n                        [max]=\"control.max\">\r\n                    </tn-mask>\r\n                </span>\r\n                <span *ngSwitchCase=\"'address'\">\r\n                    <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\" [viewMode]=\"true\"\r\n                        [(data)]=\"data[control.field]\">\r\n                    </address-picker>\r\n                </span>\r\n                <span *ngSwitchCase=\"'numberrange'\">\r\n                    <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\" [maskType]=\"control.maskType\"\r\n                        [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\">\r\n                    </tn-number-picker-range>\r\n                </span>\r\n                <span *ngSwitchCase=\"'string'\">{{data[control.field]}}</span>\r\n                <span *ngSwitchCase=\"'button'\">\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'table'\">\r\n                    <div [class]=\"control.class\">\r\n                        <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                            <p-table [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\"\r\n                                [responsive]=\"true\" class=\"new-table scr-table table-control\">\r\n                                <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                    pTemplate=\"header\" let-columns>\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                    </ng-container>\r\n                                </ng-template>\r\n                                <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader  + control.field)\"\r\n                                    pTemplate=\"header\" let-columns>\r\n                                    <tr>\r\n                                        <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 2.5rem\">\r\n                                            {{ 'TT' |translate}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                        <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                            <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                                [pTooltip]=\"subControl.fullLabel || subControl.label\"\r\n                                                tooltipPosition=\"top\" [style.width]=\"subControl.width\"\r\n                                                style=\"text-align: center;\">\r\n                                                {{subControl.label}}\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                    <tr>\r\n                                        <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                            *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                            <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</span>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                        <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                            <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                                class=\"control-inside\" [style]=\"subControl.style\">\r\n                                                <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"labelValueViewMode; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </tn-custom-scrollbar>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    <ng-container [ngTemplateOutlet]=\"getComponentByType(control.viewModedataType)\"\r\n                        [ngTemplateOutletContext]=\"{data: data, control: control, isViewMode: true}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                        pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                    [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\" [thousandSeperator]=\"control.thousandSeperator\"\r\n                    [(ngModel)]=\"data[control.field]\" (onFocus)=\"onFocusTextControl($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText type=\"tel\" [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (focus)=\"onFocusTextControl($event)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    type=\"tel\" pInputText [(ngModel)]=\"data[control.field]\" (focus)=\"onFocusTextControl($event)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea (focus)=\"onFocusTextControl($event)\" [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [readonly]=\"control.disabled\"\r\n                    [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager>\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </service-file-upload>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [(ngModel)]=\"data[control.field]\" [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.checkboxLabel ? control.checkboxLabel : control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [parentPath]=\"parentPath\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </vanban-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\" [responsive]=\"true\"\r\n                            class=\"new-table scr-table table-control\" [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 2.5rem\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            [style.width]=\"subControl.width\" style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\"\r\n                                        [style.width]=\"getTableFunctionColumnWidth(control)\"\r\n                                        class=\"table-function column-function\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                        *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                        <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                            </ng-container>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td style=\"text-align:center\" *ngIf=\"control.showFunction\" class=\"column-function\">\r\n                                        <div class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\"\r\n                                                [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-pencil\"\r\n                                                [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-danger\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                            <!-- <button *ngFor=\"let bt of control.rowButtons\" type=\"button\" pButton\r\n                                                [class]=\"bt.class\" [icon]=\"bt.icon\" [pTooltip]=\"bt.label | translate\"\r\n                                                tooltipPosition=\"top\" style=\"width: 2.143em;\"\r\n                                                (click)=\"messageRow(ri, control, path)\"></button> -->\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form>\r\n</tn-dialog>\r\n",
                     providers: [ComponentContextService],
                     styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;padding-left:.2em;padding-top:.3em;position:absolute}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;color:#495057;display:flex;font-weight:600;padding:.5em}::ng-deep .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}.show-in-box{border:1px solid #ced4da;border-radius:5px}.not-show-in-box{padding:0}.view-mode div.label{padding-bottom:3px}.view-mode div.label label{font-size:.85em;font-weight:700}.view-mode>span:not(:empty){display:inline-block;padding:5px 0;width:100%}.view-mode.type-table div.label+div{padding:5px 0}td>.view-mode{display:inline-block;padding:.25rem .5rem}td>.view-mode .view-mode{padding:0}.crud-form-control div[role=checkbox-alone]{margin-top:24px}.crud-form-control div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control .label+div[role=checkbox-alone]{margin-top:11px}.crud-form-control.type-table div[role=checkbox-alone]{margin-top:6px;text-align:center}.crud-form-control.type-table div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control.type-table div[role=checkbox-alone].align-left{text-align:left}.crud-form-control.type-title{border-bottom:1px solid #cfcfcf;color:#025ba7;font-size:1.2rem;font-weight:700;padding:10px 0 10px 5px;text-transform:uppercase}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{color:#6c757d;font-size:.8rem;margin-bottom:5px;margin-left:10px}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{font-size:.9em;height:1.15em;margin-bottom:5px}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{animation:shrink .1s;min-height:20px;overflow:visible;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{animation:fadeIn .1s;color:red;display:flex;font-size:.9em;position:relative}::ng-deep .crud-form-control>.error-container .error-item .error-content i{display:flex;font-size:.9em;padding-top:1px}::ng-deep .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep .crud-form-control.no-label>div.label{display:none}::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error select,::ng-deep .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}:host ::ng-deep .tox-tinymce{border:none;border-top:1px solid #ccc;overflow:unset}:host ::ng-deep .tox-tinymce .tox-editor-container{overflow:unset}:host ::ng-deep .tox-tinymce .tox-toolbar{border:1px solid #ccc;border-bottom:none}:host ::ng-deep .tox-tinymce .tox-edit-area{border:1px solid #ccc}:host ::ng-deep .tox-tinymce .tox-edit-area iframe{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}:host ::ng-deep .tox-tinymce .tox-menubar{border:1px solid #ccc}:host ::ng-deep .tox .tox-edit-area.tinymce-focus{border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px 0 #66afe9;transition:box-shadow .3s,border-color .3s;transition-delay:0s,0s;transition-duration:.3s,.3s;transition-property:box-shadow,border-color;transition-timing-function:ease,ease}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{display:block;margin-bottom:40px}"]
                 },] }
@@ -18178,7 +18213,7 @@
                                     this.onSaved.emit();
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    this.handleInsertError();
+                                    this.handleInsertError(response);
                                     _a.label = 3;
                                 case 3: return [2 /*return*/];
                             }
@@ -18198,7 +18233,7 @@
         DataFormBase.prototype.getPromiseActionInsert = function () {
             return this.setting.baseService.post(this.model.data, this.insertPlusUrl);
         };
-        DataFormBase.prototype.handleInsertError = function () {
+        DataFormBase.prototype.handleInsertError = function (response) {
         };
         DataFormBase.prototype.onUpdate = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -18219,7 +18254,7 @@
                                     this.onSaved.emit();
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    this.handleUpdateError();
+                                    this.handleUpdateError(response);
                                     _a.label = 3;
                                 case 3: return [2 /*return*/];
                             }
@@ -18236,7 +18271,7 @@
                 });
             });
         };
-        DataFormBase.prototype.handleUpdateError = function () {
+        DataFormBase.prototype.handleUpdateError = function (response) {
         };
         DataFormBase.prototype.getPromiseActionUpdate = function () {
             return this.setting.baseService.put(this.model.data.id.toString(), this.model.data, this.updatePlusUrl);
@@ -28207,7 +28242,7 @@
                         var e_5, _b;
                         var _loop_4 = function (item) {
                             this_2.transform(col.pipe, col.asyncPipe, item[col.field]).then(function (rs) {
-                                item["pipe__" + col.field + " "] = rs;
+                                item["pipe__" + col.field] = rs;
                             });
                         };
                         try {
@@ -34690,9 +34725,11 @@
             this.decimalPlaces = 2;
             this.viewMode = false;
             this.inputStyleClass = '';
+            this.thousandSeperator = '.';
             this.onFocus = new i0.EventEmitter();
             this.onBlur = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
+            this.locale = 'vi-VN';
         }
         Object.defineProperty(MaskComponent.prototype, "placeholder", {
             set: function (value) {
@@ -34704,10 +34741,11 @@
             configurable: true
         });
         MaskComponent.prototype.ngOnInit = function () {
+            this.locale = this.thousandSeperator == '.' ? 'vi-VN' : 'en-US';
         };
         MaskComponent.prototype.writeValue = function (obj) {
             if (obj) {
-                this.model = this._numberPipe.transform(obj, '', 'vi-VN');
+                this.model = this._numberPipe.transform(obj, '', this.locale);
                 this.value = Number(this.model);
             }
             else if (obj === 0) {
@@ -34725,7 +34763,7 @@
             return 'separator.0';
         };
         MaskComponent.prototype.getThousandSeperator = function () {
-            return '.';
+            return this.thousandSeperator || '.';
         };
         MaskComponent.prototype.handleFocus = function () {
             this.onFocus.emit(this.value);
@@ -34757,7 +34795,7 @@
             }
         };
         MaskComponent.prototype.numberToStringVN = function (number) {
-            return this._numberPipe.transform(number, '', 'vi-VN');
+            return this._numberPipe.transform(number, '', this.locale);
         };
         MaskComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -34802,6 +34840,7 @@
         decimalPlaces: [{ type: i0.Input }],
         viewMode: [{ type: i0.Input }],
         inputStyleClass: [{ type: i0.Input }],
+        thousandSeperator: [{ type: i0.Input }],
         onFocus: [{ type: i0.Output }],
         onBlur: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
@@ -45309,8 +45348,10 @@
                 },] }
     ];
 
+    var moment$1 = moment___namespace;
     var TnDatePipe = /** @class */ (function () {
-        function TnDatePipe() {
+        function TnDatePipe(format) {
+            this.format = format;
         }
         TnDatePipe.prototype.addZero = function (value) {
             if (value < 10)
@@ -45320,6 +45361,8 @@
         TnDatePipe.prototype.transform = function (value, args) {
             if (value == null)
                 return '';
+            if (this.format)
+                return moment$1(value).format(this.format);
             var date = new Date(value);
             return this.addZero(date.getHours()) + ":" + this.addZero(date.getMinutes()) + ":" + this.addZero(date.getSeconds()) + ", Ng\u00E0y " + this.addZero(date.getDate()) + "/" + this.addZero(date.getMonth() + 1) + "/" + date.getFullYear();
         };
@@ -45329,7 +45372,10 @@
         { type: i0.Pipe, args: [{
                     name: 'tnDate'
                 },] }
-    ];
+    ];
+    TnDatePipe.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+    ]; };
 
     var UserFormatPipe = /** @class */ (function () {
         function UserFormatPipe(_userService) {