tnx-shared 5.1.344 → 5.1.345

package/bundles/tnx-shared.umd.js

@@ -1691,6 +1691,7 @@
         __extends(TableSchema, _super);
         function TableSchema(init) {
             var _this = _super.call(this) || this;
+            _this.autoGenerateId = false;
             _this.showNumber = true;
             _this.showFunction = true;
             _this.showFooter = true;
@@ -1961,6 +1962,8 @@
     var TabViewData = /** @class */ (function () {
         function TabViewData(init) {
             this.hidden = false;
+            this.alwayRender = false;
+            this.useScrollbar = false; // Config để xác định có sử dụng custom-scrollbar không, nếu không thì dùng scrollbar mặc định của trình duyệt
             for (var key in init) {
                 this[key] = init[key];
             }
@@ -15858,8 +15861,10 @@
                                     return [3 /*break*/, 4];
                                 }
                             }
-                            else if (childNode.control['_hidden'])
-                                return [3 /*break*/, 4];
+                            else {
+                                if (childNode['_hidden'] || childNode.control['_hidden'])
+                                    return [3 /*break*/, 4];
+                            }
                             return [4 /*yield*/, this.validate(childNode, true)];
                         case 2:
                             if (!(_g.sent())) {
@@ -16046,6 +16051,13 @@
                 });
             });
         };
+        CrudFormComponent.prototype.handleLoadedControl = function (_component, control, parentPath) {
+            var parentNode = this._rootNode.getNodeByPath(parentPath);
+            var currentNode = parentNode.getChildNode(control.field);
+            if (_component && currentNode) {
+                currentNode._component = _component;
+            }
+        };
         CrudFormComponent.prototype.handleControlReadyEvent = function (control, parentPath) {
             return __awaiter(this, void 0, void 0, function () {
                 var parentNode;
@@ -16533,7 +16545,11 @@
                             index = tableNode.childNodes.length;
                             parentPath = tablePath + '[' + index + ']';
                             data = {};
+                            if (control.autoGenerateId) {
+                                data.id = this._commonService.guid();
+                            }
                             try {
+                                // Thêm id để ngăn render liên tục
                                 for (_d = __values(control.rowTemplate), _e = _d.next(); !_e.done; _e = _d.next()) {
                                     subControl = _e.value;
                                     this.initControlDefaultValue(data, subControl, parentPath);
@@ -16858,7 +16874,7 @@
                 || (parentModel._status[control.field].hidden === undefined
                     && (control.hidden
                         || (control.hiddenCheck && control.hiddenCheck(this._minimizedData, currentNode))));
-            control['_hidden'] = !!result;
+            currentNode['_hidden'] = !!result;
             return result;
         };
         CrudFormComponent.prototype.getContextTd = function (control, data, index, tablePath) {
@@ -16937,7 +16953,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\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        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-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 [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(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\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [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=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (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 [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(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            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(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\" [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(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]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\r\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\r\n                    [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onSelected)=\"control.onSelected($event)\"\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                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [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.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\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]\" [disabled]=\"checkDisabled(data, control)\"\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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(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]\" [readOnly]=\"control.readOnly\"\r\n                    [loaiVanBan]=\"control.loaiVanBan\"\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=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\r\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </p-slider>\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 class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"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>",
+                    template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\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        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-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 [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(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\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [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=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (search)=\"handleFieldValueChange(control, $event, '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 [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(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            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, '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]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\r\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\r\n                    [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    [readonly]=\"control.readonly\" [accept]=\"control.accept\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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 [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\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=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\r\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </p-slider>\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 class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"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>",
                     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}.show-in-box{border:1px solid #ced4da;border-radius:5px}.not-show-in-box{padding:0}.view-mode div.label{padding-bottom:3px}.view-mode div.label label{font-size:.85em;font-weight:700}.view-mode>span:not(:empty){display:inline-block;padding:5px 0;width:100%}.view-mode.type-table div.label+div{padding:5px 0}td>.view-mode{display:inline-block;padding:.25rem .5rem}td>.view-mode .view-mode{padding:0}.crud-form-control div[role=checkbox-alone]{margin-top:24px}.crud-form-control div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control .label+div[role=checkbox-alone]{margin-top:11px}.crud-form-control.type-table div[role=checkbox-alone]{margin-top:6px;text-align:center}.crud-form-control.type-table div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control.type-table div[role=checkbox-alone].align-left{text-align:left}.crud-form-control.type-title{border-bottom:1px solid #cfcfcf;color:#025ba7;font-size:1.2rem;font-weight:700;margin-bottom:5px;padding:5px;text-transform:uppercase}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{color:#6c757d;font-size:.8rem;margin-bottom:5px;margin-left:10px}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}::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{-webkit-animation:shrink .1s;animation:shrink .1s;min-height:20px;overflow:visible;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{-webkit-animation:fadeIn .1s;animation:fadeIn .1s;color:red;display:flex;font-size:.9em;position:relative}::ng-deep .crud-form-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}@-webkit-keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@-webkit-keyframes shrink{0%{height:0}to{height:20px}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}: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}"]
                 },] }
@@ -17030,7 +17046,12 @@
             }
             else {
                 if (!this.schemaPath) {
-                    keysPlus = Object.keys(schemas);
+                    Object.keys(schemas).forEach(function (key) {
+                        var item = schemas[key];
+                        if (item.uniqueField == item.field) {
+                            keysPlus.push(key);
+                        }
+                    });
                 }
             }
             this.keysPlus = keysPlus;
@@ -17062,6 +17083,22 @@
                     }
                     finally { if (e_32) throw e_32.error; }
                 }
+                // Sau khi đã init xong node cho row thì fire event cho các control trong row
+                // Thường dùng với mục đích cần disabled, hidden các control của row khi có nhu cầu
+                try {
+                    this.childNodes.forEach(function (_) {
+                        if (_.control && _.control.onRowNodeFinishInit) {
+                            var eventData = new EventData({
+                                sourceNode: _,
+                                currentNode: _,
+                                eventType: 'rowFinishInit'
+                            });
+                            _.control.onRowNodeFinishInit(eventData);
+                        }
+                    });
+                }
+                catch (err) {
+                }
             }
             else if (isArray(model)) {
                 var i = 0;
@@ -17151,6 +17188,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ControlTreeNode.prototype, "component", {
+            get: function () {
+                return this._component;
+            },
+            set: function (val) {
+                this._component = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ControlTreeNode.prototype.setHidden = function (field, hidden) {
             var _this = this;
             if (hidden === void 0) { hidden = true; }
@@ -17164,13 +17211,31 @@
             }
         };
         ControlTreeNode.prototype.setHiddenField = function (field, hidden) {
+            this.setPrivateStatus(field, 'hidden', hidden);
+        };
+        ControlTreeNode.prototype.setDisabled = function (field, disabled) {
+            var _this = this;
+            if (disabled === void 0) { disabled = true; }
+            if (Array.isArray(field)) {
+                field.forEach(function (f) {
+                    _this.setDisabledField(f, disabled);
+                });
+            }
+            else {
+                this.setDisabledField(field, disabled);
+            }
+        };
+        ControlTreeNode.prototype.setDisabledField = function (field, disabled) {
+            this.setPrivateStatus(field, 'disabled', disabled);
+        };
+        ControlTreeNode.prototype.setPrivateStatus = function (field, prop, value) {
             if (field.indexOf('.') > -1) {
                 var childNode = this.getNodeByPath(this.modelPath + "." + field);
                 var lastField = field.split('.').pop();
-                childNode.parentNode.data._status[lastField].hidden = hidden;
+                childNode.parentNode.data._status[lastField][prop] = value;
             }
             else {
-                this.data._status[field].hidden = hidden;
+                this.data._status[field][prop] = value;
             }
         };
         ControlTreeNode.prototype.getNodeByPath = function (modelPath) {
@@ -26043,6 +26108,7 @@
             _this._showSubLabel = true;
             _this.readyToReload = false;
             _this._readyStatus = {};
+            _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.dataChange = new i0.EventEmitter();
             _this.onReady = new i0.EventEmitter();
@@ -26159,6 +26225,7 @@
             if (this.viewMode) {
                 this.getModelText();
             }
+            this.onInit.emit(this);
         };
         AddressComponent.prototype.setDisabledControl = function () {
             var disabled = this._disabled ? true : null;
@@ -26264,6 +26331,7 @@
         viewMode: [{ type: i0.Input }],
         data: [{ type: i0.Input }],
         showSubLabel: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         dataChange: [{ type: i0.Output }],
         onReady: [{ type: i0.Output }]
@@ -26331,6 +26399,7 @@
             this._deviceDetectorService = _deviceDetectorService;
             this.dataSource = [];
             this.control = new AutoCompleteControlSchema();
+            this.onInit = new i0.EventEmitter();
             this.onValueChanged = new i0.EventEmitter();
             this.lstDataSuggest = [];
             this.hideTransitionOptions = '195ms ease-in';
@@ -26348,6 +26417,7 @@
             if (!this._deviceDetectorService.isDesktop()) {
                 this.hideTransitionOptions = this.showTransitionOptions = '';
             }
+            this.onInit.emit(this);
         };
         AutocompleteDatasourceComponent.prototype.handleBlur = function (event) {
             if (this.selectedValueBefore != this.selectedValue) {
@@ -26438,6 +26508,7 @@
     AutocompleteDatasourceComponent.propDecorators = {
         suggestions: [{ type: i0.Input }],
         control: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onValueChanged: [{ type: i0.Output }]
     };
 
@@ -26488,6 +26559,7 @@
                 height: 900,
                 maximize: true
             });
+            _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onUnSelect = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
@@ -26526,6 +26598,7 @@
             this.buildFilterKeyword();
             this.buildSettingEntityPicker();
             this.updateFuncCheckReadOnlyItem();
+            this.onInit.emit(this);
         };
         AutoCompletePickerComponent.prototype.updateFuncCheckReadOnlyItem = function () {
             if (this.readOnlyValues && this.readOnlyValues.length) {
@@ -27028,14 +27101,17 @@
             this.getDataSelectedValue(obj)
                 .then(function (res) {
                 _this.updateSelectedValue();
-                if (_this.hasValue && !_this.isFiredReady) {
-                    _this.isFiredReady = true;
-                    // Hàm ready này chỉ CẦN DÙNG trong trường hợp autocomplete-picker có value => Dùng để lấy dữ liệu các component con
-                    // Nếu có trường hợp nào khác thì cần phải xử lý khác
-                    _this.onReady.emit();
-                }
+                _this.checkFireReady();
             });
         };
+        AutoCompletePickerComponent.prototype.checkFireReady = function () {
+            if (!this.isFiredReady && this.hasValue) {
+                this.isFiredReady = true;
+                // Hàm ready này chỉ CẦN DÙNG trong trường hợp autocomplete-picker có value => Dùng để lấy dữ liệu các component con
+                // Nếu có trường hợp nào khác thì cần phải xử lý khác
+                this.onReady.emit();
+            }
+        };
         AutoCompletePickerComponent.prototype.registerOnChange = function (fn) {
             this.onChangeBase = fn;
         };
@@ -27070,6 +27146,7 @@
         disabled: [{ type: i0.Input }],
         popupSize: [{ type: i0.Input }],
         readOnlyValues: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onUnSelect: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }],
@@ -29507,6 +29584,7 @@
             this._dropDownService = _dropDownService;
             this._deviceDetectorService = _deviceDetectorService;
             this._styleClass = 'p-grid tn-check-box-list';
+            this.onInit = new i0.EventEmitter();
             this.onSelect = new i0.EventEmitter();
             this.onReady = new i0.EventEmitter();
             this.dataSourceInternal = [];
@@ -29565,6 +29643,7 @@
             if (this.control.pColClass) {
                 this.classCheckBox += " p-col-" + this.control.pColClass;
             }
+            this.onInit.emit(this);
         };
         CheckBoxListComponent.prototype.bindDataSource = function (serviceUri, baseService) {
             var _this = this;
@@ -29698,6 +29777,7 @@
         control: [{ type: i0.Input }],
         dataSource: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onReady: [{ type: i0.Output }]
     };
@@ -29788,6 +29868,7 @@
             _this._coCauToChucService = _coCauToChucService;
             _this._translateService = _translateService;
             _this.disabled = false;
+            _this.onInit = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onUnSelect = new i0.EventEmitter();
@@ -29819,6 +29900,7 @@
                         sort: false
                     })
                 ], mdWidth: 12 }));
+            this.onInit.emit(this);
         };
         CoCauToChucPickerListComponent.prototype.handleFocus = function (evt) {
             this.onFocus.emit(evt);
@@ -29875,6 +29957,7 @@
         control: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         readOnlyValues: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onUnSelect: [{ type: i0.Output }],
@@ -29899,6 +29982,7 @@
             this.showClear = false;
             this.disabledParentItem = true;
             this.rootParentId = null;
+            this.onInit = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
             this.guidEmpty = '00000000-0000-0000-0000-000000000000';
             this.flashCacheParent = [];
@@ -29936,6 +30020,7 @@
             if (this.control)
                 this.control._component = this;
             this.bindingUser();
+            this.onInit.emit(this);
         };
         CoCauToChucPickerComponent.prototype.bindingUser = function () {
             var _this = this;
@@ -30084,6 +30169,7 @@
         showClear: [{ type: i0.Input }],
         disabledParentItem: [{ type: i0.Input }],
         rootParentId: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output, args: ['onChanged',] }]
     };
 
@@ -34110,12 +34196,14 @@
         function CongViecPickerComponent(_injector, _notifierService) {
             var _this = _super.call(this, _injector) || this;
             _this._notifierService = _notifierService;
+            _this.onInit = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
             _this.idCongViecs = [];
             _this.formState = exports.FormState;
             return _this;
         }
         CongViecPickerComponent.prototype.ngOnInit = function () {
+            this.onInit.emit(this);
         };
         CongViecPickerComponent.prototype.handleIdsChange = function (ids) {
             this.idCongViecs = ids;
@@ -34165,6 +34253,7 @@
     ]; };
     CongViecPickerComponent.propDecorators = {
         control: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
     };
 
@@ -34767,11 +34856,13 @@
     var DatetimePickerRangeComponent = /** @class */ (function () {
         function DatetimePickerRangeComponent() {
             this.control = new DateTimeRangeControlSchema();
+            this.onInit = new i0.EventEmitter();
             this.onClose = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
             this._controlModelData = [undefined, undefined];
         }
         DatetimePickerRangeComponent.prototype.ngOnInit = function () {
+            this.onInit.emit(this);
         };
         DatetimePickerRangeComponent.prototype.clear = function () {
             var re = (this._controlModelData[0] != null) || (this._controlModelData[1] != null);
@@ -34824,6 +34915,7 @@
     DatetimePickerRangeComponent.propDecorators = {
         control: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onClose: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
     };
@@ -34836,6 +34928,7 @@
             this.hideTransitionOptions = '195ms ease-in';
             this.showTransitionOptions = '225ms ease-out';
             this.control = new DateTimeControlSchema();
+            this.onInit = new i0.EventEmitter();
             this.onSelect = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
             this.onFocus = new i0.EventEmitter();
@@ -34843,6 +34936,7 @@
             this.onClose = new i0.EventEmitter();
         }
         DatetimePickerComponent.prototype.ngOnInit = function () {
+            this.onInit.emit(this);
         };
         DatetimePickerComponent.prototype.writeValue = function (obj) {
             if (obj) {
@@ -35015,6 +35109,7 @@
         calendar: [{ type: i0.ViewChild, args: ['calendar', { static: true },] }],
         control: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }],
         onFocus: [{ type: i0.Output }],
@@ -35033,6 +35128,7 @@
             _this.appendTo = 'body';
             _this.defaultSelectedStyleClass = 'custom-select-item';
             _this._itemSelectedStyleClass = _this.defaultSelectedStyleClass;
+            _this.onInit = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
             _this.onCollapse = new i0.EventEmitter();
             _this.onExpand = new i0.EventEmitter();
@@ -35196,6 +35292,7 @@
             if (this.control.onInit) {
                 this.control.onInit(this);
             }
+            this.onInit.emit(this);
         };
         DropdownComponent.prototype.setDefaultSetting = function () {
             var _this = this;
@@ -36003,6 +36100,7 @@
         dataSource: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
         itemSelectedStyleClass: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }],
         onCollapse: [{ type: i0.Output }],
         onExpand: [{ type: i0.Output }],
@@ -37435,6 +37533,7 @@
             _this._translateService = _translateService;
             _this.disabled = false;
             _this.readOnly = false;
+            _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onUnSelect = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
@@ -37492,6 +37591,7 @@
             });
             this.advanceData.fields = this.getFields();
             _super.prototype.ngOnInit.call(this);
+            this.onInit.emit(this);
         };
         EntityPickerComponent.prototype.selectEntity = function () {
             this.showDetailForm = true;
@@ -37681,6 +37781,7 @@
         disabled: [{ type: i0.Input }],
         readOnly: [{ type: i0.Input }],
         children: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output, args: ['onSelect',] }],
         onUnSelect: [{ type: i0.Output, args: ['onUnSelect',] }],
         onChanged: [{ type: i0.Output, args: ['onChanged',] }]
@@ -38383,6 +38484,7 @@
             _this.inTaiLieuChung = false;
             _this.copyToFolderId = _this._commonService.guidEmpty();
             _this.multipleCheckWhenClickRow = true;
+            _this.onInit = new i0.EventEmitter();
             _this.onReady = new i0.EventEmitter();
             _this.entityKeyChange = new i0.EventEmitter();
             _this.closePopup = new i0.EventEmitter();
@@ -38487,6 +38589,7 @@
             }
             this.reloadData();
             this.checkAndLoadRootFolderContent();
+            this.onInit.emit(this);
         };
         FileManagerComponent.prototype.checkAndLoadRootFolderContent = function () {
             if (!this.inited || this.fileDataService)
@@ -39728,6 +39831,7 @@
         copyToFolderId: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
         multipleCheckWhenClickRow: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onReady: [{ type: i0.Output }],
         entityKeyChange: [{ type: i0.Output }],
         closePopup: [{ type: i0.Output }],
@@ -41206,6 +41310,7 @@
             _this.invalidFileLimitMessageSummary = 'Quá số lượng file cho phép, ';
             _this.invalidFileLimitMessageDetail = 'tối đa {0} file.';
             _this.sharedFolderType = exports.SharedFolderType.Tempt;
+            _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onRemove = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
@@ -41232,6 +41337,7 @@
             this.isDisabled = isDisabled;
         };
         FileUploadComponent.prototype.ngOnInit = function () {
+            this.onInit.emit(this);
         };
         FileUploadComponent.prototype.getFile = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -41386,6 +41492,7 @@
         invalidFileLimitMessageSummary: [{ type: i0.Input }],
         invalidFileLimitMessageDetail: [{ type: i0.Input }],
         sharedFolderType: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onRemove: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
@@ -41508,6 +41615,7 @@
             this.viewMode = false;
             this.inputStyleClass = '';
             this.autoFormat = true;
+            this.onInit = new i0.EventEmitter();
             this.onFocus = new i0.EventEmitter();
             this.onBlur = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
@@ -41526,6 +41634,7 @@
             if (!this.autoFormat) {
                 this.thousandSeperator = '';
             }
+            this.onInit.emit(this);
         };
         MaskComponent.prototype.writeValue = function (obj) {
             if (obj) {
@@ -41625,6 +41734,7 @@
         viewMode: [{ type: i0.Input }],
         inputStyleClass: [{ type: i0.Input }],
         autoFormat: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onFocus: [{ type: i0.Output }],
         onBlur: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
@@ -41690,6 +41800,7 @@
             this.suffix = '';
             this.prefix = '';
             this.decimalPlaces = 2;
+            this.onInit = new i0.EventEmitter();
             this.focus = new i0.EventEmitter();
             this.enterSmart = new i0.EventEmitter();
             this.enter = new i0.EventEmitter();
@@ -41697,6 +41808,7 @@
             this.change = new i0.EventEmitter();
         }
         NumberPickerRangeComponent.prototype.ngOnInit = function () {
+            this.onInit.emit(this);
         };
         NumberPickerRangeComponent.prototype.clear = function () {
             var re = (this.model[0] != null && this.model[0] !== '') || (this.model[1] != null && this.model[1] !== '');
@@ -41809,6 +41921,7 @@
         min: [{ type: i0.Input }],
         max: [{ type: i0.Input }],
         decimalPlaces: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         focus: [{ type: i0.Output }],
         enterSmart: [{ type: i0.Output }],
         enter: [{ type: i0.Output }],
@@ -42241,6 +42354,7 @@
         function RadioButtonListComponent(_crudService, _deviceDetectorService) {
             this._crudService = _crudService;
             this._deviceDetectorService = _deviceDetectorService;
+            this.onInit = new i0.EventEmitter();
             this.valueChange = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
             this.onDataSourceLoaded = new i0.EventEmitter();
@@ -42282,6 +42396,7 @@
             if (!this._deviceDetectorService.isDesktop()) {
                 this.hideTransitionOptions = this.showTransitionOptions = '';
             }
+            this.onInit.emit(this);
         };
         RadioButtonListComponent.prototype.setDefaultSetting = function () {
             var _this = this;
@@ -42533,6 +42648,7 @@
         dataSource: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         valueChange: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }],
         onDataSourceLoaded: [{ type: i0.Output }],
@@ -42557,6 +42673,7 @@
             _this.serviceCode = '';
             _this.entity = '';
             _this.chooseLabel = 'Chọn';
+            _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onRemove = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
@@ -42600,6 +42717,7 @@
         ServiceFileUploadComponent.prototype.ngOnInit = function () {
             this.setUp();
             this.subscribe();
+            this.onInit.emit(this);
         };
         ServiceFileUploadComponent.prototype.setUp = function () {
             this.accept = this.control.accept;
@@ -42976,6 +43094,7 @@
         entity: [{ type: i0.Input }],
         entityKey: [{ type: i0.Input }],
         chooseLabel: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onRemove: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
@@ -47762,6 +47881,7 @@
             var _this = _super.call(this, injector) || this;
             _this.disabled = false;
             _this.appendTo = 'body';
+            _this.onInit = new i0.EventEmitter();
             _this.change = new i0.EventEmitter();
             return _this;
         }
@@ -47784,7 +47904,7 @@
             this.disabled = isDisabled;
         };
         TnColorPickerComponent.prototype.ngOnInit = function () {
-            // this.model.value = '#ffffff';
+            this.onInit.emit(this);
         };
         TnColorPickerComponent.prototype.changePicker = function (evt) {
             this.model.inputValue = this.model.value;
@@ -47819,6 +47939,7 @@
     TnColorPickerComponent.propDecorators = {
         disabled: [{ type: i0.Input }],
         appendTo: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         change: [{ type: i0.Output }]
     };
 
@@ -48295,15 +48416,17 @@
         function TnTabViewComponent(_commonService) {
             this._commonService = _commonService;
             this.data = [];
+            this._hiddenTab = [];
+            this.hiddenInfo = {};
             this.allowViewAll = false;
             this.isDynamicHeight = false;
-            this.useScrollbar = false;
             this.onTabChange = new i0.EventEmitter();
             this.activeIndexChange = new i0.EventEmitter();
             this.template = {};
             this.onlyIcon = false;
             this.styleClass = 'tn-tabview-beauty';
             this.height = '100%';
+            this.ready = false;
         }
         Object.defineProperty(TnTabViewComponent.prototype, "vertical", {
             set: function (value) {
@@ -48314,6 +48437,21 @@
             configurable: true
         });
         ;
+        Object.defineProperty(TnTabViewComponent.prototype, "hiddenTab", {
+            set: function (value) {
+                if (value) {
+                    this._hiddenTab = value;
+                }
+                else {
+                    this._hiddenTab = [];
+                }
+                if (this.ready) {
+                    this.setHiddenInfo();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TnTabViewComponent.prototype, "activeIndex", {
             set: function (value) {
                 this.currentTabIndex = value;
@@ -48333,6 +48471,8 @@
                 }
                 this.currentTabIndex = currentTabIndex;
             }
+            this.ready = true;
+            this.setHiddenInfo();
         };
         TnTabViewComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
@@ -48345,6 +48485,13 @@
             });
             this.setStyleClass();
         };
+        TnTabViewComponent.prototype.setHiddenInfo = function () {
+            var _this = this;
+            this.hiddenInfo = {};
+            this._hiddenTab.forEach(function (tabCode) {
+                _this.hiddenInfo[tabCode] = true;
+            });
+        };
         TnTabViewComponent.prototype.setStyleClass = function () {
             var result = 'tn-tabview-beauty';
             if (this._vertical) {
@@ -48358,14 +48505,20 @@
         TnTabViewComponent.prototype.handleTabChange = function (evt) {
             this.currentTabIndex = evt.index;
             this.activeIndexChange.emit(this.currentTabIndex);
-            this.onTabChange.emit(evt);
+        };
+        TnTabViewComponent.prototype.handleTabLoaded = function (item) {
+            this.currentTabCode = item.code;
+            this.onTabChange.emit({
+                index: this.currentTabIndex,
+                code: this.currentTabCode
+            });
         };
         return TnTabViewComponent;
     }());
     TnTabViewComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'tn-tabview',
-                    template: "<div [style.height]=\"height\">\r\n    <p-tabView #tab orientation=\"top\" [styleClass]=\"styleClass\" [activeIndex]=\"currentTabIndex\"\r\n        (onChange)=\"handleTabChange($event)\">\r\n        <ng-container *ngFor=\"let item of data; let i = index\">\r\n            <p-tabPanel *ngIf=\"!item.hidden\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container *ngIf=\"allowViewAll || currentTabIndex == i\">\r\n                    <tn-custom-scrollbar *ngIf=\"useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </tn-custom-scrollbar>\r\n                    <ng-container *ngIf=\"!useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </p-tabPanel>\r\n        </ng-container>\r\n    </p-tabView>\r\n</div>",
+                    template: "<div [style.height]=\"height\">\r\n    <p-tabView #tab orientation=\"top\" [styleClass]=\"styleClass\" [activeIndex]=\"currentTabIndex\"\r\n        (onChange)=\"handleTabChange($event)\">\r\n        <ng-container *ngFor=\"let item of data; let i = index\">\r\n            <p-tabPanel *ngIf=\"!item.hidden && !hiddenInfo[item.code]\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container *ngIf=\"allowViewAll || item.alwayRender || currentTabIndex == i\">\r\n                    <tn-custom-scrollbar *ngIf=\"item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </tn-custom-scrollbar>\r\n                    <ng-container *ngIf=\"!item.useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <after-view-checked (loaded)=\"handleTabLoaded(item)\"></after-view-checked>\r\n                </ng-container>\r\n            </p-tabPanel>\r\n        </ng-container>\r\n    </p-tabView>\r\n</div>",
                     styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.accordion-link ul li{background-color:#a4a5a4;border-radius:4px;color:#fff;display:inline-block;line-height:20px;margin-bottom:.5rem;margin-left:.5rem;padding:6px 12px;transition:all .3s ease-out}.accordion-link ul li:hover{background-color:#3db762;cursor:pointer}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{display:flex;padding:.5rem .5rem 0}.hoso-container{height:auto;max-height:none}.tab-number{align-items:center;background:#a4a5a4;border-radius:2px;color:#fff;display:inline-flex;font-size:.9em;height:20px;justify-content:center;margin-right:.5rem;padding-top:2px;width:20px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:-webkit-sticky;position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{border-radius:4px;display:flex;flex:1;margin-left:.5rem;margin-right:.5rem;overflow:auto}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width:640px){.accordion-link,.toolbar{overflow-x:auto;white-space:nowrap}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}"]
                 },] }
     ];
@@ -48376,10 +48529,10 @@
         children: [{ type: i0.ContentChildren, args: [i0.TemplateRef,] }],
         vertical: [{ type: i0.Input }],
         data: [{ type: i0.Input }],
+        hiddenTab: [{ type: i0.Input }],
         allowViewAll: [{ type: i0.Input }],
         activeIndex: [{ type: i0.Input }],
         isDynamicHeight: [{ type: i0.Input }],
-        useScrollbar: [{ type: i0.Input }],
         onTabChange: [{ type: i0.Output }],
         activeIndexChange: [{ type: i0.Output }]
     };
@@ -48423,6 +48576,7 @@
             _this.required = false;
             _this.height = 200;
             _this.field = '';
+            _this.onInit = new i0.EventEmitter();
             _this.keydown = new i0.EventEmitter();
             _this.onBlur = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
@@ -48451,6 +48605,7 @@
         }
         TnTinymceComponent.prototype.ngOnInit = function () {
             this.subscribeContentInsert();
+            this.onInit.emit(this);
         };
         TnTinymceComponent.prototype.ngAfterViewInit = function () {
             var mode = this.mode;
@@ -48808,6 +48963,7 @@
         height: [{ type: i0.Input }],
         field: [{ type: i0.Input }],
         languageCode: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         keydown: [{ type: i0.Output }],
         onBlur: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
@@ -49173,6 +49329,7 @@
             });
             _this.multiple = false;
             _this.disabled = false;
+            _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onUnSelect = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
@@ -49284,6 +49441,7 @@
             this.createSchemaSearch();
             this.updateFuncCheckReadOnlyItem();
             this.onReady.emit();
+            this.onInit.emit(this);
         };
         UserPickerComponent.prototype.updateFuncCheckReadOnlyItem = function () {
             if (this.readOnlyValues && this.readOnlyValues.length) {
@@ -49804,6 +49962,7 @@
         multiple: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         readOnlyValues: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output, args: ['onSelect',] }],
         onUnSelect: [{ type: i0.Output, args: ['onUnSelect',] }],
         onChanged: [{ type: i0.Output, args: ['onChanged',] }],
@@ -50309,6 +50468,7 @@
             var _this = _super.call(this, _injector) || this;
             _this._vanBanDenService = _vanBanDenService;
             _this._vanBanDiService = _vanBanDiService;
+            _this.onInit = new i0.EventEmitter();
             _this.onChanged = new i0.EventEmitter();
             _this.onReady = new i0.EventEmitter();
             _this.environment = {};
@@ -50355,6 +50515,7 @@
             this.setting.fieldSearchText = ['code', 'name'];
             this.setting.objectName = ' văn bản';
             _super.prototype.ngOnInit.call(this);
+            this.onInit.emit(this);
         };
         VanBanPickerComponent.prototype.getVanBanDen = function (originGridInfo) {
             var _this = this;
@@ -50592,6 +50753,7 @@
         loaiVanBan: [{ type: i0.Input }],
         readOnly: [{ type: i0.Input }],
         control: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }],
         onReady: [{ type: i0.Output }]
     };
@@ -57104,6 +57266,7 @@
         __extends(ReferenceTextBoxComponent, _super);
         function ReferenceTextBoxComponent(injector) {
             var _this = _super.call(this, injector) || this;
+            _this.onInit = new i0.EventEmitter();
             _this.data = '';
             _this.ready = false;
             return _this;
@@ -57123,6 +57286,7 @@
             this.control._component = this;
             this.ready = true;
             this.checkAndGetData();
+            this.onInit.emit(this);
         };
         ReferenceTextBoxComponent.prototype.checkAndGetData = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -57176,7 +57340,8 @@
     ]; };
     ReferenceTextBoxComponent.propDecorators = {
         control: [{ type: i0.Input }],
-        value: [{ type: i0.Input }]
+        value: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }]
     };
 
     var LoadingPageV1Component = /** @class */ (function () {