tnx-shared 5.1.398 → 5.1.401

package/bundles/tnx-shared.umd.js

@@ -6740,58 +6740,20 @@
             return result;
         };
         CrudService.prototype.deQuyReplaceValue = function (filters, filter, model, rootModel) {
-            var e_4, _a;
             var _this = this;
-            var valueFilter = null;
-            var sourceField = filter.sourceField;
-            var subField = filter.subField;
-            var tryGetBySubField = function (value) {
-                if (!subField)
-                    return value;
-                if (isArray(value))
-                    return value.map(function (q) { return q[subField]; });
-                if (isLiteralObject(value))
-                    return value[subField];
-                return value;
-            };
-            if (model.hasOwnProperty(sourceField)) {
-                valueFilter = tryGetBySubField(model[sourceField]);
-            }
-            else if (rootModel) {
-                if (rootModel.hasOwnProperty(sourceField)) {
-                    valueFilter = tryGetBySubField(rootModel[sourceField]);
-                }
-                else {
-                    var fields = sourceField.split('.');
-                    var temp = rootModel;
-                    try {
-                        for (var fields_1 = __values(fields), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
-                            var f = fields_1_1.value;
-                            if (temp.hasOwnProperty(f)) {
-                                temp = temp[f];
-                            }
-                            else {
-                                temp = null;
-                                break;
-                            }
-                        }
-                    }
-                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                    finally {
-                        try {
-                            if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
-                        }
-                        finally { if (e_4) throw e_4.error; }
-                    }
-                    valueFilter = tryGetBySubField(temp[subField]);
-                }
-            }
-            if (filter.logic == null && (valueFilter == null || valueFilter === '' || valueFilter.length == 0)) {
+            var valueFilter = this.getValueFilter(filter, model, rootModel);
+            if (filter.logic == null
+                && filter.operator !== exports.Operator.isNull
+                && filter.operator !== exports.Operator.isNotNull
+                && (valueFilter == null || valueFilter === '' || valueFilter.length == 0)) {
                 return;
             }
             var tmpFilter = new Filter(filter);
             delete tmpFilter.sourceField;
             if (filter.isArrayField) {
+                if (valueFilter == null) {
+                    return;
+                }
                 tmpFilter.filters = [];
                 tmpFilter.logic = 'or';
                 tmpFilter.value = null;
@@ -6799,23 +6761,79 @@
                     tmpFilter.filters.push(_this._commonService.newFilter(filter.field, exports.Operator.equal, val.toString()), _this._commonService.newFilter(filter.field, exports.Operator.startWith, val + ","), _this._commonService.newFilter(filter.field, exports.Operator.endWith, "," + val), _this._commonService.newFilter(filter.field, exports.Operator.contain, "," + val + ","));
                 });
                 filters.push(tmpFilter);
+                return;
+            }
+            // if (tmpFilter.funcGetValue) {
+            //     valueFilter = tmpFilter.funcGetValue(valueFilter);
+            // }
+            tmpFilter.value = JSON.stringify(valueFilter);
+            tmpFilter.filters = [];
+            if (filter.logic && filter.filters) {
+                filter.filters.forEach(function (f) { return _this.deQuyReplaceValue(tmpFilter.filters, f, model, rootModel); });
+                if (tmpFilter.filters.length > 0) {
+                    filters.push(tmpFilter);
+                }
             }
             else {
-                if (tmpFilter.funcGetValue) {
-                    valueFilter = tmpFilter.funcGetValue(valueFilter);
+                filters.push(tmpFilter);
+            }
+        };
+        CrudService.prototype.getValueFilter = function (filter, model, rootModel) {
+            var e_4, _a;
+            var sourceField = filter.sourceField;
+            var subField = filter.subField;
+            var tryGetBySubField = function (value) {
+                try {
+                    if (subField == null)
+                        return value;
+                    if (isArray(value)) {
+                        if (isNaN(subField)) {
+                            return value.map(function (x) { return x.subField; });
+                        }
+                        return value[subField];
+                    }
+                    if (isLiteralObject(value))
+                        return value[subField];
+                    return value;
                 }
-                tmpFilter.value = JSON.stringify(valueFilter);
-                tmpFilter.filters = [];
-                if (filter.logic && filter.filters) {
-                    filter.filters.forEach(function (f) { return _this.deQuyReplaceValue(tmpFilter.filters, f, model, rootModel); });
-                    if (tmpFilter.filters.length > 0) {
-                        filters.push(tmpFilter);
+                catch (ex) {
+                    console.log(ex);
+                    return null;
+                }
+            };
+            if (model.hasOwnProperty(sourceField)) {
+                return filter.funcGetValue != null
+                    ? filter.funcGetValue(model[sourceField])
+                    : tryGetBySubField(model[sourceField]);
+            }
+            if (rootModel) {
+                if (rootModel.hasOwnProperty(sourceField)) {
+                    return tryGetBySubField(rootModel[sourceField]);
+                }
+                var fields = sourceField.split('.');
+                var temp = rootModel;
+                try {
+                    for (var fields_1 = __values(fields), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
+                        var f = fields_1_1.value;
+                        if (temp.hasOwnProperty(f)) {
+                            temp = temp[f];
+                        }
+                        else {
+                            temp = null;
+                            break;
+                        }
                     }
                 }
-                else {
-                    filters.push(tmpFilter);
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
+                    }
+                    finally { if (e_4) throw e_4.error; }
                 }
+                return tryGetBySubField(temp[subField]);
             }
+            return null;
         };
         CrudService.prototype.getWorkflowCoreStatusText = function (workflowCoreStatusValue) {
             var item = DataSourceWorkflowCoreStatus.find(function (x) { return x.id == workflowCoreStatusValue; });
@@ -10225,9 +10243,6 @@
                 _this.getStaffInfo(userId).then(function (rs1) {
                     var mappedUser = _this.mapUserInfo(decoded, rs1, userId);
                     var userPublicInfo = _this.getUserPublicInfo(mappedUser);
-                    if ((!mappedUser.avatar || mappedUser.avatar == '') && mappedUser.gender != null) {
-                        mappedUser.avatar = mappedUser.gender == 0 ? _this.DEFAULT_AVATAR_FEMALE : _this.DEFAULT_AVATAR_MALE;
-                    }
                     localStorage.setItem(_this.CURRENT_USER_KEY, JSON.stringify(userPublicInfo));
                     rootContext.data.currentUser = mappedUser;
                     if (firstTimeLogin) {
@@ -10253,12 +10268,16 @@
             return this.mergePublicAndPrivateInfo(publicInfo, tokenInfo);
         };
         UserService.prototype.mergePublicAndPrivateInfo = function (userPublicInfo, infoFromToken) {
-            var _this = this;
             if (userPublicInfo == null || infoFromToken == null) {
                 return null;
             }
             var result = new TnUser();
-            this.addProperty(result, userPublicInfo);
+            this.mergePublicInfo(result, userPublicInfo);
+            this.mergeTokenInfo(result, infoFromToken);
+            return result;
+        };
+        UserService.prototype.mergeTokenInfo = function (result, infoFromToken) {
+            var _this = this;
             // mapping mot so truong trong token co key != trong TnUser
             var customProcess = function (destination, original, key) {
                 if (key === 'fullname') {
@@ -10278,7 +10297,17 @@
                 return false;
             };
             this.addProperty(result, infoFromToken, customProcess);
-            return result;
+        };
+        UserService.prototype.mergePublicInfo = function (result, userPublicInfo) {
+            var _this = this;
+            var customProcess = function (destination, original, key) {
+                if (key === 'avatar' && (original.avatar == null || original.avatar === '')) {
+                    destination.avatar = _this.getUserAvatar(original);
+                    return true;
+                }
+                return false;
+            };
+            this.addProperty(result, userPublicInfo, customProcess);
         };
         /**
          * function de map property tu destination => original
@@ -10377,33 +10406,42 @@
         };
         UserService.prototype.getStaffInfo = function (userId) {
             var _this = this;
-            var url = this.serviceUri + "/" + userId;
+            var url = this.serviceUri + "/ForLogin";
             return this._http
                 .get(url)
                 .pipe(operators.catchError(function (err) { return _this.handleError(err, _this._injector); }), operators.map(function (rs) {
-                var _a, _b;
+                var _a, _b, _c, _d, _e, _f, _g;
                 var op = new TnUser({
-                    fullName: rs.data ? rs.data.fullName : '',
-                    role: rs.data ? rs.data.role : '',
-                    avatar: rs.data ? rs.data.avatar : '',
-                    gender: rs.data ? rs.data.gender : 0,
-                    positionCode: rs.data.positionCode ? rs.data.positionCode : '',
-                    instanceid: rs.data.instanceid,
-                    firstName: (_a = rs.firstName) !== null && _a !== void 0 ? _a : '',
-                    lastName: (_b = rs.lastName) !== null && _b !== void 0 ? _b : '',
+                    fullName: '',
+                    role: 0,
+                    avatar: '',
+                    gender: 0,
+                    positionCode: '',
+                    instanceid: '',
+                    firstName: '',
+                    lastName: '',
                 });
-                if (!op.avatar || op.avatar == '') {
-                    if (op.gender == 0) {
-                        op.avatar = _this.DEFAULT_AVATAR_FEMALE;
-                    }
-                    else {
-                        op.avatar = _this.DEFAULT_AVATAR_MALE;
-                    }
-                }
+                if (rs.data) {
+                    op.fullName = (_a = rs.data.fullName) !== null && _a !== void 0 ? _a : '';
+                    op.role = (_b = rs.data.role) !== null && _b !== void 0 ? _b : '';
+                    op.avatar = (_c = rs.data.avatar) !== null && _c !== void 0 ? _c : '';
+                    op.gender = (_d = rs.data.gender) !== null && _d !== void 0 ? _d : 0;
+                    op.positionCode = (_e = rs.data.positionCode) !== null && _e !== void 0 ? _e : '';
+                    op.instanceid = rs.data.instanceid;
+                    op.firstName = (_f = rs.data.firstName) !== null && _f !== void 0 ? _f : '';
+                    op.lastName = (_g = rs.data.lastName) !== null && _g !== void 0 ? _g : '';
+                }
+                op.avatar = _this.getUserAvatar(op);
                 return op;
             }))
                 .toPromise();
         };
+        UserService.prototype.getUserAvatar = function (user) {
+            if (!user.avatar || user.avatar === '') {
+                return user.gender == 0 ? this.DEFAULT_AVATAR_MALE : this.DEFAULT_AVATAR_FEMALE;
+            }
+            return user.avatar;
+        };
         UserService.prototype.getId = function () {
             var storageItem = localStorage.getItem(this.CURRENT_USER_KEY);
             var user = JSON.parse(storageItem);
@@ -10445,8 +10483,8 @@
                 return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                     var svUrl, result, _a_1;
                     var _this = this;
-                    return __generator(this, function (_c) {
-                        switch (_c.label) {
+                    return __generator(this, function (_h) {
+                        switch (_h.label) {
                             case 0:
                                 if (!(userId == null)) return [3 /*break*/, 1];
                                 reject({});
@@ -10454,20 +10492,20 @@
                             case 1:
                                 if (!(userId > 0)) return [3 /*break*/, 5];
                                 svUrl = this.serviceUri + "/GetBasicUserInfo?id=" + userId;
-                                _c.label = 2;
+                                _h.label = 2;
                             case 2:
-                                _c.trys.push([2, 4, , 5]);
+                                _h.trys.push([2, 4, , 5]);
                                 return [4 /*yield*/, this._http.get(svUrl).pipe(operators.shareReplay(this.REPLAY_COUNT), operators.retry(this.RETRY_COUNT), operators.map(function (repsonse) {
                                         // save response to local storage here
                                         localStorage.setItem(_this.USER_INFO_KEY + '_' + repsonse.data.id, JSON.stringify(repsonse.data));
                                         return repsonse.data;
                                     }, operators.catchError(function (err) { return _this.handleError(err, _this._injector); }))).toPromise()];
                             case 3:
-                                result = _c.sent();
+                                result = _h.sent();
                                 resolve(result);
                                 return [3 /*break*/, 5];
                             case 4:
-                                _a_1 = _c.sent();
+                                _a_1 = _h.sent();
                                 reject({});
                                 return [3 /*break*/, 5];
                             case 5: return [2 /*return*/];
@@ -10518,7 +10556,7 @@
                 return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                     var svUrl;
                     var _this = this;
-                    return __generator(this, function (_c) {
+                    return __generator(this, function (_h) {
                         if (userName == null) {
                             resolve({});
                         }
@@ -10551,7 +10589,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var storageItem, userInfos, check, svUrl;
                 var _this = this;
-                return __generator(this, function (_c) {
+                return __generator(this, function (_h) {
                     storageItem = localStorage.getItem(this.USER_INFO_KEY);
                     userInfos = JSON.parse(storageItem);
                     check = userInfos ? userNames.indexOf(userInfos['userName']) > -1 : null;
@@ -15626,7 +15664,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\">\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\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                    control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, \r\n                    mdWidth: control.mdWidth, rowSpan: control.rowSpan\r\n                }\">\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 #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowSpan=\"rowSpan\" 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}} row-span-{{rowSpan}} {{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 [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\r\n                        [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\r\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\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\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (search)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\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]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    [placeholder]=\"control.placeholder\" [height]=\"control.height ? control.height : 250\"\r\n                    [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.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=\"'imageuploader'\">\r\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\r\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\r\n                    [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\r\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\r\n                            $implicit: files\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\r\n                            $implicit: file\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                </app-image-uploader>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\r\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\r\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\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]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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 [sharedFolderType]=\"control.sharedFolderType\" [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                    [readonly]=\"control.readonly\" [accept]=\"control.accept\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, 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                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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 [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.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)\" [binary]=\"true\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-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 *ngTemplateOutlet=\"customControl; context: {\r\n                            control: subControl, \r\n                            data: data[control.field], \r\n                            parentPath: path, \r\n                            rowIndex: rowIndex, \r\n                            path: path + '.' + subControl.field, \r\n                            showLabel: subControl.showLabel, \r\n                            mdWidth: subControl.mdWidth,\r\n                            rowSpan: subControl.rowSpan\r\n                        }\">\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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 [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\r\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list-new>\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\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\r\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'chips'\">\r\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </entity-picker>\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 class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\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\">\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=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\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\" [class]=\"rowData.class\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </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                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                                                    control: subControl,\r\n                                                    data: rowData,\r\n                                                    index: ri,\r\n                                                    tablePath: path,\r\n                                                    parentPath: path + '[' + ri + ']',\r\n                                                    path: path + '[' + ri + '].' + subControl.field,\r\n                                                    showLabel: false,\r\n                                                    mdWidth: 12,\r\n                                                    rowSpan: 1\r\n                                                }\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\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 *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            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 p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (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                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\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 *ngIf=\"control.showDialog\" 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 *ngIf=\"control.template\">\r\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\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            <div *ngIf=\"control.message\" class=\"control-message\">\r\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\r\n            </div>\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<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\r\n    (onHide)=\"tableFormDialogModel.showEditForm = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\r\n    </table-detail-form>\r\n</tn-dialog>",
+                    template: "<div [class]=\"_styleClass\">\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\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                    control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\r\n                    mdWidth: control.mdWidth, rowSpan: control.rowSpan\r\n                }\">\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 #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowSpan=\"rowSpan\" 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}} row-span-{{rowSpan}} {{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 [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\r\n                        [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\r\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\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\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (search)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\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]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    [placeholder]=\"control.placeholder\" [height]=\"control.height ? control.height : 250\"\r\n                    [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.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=\"'imageuploader'\">\r\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\r\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\r\n                    [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\r\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\r\n                            $implicit: files\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\r\n                            $implicit: file\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                </app-image-uploader>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\r\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\r\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\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]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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 [sharedFolderType]=\"control.sharedFolderType\" [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                    [readonly]=\"control.readonly\" [accept]=\"control.accept\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, 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                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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 [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.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)\" [binary]=\"true\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-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 *ngTemplateOutlet=\"customControl; context: {\r\n                            control: subControl,\r\n                            data: data[control.field],\r\n                            parentPath: path,\r\n                            rowIndex: rowIndex,\r\n                            path: path + '.' + subControl.field,\r\n                            showLabel: subControl.showLabel,\r\n                            mdWidth: subControl.mdWidth,\r\n                            rowSpan: subControl.rowSpan\r\n                        }\">\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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 [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\r\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list-new>\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\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.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                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\r\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'chips'\">\r\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </entity-picker>\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 class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\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\">\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=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\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\" [class]=\"rowData.class\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </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                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                                                    control: subControl,\r\n                                                    data: rowData,\r\n                                                    index: ri,\r\n                                                    tablePath: path,\r\n                                                    parentPath: path + '[' + ri + ']',\r\n                                                    path: path + '[' + ri + '].' + subControl.field,\r\n                                                    showLabel: false,\r\n                                                    mdWidth: 12,\r\n                                                    rowSpan: 1\r\n                                                }\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\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 *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            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 p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (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                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\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 *ngIf=\"control.showDialog\" 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 *ngIf=\"control.template\">\r\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\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            <div *ngIf=\"control.message\" class=\"control-message\">\r\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\r\n            </div>\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<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\r\n    (onHide)=\"tableFormDialogModel.showEditForm = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\r\n    </table-detail-form>\r\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{position:absolute}div.label .star-required,th>span.star-required{color:red;padding-left:.2em;padding-top:.3em}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}.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;margin-bottom:5px;padding:5px;text-transform:uppercase}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{color:#007eff;font-size:.8rem;font-weight:700;margin-bottom:5px;margin-left:10px}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}.no-value{font-size:.8em}@-webkit-keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@-webkit-keyframes shrink{0%{height:0}to{height:20px}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep crud-form .crud-form-control>div.label{font-size:.9rem;height:1.15em;margin-bottom:5px}::ng-deep crud-form .crud-form-control>div.label+*{width:100%}::ng-deep crud-form .crud-form-control>.error-container .error-item{-webkit-animation:shrink .1s;animation:shrink .1s;min-height:20px;overflow:visible;padding-top:5px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content{-webkit-animation:fadeIn .1s;animation:fadeIn .1s;color:red;display:flex;font-size:.9em;position:relative}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content i{display:flex;font-size:.9em;padding-top:1px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep crud-form .crud-form-control .control-message{font-size:.9rem;margin-top:5px}::ng-deep crud-form .crud-form-control .control-message .green{color:#00af00}::ng-deep crud-form .crud-form-control .control-message .red{color:red}::ng-deep crud-form .crud-form-control .control-message .blue{color:#0095ff}::ng-deep crud-form .crud-form-control.no-label>div.label{display:none}::ng-deep crud-form .crud-form-control.error .p-dropdown,::ng-deep crud-form .crud-form-control.error .p-inputtext,::ng-deep crud-form .crud-form-control.error .p-multiselect,::ng-deep crud-form .crud-form-control.error .tn-dropdown,::ng-deep crud-form .crud-form-control.error input,::ng-deep crud-form .crud-form-control.error select,::ng-deep crud-form .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep crud-form .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep crud-form .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}@media screen and (min-width:768px){::ng-deep crud-form .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}::ng-deep crud-form .grid .p-md-1{grid-column:span 1;width:unset}::ng-deep crud-form .grid .p-md-2{grid-column:span 2;width:unset}::ng-deep crud-form .grid .p-md-3{grid-column:span 3;width:unset}::ng-deep crud-form .grid .p-md-4{grid-column:span 4;width:unset}::ng-deep crud-form .grid .p-md-5{grid-column:span 5;width:unset}::ng-deep crud-form .grid .p-md-6{grid-column:span 6;width:unset}::ng-deep crud-form .grid .p-md-7{grid-column:span 7;width:unset}::ng-deep crud-form .grid .p-md-8{grid-column:span 8;width:unset}::ng-deep crud-form .grid .p-md-9{grid-column:span 9;width:unset}::ng-deep crud-form .grid .p-md-10{grid-column:span 10;width:unset}::ng-deep crud-form .grid .p-md-11{grid-column:span 11;width:unset}::ng-deep crud-form .grid .p-md-12{grid-column:span 12;width:unset}::ng-deep crud-form .grid .row-span-1{grid-row:span 1}::ng-deep crud-form .grid .row-span-2{grid-row:span 2}::ng-deep crud-form .grid .row-span-3{grid-row:span 3}::ng-deep crud-form .grid .row-span-4{grid-row:span 4}::ng-deep crud-form .grid .row-span-5{grid-row:span 5}::ng-deep crud-form .grid .row-span-6{grid-row:span 6}::ng-deep crud-form .grid .row-span-7{grid-row:span 7}::ng-deep crud-form .grid .row-span-8{grid-row:span 8}::ng-deep crud-form .grid .row-span-9{grid-row:span 9}::ng-deep crud-form .grid .row-span-10{grid-row:span 10}::ng-deep crud-form .grid .row-span-11{grid-row:span 11}::ng-deep crud-form .grid .row-span-12{grid-row:span 12}::ng-deep crud-form .grid .row-span-13{grid-row:span 13}::ng-deep crud-form .grid .row-span-14{grid-row:span 14}::ng-deep crud-form .grid .row-span-15{grid-row:span 15}::ng-deep crud-form .grid .row-span-16{grid-row:span 16}::ng-deep crud-form .grid .row-span-17{grid-row:span 17}::ng-deep crud-form .grid .row-span-18{grid-row:span 18}::ng-deep crud-form .grid .row-span-19{grid-row:span 19}::ng-deep crud-form .grid .row-span-20{grid-row:span 20}::ng-deep crud-form .grid .row-span-21{grid-row:span 21}::ng-deep crud-form .grid .row-span-22{grid-row:span 22}::ng-deep crud-form .grid .row-span-23{grid-row:span 23}::ng-deep crud-form .grid .row-span-24{grid-row:span 24}::ng-deep crud-form .grid .row-span-25{grid-row:span 25}::ng-deep crud-form .grid .row-span-26{grid-row:span 26}::ng-deep crud-form .grid .row-span-27{grid-row:span 27}::ng-deep crud-form .grid .row-span-28{grid-row:span 28}::ng-deep crud-form .grid .row-span-29{grid-row:span 29}::ng-deep crud-form .grid .row-span-30{grid-row:span 30}::ng-deep crud-form .grid .row-span-31{grid-row:span 31}::ng-deep crud-form .grid .row-span-32{grid-row:span 32}::ng-deep crud-form .grid .row-span-33{grid-row:span 33}::ng-deep crud-form .grid .row-span-34{grid-row:span 34}::ng-deep crud-form .grid .row-span-35{grid-row:span 35}::ng-deep crud-form .grid .row-span-36{grid-row:span 36}::ng-deep crud-form .grid .row-span-37{grid-row:span 37}::ng-deep crud-form .grid .row-span-38{grid-row:span 38}::ng-deep crud-form .grid .row-span-39{grid-row:span 39}::ng-deep crud-form .grid .row-span-40{grid-row:span 40}::ng-deep crud-form .grid .row-span-41{grid-row:span 41}::ng-deep crud-form .grid .row-span-42{grid-row:span 42}::ng-deep crud-form .grid .row-span-43{grid-row:span 43}::ng-deep crud-form .grid .row-span-44{grid-row:span 44}::ng-deep crud-form .grid .row-span-45{grid-row:span 45}::ng-deep crud-form .grid .row-span-46{grid-row:span 46}::ng-deep crud-form .grid .row-span-47{grid-row:span 47}::ng-deep crud-form .grid .row-span-48{grid-row:span 48}::ng-deep crud-form .grid .row-span-49{grid-row:span 49}::ng-deep crud-form .grid .row-span-50{grid-row:span 50}}: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}:host ::ng-deep .table-schema-paging{display:block;margin-bottom:40px}"]
                 },] }
@@ -22200,62 +22238,66 @@
                     else {
                         _this._notifierService.showWarning("Ch\u01B0a c\u1EA5u h\u00ECnh baseService ho\u1EB7c dataSource cho c\u1ED9t " + col.field + ": " + col.label);
                     }
+                    return;
                 }
-                else {
-                    if (col.dataType == exports.DataType.int || col.dataType == exports.DataType.decimal || col.dataType == exports.DataType.intWithoutMask || col.dataType == exports.DataType.currency) {
-                        templateFilter.push(new Filter({
-                            field: _this.getFieldFilter(col),
-                            operator: exports.Operator.greaterThanEqual,
-                            sourceField: col.field,
-                            subField: 0
-                        }), new Filter({
-                            field: _this.getFieldFilter(col),
-                            operator: exports.Operator.lowerThanEqual,
-                            sourceField: col.field,
-                            subField: 1
-                        }));
-                    }
-                    else if (col.dataType == exports.DataType.date || col.dataType == exports.DataType.datetime) {
-                        templateFilter.push(new Filter({
-                            field: _this.getFieldFilter(col),
-                            operator: exports.Operator.greaterThanEqual,
-                            sourceField: col.field,
-                            subField: 0,
-                            funcGetValue: function (item) {
-                                var date = new Date(item);
-                                return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-                                // return addDay(item, 1, -1);
-                            }
-                        }), new Filter({
-                            field: _this.getFieldFilter(col),
-                            operator: exports.Operator.lowerThanEqual,
-                            sourceField: col.field,
-                            subField: 1,
-                            funcGetValue: function (item) {
-                                var date = new Date(item);
-                                return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, -1);
-                            }
-                        }));
-                    }
-                    else if (col.dataType == exports.DataType.boolean) {
+                switch (col.dataType) {
+                    case exports.DataType.boolean:
                         templateFilter.push(new Filter({
                             field: _this.getFieldFilter(col),
                             operator: exports.Operator.in,
                             sourceField: col.field
                         }));
-                    }
-                    else {
+                        break;
+                    case exports.DataType.int:
+                    case exports.DataType.intWithoutMask:
+                    case exports.DataType.decimal:
+                    case exports.DataType.currency:
+                        templateFilter.push.apply(templateFilter, __spread(_this.getRangeFilter(col)));
+                        break;
+                    case exports.DataType.date:
+                    case exports.DataType.datetime:
+                        templateFilter.push.apply(templateFilter, __spread(_this.getRangeFilter(col, function (item) {
+                            var date = new Date(item);
+                            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+                            // return addDay(item, 1, -1);
+                        }, function (item) {
+                            var date = new Date(item);
+                            return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 0, 0, -1);
+                        })));
+                        break;
+                    default:
                         templateFilter.push(new Filter({
                             field: _this.getFieldFilter(col),
                             operator: exports.Operator.contain,
                             sourceField: col.field
                         }));
-                    }
+                        break;
                 }
             });
         };
+        ListComponentBase.prototype.getRangeFilter = function (col, funcGetValueFrom, funcGetValueTo) {
+            if (funcGetValueFrom === void 0) { funcGetValueFrom = null; }
+            if (funcGetValueTo === void 0) { funcGetValueTo = null; }
+            return [
+                new Filter({
+                    field: this.getFieldFilter(col),
+                    operator: exports.Operator.greaterThanEqual,
+                    sourceField: col.field,
+                    subField: 0,
+                    funcGetValue: funcGetValueFrom ? funcGetValueTo : function (item) { return item[0]; },
+                }),
+                new Filter({
+                    field: this.getFieldFilter(col),
+                    operator: exports.Operator.lowerThanEqual,
+                    sourceField: col.field,
+                    subField: 1,
+                    funcGetValue: funcGetValueTo ? funcGetValueTo : function (item) { return item[1]; },
+                })
+            ];
+        };
         ListComponentBase.prototype.getFieldFilter = function (col) {
-            return col.fieldFilter ? col.fieldFilter : col.field;
+            var _a;
+            return (_a = col.fieldFilter) !== null && _a !== void 0 ? _a : col.field;
         };
         ListComponentBase.prototype.getContextCustomFilter = function () {
             return {};
@@ -26043,7 +26085,10 @@
             return c;
         };
         CoreConfigService.prototype.getAuthConfig = function () {
-            var scope = 'openid profile email offline_access';
+            var scope = 'openid profile email';
+            if (this.environment.authenticationSettings.enableSilentRefresh) {
+                scope += ' offline_access';
+            }
             if (this.environment.authenticationSettings.scope) {
                 scope = this.environment.authenticationSettings.scope;
             }
@@ -31236,15 +31281,9 @@
             this._oauthService.loadDiscoveryDocument();
             if (this._oauthService.hasValidAccessToken()) {
                 this._componentContextService.fireReplayEvent(ComCtxConstants.ROOT.USER_READY, this.firstTimeLogin);
-                this._oauthService.setupAutomaticSilentRefresh();
-                // setInterval(() => {
-                //     console.log('start silent refresh');
-                //     this._oauthService.silentRefresh().then(rs => {
-                //         console.log('silent refresh', rs);
-                //     }).catch(err => {
-                //         console.log('silent refresh error', err);
-                //     });
-                // }, 20000);
+                if (this.environment.authenticationSettings.enableSilentRefresh) {
+                    this._oauthService.setupAutomaticSilentRefresh();
+                }
             }
             else {
                 if (!this._storageService.getItem('currentUrl')) {
@@ -31725,8 +31764,9 @@
                     if (this.control.multiple && !Array.isArray(value)) {
                         this._value = [];
                     }
-                    else
+                    else {
                         this._value = value;
+                    }
                     // fire event điều chỉnh value từ [value: guid] => {[fieldValue]: [value: guid], ...[1 số trường khác nữa trong datasource]}
                     this.setSelectedValue();
                 }
@@ -31834,7 +31874,7 @@
                 catch (err) {
                 }
             }
-            if (!result || result == NaN || result < 200) {
+            if (!result || isNaN(result) || result < 200) {
                 result = 200;
             }
             return result;
@@ -32366,8 +32406,9 @@
                     if (this._value) {
                         this.tooltip = this.control.generateTooltip(this._value);
                     }
-                    else
+                    else {
                         this.tooltip = null;
+                    }
                 }
                 else {
                     this.tooltip = null;
@@ -43797,6 +43838,9 @@
         });
         AddressComponent.prototype.ngOnInit = function () {
             var _this = this;
+            if (!this.control.baseService) {
+                this.control.baseService = this._addressService;
+            }
             this.control._component = this;
             _super.prototype.ngOnInit.call(this);
             // Nếu đã ẩn quận huyện thì phải ẩn luôn cả phường xã
@@ -43810,7 +43854,7 @@
                     label: 'Tỉnh/Thành phố',
                     placeholder: 'Chọn tỉnh/thành phố',
                     required: this.control.required && this.control.requiredProvince,
-                    baseService: this._addressService,
+                    baseService: this.control.baseService,
                     defaultFilters: [{ field: 'level', operator: exports.Operator.equal, value: exports.ENUM_DON_VI_HANH_CHINH.THANH_PHO.toString() }],
                     valueField: 'id',
                     displayField: 'name',
@@ -43827,7 +43871,7 @@
                     label: 'Quận/Huyện',
                     placeholder: 'Chọn quận/huyện',
                     required: this.control.required && this.control.requiredDistrict,
-                    baseService: this._addressService,
+                    baseService: this.control.baseService,
                     defaultFilters: [{ field: 'level', operator: exports.Operator.equal, value: exports.ENUM_DON_VI_HANH_CHINH.QUAN_HUYEN.toString() }],
                     bindingFilters: [{ field: 'parentId', operator: exports.Operator.equal, sourceField: 'idProvince', subField: 'idRoot' }],
                     valueField: 'id',
@@ -43843,7 +43887,7 @@
                     label: 'Phường/Xã',
                     placeholder: 'Chọn phường/xã',
                     required: this.control.required && this.control.requiredWard,
-                    baseService: this._addressService,
+                    baseService: this.control.baseService,
                     defaultFilters: [{ field: 'level', operator: exports.Operator.equal, value: exports.ENUM_DON_VI_HANH_CHINH.PHUONG_XA.toString() }],
                     bindingFilters: [{ field: 'parentId', operator: exports.Operator.equal, sourceField: 'idDistrict', subField: 'idRoot' }],
                     valueField: 'id',
@@ -43916,7 +43960,7 @@
                     street: this._modelData.street,
                     no: this._modelData.no
                 };
-                this._addressService.getAll([
+                this.control.baseService.getAll([
                     this.newFilter('id', exports.Operator.in, values)
                 ], 'id,name').then(function (res) { return _this.handleResponse(res, '', function (data) {
                     if (_this._modelData.idProvince) {
@@ -55012,7 +55056,7 @@
     TnDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'tn-dialog',
-                    template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"maximizable\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter\">\r\n        <p-footer *ngIf=\"formBase && formBase.buttonTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n            </ng-container>\r\n        </p-footer>\r\n        <ng-container *ngIf=\"!formBase || !formBase.buttonTemplate\">\r\n            <p-footer *ngIf=\"footer\">\r\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n            </p-footer>\r\n            <p-footer *ngIf=\"!footer\">\r\n                <button pButton preventTab type=\"button\" icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n                    [label]=\"'FORM.CANCEL' | translate\" (click)=\"handleHideDialog($event)\"></button>\r\n            </p-footer>\r\n        </ng-container>\r\n    </p-footer>\r\n</p-dialog>\r\n",
+                    template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"maximizable\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter\">\r\n        <p-footer *ngIf=\"formBase && formBase.buttonTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n            </ng-container>\r\n        </p-footer>\r\n        <ng-container *ngIf=\"!formBase || !formBase.buttonTemplate\">\r\n            <p-footer *ngIf=\"footer\">\r\n                <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n            </p-footer>\r\n            <p-footer *ngIf=\"!footer\">\r\n                <button pButton preventTab type=\"button\" icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n                    [label]=\"'FORM.CANCEL' | translate\" (click)=\"handleHideDialog($event)\"></button>\r\n            </p-footer>\r\n        </ng-container>\r\n    </p-footer>\r\n</p-dialog>",
                     styles: [""]
                 },] }
     ];