tnx-shared 5.0.58 → 5.0.59

package/esm2015/components/mask/mask.component.js

@@ -12,9 +12,11 @@ export class MaskComponent {
         this.decimalPlaces = 2;
         this.viewMode = false;
         this.inputStyleClass = '';
+        this.thousandSeperator = '.';
         this.onFocus = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onChanged = new EventEmitter();
+        this.locale = 'vi-VN';
     }
     set placeholder(value) {
         if (value == null)
@@ -22,10 +24,11 @@ export class MaskComponent {
         this._placeholder = value;
     }
     ngOnInit() {
+        this.locale = this.thousandSeperator == '.' ? 'vi-VN' : 'en-US';
     }
     writeValue(obj) {
         if (obj) {
-            this.model = this._numberPipe.transform(obj, '', 'vi-VN');
+            this.model = this._numberPipe.transform(obj, '', this.locale);
             this.value = Number(this.model);
         }
         else if (obj === 0) {
@@ -43,7 +46,7 @@ export class MaskComponent {
         return 'separator.0';
     }
     getThousandSeperator() {
-        return '.';
+        return this.thousandSeperator || '.';
     }
     handleFocus() {
         this.onFocus.emit(this.value);
@@ -75,7 +78,7 @@ export class MaskComponent {
         }
     }
     numberToStringVN(number) {
-        return this._numberPipe.transform(number, '', 'vi-VN');
+        return this._numberPipe.transform(number, '', this.locale);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -119,8 +122,9 @@ MaskComponent.propDecorators = {
     decimalPlaces: [{ type: Input }],
     viewMode: [{ type: Input }],
     inputStyleClass: [{ type: Input }],
+    thousandSeperator: [{ type: Input }],
     onFocus: [{ type: Output }],
     onBlur: [{ type: Output }],
     onChanged: [{ type: Output }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFzay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vcHJvamVjdHMvdG54LXNoYXJlZC9zcmMvbGliLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy9tYXNrL21hc2suY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM5QyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFlekUsTUFBTSxPQUFPLGFBQWE7SUE0QnRCLFlBQ1ksV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUF4QjNCLGFBQVEsR0FBc0IsU0FBUyxDQUFDO1FBQ2pELGlCQUFZLEdBQVcsRUFBRSxDQUFDO1FBTWpCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFDekIsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLFdBQU0sR0FBRyxFQUFFLENBQUM7UUFHWixrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUNsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLG9CQUFlLEdBQUcsRUFBRSxDQUFDO1FBRXBCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2pDLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBTzFDLENBQUM7SUF2QkwsSUFBYSxXQUFXLENBQUMsS0FBYTtRQUNsQyxJQUFJLEtBQUssSUFBSSxJQUFJO1lBQ2IsS0FBSyxHQUFHLEVBQUUsQ0FBQztRQUNmLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFxQkQsUUFBUTtJQUNSLENBQUM7SUFFRCxVQUFVLENBQUMsR0FBUTtRQUNmLElBQUksR0FBRyxFQUFFO1lBQ0wsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQzFELElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNuQzthQUNJLElBQUksR0FBRyxLQUFLLENBQUMsRUFBRTtZQUNoQixJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztZQUNqQixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztTQUNsQjthQUFNO1lBQ0gsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7WUFDaEIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7U0FDckI7SUFDTCxDQUFDO0lBRUQsYUFBYSxDQUFDLFFBQVE7UUFDbEIsSUFBSSxRQUFRLEtBQUssU0FBUztZQUN0QixPQUFPLGFBQWEsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzdDLE9BQU8sYUFBYSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxvQkFBb0I7UUFDaEIsT0FBTyxHQUFHLENBQUM7SUFDZixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsVUFBVTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDekIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxpQkFBaUI7UUFDYixJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLEVBQUU7WUFDdkMsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRWhDLElBQUksSUFBSSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLEVBQUU7Z0JBQ25DLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztnQkFDdEIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUMvQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQzthQUM3QjtpQkFDSSxJQUFJLElBQUksQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO2dCQUN4QyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztnQkFDL0MsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDN0I7U0FDSjthQUNJO1lBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7U0FDckI7SUFDTCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsTUFBTTtRQUNuQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLE1BQU0sRUFBRSxFQUFFLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFDM0QsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQU87UUFDckIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUNELGdCQUFnQixDQUFFLFVBQW1CO1FBQ2pDLElBQUksQ0FBQyxVQUFVO1lBQ1gsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7O1lBRXJCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQzdCLENBQUM7OztZQXpISixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLFNBQVM7Z0JBQ25CLGc0QkFBb0M7Z0JBRXBDLFNBQVMsRUFBRTtvQkFDUDt3QkFDSSxPQUFPLEVBQUUsaUJBQWlCO3dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGFBQWEsQ0FBQzt3QkFDNUMsS0FBSyxFQUFFLElBQUk7cUJBQ2Q7b0JBQ0QsV0FBVztpQkFDZDs7YUFDSjs7O1lBaEJRLFdBQVc7Ozt1QkFzQmYsS0FBSzswQkFFTCxLQUFLO3VCQUtMLEtBQUs7cUJBQ0wsS0FBSztxQkFDTCxLQUFLO2tCQUNMLEtBQUs7a0JBQ0wsS0FBSzs0QkFDTCxLQUFLO3VCQUNMLEtBQUs7OEJBQ0wsS0FBSztzQkFFTCxNQUFNO3FCQUNOLE1BQU07d0JBQ04sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERlY2ltYWxQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndG4tbWFzaycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vbWFzay5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9tYXNrLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBwcm92aWRlcnM6IFtcclxuICAgICAgICB7XHJcbiAgICAgICAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICAgICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBNYXNrQ29tcG9uZW50KSxcclxuICAgICAgICAgICAgbXVsdGk6IHRydWVcclxuICAgICAgICB9LFxyXG4gICAgICAgIERlY2ltYWxQaXBlXHJcbiAgICBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNYXNrQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcblxyXG4gICAgb25DaGFuZ2U6IEZ1bmN0aW9uO1xyXG4gICAgb25Ub3VjaGVkOiBGdW5jdGlvbjtcclxuXHJcbiAgICBASW5wdXQoKSBtYXNrVHlwZTogJ2RlY2ltYWwnIHwgJ2ludCcgPSAnZGVjaW1hbCc7XHJcbiAgICBfcGxhY2Vob2xkZXI6IHN0cmluZyA9ICcnO1xyXG4gICAgQElucHV0KCkgc2V0IHBsYWNlaG9sZGVyKHZhbHVlOiBzdHJpbmcpIHtcclxuICAgICAgICBpZiAodmFsdWUgPT0gbnVsbClcclxuICAgICAgICAgICAgdmFsdWUgPSAnJztcclxuICAgICAgICB0aGlzLl9wbGFjZWhvbGRlciA9IHZhbHVlO1xyXG4gICAgfVxyXG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBudWxsO1xyXG4gICAgQElucHV0KCkgc3VmZml4ID0gJyc7XHJcbiAgICBASW5wdXQoKSBwcmVmaXggPSAnJztcclxuICAgIEBJbnB1dCgpIG1pbjogbnVtYmVyO1xyXG4gICAgQElucHV0KCkgbWF4OiBudW1iZXI7XHJcbiAgICBASW5wdXQoKSBkZWNpbWFsUGxhY2VzID0gMjtcclxuICAgIEBJbnB1dCgpIHZpZXdNb2RlID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBpbnB1dFN0eWxlQ2xhc3MgPSAnJztcclxuXHJcbiAgICBAT3V0cHV0KCkgb25Gb2N1cyA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gICAgQE91dHB1dCgpIG9uQmx1ciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gICAgQE91dHB1dCgpIG9uQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICAgIG1vZGVsOiBhbnk7XHJcbiAgICB2YWx1ZTogTnVtYmVyO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKFxyXG4gICAgICAgIHByaXZhdGUgX251bWJlclBpcGU6IERlY2ltYWxQaXBlXHJcbiAgICApIHsgfVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgfVxyXG5cclxuICAgIHdyaXRlVmFsdWUob2JqOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICBpZiAob2JqKSB7XHJcbiAgICAgICAgICAgIHRoaXMubW9kZWwgPSB0aGlzLl9udW1iZXJQaXBlLnRyYW5zZm9ybShvYmosICcnLCAndmktVk4nKTtcclxuICAgICAgICAgICAgdGhpcy52YWx1ZSA9IE51bWJlcih0aGlzLm1vZGVsKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgZWxzZSBpZiAob2JqID09PSAwKSB7XHJcbiAgICAgICAgICAgIHRoaXMubW9kZWwgPSAnMCc7XHJcbiAgICAgICAgICAgIHRoaXMudmFsdWUgPSAwO1xyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgIHRoaXMubW9kZWwgPSAnJztcclxuICAgICAgICAgICAgdGhpcy52YWx1ZSA9IG51bGw7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIGdldE1hc2tCeVR5cGUobWFza1R5cGUpIHtcclxuICAgICAgICBpZiAobWFza1R5cGUgPT09ICdkZWNpbWFsJylcclxuICAgICAgICAgICAgcmV0dXJuIGBzZXBhcmF0b3IuJHt0aGlzLmRlY2ltYWxQbGFjZXN9YDtcclxuICAgICAgICByZXR1cm4gJ3NlcGFyYXRvci4wJztcclxuICAgIH1cclxuXHJcbiAgICBnZXRUaG91c2FuZFNlcGVyYXRvcigpIHtcclxuICAgICAgICByZXR1cm4gJy4nO1xyXG4gICAgfVxyXG5cclxuICAgIGhhbmRsZUZvY3VzKCkge1xyXG4gICAgICAgIHRoaXMub25Gb2N1cy5lbWl0KHRoaXMudmFsdWUpO1xyXG4gICAgfVxyXG5cclxuICAgIGhhbmRsZUJsdXIoKSB7XHJcbiAgICAgICAgdGhpcy5vbkJsdXIuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBoYW5kbGVDaGFuZ2VkVmFsdWUoKSB7XHJcbiAgICAgICAgdGhpcy5jaGVja1ZhbHVlSW5SYW5nZSgpO1xyXG4gICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XHJcbiAgICAgICAgdGhpcy5vbkNoYW5nZWQuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBjaGVja1ZhbHVlSW5SYW5nZSgpIHtcclxuICAgICAgICBpZiAodGhpcy5tb2RlbCAmJiB0aGlzLm1vZGVsLnRyaW0oKSAhPSAnJykge1xyXG4gICAgICAgICAgICB0aGlzLnZhbHVlID0gTnVtYmVyKHRoaXMubW9kZWwpO1xyXG5cclxuICAgICAgICAgICAgaWYgKHRoaXMubWluICYmIHRoaXMudmFsdWUgPCB0aGlzLm1pbikge1xyXG4gICAgICAgICAgICAgICAgdGhpcy52YWx1ZSA9IHRoaXMubWluO1xyXG4gICAgICAgICAgICAgICAgdGhpcy5tb2RlbCA9IHRoaXMubnVtYmVyVG9TdHJpbmdWTih0aGlzLnZhbHVlKTtcclxuICAgICAgICAgICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgZWxzZSBpZiAodGhpcy5tYXggJiYgdGhpcy52YWx1ZSA+IHRoaXMubWF4KSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLnZhbHVlID0gdGhpcy5tYXg7XHJcbiAgICAgICAgICAgICAgICB0aGlzLm1vZGVsID0gdGhpcy5udW1iZXJUb1N0cmluZ1ZOKHRoaXMudmFsdWUpO1xyXG4gICAgICAgICAgICAgICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgICAgICBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy52YWx1ZSA9IG51bGw7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIG51bWJlclRvU3RyaW5nVk4obnVtYmVyKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX251bWJlclBpcGUudHJhbnNmb3JtKG51bWJlciwgJycsICd2aS1WTicpO1xyXG4gICAgfVxyXG5cclxuICAgIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICAgIH1cclxuICAgIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xyXG4gICAgfVxyXG4gICAgc2V0RGlzYWJsZWRTdGF0ZT8oaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgICAgIGlmICghaXNEaXNhYmxlZClcclxuICAgICAgICAgICAgdGhpcy5kaXNhYmxlZCA9IG51bGw7XHJcbiAgICAgICAgZWxzZVxyXG4gICAgICAgICAgICB0aGlzLmRpc2FibGVkID0gdHJ1ZTtcclxuICAgIH1cclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFzay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vcHJvamVjdHMvdG54LXNoYXJlZC9zcmMvbGliLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy9tYXNrL21hc2suY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM5QyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFlekUsTUFBTSxPQUFPLGFBQWE7SUE2QnRCLFlBQ1ksV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUExQjNCLGFBQVEsR0FBc0IsU0FBUyxDQUFDO1FBQ2pELGlCQUFZLEdBQVcsRUFBRSxDQUFDO1FBTWpCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFDekIsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLFdBQU0sR0FBRyxFQUFFLENBQUM7UUFHWixrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUNsQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLG9CQUFlLEdBQUcsRUFBRSxDQUFDO1FBQ3JCLHNCQUFpQixHQUFHLEdBQUcsQ0FBQztRQUV2QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNqQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUk5QyxXQUFNLEdBQUcsT0FBTyxDQUFDO0lBSWIsQ0FBQztJQXpCTCxJQUFhLFdBQVcsQ0FBQyxLQUFhO1FBQ2xDLElBQUksS0FBSyxJQUFJLElBQUk7WUFDYixLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2YsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDOUIsQ0FBQztJQXVCRCxRQUFRO1FBQ0osSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsaUJBQWlCLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQztJQUNwRSxDQUFDO0lBRUQsVUFBVSxDQUFDLEdBQVE7UUFDZixJQUFJLEdBQUcsRUFBRTtZQUNMLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFLEVBQUUsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDOUQsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ25DO2FBQ0ksSUFBSSxHQUFHLEtBQUssQ0FBQyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDO1lBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1NBQ2xCO2FBQU07WUFDSCxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNoQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztTQUNyQjtJQUNMLENBQUM7SUFFRCxhQUFhLENBQUMsUUFBUTtRQUNsQixJQUFJLFFBQVEsS0FBSyxTQUFTO1lBQ3RCLE9BQU8sYUFBYSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDN0MsT0FBTyxhQUFhLENBQUM7SUFDekIsQ0FBQztJQUVELG9CQUFvQjtRQUNoQixPQUFPLElBQUksQ0FBQyxpQkFBaUIsSUFBSSxHQUFHLENBQUM7SUFDekMsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUVELFVBQVU7UUFDTixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELGtCQUFrQjtRQUNkLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzFCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsaUJBQWlCO1FBQ2IsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxFQUFFO1lBQ3ZDLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUVoQyxJQUFJLElBQUksQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO2dCQUNuQyxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztnQkFDL0MsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDN0I7aUJBQ0ksSUFBSSxJQUFJLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRTtnQkFDeEMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO2dCQUN0QixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQy9DLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQzdCO1NBQ0o7YUFDSTtZQUNELElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO1NBQ3JCO0lBQ0wsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQU07UUFDbkIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMvRCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUNwQixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBQ0QsaUJBQWlCLENBQUMsRUFBTztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBQ0QsZ0JBQWdCLENBQUUsVUFBbUI7UUFDakMsSUFBSSxDQUFDLFVBQVU7WUFDWCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQzs7WUFFckIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDN0IsQ0FBQzs7O1lBM0hKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsU0FBUztnQkFDbkIsZzRCQUFvQztnQkFFcEMsU0FBUyxFQUFFO29CQUNQO3dCQUNJLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsYUFBYSxDQUFDO3dCQUM1QyxLQUFLLEVBQUUsSUFBSTtxQkFDZDtvQkFDRCxXQUFXO2lCQUNkOzthQUNKOzs7WUFoQlEsV0FBVzs7O3VCQXFCZixLQUFLOzBCQUVMLEtBQUs7dUJBS0wsS0FBSztxQkFDTCxLQUFLO3FCQUNMLEtBQUs7a0JBQ0wsS0FBSztrQkFDTCxLQUFLOzRCQUNMLEtBQUs7dUJBQ0wsS0FBSzs4QkFDTCxLQUFLO2dDQUNMLEtBQUs7c0JBRUwsTUFBTTtxQkFDTixNQUFNO3dCQUNOLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEZWNpbWFsUGlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3RuLW1hc2snLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL21hc2suY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbWFzay5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgcHJvdmlkZXJzOiBbXHJcbiAgICAgICAge1xyXG4gICAgICAgICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWFza0NvbXBvbmVudCksXHJcbiAgICAgICAgICAgIG11bHRpOiB0cnVlXHJcbiAgICAgICAgfSxcclxuICAgICAgICBEZWNpbWFsUGlwZVxyXG4gICAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTWFza0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gICAgb25DaGFuZ2U6IEZ1bmN0aW9uO1xyXG4gICAgb25Ub3VjaGVkOiBGdW5jdGlvbjtcclxuXHJcbiAgICBASW5wdXQoKSBtYXNrVHlwZTogJ2RlY2ltYWwnIHwgJ2ludCcgPSAnZGVjaW1hbCc7XHJcbiAgICBfcGxhY2Vob2xkZXI6IHN0cmluZyA9ICcnO1xyXG4gICAgQElucHV0KCkgc2V0IHBsYWNlaG9sZGVyKHZhbHVlOiBzdHJpbmcpIHtcclxuICAgICAgICBpZiAodmFsdWUgPT0gbnVsbClcclxuICAgICAgICAgICAgdmFsdWUgPSAnJztcclxuICAgICAgICB0aGlzLl9wbGFjZWhvbGRlciA9IHZhbHVlO1xyXG4gICAgfVxyXG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBudWxsO1xyXG4gICAgQElucHV0KCkgc3VmZml4ID0gJyc7XHJcbiAgICBASW5wdXQoKSBwcmVmaXggPSAnJztcclxuICAgIEBJbnB1dCgpIG1pbjogbnVtYmVyO1xyXG4gICAgQElucHV0KCkgbWF4OiBudW1iZXI7XHJcbiAgICBASW5wdXQoKSBkZWNpbWFsUGxhY2VzID0gMjtcclxuICAgIEBJbnB1dCgpIHZpZXdNb2RlID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBpbnB1dFN0eWxlQ2xhc3MgPSAnJztcclxuICAgIEBJbnB1dCgpIHRob3VzYW5kU2VwZXJhdG9yID0gJy4nO1xyXG5cclxuICAgIEBPdXRwdXQoKSBvbkZvY3VzID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcbiAgICBAT3V0cHV0KCkgb25CbHVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcbiAgICBAT3V0cHV0KCkgb25DaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gICAgbW9kZWw6IGFueTtcclxuICAgIHZhbHVlOiBOdW1iZXI7XHJcbiAgICBsb2NhbGUgPSAndmktVk4nO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKFxyXG4gICAgICAgIHByaXZhdGUgX251bWJlclBpcGU6IERlY2ltYWxQaXBlXHJcbiAgICApIHsgfVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgICAgIHRoaXMubG9jYWxlID0gdGhpcy50aG91c2FuZFNlcGVyYXRvciA9PSAnLicgPyAndmktVk4nIDogJ2VuLVVTJztcclxuICAgIH1cclxuXHJcbiAgICB3cml0ZVZhbHVlKG9iajogYW55KTogdm9pZCB7XHJcbiAgICAgICAgaWYgKG9iaikge1xyXG4gICAgICAgICAgICB0aGlzLm1vZGVsID0gdGhpcy5fbnVtYmVyUGlwZS50cmFuc2Zvcm0ob2JqLCAnJywgdGhpcy5sb2NhbGUpO1xyXG4gICAgICAgICAgICB0aGlzLnZhbHVlID0gTnVtYmVyKHRoaXMubW9kZWwpO1xyXG4gICAgICAgIH1cclxuICAgICAgICBlbHNlIGlmIChvYmogPT09IDApIHtcclxuICAgICAgICAgICAgdGhpcy5tb2RlbCA9ICcwJztcclxuICAgICAgICAgICAgdGhpcy52YWx1ZSA9IDA7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy5tb2RlbCA9ICcnO1xyXG4gICAgICAgICAgICB0aGlzLnZhbHVlID0gbnVsbDtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0TWFza0J5VHlwZShtYXNrVHlwZSkge1xyXG4gICAgICAgIGlmIChtYXNrVHlwZSA9PT0gJ2RlY2ltYWwnKVxyXG4gICAgICAgICAgICByZXR1cm4gYHNlcGFyYXRvci4ke3RoaXMuZGVjaW1hbFBsYWNlc31gO1xyXG4gICAgICAgIHJldHVybiAnc2VwYXJhdG9yLjAnO1xyXG4gICAgfVxyXG5cclxuICAgIGdldFRob3VzYW5kU2VwZXJhdG9yKCkge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnRob3VzYW5kU2VwZXJhdG9yIHx8ICcuJztcclxuICAgIH1cclxuXHJcbiAgICBoYW5kbGVGb2N1cygpIHtcclxuICAgICAgICB0aGlzLm9uRm9jdXMuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBoYW5kbGVCbHVyKCkge1xyXG4gICAgICAgIHRoaXMub25CbHVyLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgICB9XHJcblxyXG4gICAgaGFuZGxlQ2hhbmdlZFZhbHVlKCkge1xyXG4gICAgICAgIHRoaXMuY2hlY2tWYWx1ZUluUmFuZ2UoKTtcclxuICAgICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpO1xyXG4gICAgICAgIHRoaXMub25DaGFuZ2VkLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgICB9XHJcblxyXG4gICAgY2hlY2tWYWx1ZUluUmFuZ2UoKSB7XHJcbiAgICAgICAgaWYgKHRoaXMubW9kZWwgJiYgdGhpcy5tb2RlbC50cmltKCkgIT0gJycpIHtcclxuICAgICAgICAgICAgdGhpcy52YWx1ZSA9IE51bWJlcih0aGlzLm1vZGVsKTtcclxuXHJcbiAgICAgICAgICAgIGlmICh0aGlzLm1pbiAmJiB0aGlzLnZhbHVlIDwgdGhpcy5taW4pIHtcclxuICAgICAgICAgICAgICAgIHRoaXMudmFsdWUgPSB0aGlzLm1pbjtcclxuICAgICAgICAgICAgICAgIHRoaXMubW9kZWwgPSB0aGlzLm51bWJlclRvU3RyaW5nVk4odGhpcy52YWx1ZSk7XHJcbiAgICAgICAgICAgICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudmFsdWUpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIGVsc2UgaWYgKHRoaXMubWF4ICYmIHRoaXMudmFsdWUgPiB0aGlzLm1heCkge1xyXG4gICAgICAgICAgICAgICAgdGhpcy52YWx1ZSA9IHRoaXMubWF4O1xyXG4gICAgICAgICAgICAgICAgdGhpcy5tb2RlbCA9IHRoaXMubnVtYmVyVG9TdHJpbmdWTih0aGlzLnZhbHVlKTtcclxuICAgICAgICAgICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgICAgZWxzZSB7XHJcbiAgICAgICAgICAgIHRoaXMudmFsdWUgPSBudWxsO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBudW1iZXJUb1N0cmluZ1ZOKG51bWJlcikge1xyXG4gICAgICAgIHJldHVybiB0aGlzLl9udW1iZXJQaXBlLnRyYW5zZm9ybShudW1iZXIsICcnLCB0aGlzLmxvY2FsZSk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xyXG4gICAgfVxyXG4gICAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgICB9XHJcbiAgICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKCFpc0Rpc2FibGVkKVxyXG4gICAgICAgICAgICB0aGlzLmRpc2FibGVkID0gbnVsbDtcclxuICAgICAgICBlbHNlXHJcbiAgICAgICAgICAgIHRoaXMuZGlzYWJsZWQgPSB0cnVlO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==

package/fesm2015/tnx-shared.js

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