tnx-shared 5.3.424 → 5.3.426

package/bundles/tnx-shared.umd.js

@@ -1714,6 +1714,7 @@
             _this.titleUnPicked = 'Danh sách các mục chưa chọn';
             _this.titlePicked = 'Danh sách các mục đã chọn';
             _this.fieldsPicked = null;
+            _this.datasourceFieldFilter = [];
             for (var key in init) {
                 _this[key] = init[key];
             }
@@ -18023,7 +18024,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\">\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n        (keydown.shift.tab)=\"preventBlur($event)\">\n        <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\n            <ng-container *ngFor=\"let control of setting.schema\">\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                    control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\n                    mdWidth: control.mdWidth, rowSpan: control.rowSpan\n                }\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n    let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n        [class.error]=\"data._errors[control.field].length > 0\"\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n        <div class=\"label\" *ngIf=\"showLabel\">\n            <label *ngIf=\"control.label && !control.isHtmlLabel\" [pTooltip]=\"control.fullLabel\"\n                tooltipPosition=\"top\">{{control.label}}\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </label>\n            <ng-container *ngIf=\"control.label && control.isHtmlLabel\">\n                <label [innerHTML]=\"control.label | safeHtml\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">\n                </label>\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </ng-container>\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n        </div>\n        <ng-container [ngSwitch]=\"control.controlType\">\n            <ng-container *ngSwitchCase=\"'label'\">\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'title'\">\n                <label *ngIf=\"!control.isHtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n                <label *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"></label>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text'\">\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n                    <input [placeholder]=\"control.placeholder\" [tooltipDisabled]=\"control.dataFormat == 'password'\"\n                        [required]=\"control.validators && control.validators.required\" [pTooltip]=\"data[control.field]\"\n                        tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n                        [attr.disabled]=\" checkDisabled(data, control) ? true : null\" pInputText\n                        [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\n                        [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n                </div>\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\n                    [tooltipDisabled]=\"control.dataFormat == 'password'\" [pTooltip]=\"data[control.field]\"\n                    tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n                    [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'htmlPreview'\">\n                <html-preview [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </html-preview>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'reference-text'\">\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'template'\">\n                <ng-container [ngTemplateOutlet]=\"control.template\"\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'content'\">\n                <div class=\"control-content label\">\n                    <span [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'mask'\">\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\" tooltipPosition=\"top\"\n                    [tooltipDisabled]=\"control.dataFormat == 'password'\" [pTooltip]=\"data[control.field]\"\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-mask>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'numberrange'\">\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\n                    [max]=\"control.max\" [placeholder]=\"control.placeholder\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\n                </tn-number-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n                    tooltipPosition=\"top\" [pTooltip]=\"data[control.field] | number: '1.0-0'\"\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (ngModelChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'textarea'\">\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n                    [placeholder]=\"control.placeholder\"\n                    (keyup)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'editor'\">\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\n                    [control]=\"control\"\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onKeyUp)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-tinymce>\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetime'\">\n                <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </datetime-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\n                <app-autocomplete-datasource [control]=\"control\"\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </app-autocomplete-datasource>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-datetime-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'dropdown'\">\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\" [data]=\"data\"\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </dropdown>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'imageuploader'\">\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\n                    [disabled]=\"control.disabled\" [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\n                            $implicit: files\n                        }\"></ng-container>\n                    </ng-template>\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\n                            $implicit: file\n                        }\"></ng-container>\n                    </ng-template>\n                </app-image-uploader>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [hiddenCreateFolder]=\"control.hiddenCreateFolder\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\n                    [filePickerSetting]=\"control.filePickerSetting\" [dataForm]=\"data\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [parentSetting]=\"setting\"\n                    [noFileMessage]=\"control.noFileMessage\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelected)=\"control.onSelected($event)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </file-manager>\n            </ng-container>\n            <span *ngSwitchCase=\"'fileUpload'\">\n                <file-upload [sharedFolderType]=\"control.sharedFolderType\" [maxFileSize]=\"control.maxFileSize\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [control]=\"control\"\n                    [showDeleteFile]=\"control.showDeleteFile\" [readonly]=\"control.readonly\" [accept]=\"control.accept\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </file-upload>\n            </span>\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </service-file-upload>\n            </span>\n            <ng-container *ngSwitchCase=\"'user-picker'\">\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </user-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'switch'\">\n                <p-inputSwitch [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </p-inputSwitch>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [binary]=\"true\"\n                        [label]=\"control.isCustomLabel ? control.displayLabel : (!control.hiddenLabel ? control.label : null)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-checkbox>\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'button'\">\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\" [disabled]=\"control.disabled\"\n                    [label]=\"control.buttonText | translate\" [ngStyle]=\"control.btStyle\" [pTooltip]=\"control.fullLabel\"\n                    tooltipPosition=\"top\" (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'container'\">\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n                    <ng-container *ngFor=\"let subControl of control.controls\">\n                        <ng-container *ngTemplateOutlet=\"customControl; context: {\n                            control: subControl,\n                            data: data[control.field],\n                            parentPath: path,\n                            rowIndex: rowIndex,\n                            path: path + '.' + subControl.field,\n                            showLabel: subControl.showLabel,\n                            mdWidth: subControl.mdWidth,\n                            rowSpan: subControl.rowSpan\n                        }\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </check-box-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n                </radio-button-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\n                <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-color-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'spanControl'\">\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorControl'\">\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address-new'\">\n                <address-picker-new [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker-new>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address'\">\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </autocomplete-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </cocautochuc-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list-new>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'vanban'\">\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </vanban-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'congviec'\">\n                <div>\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </congviec-picker>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'percent'\">\n                <div>\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </tn-mask>\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-slider>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'chips'\">\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    [placeholder]=\"control.placeholder\"\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </entity-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'table'\">\n                <div [class]=\"control.class\">\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n                            [rowTrackBy]=\"trackByFuncId\"\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\n                            <ng-template pTemplate=\"colgroup\">\n                                <colgroup>\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [style.width]=\"subControl.width\" />\n                                    </ng-container>\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n                                </colgroup>\n                            </ng-template>\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-columns>\n                                <ng-container\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n                                </ng-container>\n                            </ng-template>\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-rowData let-columns>\n                                <tr>\n                                    <th *ngIf=\"control.showNumber\" class=\"th-sticky stt\">\n                                        {{ 'TT' |translate}}\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [width]=\"subControl.width\"\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n                                            style=\"text-align: center;\">\n                                            {{subControl.label}}\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\n                                            <span *ngIf=\"subControl.description\"\n                                                class=\"subControl-description\">({{subControl.description}})</span>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </th>\n                                    </ng-container>\n                                    <th *ngIf=\"control.enableReorderRow\">\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n                                        <div class=\"cell-header-function\"><span>{{'Ch\u1EE9c n\u0103ng'|translate}}</span></div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                </tr>\n                            </ng-template>\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n                                <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\"\n                                    (click)=\"handleRowClick(rowData, control)\">\n                                    <td *ngIf=\"control.showNumber\" class=\"stt th-sticky\"\n                                        style=\"text-align: center; vertical-align: inherit\">\n                                        <span>\n                                            {{ri + 1}}\n                                        </span>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                                                    control: subControl,\n                                                    data: rowData,\n                                                    index: ri,\n                                                    tablePath: path,\n                                                    parentPath: path + '[' + ri + ']',\n                                                    path: path + '[' + ri + '].' + subControl.field,\n                                                    showLabel: false,\n                                                    mdWidth: 12,\n                                                    rowSpan: 1\n                                                }\">\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n                                            </ng-template>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n                                            pReorderableRowHandle></i>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n                                        class=\"column-function text-center\">\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"saveRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"editRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n                                                type=\"button\" pButton\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n                                                icon=\"pi pi-ellipsis-v\"\n                                                class=\"link-or-action p-button-text p-button-rounded\"\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\n                                        </div>\n                                        <div *ngIf=\"control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n                                            </ng-container>\n                                        </div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                </tr>\n                            </ng-template>\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n                                </ng-container>\n                            </ng-template>\n                        </p-table>\n                    </tn-custom-scrollbar>\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n                            </p-checkbox>\n                        </span>\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n                            (click)=\"messageRow( -1, control, path)\"></button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"control.template\">\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\n                    [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n            </ng-container>\n            <div *ngIf=\"control.message\" class=\"control-message\">\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n        <div class=\"error-container\">\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\n                <div class=\"error-item\" *ngIf=\"error\">\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n    <div class=\"error-content\">\n        <i class=\"pi pi-ban\"></i>\n        <span> {{content}}</span>\n    </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n    <ng-container>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.isHtml\" [attr.label-index]=\"control.indexLabel\"\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n            [for]=\"control.for\">{{control.text | translate}}</label>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"\n            [attr.label-index]=\"control.indexLabel\"></label>\n    </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<!-- <ng-template #templateCongViecForm let-control=\"control\">\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n    </base-congviec-form>\n</ng-template> -->\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\n    (onHide)=\"tableFormDialogModel.showEditForm = false\">\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\n    </table-detail-form>\n</tn-dialog>",
+                    template: "<div [class]=\"_styleClass\">\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n        (keydown.shift.tab)=\"preventBlur($event)\">\n        <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\n            <ng-container *ngFor=\"let control of setting.schema\">\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                    control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel,\n                    mdWidth: control.mdWidth, rowSpan: control.rowSpan\n                }\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n    let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n        [class.error]=\"data._errors[control.field].length > 0\"\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n        <div class=\"label\" *ngIf=\"showLabel\">\n            <label *ngIf=\"control.label && !control.isHtmlLabel\" [pTooltip]=\"control.fullLabel\"\n                tooltipPosition=\"top\">{{control.label}}\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </label>\n            <ng-container *ngIf=\"control.label && control.isHtmlLabel\">\n                <label [innerHTML]=\"control.label | safeHtml\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">\n                </label>\n                <span *ngIf=\"control.required || control.showIconRequired\" class=\"star-required\">*</span>\n            </ng-container>\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n        </div>\n        <ng-container [ngSwitch]=\"control.controlType\">\n            <ng-container *ngSwitchCase=\"'label'\">\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'title'\">\n                <label *ngIf=\"!control.isHtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n                <label *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"></label>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text'\">\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n                    <input [placeholder]=\"control.placeholder\" [tooltipDisabled]=\"control.dataFormat == 'password'\"\n                        [required]=\"control.validators && control.validators.required\" [pTooltip]=\"data[control.field]\"\n                        tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n                        [attr.disabled]=\" checkDisabled(data, control) ? true : null\" pInputText\n                        [type]=\"control.dataFormat\" [max]=\"control.max\" [min]=\"control.min\"\n                        [maxlength]=\"control.maxLength\" [(ngModel)]=\"data[control.field]\"\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n                </div>\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\n                    [tooltipDisabled]=\"control.dataFormat == 'password'\" [pTooltip]=\"data[control.field]\"\n                    tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n                    [max]=\"control.max\" [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'htmlPreview'\">\n                <html-preview [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </html-preview>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'reference-text'\">\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'template'\">\n                <ng-container [ngTemplateOutlet]=\"control.template\"\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'content'\">\n                <div class=\"control-content label\">\n                    <span [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'mask'\">\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\" tooltipPosition=\"top\"\n                    [tooltipDisabled]=\"control.dataFormat == 'password'\" [pTooltip]=\"data[control.field]\"\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-mask>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'numberrange'\">\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\n                    [max]=\"control.max\" [placeholder]=\"control.placeholder\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\n                </tn-number-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n                    tooltipPosition=\"top\" [pTooltip]=\"data[control.field] | number: '1.0-0'\"\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (ngModelChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'textarea'\">\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n                    [placeholder]=\"control.placeholder\"\n                    (keyup)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'editor'\">\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\"\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\n                    [control]=\"control\"\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onKeyUp)=\"handleKeyUp(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-tinymce>\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetime'\">\n                <datetime-picker [disabled]=\"checkDisabled(data, control)\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </datetime-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\n                <app-autocomplete-datasource [control]=\"control\"\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </app-autocomplete-datasource>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-datetime-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'dropdown'\">\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\" [data]=\"data\"\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </dropdown>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'imageuploader'\">\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\n                    [disabled]=\"control.disabled\" [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\n                            $implicit: files\n                        }\"></ng-container>\n                    </ng-template>\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\n                            $implicit: file\n                        }\"></ng-container>\n                    </ng-template>\n                </app-image-uploader>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [hiddenCreateFolder]=\"control.hiddenCreateFolder\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\n                    [filePickerSetting]=\"control.filePickerSetting\" [dataForm]=\"data\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [parentSetting]=\"setting\"\n                    [noFileMessage]=\"control.noFileMessage\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelected)=\"control.onSelected($event)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </file-manager>\n            </ng-container>\n            <span *ngSwitchCase=\"'fileUpload'\">\n                <file-upload [sharedFolderType]=\"control.sharedFolderType\" [maxFileSize]=\"control.maxFileSize\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" [control]=\"control\"\n                    [showDeleteFile]=\"control.showDeleteFile\" [readonly]=\"control.readonly\" [accept]=\"control.accept\"\n                    [parentSetting]=\"setting\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </file-upload>\n            </span>\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\n                    [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    [parentSetting]=\"setting\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\n                </service-file-upload>\n            </span>\n            <ng-container *ngSwitchCase=\"'user-picker'\">\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [multiple]=\"control.multiple\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </user-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'switch'\">\n                <p-inputSwitch [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </p-inputSwitch>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [binary]=\"true\"\n                        [label]=\"control.isCustomLabel ? control.displayLabel : (!control.hiddenLabel ? control.label : null)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-checkbox>\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'button'\">\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\n                    [disabled]=\"control.disabled\" [label]=\"control.buttonText | translate\" [ngStyle]=\"control.btStyle\"\n                    [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\"\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'container'\">\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n                    <ng-container *ngFor=\"let subControl of control.controls\">\n                        <ng-container *ngTemplateOutlet=\"customControl; context: {\n                            control: subControl,\n                            data: data[control.field],\n                            parentPath: path,\n                            rowIndex: rowIndex,\n                            path: path + '.' + subControl.field,\n                            showLabel: subControl.showLabel,\n                            mdWidth: subControl.mdWidth,\n                            rowSpan: subControl.rowSpan\n                        }\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </check-box-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n                </radio-button-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\n                <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </tn-color-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'spanControl'\">\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorControl'\">\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address-new'\">\n                <address-picker-new [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker-new>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address'\">\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </autocomplete-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </cocautochuc-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list-new>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'vanban'\">\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </vanban-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'congviec'\">\n                <div>\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </congviec-picker>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'percent'\">\n                <div>\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </tn-mask>\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                    </p-slider>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'chips'\">\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    [placeholder]=\"control.placeholder\"\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [(ngModel)]=\"data[control.field]\"\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\n                </entity-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'table'\">\n                <div [class]=\"control.class\">\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n                            [rowTrackBy]=\"trackByFuncId\"\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\n                            <ng-template pTemplate=\"colgroup\">\n                                <colgroup>\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [style.width]=\"subControl.width\" />\n                                    </ng-container>\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n                                </colgroup>\n                            </ng-template>\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-columns>\n                                <ng-container\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n                                </ng-container>\n                            </ng-template>\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-rowData let-columns>\n                                <tr>\n                                    <th *ngIf=\"control.showNumber\" class=\"th-sticky stt\">\n                                        {{ 'TT' |translate}}\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [width]=\"subControl.width\"\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n                                            style=\"text-align: center;\">\n                                            {{subControl.label}}\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\n                                            <span *ngIf=\"subControl.description\"\n                                                class=\"subControl-description\">({{subControl.description}})</span>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </th>\n                                    </ng-container>\n                                    <th *ngIf=\"control.enableReorderRow\">\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n                                        <div class=\"cell-header-function\"><span>{{'Ch\u1EE9c n\u0103ng'|translate}}</span></div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                </tr>\n                            </ng-template>\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n                                <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\"\n                                    (click)=\"handleRowClick(rowData, control)\">\n                                    <td *ngIf=\"control.showNumber\" class=\"stt th-sticky\"\n                                        style=\"text-align: center; vertical-align: inherit\">\n                                        <span>\n                                            {{ri + 1}}\n                                        </span>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\n                                                    control: subControl,\n                                                    data: rowData,\n                                                    index: ri,\n                                                    tablePath: path,\n                                                    parentPath: path + '[' + ri + ']',\n                                                    path: path + '[' + ri + '].' + subControl.field,\n                                                    showLabel: false,\n                                                    mdWidth: 12,\n                                                    rowSpan: 1\n                                                }\">\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n                                            </ng-template>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n                                            pReorderableRowHandle></i>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n                                        class=\"column-function text-center\">\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"saveRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"editRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n                                                type=\"button\" pButton\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n                                                icon=\"pi pi-ellipsis-v\"\n                                                class=\"link-or-action p-button-text p-button-rounded\"\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\n                                        </div>\n                                        <div *ngIf=\"control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n                                            </ng-container>\n                                        </div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                </tr>\n                            </ng-template>\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n                                </ng-container>\n                            </ng-template>\n                        </p-table>\n                    </tn-custom-scrollbar>\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n                            </p-checkbox>\n                        </span>\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n                            (click)=\"messageRow( -1, control, path)\"></button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"control.template\">\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\n                    [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n            </ng-container>\n            <div *ngIf=\"control.message\" class=\"control-message\">\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n        <div class=\"error-container\">\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\n                <div class=\"error-item\" *ngIf=\"error\">\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n    <div class=\"error-content\">\n        <i class=\"pi pi-ban\"></i>\n        <span> {{content}}</span>\n    </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n    <ng-container>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.isHtml\" [attr.label-index]=\"control.indexLabel\"\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n            [for]=\"control.for\">{{control.text | translate}}</label>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.isHtml\" [innerHTML]=\"control.text | safeHtml\"\n            [attr.label-index]=\"control.indexLabel\"></label>\n    </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<!-- <ng-template #templateCongViecForm let-control=\"control\">\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n    </base-congviec-form>\n</ng-template> -->\n<tn-dialog *ngIf=\"tableFormDialogModel.showEditForm\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"tableFormDialogModel.header | translate\" [popupSize]=\"tableFormDialogModel.popupSize\"\n    (onHide)=\"tableFormDialogModel.showEditForm = false\">\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormDialogModel.data\"\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormDialogModel.showEditForm = false\">\n    </table-detail-form>\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;position:absolute;padding-left:.2em;padding-top:.1em}th>span.star-required{color:red;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;background:#f8f9fa;color:#495057;border:1px solid #e9ecef}.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-weight:700;font-size:.85em}.view-mode>span:not(:empty){display:inline-block;width:100%;padding:5px 0}.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{font-size:1.2rem;font-weight:700;color:#025ba7;border-bottom:1px solid #cfcfcf;text-transform:uppercase;padding:5px;margin-bottom:5px}.crud-form-control.type-title>.label{margin-bottom:0}.control-description,.crud-form-control .subControl-description{font-size:.8rem;font-weight:700;color:#007eff;margin-bottom:5px}.control-description{padding-left:.75rem}.th-sticky{text-align:center!important;z-index:2!important;position:sticky!important;top:0;background:inherit}.th-sticky.stt{left:0}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}.no-value{font-size:.8em}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep crud-form .crud-form-control>div.label{margin-bottom:5px;font-size:.9rem;height:1.15em}::ng-deep crud-form .crud-form-control>div.label+*{width:100%}::ng-deep crud-form .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content{display:flex;position:relative;color:red;font-size:.9em;animation:fadeIn .1s}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;padding-top:1px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep crud-form .crud-form-control .control-message{margin-top:5px;font-size:.9rem}::ng-deep crud-form .crud-form-control .control-message .green{color:#00af00}::ng-deep crud-form .crud-form-control .control-message .red{color:red}::ng-deep crud-form .crud-form-control .control-message .blue{color:#0095ff}::ng-deep crud-form .crud-form-control.no-label>div.label{display:none}::ng-deep crud-form .crud-form-control.error .p-dropdown,::ng-deep crud-form .crud-form-control.error .p-inputtext,::ng-deep crud-form .crud-form-control.error .p-multiselect,::ng-deep crud-form .crud-form-control.error .tn-dropdown,::ng-deep crud-form .crud-form-control.error input,::ng-deep crud-form .crud-form-control.error select,::ng-deep crud-form .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep crud-form .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep crud-form .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}@media screen and (min-width:768px){::ng-deep crud-form .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}::ng-deep crud-form .grid .p-md-1{width:unset;grid-column:span 1}::ng-deep crud-form .grid .p-md-2{width:unset;grid-column:span 2}::ng-deep crud-form .grid .p-md-3{width:unset;grid-column:span 3}::ng-deep crud-form .grid .p-md-4{width:unset;grid-column:span 4}::ng-deep crud-form .grid .p-md-5{width:unset;grid-column:span 5}::ng-deep crud-form .grid .p-md-6{width:unset;grid-column:span 6}::ng-deep crud-form .grid .p-md-7{width:unset;grid-column:span 7}::ng-deep crud-form .grid .p-md-8{width:unset;grid-column:span 8}::ng-deep crud-form .grid .p-md-9{width:unset;grid-column:span 9}::ng-deep crud-form .grid .p-md-10{width:unset;grid-column:span 10}::ng-deep crud-form .grid .p-md-11{width:unset;grid-column:span 11}::ng-deep crud-form .grid .p-md-12{width:unset;grid-column:span 12}::ng-deep crud-form .grid .row-span-1{grid-row:span 1}::ng-deep crud-form .grid .row-span-2{grid-row:span 2}::ng-deep crud-form .grid .row-span-3{grid-row:span 3}::ng-deep crud-form .grid .row-span-4{grid-row:span 4}::ng-deep crud-form .grid .row-span-5{grid-row:span 5}::ng-deep crud-form .grid .row-span-6{grid-row:span 6}::ng-deep crud-form .grid .row-span-7{grid-row:span 7}::ng-deep crud-form .grid .row-span-8{grid-row:span 8}::ng-deep crud-form .grid .row-span-9{grid-row:span 9}::ng-deep crud-form .grid .row-span-10{grid-row:span 10}::ng-deep crud-form .grid .row-span-11{grid-row:span 11}::ng-deep crud-form .grid .row-span-12{grid-row:span 12}::ng-deep crud-form .grid .row-span-13{grid-row:span 13}::ng-deep crud-form .grid .row-span-14{grid-row:span 14}::ng-deep crud-form .grid .row-span-15{grid-row:span 15}::ng-deep crud-form .grid .row-span-16{grid-row:span 16}::ng-deep crud-form .grid .row-span-17{grid-row:span 17}::ng-deep crud-form .grid .row-span-18{grid-row:span 18}::ng-deep crud-form .grid .row-span-19{grid-row:span 19}::ng-deep crud-form .grid .row-span-20{grid-row:span 20}::ng-deep crud-form .grid .row-span-21{grid-row:span 21}::ng-deep crud-form .grid .row-span-22{grid-row:span 22}::ng-deep crud-form .grid .row-span-23{grid-row:span 23}::ng-deep crud-form .grid .row-span-24{grid-row:span 24}::ng-deep crud-form .grid .row-span-25{grid-row:span 25}::ng-deep crud-form .grid .row-span-26{grid-row:span 26}::ng-deep crud-form .grid .row-span-27{grid-row:span 27}::ng-deep crud-form .grid .row-span-28{grid-row:span 28}::ng-deep crud-form .grid .row-span-29{grid-row:span 29}::ng-deep crud-form .grid .row-span-30{grid-row:span 30}::ng-deep crud-form .grid .row-span-31{grid-row:span 31}::ng-deep crud-form .grid .row-span-32{grid-row:span 32}::ng-deep crud-form .grid .row-span-33{grid-row:span 33}::ng-deep crud-form .grid .row-span-34{grid-row:span 34}::ng-deep crud-form .grid .row-span-35{grid-row:span 35}::ng-deep crud-form .grid .row-span-36{grid-row:span 36}::ng-deep crud-form .grid .row-span-37{grid-row:span 37}::ng-deep crud-form .grid .row-span-38{grid-row:span 38}::ng-deep crud-form .grid .row-span-39{grid-row:span 39}::ng-deep crud-form .grid .row-span-40{grid-row:span 40}::ng-deep crud-form .grid .row-span-41{grid-row:span 41}::ng-deep crud-form .grid .row-span-42{grid-row:span 42}::ng-deep crud-form .grid .row-span-43{grid-row:span 43}::ng-deep crud-form .grid .row-span-44{grid-row:span 44}::ng-deep crud-form .grid .row-span-45{grid-row:span 45}::ng-deep crud-form .grid .row-span-46{grid-row:span 46}::ng-deep crud-form .grid .row-span-47{grid-row:span 47}::ng-deep crud-form .grid .row-span-48{grid-row:span 48}::ng-deep crud-form .grid .row-span-49{grid-row:span 49}::ng-deep crud-form .grid .row-span-50{grid-row:span 50}}:host ::ng-deep .tox-tinymce{border:none;border-top:1px solid #ccc;overflow:unset}:host ::ng-deep .tox-tinymce .tox-editor-container{overflow:unset}:host ::ng-deep .tox-tinymce .tox-toolbar{border:1px solid #ccc;border-bottom:none}:host ::ng-deep .tox-tinymce .tox-edit-area{border:1px solid #ccc}:host ::ng-deep .tox-tinymce .tox-edit-area iframe{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}:host ::ng-deep .tox-tinymce .tox-menubar{border:1px solid #ccc}:host ::ng-deep .tox .tox-edit-area.tinymce-focus{border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px 0 #66afe9;transition:box-shadow .3s,border-color .3s;transition-property:box-shadow,border-color;transition-duration:.3s,.3s;transition-timing-function:ease,ease;transition-delay:0s,0s}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}"]
                 },] }
@@ -26175,7 +26176,8 @@
                             if (itemWorkflowHistoryLast
                                 && itemWorkflowHistoryLast.actionCode != MaActionBatDauQuyTrinh
                                 && itemWorkflowHistoryLast.userIdCreated.toUpperCase() == userIdStringUpper
-                                && this.setting.showButtonThuHoi) {
+                                && this.setting.showButtonThuHoi
+                                && !rowData.hiddenButtonThuHoi) {
                                 buttonContexts.push({
                                     icon: 'pi pi-replay',
                                     label: 'Thu hồi',
@@ -38026,13 +38028,15 @@
 
     var FileUploadComponent = /** @class */ (function (_super) {
         __extends(FileUploadComponent, _super);
-        function FileUploadComponent(_fileObjectService, _notifierService, _downloadLinkService, _moduleConfigService, _fileExplorerService, _injector) {
+        function FileUploadComponent(_fileObjectService, _notifierService, _downloadLinkService, _moduleConfigService, _fileExplorerService, _deviceDetectorService, _userService, _injector) {
             var _this = _super.call(this, _injector) || this;
             _this._fileObjectService = _fileObjectService;
             _this._notifierService = _notifierService;
             _this._downloadLinkService = _downloadLinkService;
             _this._moduleConfigService = _moduleConfigService;
             _this._fileExplorerService = _fileExplorerService;
+            _this._deviceDetectorService = _deviceDetectorService;
+            _this._userService = _userService;
             _this.chooseLabel = 'Chọn';
             _this.readonly = true;
             _this.showDeleteFile = true;
@@ -38046,6 +38050,7 @@
             _this.invalidFileLimitMessageDetail = 'tối đa {0} file.';
             _this.sharedFolderType = exports.SharedFolderType.Tempt;
             _this.control = new FileUploadControlSchema();
+            _this.parentSetting = new CrudFormSetting();
             _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onRemove = new i0.EventEmitter();
@@ -38066,7 +38071,27 @@
                     show: false,
                 }
             };
+            _this.formIds = {
+                createFolder: 'createFolder',
+                renameFile: 'renameFile',
+                shareFile: 'shareFile',
+                shareFolder: 'shareFolder',
+                fileViewer: 'fileViewer',
+                fileVersionList: 'fileVersionList',
+                signatureDetail: 'signatureDetail',
+                kySoSim: 'kySoSim',
+                viewDetail: 'viewDetail'
+            };
+            _this.signatureFormModel = {
+                formData: new CrudFormData(),
+                show: false,
+                popupSize: new PopupSize({
+                    width: 600,
+                    height: 400
+                })
+            };
             _this.environment = _this._moduleConfigService.getConfig().environment;
+            _this._moduleConfig = _moduleConfigService.getConfig();
             return _this;
         }
         FileUploadComponent.prototype.writeValue = function (obj) {
@@ -38086,22 +38111,34 @@
             if (this.control.isPublic != null && this.control.isPublic != undefined) {
                 this.isPublic = this.control.isPublic;
             }
+            this.forms[this.formIds.signatureDetail] = {
+                header: 'Thông tin chữ ký số',
+                show: false,
+            };
             this.onInit.emit(this);
         };
         FileUploadComponent.prototype.getFile = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var fileObject;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (!this.fileId) return [3 /*break*/, 2];
                             this.loading = true;
                             this.notification = 'Đang đính kèm...';
                             return [4 /*yield*/, this._fileObjectService.getDetail(this.fileId)];
                         case 1:
-                            fileObject = (_a.sent()).data;
+                            fileObject = (_b.sent()).data;
                             if (fileObject) {
                                 this.selectedFileName = fileObject.name;
+                                this.selectedFile = fileObject;
+                                this._fileExplorerService.getSignatureInfoByFileId(this.fileId).then(function (rs) {
+                                    var _a;
+                                    if (rs.success && ((_a = rs.data) === null || _a === void 0 ? void 0 : _a.length)) {
+                                        _this.selectedFile.signatures = rs.data;
+                                    }
+                                });
                                 this.hasFile = true;
                                 this.loading = false;
                                 this.notification = null;
@@ -38110,7 +38147,7 @@
                             else {
                                 this.hasFile = false;
                             }
-                            _a.label = 2;
+                            _b.label = 2;
                         case 2:
                             this.control.hasFile = this.hasFile;
                             return [2 /*return*/];
@@ -38120,11 +38157,76 @@
         };
         FileUploadComponent.prototype.setMenu = function () {
             var _this = this;
-            this.menu = [{
+            this.menu = [
+                {
                     label: 'Tải về', icon: 'fas fa-download', command: function () {
                         _this.onDownloadFile();
                     }
-                }];
+                },
+                {
+                    label: 'Ký số cá nhân (SIM)',
+                    icon: 'fas fa-sim-card',
+                    command: function () {
+                        _this.signKySimFile(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && !this.parentSetting.hiddenKySoSimCaNhan),
+                },
+                {
+                    label: 'Ký số SmartCA',
+                    icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signatureFormModel.show = true;
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && !this.parentSetting.hiddenKySoSmartCA),
+                },
+                {
+                    label: 'Ký số cá nhân (USB)', icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signFile(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenKySoUsbCaNhan),
+                },
+                {
+                    label: 'Ký số VNPTCA', icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signVNPTCA(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenKySoVNPTCA),
+                },
+                {
+                    label: 'Bút phê', icon: 'fas fa-comment-dots',
+                    command: function () {
+                        _this.addComment(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenButPhe),
+                },
+                {
+                    label: 'Bút phê và ký', icon: 'fas fa-comment-medical',
+                    command: function () {
+                        _this.addCommentAndSign(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenButPhe),
+                },
+                {
+                    label: 'Ký số đơn vị (USB)', icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signFileDonVi(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenKySoDonVi),
+                },
+            ];
         };
         FileUploadComponent.prototype.showContextMenu = function (evt) {
             this.contextMenu.toggle(evt);
@@ -38135,6 +38237,11 @@
                 this.file.basicFileInput.nativeElement.click();
             }
         };
+        FileUploadComponent.prototype.viewListSign = function (e, signatures) {
+            e.stopPropagation();
+            this.forms[this.formIds.signatureDetail].show = true;
+            this.model.advanceData = signatures;
+        };
         FileUploadComponent.prototype.onSelectFile = function (evt) {
             var _this = this;
             if (evt.errorFiles && evt.errorFiles.length > 0) {
@@ -38164,6 +38271,12 @@
                         _this.writeValue(rs.data);
                         _this.onChangeBase(rs.data);
                         _this.control.hasFile = _this.hasFile;
+                        _this._fileExplorerService.getSignatureInfoByFileId(rs.data).then(function (rs) {
+                            var _a;
+                            if (rs.success && ((_a = rs.data) === null || _a === void 0 ? void 0 : _a.length)) {
+                                _this.selectedFile.signatures = rs.data;
+                            }
+                        });
                         _this.onSelect.emit();
                         _this.onChanged.emit(rs.data);
                     }
@@ -38213,18 +38326,18 @@
         FileUploadComponent.prototype.openFileViewer = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var fileBinary, fileObject, fileName;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0: return [4 /*yield*/, this._fileExplorerService.checkPhysicalFile(this.fileId)];
                         case 1:
-                            fileBinary = _a.sent();
+                            fileBinary = _b.sent();
                             if (!fileBinary.success) {
                                 this._notifierService.showWarning('File không tồn tại, vui lòng liên hệ quản trị viên');
                                 return [2 /*return*/];
                             }
                             return [4 /*yield*/, this._fileObjectService.getDetail(this.fileId)];
                         case 2:
-                            fileObject = _a.sent();
+                            fileObject = _b.sent();
                             fileName = '';
                             if (!fileObject.success) {
                                 this._notifierService.showWarning('Có lỗi trong lúc lấy dữ liệu file, vui lòng liên hệ quản trị viên');
@@ -38242,235 +38355,738 @@
                 });
             });
         };
-        return FileUploadComponent;
-    }(ComponentBase));
-    FileUploadComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'file-upload',
-                    template: "<div class=\"file-upload\">\n    <div class=\"fl-icon\">\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\" style=\"font-size: 2rem\"></i>\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\" style=\"font-size: 2rem\"></i>\n    </div>\n\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\n        <span *ngIf=\"!showNoti\">{{selectedFileName}}</span>\n        <span *ngIf=\"showNoti\"> {{notification}} </span>\n    </div>\n\n    <div class=\"fl-buttons\">\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\n\n        <button *ngIf=\"hasFile && !readonly && showDeleteFile\" (click)=\"onRemoveFile()\"\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\n\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n            (click)=\"showContextMenu($event)\"></button>\n    </div>\n\n    <div style=\"display: none;\">\n        <p-fileUpload #file [accept]=\"accept\" [auto]=\"false\" class=\"file-upload\" mode=\"basic\"\n            [chooseLabel]=\"chooseLabel\" name=\"file[]\" [accept]=\"accept\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\"\n            toolStipPosition=\"top\" [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\n            [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\n            [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\n            [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\n            [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\n            [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\"\n            (onError)=\"handleError($event)\">\n        </p-fileUpload>\n    </div>\n\n</div>\n\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<file-viewer #fileViewerNew *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n    [readonly]=\"readonly\" [model]=\"forms.fileViewer.formData\" (onClose)=\"forms.fileViewer.show = false;\">\n</file-viewer>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
-                            multi: true
-                        },
-                        ComponentContextService
-                    ],
-                    styles: ["::ng-deep .file-upload{display:flex;border:1px solid #ced4da;border-radius:4px}::ng-deep .file-upload .fl-icon{flex:0 0 30px;display:flex;font-size:20px;justify-content:center;align-items:center;border-right:1px solid #ced4da}::ng-deep .file-upload .fl-icon>i{font-size:16px!important}::ng-deep .file-upload .fl-file-name{display:flex;align-items:center;flex-grow:1;cursor:pointer;opacity:.8;padding-left:12px;color:#109bf8;width:calc(100% - 110px)}::ng-deep .file-upload .fl-file-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .file-upload .fl-file-name:hover{opacity:1}::ng-deep .file-upload .fl-buttons{flex:0 0 80px;display:flex;border-right:1px solid #ced4da;align-items:center;justify-content:space-evenly;border-left:1px solid #ced4da}"]
-                },] }
-    ];
-    FileUploadComponent.ctorParameters = function () { return [
-        { type: FileObjectService },
-        { type: NotifierService },
-        { type: DownloadLinkService },
-        { type: ModuleConfigService },
-        { type: FileExplorerService },
-        { type: i0.Injector }
-    ]; };
-    FileUploadComponent.propDecorators = {
-        file: [{ type: i0.ViewChild, args: ['file',] }],
-        contextMenu: [{ type: i0.ViewChild, args: ['contextMenu',] }],
-        chooseLabel: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
-        showDeleteFile: [{ type: i0.Input }],
-        accept: [{ type: i0.Input }],
-        maxFileSize: [{ type: i0.Input }],
-        invalidFileSizeMessageSummary: [{ type: i0.Input }],
-        invalidFileSizeMessageDetail: [{ type: i0.Input }],
-        invalidFileTypeMessageSummary: [{ type: i0.Input }],
-        invalidFileTypeMessageDetail: [{ type: i0.Input }],
-        invalidFileLimitMessageSummary: [{ type: i0.Input }],
-        invalidFileLimitMessageDetail: [{ type: i0.Input }],
-        sharedFolderType: [{ type: i0.Input }],
-        control: [{ type: i0.Input }],
-        isPublic: [{ type: i0.Input }],
-        onInit: [{ type: i0.Output }],
-        onSelect: [{ type: i0.Output }],
-        onRemove: [{ type: i0.Output }],
-        onChanged: [{ type: i0.Output }]
-    };
-
-    var KeyValueComponent = /** @class */ (function () {
-        function KeyValueComponent() {
-            this.control = new KeyValueControlSchema();
-            this.disabled = false;
-            this.dataSourceInternal = [];
-            this.onRemoveItem = new i0.EventEmitter();
-            this.onClear = new i0.EventEmitter();
-        }
-        KeyValueComponent.prototype.ngOnInit = function () {
-            this.clearAllItems(false);
-        };
-        KeyValueComponent.prototype.writeValue = function (obj) {
-            if (obj && obj instanceof Array) {
-                if (obj.length > 0) {
-                    this.dataSourceInternal = obj;
-                }
-                else {
-                    this.clearAllItems(false);
-                }
-            }
-            else {
-                this.clearAllItems(false);
-            }
-        };
-        KeyValueComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        KeyValueComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        KeyValueComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        KeyValueComponent.prototype.removeItem = function (index) {
-            this.dataSourceInternal.splice(index, 1);
-            this.updateNgModel();
-        };
-        KeyValueComponent.prototype.addDefaultItems = function (items) {
-            var e_1, _a;
-            if (items instanceof Array) {
-                try {
-                    for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                        var item = items_1_1.value;
-                        this.addOrUpdateItem(item);
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+        FileUploadComponent.prototype.signFileSmartCA = function (dataKySo) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var sourceFileId, rsConvert, e_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            this.signatureFormModel.show = false;
+                            sourceFileId = this.selectedFile.id;
+                            if (!this._fileExplorerService.needConvertBeforeSign(this.selectedFile.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(this.selectedFile.name, 'pdf'),
+                                    folderInstanceId: (_a = this.selectedFile.parentFolderId) !== null && _a !== void 0 ? _a : this._commonService.guid(),
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.selectedFile.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.selectedFile.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.selectedFile.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            if (!dataKySo) {
+                                this._notifierService.showWarning('Người dùng chưa cấu hình thông tin ký số');
+                            }
+                            debugger;
+                            this.forms.fileViewer.formData.data = {
+                                fileId: sourceFileId,
+                                isFileVersion: false,
+                                fileName: this.selectedFile.name,
+                                // service: this.serviceCode,
+                                // entity: this.entity,
+                                // entityKey: this.entityKey,
+                                fileBase64Content: dataKySo.fileBase64Content,
+                                userChuKySoId: dataKySo.id,
+                                showKySoButton: true,
+                                width: dataKySo.width,
+                                height: dataKySo.height,
+                            };
+                            this.forms.fileViewer.show = true;
+                            return [2 /*return*/];
                     }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }
-            else if (items instanceof Object) {
-                this.addOrUpdateItem(items);
-            }
-            this.updateNgModel();
-        };
-        KeyValueComponent.prototype.addOrUpdateItem = function (itemToAdd) {
-            var item = this.dataSourceInternal.find(function (x) { return x.key === itemToAdd.key; });
-            if (!item) {
-                this.dataSourceInternal.push(itemToAdd);
-            }
-            else {
-                item.value = itemToAdd.value;
-            }
-        };
-        KeyValueComponent.prototype.addEmptyItems = function () {
-            this.dataSourceInternal.push({
-                key: '',
-                value: ''
+                });
             });
         };
-        KeyValueComponent.prototype.clearAllItems = function (updateModel) {
-            if (updateModel === void 0) { updateModel = false; }
-            this.dataSourceInternal.length = 0;
-            this.addEmptyItems();
-            if (updateModel) {
-                this.updateNgModel();
-            }
-        };
-        KeyValueComponent.prototype.updateNgModel = function () {
-            if (this.dataSourceInternal.length > 0) {
-                this.onChange(this.dataSourceInternal.filter(function (x) { return x.key != null && x.key != '' && x.value != null && x.value != ''; }));
-            }
-            else {
-                this.onChange([]);
-            }
-        };
-        KeyValueComponent.prototype.blurItem = function (item) {
-            this.updateNgModel();
+        FileUploadComponent.prototype.signKySimFile = function (file) {
+            this.forms.kySoSim.show = true;
+            this.model.advanceData = file;
         };
-        return KeyValueComponent;
-    }());
-    KeyValueComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-key-value',
-                    template: "<!-- <div class=\"bottom-buffer\">\n  <div class=\"ui-table-wrapper\">\n    <table>\n      <tr>\n        <th class=\"table-col1\">Key</th>\n        <th class=\"table-col2\">Value</th>\n        <th></th>\n      </tr>\n      <ng-container *ngIf=\"dataSourceInternal\">\n        <tr *ngFor=\"let item of dataSourceInternal;let i = index;\">\n          <td>\n            <input (blur)=\"blurItem(item)\" placeholder=\"Nh\u1EADp key...\" pInputText type=\"text\" [(ngModel)]=\"item.key\" />\n          </td>\n          <td>\n            <input (blur)=\"blurItem(item)\" placeholder=\"Nh\u1EADp value...\" pInputText type=\"text\"\n              [(ngModel)]=\"item.value\" />\n          </td>\n          <td>\n            <a class=\"danger\" (click)=\"removeItem(i)\" pTooltip=\"X\u00F3a\"><i class=\"fas fa-remove\"></i></a>\n          </td>\n        </tr>\n      </ng-container>\n    </table>\n  </div>\n  <div class=\"button-container\">\n    <button icon=\"fas fa-plus\" type=\"button\" label=\"Th\u00EAm\" pButton (click)=\"addEmptyItems()\"></button>\n  </div>\n</div> -->",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return KeyValueComponent; }),
-                            multi: true
-                        }
-                    ],
-                    styles: [".bottom-buffer{margin-bottom:50px}.button-container{width:200px}.danger{color:red;cursor:pointer}"]
-                },] }
-    ];
-    KeyValueComponent.ctorParameters = function () { return []; };
-    KeyValueComponent.propDecorators = {
-        control: [{ type: i0.Input }],
-        onRemoveItem: [{ type: i0.Output }],
-        onClear: [{ type: i0.Output }]
-    };
-
-    var PermissionUtilsComponent = /** @class */ (function (_super) {
-        __extends(PermissionUtilsComponent, _super);
-        function PermissionUtilsComponent(_injector, _notifierService, _moduleConfigService) {
-            var _this = _super.call(this, _injector) || this;
-            _this._injector = _injector;
-            _this._notifierService = _notifierService;
-            _this._moduleConfigService = _moduleConfigService;
-            _this.dataSource = [];
-            _this.excludeBasePermission = [
-                '.WELL-KNOWN/OPENID-CONFIGURATION/GET',
-                'VN.JSON/GET',
-                '/GET',
-                '.WELL-KNOWN/OPENID-CONFIGURATION/JWKS/GET'
-            ];
-            _this.basePermissionText = '';
-            _this.env = _this._moduleConfigService.getConfig().environment;
-            _this.title = 'Quyền';
-            _this.popupSize = new PopupSize({
-                width: 950,
-                height: 650
-            });
-            return _this;
-        }
-        PermissionUtilsComponent.prototype.ngOnInit = function () {
+        FileUploadComponent.prototype.signFile = function (file) {
             var _this = this;
-            if (this.rootModel.httpRequestList) {
-                this.rootModel.httpRequestList.forEach(function (item) {
-                    // remove querystring
-                    var temp = item.url.split('?')[0];
-                    temp = temp.split('#')[0];
-                    var arr = temp.split('/');
-                    var url = '';
-                    for (var i = 3; i < arr.length; i++) {
-                        if (arr[i] && arr[i].trim() != '') {
-                            url += '/' + arr[i];
-                        }
-                    }
-                    if (url != '') {
-                        url = url.substring(1).toUpperCase();
-                    }
-                    if (_this.env.gatewaySubPath) {
-                        url = url.replace(_this.env.gatewaySubPath.toUpperCase(), '');
-                        if (url.startsWith('/'))
-                            url = url.substring(1);
-                    }
-                    item.basePermission = url + '/' + item.method.toUpperCase();
-                    // Cái này để debug dưới local
-                    if (i0.isDevMode()) {
-                        item.basePermission = "AUTHORIZATION/" + item.basePermission;
+            this._notifierService.showConfirm('Bạn có chắc chắn muốn ký số văn bản này?').then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
+                var sourceFileId, sourceFile_1, rsConvert, e_2;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!rs) return [3 /*break*/, 5];
+                            sourceFileId = file.id;
+                            sourceFile_1 = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                sourceFile_1 = { id: sourceFileId };
+                                this.getFile();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_2 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            this._fileExplorerService.generateLinkDownload({
+                                fileId: sourceFileId,
+                            }).then(function (rs) {
+                                var url = _this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                                var prms = {};
+                                prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                                prms['SessionId'] = '';
+                                prms['FileName'] = url;
+                                // tslint:disable-next-line: variable-name
+                                var json_prms = JSON.stringify(prms);
+                                vgca_sign_approved(json_prms, function (result) {
+                                    var resultObj = JSON.parse(result);
+                                    if (resultObj.FileServer != '') {
+                                        _this._fileExplorerService.saveSignedFile({
+                                            sourceFile: sourceFile_1,
+                                            tempFileId: resultObj.FileServer,
+                                        }).then(function (rss) {
+                                            _this.getFile();
+                                            _this._notifierService.showSuccess('Ký số thành công');
+                                        });
+                                    }
+                                });
+                            });
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
                     }
-                    if (_this.dataSource.findIndex(function (x) { return x.basePermission == item.basePermission; }) == -1
-                        && !_this.excludeBasePermission.find(function (x) { return item.basePermission == x; })) {
-                        _this.dataSource.push(item);
+                });
+            }); });
+        };
+        FileUploadComponent.prototype.signVNPTCA = function (item) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var sourceFileId, rsConvert, e_3, dataInput, sigOptions, dataJS, data, e_4;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            sourceFileId = item.id;
+                            if (!this._fileExplorerService.needConvertBeforeSign(item.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: item.id,
+                                    name: this._fileExplorerService.changeFileExtension(item.name, 'pdf'),
+                                    folderInstanceId: (_a = item.parentFolderId) !== null && _a !== void 0 ? _a : this._commonService.guid(),
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + item.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + item.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                this.model.selectedItem.id = rsConvert.data;
+                                this.getFile();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_3 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + item.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4: return [4 /*yield*/, this._fileExplorerService.getBase64FromFileId(sourceFileId)];
+                        case 5:
+                            dataInput = (_b.sent()).split(',')[1];
+                            sigOptions = new PdfSigner();
+                            sigOptions.page = 1;
+                            sigOptions.AdvancedCustom = true;
+                            sigOptions.SigType = 1;
+                            dataJS = {
+                                data: dataInput,
+                                type: 'pdf',
+                                sigOptions: JSON.stringify(sigOptions)
+                            };
+                            _b.label = 6;
+                        case 6:
+                            _b.trys.push([6, 8, , 9]);
+                            return [4 /*yield*/, vnpt_plugin.signArrDataAdvanced([JSON.stringify(dataJS)], "", false)];
+                        case 7:
+                            data = _b.sent();
+                            this.handeResult(data);
+                            return [3 /*break*/, 9];
+                        case 8:
+                            e_4 = _b.sent();
+                            console.log(e_4);
+                            return [3 /*break*/, 9];
+                        case 9: return [2 /*return*/];
                     }
-                    _this.dataSource = _this._commonService.orderBy(_this.dataSource, 'basePermission');
-                    _this.basePermissionText = _this.getBasePermissionText();
                 });
+            });
+        };
+        FileUploadComponent.prototype.handeResult = function (data) {
+            var _this = this;
+            if (typeof JSON.parse(data).code !== 'undefined') {
+                var jsOb = JSON.parse(data);
             }
             else {
-                this.rootModel.httpRequestList = [];
+                var jsOb = JSON.parse(JSON.parse(data)[0]);
             }
-        };
-        PermissionUtilsComponent.prototype.visibleChanged = function (evt) {
-            if (!evt) {
-                this.rootModel.showPermissionUtils = false;
+            switch (jsOb.code) {
+                case 0:
+                    this._fileExplorerService.kySimSaveSignedFile({
+                        sourceFile: this.model.selectedItem,
+                        fileContents: jsOb.data,
+                    }).then(function (rss) {
+                        _this._notifierService.showSuccess("Ký thành công");
+                        _this.getFile();
+                    });
+                    break;
+                case 1:
+                    this._notifierService.showWarning("Dữ liệu đầu vào không đúng định dạng");
+                    break;
+                case 2:
+                    this._notifierService.showWarning("Không lấy được thông tin chứng thư số");
+                    break;
+                case 3:
+                    this._notifierService.showWarning("Có lỗi trong quá trình ký số");
+                    break;
+                case 4:
+                    this._notifierService.showSuccess("Chứng thư số không có khóa bí mật");
+                    break;
+                case 5:
+                    this._notifierService.showSuccess("Lỗi không xác định");
+                    break;
+                case 6:
+                    this._notifierService.showSuccess("Ký pdf: không tìm thấy tham số số trang cần ký");
+                    break;
+                case 7:
+                    this._notifierService.showSuccess("Ký pdf: trang đặt chữ ký không tồn tại");
+                    break;
+                case 8:
+                    this._notifierService.showSuccess("Ký xml: không tìm thấy thẻ ký số");
+                    break;
+                case 9:
+                    this._notifierService.showSuccess("Ký pdf: không tìm thấy id của thẻ ký số");
+                    break;
+                case 10:
+                    this._notifierService.showSuccess("Dữ liệu ký đã chứa một hoặc nhiều chữ ký không hợp lệ");
+                    break;
+                case 11:
+                    this._notifierService.showSuccess("Người dùng hủy bỏ");
+                    break;
+                case 13:
+                    this._notifierService.showWarning("Dữ liệu ký rỗng");
+                    break;
+                default:
+                    this._notifierService.showSuccess("Lỗi không xác định");
+                    break;
+            }
+        };
+        FileUploadComponent.prototype.addComment = function (file) {
+            var _this = this;
+            this._notifierService.showConfirm('Bạn có chắc chắn muốn bút phê văn bản này?').then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
+                var sourceFileId, sourceFile_2, rsConvert, e_5;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!rs) return [3 /*break*/, 5];
+                            sourceFileId = file.id;
+                            sourceFile_2 = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                sourceFile_2 = { id: sourceFileId };
+                                this.getFile();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_5 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            this._fileExplorerService.generateLinkDownload({
+                                fileId: sourceFileId,
+                            }).then(function (rs) {
+                                var url = _this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                                var prms = {};
+                                prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                                prms['SessionId'] = '';
+                                prms['FileName'] = url;
+                                // tslint:disable-next-line: variable-name
+                                var json_prms = JSON.stringify(prms);
+                                vgca_comment(json_prms, function (result) {
+                                    var resultObj = JSON.parse(result);
+                                    if (resultObj.FileServer != '') {
+                                        _this._fileExplorerService.saveSignedFile({
+                                            sourceFile: sourceFile_2,
+                                            tempFileId: resultObj.FileServer,
+                                        }).then(function (rss) {
+                                            _this.getFile();
+                                            _this._notifierService.showSuccess('Tạo bút phê thành công');
+                                        });
+                                    }
+                                });
+                            });
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); });
+        };
+        FileUploadComponent.prototype.addCommentAndSign = function (file) {
+            return __awaiter(this, void 0, void 0, function () {
+                var rs, sourceFileId, sourceFile, rsConvert, e_6, downloadLink, url, prms, json_prms_1, commentResult, resultObj, downloadLink2, url2, prms2, json_prms2_1, signResult, signResultObj;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._notifierService.showConfirm('Bạn có chắc chắn muốn tạo bút phê và ký văn bản này?')];
+                        case 1:
+                            rs = _b.sent();
+                            if (!rs) return [3 /*break*/, 11];
+                            sourceFileId = file.id;
+                            sourceFile = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 5];
+                            _b.label = 2;
+                        case 2:
+                            _b.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 3:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                sourceFile = { id: sourceFileId };
+                                this.getFile();
+                            }
+                            return [3 /*break*/, 5];
+                        case 4:
+                            e_6 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 5: return [4 /*yield*/, this._fileExplorerService.generateLinkDownload({
+                                fileId: sourceFileId,
+                            })];
+                        case 6:
+                            downloadLink = _b.sent();
+                            url = this._downloadLinkService.getDownloadForSignUrl(downloadLink.data);
+                            prms = {
+                                FileUploadHandler: this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile",
+                                SessionId: '',
+                                FileName: url
+                            };
+                            json_prms_1 = JSON.stringify(prms);
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    vgca_comment(json_prms_1, function (result) { return resolve(result); });
+                                })];
+                        case 7:
+                            commentResult = _b.sent();
+                            resultObj = JSON.parse(commentResult);
+                            return [4 /*yield*/, this._fileExplorerService.generateLinkDownload({
+                                    fileId: resultObj.FileServer,
+                                })];
+                        case 8:
+                            downloadLink2 = _b.sent();
+                            url2 = this._downloadLinkService.getDownloadForSignUrl(downloadLink2.data);
+                            prms2 = {
+                                FileUploadHandler: this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile",
+                                SessionId: '',
+                                FileName: url2
+                            };
+                            json_prms2_1 = JSON.stringify(prms2);
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    vgca_sign_approved(json_prms2_1, function (result) { return resolve(result); });
+                                })];
+                        case 9:
+                            signResult = _b.sent();
+                            signResultObj = JSON.parse(signResult);
+                            if (!(signResultObj.FileServer != '')) return [3 /*break*/, 11];
+                            return [4 /*yield*/, this._fileExplorerService.saveSignedFile({
+                                    sourceFile: sourceFile,
+                                    tempFileId: signResultObj.FileServer,
+                                })];
+                        case 10:
+                            _b.sent();
+                            this.getFile();
+                            this._notifierService.showSuccess('Tạo bút phê và ký thành công');
+                            _b.label = 11;
+                        case 11: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        FileUploadComponent.prototype.signFileDonVi = function (file) {
+            var _this = this;
+            this._notifierService
+                .showConfirm('Bạn có chắc chắn muốn ký số đơn vị văn bản này?')
+                .then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
+                var sourceFileId, sourceFile_3, rsConvert, e_7;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!rs) return [3 /*break*/, 5];
+                            sourceFileId = file.id;
+                            sourceFile_3 = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                this.getFile();
+                                sourceFileId = rsConvert.data;
+                                sourceFile_3 = { id: sourceFileId };
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_7 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            this._fileExplorerService
+                                .generateLinkDownload({
+                                isFileVersion: false,
+                                fileId: sourceFileId,
+                            })
+                                .then(function (rs) {
+                                var url = _this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                                var prms = {};
+                                prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                                prms['SessionId'] = '';
+                                prms['FileName'] = url;
+                                // Truyền số, ngày ký số phòng ban nếu cần
+                                var that = _this;
+                                if (that.control && that.control.dataKySoDonVi) {
+                                    var dataKySoDonVi = that.control.dataKySoDonVi();
+                                    if (dataKySoDonVi) {
+                                        // lấy số DocNumber
+                                        if (dataKySoDonVi.docNumber) {
+                                            prms['DocNumber'] = dataKySoDonVi.docNumber;
+                                        }
+                                        // lấy ngày ban hành vb đi
+                                        if (dataKySoDonVi.issuedDate) {
+                                            prms['IssuedDate'] = dataKySoDonVi.issuedDate;
+                                        }
+                                    }
+                                }
+                                // tslint:disable-next-line: variable-name
+                                var json_prms = JSON.stringify(prms);
+                                vgca_sign_issued(json_prms, function (result) {
+                                    var resultObj = JSON.parse(result);
+                                    if (resultObj.FileServer != '') {
+                                        _this._fileExplorerService
+                                            .saveSignedFile({
+                                            sourceFile: sourceFile_3,
+                                            tempFileId: resultObj.FileServer,
+                                        })
+                                            .then(function (rss) {
+                                            _this.getFile();
+                                            _this._notifierService.showSuccess('Ký số thành công');
+                                        });
+                                    }
+                                });
+                            });
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); });
+        };
+        return FileUploadComponent;
+    }(ComponentBase));
+    FileUploadComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'file-upload',
+                    template: "<div class=\"file-upload\">\n    <div class=\"fl-icon\">\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\" style=\"font-size: 2rem\"></i>\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\" style=\"font-size: 2rem\"></i>\n    </div>\n\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\n        <span *ngIf=\"!showNoti\">{{selectedFileName}}</span>\n        <span *ngIf=\"showNoti\"> {{notification}} </span>\n        <span *ngIf=\"selectedFile?.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n            tooltipPosition=\"top\" (click)=\"viewListSign($event, selectedFile.signatures)\">\n            <i class=\"fas fa-signature\"></i>\n        </span>\n    </div>\n    <div class=\"fl-buttons\">\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\n\n        <button *ngIf=\"hasFile && !readonly && showDeleteFile\" (click)=\"onRemoveFile()\"\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\n\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n            (click)=\"showContextMenu($event)\"></button>\n    </div>\n\n    <div style=\"display: none;\">\n        <p-fileUpload #file [accept]=\"accept\" [auto]=\"false\" class=\"file-upload\" mode=\"basic\"\n            [chooseLabel]=\"chooseLabel\" name=\"file[]\" [accept]=\"accept\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\"\n            toolStipPosition=\"top\" [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\n            [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\n            [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\n            [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\n            [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\n            [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\"\n            (onError)=\"handleError($event)\">\n        </p-fileUpload>\n    </div>\n\n</div>\n\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<file-viewer #fileViewerNew *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n    [readonly]=\"readonly\" [model]=\"forms.fileViewer.formData\" (onClose)=\"forms.fileViewer.show = false;\">\n</file-viewer>\n<!-- Xem ch\u1EEF k\u00FD s\u1ED1 -->\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\n    (onHide)=\"forms.signatureDetail.show=false;\">\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\n    </signature-detail>\n</tn-dialog>\n<tn-dialog *ngIf=\"signatureFormModel.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"'Ch\u1ECDn ch\u1EEF k\u00FD s\u1ED1' | translate\"\n    [popupSize]=\"signatureFormModel.popupSize\" (onHide)=\"signatureFormModel.show=false\">\n    <signature-select #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"signatureFormModel.formData\"\n        (onCancel)=\"signatureFormModel.show = false\" (onSaved)=\"signFileSmartCA($event)\">\n    </signature-select>\n</tn-dialog>",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
+                            multi: true
+                        },
+                        ComponentContextService
+                    ],
+                    styles: ["::ng-deep .file-upload{display:flex;border:1px solid #ced4da;border-radius:4px}::ng-deep .file-upload .fl-icon{flex:0 0 30px;display:flex;font-size:20px;justify-content:center;align-items:center;border-right:1px solid #ced4da}::ng-deep .file-upload .fl-icon>i{font-size:16px!important}::ng-deep .file-upload .fl-file-name{display:flex;align-items:center;flex-grow:1;cursor:pointer;opacity:.8;padding-left:12px;color:#109bf8;width:calc(100% - 110px);position:relative}::ng-deep .file-upload .fl-file-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .file-upload .fl-file-name:hover{opacity:1}::ng-deep .file-upload .fl-buttons{flex:0 0 80px;display:flex;border-right:1px solid #ced4da;align-items:center;justify-content:space-evenly;border-left:1px solid #ced4da}::ng-deep .file-upload .nfl-signature{display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.8;padding:0 10px;color:#109bf8;overflow:hidden}::ng-deep .file-upload .nfl-signature:hover{opacity:1}::ng-deep .file-upload .signature i{position:absolute;top:50%!important;transform:translate(-50%,-50%)!important;right:0}"]
+                },] }
+    ];
+    FileUploadComponent.ctorParameters = function () { return [
+        { type: FileObjectService },
+        { type: NotifierService },
+        { type: DownloadLinkService },
+        { type: ModuleConfigService },
+        { type: FileExplorerService },
+        { type: ngxDeviceDetector.DeviceDetectorService },
+        { type: UserService },
+        { type: i0.Injector }
+    ]; };
+    FileUploadComponent.propDecorators = {
+        file: [{ type: i0.ViewChild, args: ['file',] }],
+        contextMenu: [{ type: i0.ViewChild, args: ['contextMenu',] }],
+        chooseLabel: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        showDeleteFile: [{ type: i0.Input }],
+        accept: [{ type: i0.Input }],
+        maxFileSize: [{ type: i0.Input }],
+        invalidFileSizeMessageSummary: [{ type: i0.Input }],
+        invalidFileSizeMessageDetail: [{ type: i0.Input }],
+        invalidFileTypeMessageSummary: [{ type: i0.Input }],
+        invalidFileTypeMessageDetail: [{ type: i0.Input }],
+        invalidFileLimitMessageSummary: [{ type: i0.Input }],
+        invalidFileLimitMessageDetail: [{ type: i0.Input }],
+        sharedFolderType: [{ type: i0.Input }],
+        control: [{ type: i0.Input }],
+        isPublic: [{ type: i0.Input }],
+        parentSetting: [{ type: i0.Input }],
+        onInit: [{ type: i0.Output }],
+        onSelect: [{ type: i0.Output }],
+        onRemove: [{ type: i0.Output }],
+        onChanged: [{ type: i0.Output }]
+    };
+
+    var KeyValueComponent = /** @class */ (function () {
+        function KeyValueComponent() {
+            this.control = new KeyValueControlSchema();
+            this.disabled = false;
+            this.dataSourceInternal = [];
+            this.onRemoveItem = new i0.EventEmitter();
+            this.onClear = new i0.EventEmitter();
+        }
+        KeyValueComponent.prototype.ngOnInit = function () {
+            this.clearAllItems(false);
+        };
+        KeyValueComponent.prototype.writeValue = function (obj) {
+            if (obj && obj instanceof Array) {
+                if (obj.length > 0) {
+                    this.dataSourceInternal = obj;
+                }
+                else {
+                    this.clearAllItems(false);
+                }
+            }
+            else {
+                this.clearAllItems(false);
+            }
+        };
+        KeyValueComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        KeyValueComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        KeyValueComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        KeyValueComponent.prototype.removeItem = function (index) {
+            this.dataSourceInternal.splice(index, 1);
+            this.updateNgModel();
+        };
+        KeyValueComponent.prototype.addDefaultItems = function (items) {
+            var e_1, _a;
+            if (items instanceof Array) {
+                try {
+                    for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                        var item = items_1_1.value;
+                        this.addOrUpdateItem(item);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            else if (items instanceof Object) {
+                this.addOrUpdateItem(items);
+            }
+            this.updateNgModel();
+        };
+        KeyValueComponent.prototype.addOrUpdateItem = function (itemToAdd) {
+            var item = this.dataSourceInternal.find(function (x) { return x.key === itemToAdd.key; });
+            if (!item) {
+                this.dataSourceInternal.push(itemToAdd);
+            }
+            else {
+                item.value = itemToAdd.value;
+            }
+        };
+        KeyValueComponent.prototype.addEmptyItems = function () {
+            this.dataSourceInternal.push({
+                key: '',
+                value: ''
+            });
+        };
+        KeyValueComponent.prototype.clearAllItems = function (updateModel) {
+            if (updateModel === void 0) { updateModel = false; }
+            this.dataSourceInternal.length = 0;
+            this.addEmptyItems();
+            if (updateModel) {
+                this.updateNgModel();
+            }
+        };
+        KeyValueComponent.prototype.updateNgModel = function () {
+            if (this.dataSourceInternal.length > 0) {
+                this.onChange(this.dataSourceInternal.filter(function (x) { return x.key != null && x.key != '' && x.value != null && x.value != ''; }));
+            }
+            else {
+                this.onChange([]);
+            }
+        };
+        KeyValueComponent.prototype.blurItem = function (item) {
+            this.updateNgModel();
+        };
+        return KeyValueComponent;
+    }());
+    KeyValueComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-key-value',
+                    template: "<!-- <div class=\"bottom-buffer\">\n  <div class=\"ui-table-wrapper\">\n    <table>\n      <tr>\n        <th class=\"table-col1\">Key</th>\n        <th class=\"table-col2\">Value</th>\n        <th></th>\n      </tr>\n      <ng-container *ngIf=\"dataSourceInternal\">\n        <tr *ngFor=\"let item of dataSourceInternal;let i = index;\">\n          <td>\n            <input (blur)=\"blurItem(item)\" placeholder=\"Nh\u1EADp key...\" pInputText type=\"text\" [(ngModel)]=\"item.key\" />\n          </td>\n          <td>\n            <input (blur)=\"blurItem(item)\" placeholder=\"Nh\u1EADp value...\" pInputText type=\"text\"\n              [(ngModel)]=\"item.value\" />\n          </td>\n          <td>\n            <a class=\"danger\" (click)=\"removeItem(i)\" pTooltip=\"X\u00F3a\"><i class=\"fas fa-remove\"></i></a>\n          </td>\n        </tr>\n      </ng-container>\n    </table>\n  </div>\n  <div class=\"button-container\">\n    <button icon=\"fas fa-plus\" type=\"button\" label=\"Th\u00EAm\" pButton (click)=\"addEmptyItems()\"></button>\n  </div>\n</div> -->",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return KeyValueComponent; }),
+                            multi: true
+                        }
+                    ],
+                    styles: [".bottom-buffer{margin-bottom:50px}.button-container{width:200px}.danger{color:red;cursor:pointer}"]
+                },] }
+    ];
+    KeyValueComponent.ctorParameters = function () { return []; };
+    KeyValueComponent.propDecorators = {
+        control: [{ type: i0.Input }],
+        onRemoveItem: [{ type: i0.Output }],
+        onClear: [{ type: i0.Output }]
+    };
+
+    var PermissionUtilsComponent = /** @class */ (function (_super) {
+        __extends(PermissionUtilsComponent, _super);
+        function PermissionUtilsComponent(_injector, _notifierService, _moduleConfigService) {
+            var _this = _super.call(this, _injector) || this;
+            _this._injector = _injector;
+            _this._notifierService = _notifierService;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.dataSource = [];
+            _this.excludeBasePermission = [
+                '.WELL-KNOWN/OPENID-CONFIGURATION/GET',
+                'VN.JSON/GET',
+                '/GET',
+                '.WELL-KNOWN/OPENID-CONFIGURATION/JWKS/GET'
+            ];
+            _this.basePermissionText = '';
+            _this.env = _this._moduleConfigService.getConfig().environment;
+            _this.title = 'Quyền';
+            _this.popupSize = new PopupSize({
+                width: 950,
+                height: 650
+            });
+            return _this;
+        }
+        PermissionUtilsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.rootModel.httpRequestList) {
+                this.rootModel.httpRequestList.forEach(function (item) {
+                    // remove querystring
+                    var temp = item.url.split('?')[0];
+                    temp = temp.split('#')[0];
+                    var arr = temp.split('/');
+                    var url = '';
+                    for (var i = 3; i < arr.length; i++) {
+                        if (arr[i] && arr[i].trim() != '') {
+                            url += '/' + arr[i];
+                        }
+                    }
+                    if (url != '') {
+                        url = url.substring(1).toUpperCase();
+                    }
+                    if (_this.env.gatewaySubPath) {
+                        url = url.replace(_this.env.gatewaySubPath.toUpperCase(), '');
+                        if (url.startsWith('/'))
+                            url = url.substring(1);
+                    }
+                    item.basePermission = url + '/' + item.method.toUpperCase();
+                    // Cái này để debug dưới local
+                    if (i0.isDevMode()) {
+                        item.basePermission = "AUTHORIZATION/" + item.basePermission;
+                    }
+                    if (_this.dataSource.findIndex(function (x) { return x.basePermission == item.basePermission; }) == -1
+                        && !_this.excludeBasePermission.find(function (x) { return item.basePermission == x; })) {
+                        _this.dataSource.push(item);
+                    }
+                    _this.dataSource = _this._commonService.orderBy(_this.dataSource, 'basePermission');
+                    _this.basePermissionText = _this.getBasePermissionText();
+                });
+            }
+            else {
+                this.rootModel.httpRequestList = [];
+            }
+        };
+        PermissionUtilsComponent.prototype.visibleChanged = function (evt) {
+            if (!evt) {
+                this.rootModel.showPermissionUtils = false;
             }
         };
         PermissionUtilsComponent.prototype.cancel = function () {
@@ -39317,7 +39933,7 @@
 
     var ServiceFileUploadComponent = /** @class */ (function (_super) {
         __extends(ServiceFileUploadComponent, _super);
-        function ServiceFileUploadComponent(_fileObjectService, _signalRService, _moduleConfigService, _tnClientService, _authenService, _userService, _notifierService, _downloadLinkService, _fileExplorerService, _injector) {
+        function ServiceFileUploadComponent(_fileObjectService, _signalRService, _moduleConfigService, _tnClientService, _authenService, _userService, _notifierService, _downloadLinkService, _fileExplorerService, _deviceDetectorService, _injector) {
             var _this = _super.call(this, _injector) || this;
             _this._fileObjectService = _fileObjectService;
             _this._signalRService = _signalRService;
@@ -39328,10 +39944,12 @@
             _this._notifierService = _notifierService;
             _this._downloadLinkService = _downloadLinkService;
             _this._fileExplorerService = _fileExplorerService;
+            _this._deviceDetectorService = _deviceDetectorService;
             _this.control = new FileUploadControlSchema();
             _this.serviceCode = '';
             _this.entity = '';
             _this.chooseLabel = 'Chọn';
+            _this.parentSetting = new CrudFormSetting();
             _this.onInit = new i0.EventEmitter();
             _this.onSelect = new i0.EventEmitter();
             _this.onRemove = new i0.EventEmitter();
@@ -39356,6 +39974,25 @@
             _this._subscribe = null;
             _this.dataModel = {};
             _this.forms = {};
+            _this.formIds = {
+                createFolder: 'createFolder',
+                renameFile: 'renameFile',
+                shareFile: 'shareFile',
+                shareFolder: 'shareFolder',
+                fileViewer: 'fileViewer',
+                fileVersionList: 'fileVersionList',
+                signatureDetail: 'signatureDetail',
+                kySoSim: 'kySoSim',
+                viewDetail: 'viewDetail'
+            };
+            _this.signatureFormModel = {
+                formData: new CrudFormData(),
+                show: false,
+                popupSize: new PopupSize({
+                    width: 600,
+                    height: 400
+                })
+            };
             if (_this._userService.isValidAccessToken()) {
                 _this.userId = _this._userService.getUserIdCombine();
             }
@@ -39393,6 +40030,10 @@
                 show: false,
                 formData: {},
             };
+            this.forms[this.formIds.signatureDetail] = {
+                header: 'Thông tin chữ ký số',
+                show: false,
+            };
             if (this.fileDataService) {
                 this.fileDataService.register(this);
             }
@@ -39403,8 +40044,9 @@
         ServiceFileUploadComponent.prototype.getServiceFile = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var serviceRequestModel, fileObject;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (!this.hasKeys()) return [3 /*break*/, 2];
                             serviceRequestModel = {
@@ -39416,7 +40058,7 @@
                             this.setNoti('Đang lấy đính kèm...');
                             return [4 /*yield*/, this._fileObjectService.getSingleServiceFile(serviceRequestModel)];
                         case 1:
-                            fileObject = (_a.sent()).data;
+                            fileObject = (_b.sent()).data;
                             this.loading = false;
                             this.setNoti(null);
                             if (fileObject) {
@@ -39425,8 +40067,14 @@
                             return [3 /*break*/, 3];
                         case 2:
                             this.setFileObject(null);
-                            _a.label = 3;
+                            _b.label = 3;
                         case 3:
+                            this._fileExplorerService.getSignatureInfoByFileId(this.fileId).then(function (rs) {
+                                var _a;
+                                if (rs.success && ((_a = rs.data) === null || _a === void 0 ? void 0 : _a.length)) {
+                                    _this.selectedFile.signatures = rs.data;
+                                }
+                            });
                             this.control.hasFile = this.hasFile;
                             this.setMenu();
                             return [2 /*return*/];
@@ -39445,6 +40093,7 @@
                 this.onChanged.emit();
                 return;
             }
+            this.selectedFile = fileObject;
             this.fileObj = fileObject;
             this.fileId = fileObject.id;
             this.setFileName(fileObject.name);
@@ -39472,7 +40121,70 @@
                     command: function () {
                         _this.download();
                     }
-                }
+                },
+                {
+                    label: 'Ký số cá nhân (SIM)',
+                    icon: 'fas fa-sim-card',
+                    command: function () {
+                        _this.signKySimFile(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && !this.parentSetting.hiddenKySoSimCaNhan),
+                },
+                {
+                    label: 'Ký số SmartCA',
+                    icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signatureFormModel.show = true;
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && !this.parentSetting.hiddenKySoSmartCA),
+                },
+                {
+                    label: 'Ký số cá nhân (USB)', icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signFile(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenKySoUsbCaNhan),
+                },
+                {
+                    label: 'Ký số VNPTCA', icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signVNPTCA(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenKySoVNPTCA),
+                },
+                {
+                    label: 'Bút phê', icon: 'fas fa-comment-dots',
+                    command: function () {
+                        _this.addComment(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenButPhe),
+                },
+                {
+                    label: 'Bút phê và ký', icon: 'fas fa-comment-medical',
+                    command: function () {
+                        _this.addCommentAndSign(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenButPhe),
+                },
+                {
+                    label: 'Ký số đơn vị (USB)', icon: 'fas fa-signature',
+                    command: function () {
+                        _this.signFileDonVi(_this.selectedFile);
+                    },
+                    visible: (this._fileObjectService.isTypeFileKySo(this.selectedFile.name)
+                        && this._deviceDetectorService.isDesktop()
+                        && !this.parentSetting.hiddenKySoDonVi),
+                },
             ];
         };
         ServiceFileUploadComponent.prototype.subscribe = function () {
@@ -39501,71 +40213,100 @@
             }
         };
         ServiceFileUploadComponent.prototype.onSelectFile = function (evt) {
-            this.hasFile = false;
-            this.fileId = null;
-            this.file.clear();
-            if (evt.errorFiles && evt.errorFiles.length > 0) {
-                this.showNoti = true;
-                this.notification = "" + evt.errorMessages[0].summary + evt.errorMessages[0].detail;
-            }
-            else {
-                this.selectedFile = evt.successFiles[0];
-                this.setFileName(this.selectedFile ? this.selectedFile.name : null);
-                if (this.control.autoSaved) {
-                    this.handleSaveFile();
-                }
-                else {
-                    this.hasFile = true;
-                    this.onChangeBase('has-value');
-                    this.onSelect.emit(this.selectedFile);
-                    this.onChanged.emit(this.selectedFile);
-                }
-            }
-            this.control.hasFile = this.hasFile;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            this.hasFile = false;
+                            this.fileId = null;
+                            this.file.clear();
+                            if (!(evt.errorFiles && evt.errorFiles.length > 0)) return [3 /*break*/, 1];
+                            this.showNoti = true;
+                            this.notification = "" + evt.errorMessages[0].summary + evt.errorMessages[0].detail;
+                            return [3 /*break*/, 4];
+                        case 1:
+                            this.selectedFile = evt.successFiles[0];
+                            this.setFileName(this.selectedFile ? this.selectedFile.name : null);
+                            if (!this.control.autoSaved) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.handleSaveFile()];
+                        case 2:
+                            _b.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this.hasFile = true;
+                            this.onChangeBase('has-value');
+                            this.onSelect.emit(this.selectedFile);
+                            this.onChanged.emit(this.selectedFile);
+                            _b.label = 4;
+                        case 4:
+                            this.control.hasFile = this.hasFile;
+                            this.setMenu();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         ServiceFileUploadComponent.prototype.handleSaveFile = function () {
-            var _this = this;
-            // Đã lưu file.
-            if (this.fileId) {
-                return;
-            }
-            // Trường hợp không có đủ keys.
-            if (!this.hasKeys()) {
-                this._notifierService.showWarning('Chưa cấu hình keys');
-                return;
-            }
-            // Chưa chọn file.
-            if (!this.selectedFile) {
-                return;
-            }
-            var formData = new FormData();
-            formData.append('serviceCode', this.serviceCode);
-            formData.append('entity', this.entity);
-            formData.append('entityKey', this.entityKey);
-            formData.append('isMultiple', 'false');
-            formData.append('isPublic', "" + this.control.isPublic);
-            formData.append('file', this.selectedFile);
-            this.loading = true;
-            this.setNoti('Đang tải file lên...');
-            this._fileObjectService.createServiceFile(formData)
-                .then(function (rs) {
-                _this.loading = false;
-                _this.setNoti(null);
-                if (rs.success) {
-                    _this.selectedFile = _this.selectedFile;
-                    _this.selectedFileName = _this.selectedFile.name;
-                    _this.fileId = rs.data;
-                    _this.hasFile = true;
-                    _this.control.hasFile = _this.hasFile;
-                    _this.onChanged.emit({ fileId: _this.fileId, selectedFile: _this.selectedFile });
-                }
-                else {
-                    _this._crudService.processErrorResponse(rs);
-                }
-            }, function (err) {
-                _this.loading = false;
-                _this.setNoti(null);
-                _this._notifierService.showWarning('Upload file chưa thành công');
+            return __awaiter(this, void 0, void 0, function () {
+                var formData;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            // Đã lưu file.
+                            if (this.fileId) {
+                                return [2 /*return*/];
+                            }
+                            // Trường hợp không có đủ keys.
+                            if (!this.hasKeys()) {
+                                this._notifierService.showWarning('Chưa cấu hình keys');
+                                return [2 /*return*/];
+                            }
+                            // Chưa chọn file.
+                            if (!this.selectedFile) {
+                                return [2 /*return*/];
+                            }
+                            formData = new FormData();
+                            formData.append('serviceCode', this.serviceCode);
+                            formData.append('entity', this.entity);
+                            formData.append('entityKey', this.entityKey);
+                            formData.append('isMultiple', 'false');
+                            formData.append('isPublic', "" + this.control.isPublic);
+                            formData.append('file', this.selectedFile);
+                            this.loading = true;
+                            this.setNoti('Đang tải file lên...');
+                            return [4 /*yield*/, this._fileObjectService.createServiceFile(formData)
+                                    .then(function (rs) {
+                                    _this.loading = false;
+                                    _this.setNoti(null);
+                                    if (rs.success) {
+                                        _this.selectedFile = _this.selectedFile;
+                                        _this.selectedFileName = _this.selectedFile.name;
+                                        _this.fileId = rs.data;
+                                        _this.selectedFile.id = rs.data;
+                                        _this.hasFile = true;
+                                        _this.control.hasFile = _this.hasFile;
+                                        _this.onChanged.emit({ fileId: _this.fileId, selectedFile: _this.selectedFile });
+                                        _this._fileExplorerService.getSignatureInfoByFileId(_this.fileId).then(function (rs) {
+                                            var _a;
+                                            if (rs.success && ((_a = rs.data) === null || _a === void 0 ? void 0 : _a.length)) {
+                                                _this.selectedFile.signatures = rs.data;
+                                            }
+                                        });
+                                    }
+                                    else {
+                                        _this._crudService.processErrorResponse(rs);
+                                    }
+                                }, function (err) {
+                                    _this.loading = false;
+                                    _this.setNoti(null);
+                                    _this._notifierService.showWarning('Upload file chưa thành công');
+                                })];
+                        case 1:
+                            _b.sent();
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
         ServiceFileUploadComponent.prototype.setNoti = function (msg) {
@@ -39590,6 +40331,11 @@
                 this.selectedFileNameShort = null;
             }
         };
+        ServiceFileUploadComponent.prototype.viewListSign = function (e, signatures) {
+            e.stopPropagation();
+            this.forms[this.formIds.signatureDetail].show = true;
+            this.model.advanceData = signatures;
+        };
         ServiceFileUploadComponent.prototype.showContextMenu = function (evt) {
             this.contextMenu.toggle(evt);
             evt.stopPropagation();
@@ -39634,115 +40380,615 @@
                         _this.fileId = obj.message.content;
                         _this.fileObj.name = obj.message.title;
                     }
-                    else {
-                        obj = JSON.parse(data);
-                        _this.fileId = obj.message.content;
-                        _this.fileObj.name = obj.message.title;
+                    else {
+                        obj = JSON.parse(data);
+                        _this.fileId = obj.message.content;
+                        _this.fileObj.name = obj.message.title;
+                    }
+                }
+            });
+        };
+        ServiceFileUploadComponent.prototype.viewOnline = function () {
+            if (this._fileObjectService.isSupportedViewOnline(this.fileObj.name)) {
+                this.dataModel.fileViewer.data = {};
+                this.dataModel.fileViewer.data.fileId = this.fileId;
+                this.dataModel.fileViewer.data.fileName = this.fileObj.name;
+                this.dataModel.fileViewer.data.service = this.serviceCode;
+                this.dataModel.fileViewer.data.entity = this.entity;
+                this.dataModel.fileViewer.data.entityKey = this.entityKey;
+                this.dataModel.fileViewer.data.isFileVersion = false;
+                this.dataModel.fileViewer.show = true;
+            }
+            else {
+                this.download();
+            }
+        };
+        ServiceFileUploadComponent.prototype.download = function () {
+            if (!this.fileId) {
+                return;
+            }
+            var model = new GenerateLinkDownloadDTO({
+                fileId: this.fileId
+            });
+            this._downloadLinkService.downloadLink(model);
+        };
+        ServiceFileUploadComponent.prototype.uploadFileFromDrive = function () {
+            // this.dataModel.driveFileDialog = {
+            //     show: true
+            // };
+        };
+        ServiceFileUploadComponent.prototype.copyFileToDrive = function () {
+            // this._fileExplorerService.getFolderId(this.userId).then(response => {
+            //     var copyFileDto = new CopyFileDto();
+            //     copyFileDto.id = this.fileId;
+            //     if (this.fileName == "") {
+            //         if (this.fileObj != null) {
+            //             copyFileDto.name = this.fileObj.name;
+            //         }
+            //     } else {
+            //         copyFileDto.name = this.fileName;
+            //     }
+            //     copyFileDto.ownerType = this.userId;
+            //     copyFileDto.folderId = response.data;
+            //     this._fileExplorerService.copyFile(copyFileDto).then(response => {
+            //         this._notifierService.showSuccess('Sao chép tài liệu về thư mục cá nhân thành công');
+            //     }, error => {
+            //         this._notifierService.showBusinessError(error.error.message);
+            //     });
+            // });
+        };
+        ServiceFileUploadComponent.prototype.writeValue = function (obj) {
+        };
+        ServiceFileUploadComponent.prototype.registerOnChange = function (fn) {
+            this.onChangeBase = fn;
+        };
+        ServiceFileUploadComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        ServiceFileUploadComponent.prototype.setDisabledState = function (isDisabled) {
+            this.isDisabled = isDisabled;
+        };
+        ServiceFileUploadComponent.prototype.openFileViewer = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var fileBinary, fileObject, fileName;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._fileExplorerService.checkPhysicalFile(this.fileId)];
+                        case 1:
+                            fileBinary = _b.sent();
+                            if (!fileBinary.success) {
+                                this._notifierService.showWarning('File không tồn tại, vui lòng liên hệ quản trị viên');
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, this._fileObjectService.getDetail(this.fileId)];
+                        case 2:
+                            fileObject = _b.sent();
+                            fileName = '';
+                            if (!fileObject.success) {
+                                this._notifierService.showWarning('Có lỗi trong lúc lấy dữ liệu file, vui lòng liên hệ quản trị viên');
+                                return [2 /*return*/];
+                            }
+                            fileName = fileObject === null || fileObject === void 0 ? void 0 : fileObject.name;
+                            this.forms.fileViewer.formData.data = {
+                                fileId: this.fileId,
+                                isFileVersion: false,
+                                fileName: fileName,
+                                service: this.serviceCode,
+                                entity: this.entity,
+                                entityKey: this.entityKey,
+                            };
+                            this.forms.fileViewer.show = true;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ServiceFileUploadComponent.prototype.signFileSmartCA = function (dataKySo) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var sourceFileId, rsConvert, e_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            this.signatureFormModel.show = false;
+                            sourceFileId = this.selectedFile.id;
+                            if (!this._fileExplorerService.needConvertBeforeSign(this.selectedFile.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(this.selectedFile.name, 'pdf'),
+                                    folderInstanceId: (_a = this.selectedFile.parentFolderId) !== null && _a !== void 0 ? _a : this._commonService.guid(),
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.selectedFile.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.selectedFile.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.selectedFile.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            if (!dataKySo) {
+                                this._notifierService.showWarning('Người dùng chưa cấu hình thông tin ký số');
+                            }
+                            debugger;
+                            this.forms.fileViewer.formData.data = {
+                                fileId: sourceFileId,
+                                isFileVersion: false,
+                                fileName: this.selectedFile.name,
+                                service: this.serviceCode,
+                                entity: this.entity,
+                                entityKey: this.entityKey,
+                                fileBase64Content: dataKySo.fileBase64Content,
+                                userChuKySoId: dataKySo.id,
+                                showKySoButton: true,
+                                width: dataKySo.width,
+                                height: dataKySo.height,
+                            };
+                            this.forms.fileViewer.show = true;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ServiceFileUploadComponent.prototype.signKySimFile = function (file) {
+            this.forms.kySoSim.show = true;
+            this.model.advanceData = file;
+        };
+        ServiceFileUploadComponent.prototype.signFile = function (file) {
+            var _this = this;
+            this._notifierService.showConfirm('Bạn có chắc chắn muốn ký số văn bản này?').then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
+                var sourceFileId, sourceFile_1, rsConvert, e_2;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!rs) return [3 /*break*/, 5];
+                            sourceFileId = file.id;
+                            sourceFile_1 = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                sourceFile_1 = { id: sourceFileId };
+                                this.getServiceFile();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_2 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            this._fileExplorerService.generateLinkDownload({
+                                fileId: sourceFileId,
+                            }).then(function (rs) {
+                                var url = _this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                                var prms = {};
+                                prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                                prms['SessionId'] = '';
+                                prms['FileName'] = url;
+                                // tslint:disable-next-line: variable-name
+                                var json_prms = JSON.stringify(prms);
+                                vgca_sign_approved(json_prms, function (result) {
+                                    var resultObj = JSON.parse(result);
+                                    if (resultObj.FileServer != '') {
+                                        _this._fileExplorerService.saveSignedFile({
+                                            sourceFile: sourceFile_1,
+                                            tempFileId: resultObj.FileServer,
+                                        }).then(function (rss) {
+                                            _this.getServiceFile();
+                                            _this._notifierService.showSuccess('Ký số thành công');
+                                        });
+                                    }
+                                });
+                            });
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); });
+        };
+        ServiceFileUploadComponent.prototype.signVNPTCA = function (item) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var sourceFileId, rsConvert, e_3, dataInput, sigOptions, dataJS, data, e_4;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            sourceFileId = item.id;
+                            if (!this._fileExplorerService.needConvertBeforeSign(item.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: item.id,
+                                    name: this._fileExplorerService.changeFileExtension(item.name, 'pdf'),
+                                    folderInstanceId: (_a = item.parentFolderId) !== null && _a !== void 0 ? _a : this._commonService.guid(),
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + item.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + item.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                this.model.selectedItem.id = rsConvert.data;
+                                this.getServiceFile();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_3 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + item.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4: return [4 /*yield*/, this._fileExplorerService.getBase64FromFileId(sourceFileId)];
+                        case 5:
+                            dataInput = (_b.sent()).split(',')[1];
+                            sigOptions = new PdfSigner();
+                            sigOptions.page = 1;
+                            sigOptions.AdvancedCustom = true;
+                            sigOptions.SigType = 1;
+                            dataJS = {
+                                data: dataInput,
+                                type: 'pdf',
+                                sigOptions: JSON.stringify(sigOptions)
+                            };
+                            _b.label = 6;
+                        case 6:
+                            _b.trys.push([6, 8, , 9]);
+                            return [4 /*yield*/, vnpt_plugin.signArrDataAdvanced([JSON.stringify(dataJS)], "", false)];
+                        case 7:
+                            data = _b.sent();
+                            this.handeResult(data);
+                            return [3 /*break*/, 9];
+                        case 8:
+                            e_4 = _b.sent();
+                            console.log(e_4);
+                            return [3 /*break*/, 9];
+                        case 9: return [2 /*return*/];
                     }
-                }
+                });
             });
         };
-        ServiceFileUploadComponent.prototype.viewOnline = function () {
-            if (this._fileObjectService.isSupportedViewOnline(this.fileObj.name)) {
-                this.dataModel.fileViewer.data = {};
-                this.dataModel.fileViewer.data.fileId = this.fileId;
-                this.dataModel.fileViewer.data.fileName = this.fileObj.name;
-                this.dataModel.fileViewer.data.service = this.serviceCode;
-                this.dataModel.fileViewer.data.entity = this.entity;
-                this.dataModel.fileViewer.data.entityKey = this.entityKey;
-                this.dataModel.fileViewer.data.isFileVersion = false;
-                this.dataModel.fileViewer.show = true;
+        ServiceFileUploadComponent.prototype.handeResult = function (data) {
+            var _this = this;
+            if (typeof JSON.parse(data).code !== 'undefined') {
+                var jsOb = JSON.parse(data);
             }
             else {
-                this.download();
+                var jsOb = JSON.parse(JSON.parse(data)[0]);
             }
-        };
-        ServiceFileUploadComponent.prototype.download = function () {
-            if (!this.fileId) {
-                return;
+            switch (jsOb.code) {
+                case 0:
+                    this._fileExplorerService.kySimSaveSignedFile({
+                        sourceFile: this.model.selectedItem,
+                        fileContents: jsOb.data,
+                    }).then(function (rss) {
+                        _this._notifierService.showSuccess("Ký thành công");
+                        _this.getServiceFile();
+                    });
+                    break;
+                case 1:
+                    this._notifierService.showWarning("Dữ liệu đầu vào không đúng định dạng");
+                    break;
+                case 2:
+                    this._notifierService.showWarning("Không lấy được thông tin chứng thư số");
+                    break;
+                case 3:
+                    this._notifierService.showWarning("Có lỗi trong quá trình ký số");
+                    break;
+                case 4:
+                    this._notifierService.showSuccess("Chứng thư số không có khóa bí mật");
+                    break;
+                case 5:
+                    this._notifierService.showSuccess("Lỗi không xác định");
+                    break;
+                case 6:
+                    this._notifierService.showSuccess("Ký pdf: không tìm thấy tham số số trang cần ký");
+                    break;
+                case 7:
+                    this._notifierService.showSuccess("Ký pdf: trang đặt chữ ký không tồn tại");
+                    break;
+                case 8:
+                    this._notifierService.showSuccess("Ký xml: không tìm thấy thẻ ký số");
+                    break;
+                case 9:
+                    this._notifierService.showSuccess("Ký pdf: không tìm thấy id của thẻ ký số");
+                    break;
+                case 10:
+                    this._notifierService.showSuccess("Dữ liệu ký đã chứa một hoặc nhiều chữ ký không hợp lệ");
+                    break;
+                case 11:
+                    this._notifierService.showSuccess("Người dùng hủy bỏ");
+                    break;
+                case 13:
+                    this._notifierService.showWarning("Dữ liệu ký rỗng");
+                    break;
+                default:
+                    this._notifierService.showSuccess("Lỗi không xác định");
+                    break;
             }
-            var model = new GenerateLinkDownloadDTO({
-                fileId: this.fileId
-            });
-            this._downloadLinkService.downloadLink(model);
-        };
-        ServiceFileUploadComponent.prototype.uploadFileFromDrive = function () {
-            // this.dataModel.driveFileDialog = {
-            //     show: true
-            // };
-        };
-        ServiceFileUploadComponent.prototype.copyFileToDrive = function () {
-            // this._fileExplorerService.getFolderId(this.userId).then(response => {
-            //     var copyFileDto = new CopyFileDto();
-            //     copyFileDto.id = this.fileId;
-            //     if (this.fileName == "") {
-            //         if (this.fileObj != null) {
-            //             copyFileDto.name = this.fileObj.name;
-            //         }
-            //     } else {
-            //         copyFileDto.name = this.fileName;
-            //     }
-            //     copyFileDto.ownerType = this.userId;
-            //     copyFileDto.folderId = response.data;
-            //     this._fileExplorerService.copyFile(copyFileDto).then(response => {
-            //         this._notifierService.showSuccess('Sao chép tài liệu về thư mục cá nhân thành công');
-            //     }, error => {
-            //         this._notifierService.showBusinessError(error.error.message);
-            //     });
-            // });
-        };
-        ServiceFileUploadComponent.prototype.writeValue = function (obj) {
         };
-        ServiceFileUploadComponent.prototype.registerOnChange = function (fn) {
-            this.onChangeBase = fn;
-        };
-        ServiceFileUploadComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        ServiceFileUploadComponent.prototype.setDisabledState = function (isDisabled) {
-            this.isDisabled = isDisabled;
+        ServiceFileUploadComponent.prototype.addComment = function (file) {
+            var _this = this;
+            this._notifierService.showConfirm('Bạn có chắc chắn muốn bút phê văn bản này?').then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
+                var sourceFileId, sourceFile_2, rsConvert, e_5;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!rs) return [3 /*break*/, 5];
+                            sourceFileId = file.id;
+                            sourceFile_2 = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 2:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                return [2 /*return*/];
+                            }
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                sourceFile_2 = { id: sourceFileId };
+                                this.getServiceFile();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_5 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 4:
+                            this._fileExplorerService.generateLinkDownload({
+                                fileId: sourceFileId,
+                            }).then(function (rs) {
+                                var url = _this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                                var prms = {};
+                                prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                                prms['SessionId'] = '';
+                                prms['FileName'] = url;
+                                // tslint:disable-next-line: variable-name
+                                var json_prms = JSON.stringify(prms);
+                                vgca_comment(json_prms, function (result) {
+                                    var resultObj = JSON.parse(result);
+                                    if (resultObj.FileServer != '') {
+                                        _this._fileExplorerService.saveSignedFile({
+                                            sourceFile: sourceFile_2,
+                                            tempFileId: resultObj.FileServer,
+                                        }).then(function (rss) {
+                                            _this.getServiceFile();
+                                            _this._notifierService.showSuccess('Tạo bút phê thành công');
+                                        });
+                                    }
+                                });
+                            });
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); });
         };
-        ServiceFileUploadComponent.prototype.openFileViewer = function () {
+        ServiceFileUploadComponent.prototype.addCommentAndSign = function (file) {
             return __awaiter(this, void 0, void 0, function () {
-                var fileBinary, fileObject, fileName;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._fileExplorerService.checkPhysicalFile(this.fileId)];
+                var rs, sourceFileId, sourceFile, rsConvert, e_6, downloadLink, url, prms, json_prms_1, commentResult, resultObj, downloadLink2, url2, prms2, json_prms2_1, signResult, signResultObj;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._notifierService.showConfirm('Bạn có chắc chắn muốn tạo bút phê và ký văn bản này?')];
                         case 1:
-                            fileBinary = _a.sent();
-                            if (!fileBinary.success) {
-                                this._notifierService.showWarning('File không tồn tại, vui lòng liên hệ quản trị viên');
+                            rs = _b.sent();
+                            if (!rs) return [3 /*break*/, 11];
+                            sourceFileId = file.id;
+                            sourceFile = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 5];
+                            _b.label = 2;
+                        case 2:
+                            _b.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
+                        case 3:
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
                                 return [2 /*return*/];
                             }
-                            return [4 /*yield*/, this._fileObjectService.getDetail(this.fileId)];
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                sourceFileId = rsConvert.data;
+                                sourceFile = { id: sourceFileId };
+                                this.getServiceFile();
+                            }
+                            return [3 /*break*/, 5];
+                        case 4:
+                            e_6 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            return [2 /*return*/];
+                        case 5: return [4 /*yield*/, this._fileExplorerService.generateLinkDownload({
+                                fileId: sourceFileId,
+                            })];
+                        case 6:
+                            downloadLink = _b.sent();
+                            url = this._downloadLinkService.getDownloadForSignUrl(downloadLink.data);
+                            prms = {
+                                FileUploadHandler: this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile",
+                                SessionId: '',
+                                FileName: url
+                            };
+                            json_prms_1 = JSON.stringify(prms);
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    vgca_comment(json_prms_1, function (result) { return resolve(result); });
+                                })];
+                        case 7:
+                            commentResult = _b.sent();
+                            resultObj = JSON.parse(commentResult);
+                            return [4 /*yield*/, this._fileExplorerService.generateLinkDownload({
+                                    fileId: resultObj.FileServer,
+                                })];
+                        case 8:
+                            downloadLink2 = _b.sent();
+                            url2 = this._downloadLinkService.getDownloadForSignUrl(downloadLink2.data);
+                            prms2 = {
+                                FileUploadHandler: this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile",
+                                SessionId: '',
+                                FileName: url2
+                            };
+                            json_prms2_1 = JSON.stringify(prms2);
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    vgca_sign_approved(json_prms2_1, function (result) { return resolve(result); });
+                                })];
+                        case 9:
+                            signResult = _b.sent();
+                            signResultObj = JSON.parse(signResult);
+                            if (!(signResultObj.FileServer != '')) return [3 /*break*/, 11];
+                            return [4 /*yield*/, this._fileExplorerService.saveSignedFile({
+                                    sourceFile: sourceFile,
+                                    tempFileId: signResultObj.FileServer,
+                                })];
+                        case 10:
+                            _b.sent();
+                            this.getServiceFile();
+                            this._notifierService.showSuccess('Tạo bút phê và ký thành công');
+                            _b.label = 11;
+                        case 11: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ServiceFileUploadComponent.prototype.signFileDonVi = function (file) {
+            var _this = this;
+            this._notifierService
+                .showConfirm('Bạn có chắc chắn muốn ký số đơn vị văn bản này?')
+                .then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
+                var sourceFileId, sourceFile_3, rsConvert, e_7;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!rs) return [3 /*break*/, 5];
+                            sourceFileId = file.id;
+                            sourceFile_3 = file;
+                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 4];
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
+                                    instanceId: sourceFileId,
+                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
+                                    folderInstanceId: file.parentFolderId,
+                                    ownerType: this._userService.getCurrentUser().userId.toString(),
+                                })];
                         case 2:
-                            fileObject = _a.sent();
-                            fileName = '';
-                            if (!fileObject.success) {
-                                this._notifierService.showWarning('Có lỗi trong lúc lấy dữ liệu file, vui lòng liên hệ quản trị viên');
+                            rsConvert = _b.sent();
+                            if (!rsConvert || !rsConvert.success) {
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
                                 return [2 /*return*/];
                             }
-                            fileName = fileObject === null || fileObject === void 0 ? void 0 : fileObject.name;
-                            this.forms.fileViewer.formData.data = {
-                                fileId: this.fileId,
-                                isFileVersion: false,
-                                fileName: fileName,
-                                service: this.serviceCode,
-                                entity: this.entity,
-                                entityKey: this.entityKey,
-                            };
-                            this.forms.fileViewer.show = true;
+                            else {
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                this.getServiceFile();
+                                sourceFileId = rsConvert.data;
+                                sourceFile_3 = { id: sourceFileId };
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_7 = _b.sent();
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
                             return [2 /*return*/];
+                        case 4:
+                            this._fileExplorerService
+                                .generateLinkDownload({
+                                isFileVersion: false,
+                                fileId: sourceFileId,
+                            })
+                                .then(function (rs) {
+                                var url = _this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                                var prms = {};
+                                prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                                prms['SessionId'] = '';
+                                prms['FileName'] = url;
+                                // Truyền số, ngày ký số phòng ban nếu cần
+                                var that = _this;
+                                if (that.control && that.control.dataKySoDonVi) {
+                                    var dataKySoDonVi = that.control.dataKySoDonVi();
+                                    if (dataKySoDonVi) {
+                                        // lấy số DocNumber
+                                        if (dataKySoDonVi.docNumber) {
+                                            prms['DocNumber'] = dataKySoDonVi.docNumber;
+                                        }
+                                        // lấy ngày ban hành vb đi
+                                        if (dataKySoDonVi.issuedDate) {
+                                            prms['IssuedDate'] = dataKySoDonVi.issuedDate;
+                                        }
+                                    }
+                                }
+                                // tslint:disable-next-line: variable-name
+                                var json_prms = JSON.stringify(prms);
+                                vgca_sign_issued(json_prms, function (result) {
+                                    var resultObj = JSON.parse(result);
+                                    if (resultObj.FileServer != '') {
+                                        _this._fileExplorerService
+                                            .saveSignedFile({
+                                            sourceFile: sourceFile_3,
+                                            tempFileId: resultObj.FileServer,
+                                        })
+                                            .then(function (rss) {
+                                            _this.getServiceFile();
+                                            _this._notifierService.showSuccess('Ký số thành công');
+                                        });
+                                    }
+                                });
+                            });
+                            _b.label = 5;
+                        case 5: return [2 /*return*/];
                     }
                 });
-            });
+            }); });
         };
         return ServiceFileUploadComponent;
     }(ComponentBase));
     ServiceFileUploadComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'service-file-upload',
-                    template: "<div class=\"file-upload\">\n    <div class=\"fl-icon\">\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\n    </div>\n\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\n        <div>\n            <ng-container *ngIf=\"!showNoti\">\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\n                <span class=\"suffix\" *ngIf=\"extension\">.{{extension}} </span>\n            </ng-container>\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\n        </div>\n    </div>\n\n    <!-- <div class=\"fl-file-name\">\n        <div>\n            <ng-container *ngIf=\"!showNoti\">\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\n                <span *ngIf=\"extension\">.{{extension}} </span>\n            </ng-container>\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\n        </div>\n    </div> -->\n\n    <div class=\"fl-buttons\">\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\n            icon=\"pi pi-plus\" [disabled]=\"disabled\" (click)=\"onOpenSelect()\"></button>\n\n        <button *ngIf=\"hasFile && !readonly && control.showDeleteFile\"\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\" [disabled]=\"disabled\"\n            (click)=\"onRemoveFile()\"></button>\n\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n            (click)=\"showContextMenu($event)\"></button>\n    </div>\n\n    <div style=\"display: none;\">\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" [multiple]=\"false\"\n            [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n            [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n            [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n            [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n            [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n            [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\">\n        </p-fileUpload>\n    </div>\n\n</div>\n\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\n<file-viewer #fileViewerNew *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n    [readonly]=\"readonly || control.disabled\" [model]=\"forms.fileViewer.formData\"\n    (onClose)=\"this.forms.fileViewer.show = false;\">\n</file-viewer>",
+                    template: "<div class=\"file-upload\">\n    <div class=\"fl-icon\">\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\n    </div>\n\n    <div class=\"fl-file-name\" (click)=\"openFileViewer()\">\n        <div style=\"position: relative;\">\n            <ng-container *ngIf=\"!showNoti\">\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\n                <span class=\"suffix\" *ngIf=\"extension\">.{{extension}} </span>\n            </ng-container>\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\n            <span *ngIf=\"selectedFile?.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n                tooltipPosition=\"top\" (click)=\"viewListSign($event, selectedFile.signatures)\">\n                <i class=\"fas fa-signature\"></i>\n            </span>\n        </div>\n    </div>\n\n    <!-- <div class=\"fl-file-name\">\n        <div>\n            <ng-container *ngIf=\"!showNoti\">\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\n                <span *ngIf=\"extension\">.{{extension}} </span>\n            </ng-container>\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\n        </div>\n    </div> -->\n    <div class=\"fl-buttons\">\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\n            icon=\"pi pi-plus\" [disabled]=\"disabled\" (click)=\"onOpenSelect()\"></button>\n\n        <button *ngIf=\"hasFile && !readonly && control.showDeleteFile\"\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\" [disabled]=\"disabled\"\n            (click)=\"onRemoveFile()\"></button>\n\n        <button [disabled]=\"!menu || !menu.length\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n            (click)=\"showContextMenu($event)\"></button>\n    </div>\n\n    <div style=\"display: none;\">\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" [multiple]=\"false\"\n            [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n            [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n            [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n            [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n            [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n            [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\">\n        </p-fileUpload>\n    </div>\n</div>\n\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\n<file-viewer #fileViewerNew *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n    [readonly]=\"readonly || control.disabled\" [model]=\"forms.fileViewer.formData\"\n    (onClose)=\"this.forms.fileViewer.show = false;\">\n</file-viewer>\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\n    (onHide)=\"forms.signatureDetail.show=false;\">\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\n    </signature-detail>\n</tn-dialog>\n<tn-dialog *ngIf=\"signatureFormModel.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"'Ch\u1ECDn ch\u1EEF k\u00FD s\u1ED1' | translate\"\n    [popupSize]=\"signatureFormModel.popupSize\" (onHide)=\"signatureFormModel.show=false\">\n    <signature-select #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"signatureFormModel.formData\"\n        (onCancel)=\"signatureFormModel.show = false\" (onSaved)=\"signFileSmartCA($event)\">\n    </signature-select>\n</tn-dialog>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -39751,7 +40997,7 @@
                         },
                         ComponentContextService
                     ],
-                    styles: ["::ng-deep .file-upload{display:flex;border:1px solid #ced4da;border-radius:4px}::ng-deep .file-upload .fl-icon{flex:0 0 30px;display:flex;font-size:20px;justify-content:center;align-items:center;border-right:1px solid #ced4da}::ng-deep .file-upload .fl-icon>i{font-size:16px!important}::ng-deep .file-upload .fl-file-name{display:flex;align-items:center;flex-grow:1;cursor:pointer;opacity:.8;padding:0 10px;color:#109bf8;overflow:hidden}::ng-deep .file-upload .fl-file-name>div{width:100%;display:flex}::ng-deep .file-upload .fl-file-name>div>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .file-upload .fl-file-name:hover{opacity:1}::ng-deep .file-upload .fl-file-name .suffix{min-width:45px}::ng-deep .file-upload .fl-buttons{flex:0 0 80px;display:flex;border-right:1px solid #ced4da;align-items:center;justify-content:space-evenly;border-left:1px solid #ced4da}"]
+                    styles: ["::ng-deep .file-upload{display:flex;border:1px solid #ced4da;border-radius:4px}::ng-deep .file-upload .fl-icon{flex:0 0 30px;display:flex;font-size:20px;justify-content:center;align-items:center;border-right:1px solid #ced4da}::ng-deep .file-upload .fl-icon>i{font-size:16px!important}::ng-deep .file-upload .fl-file-name{display:flex;align-items:center;flex-grow:1;cursor:pointer;opacity:.8;padding:0 10px;color:#109bf8;overflow:hidden}::ng-deep .file-upload .fl-file-name>div{width:100%;display:flex}::ng-deep .file-upload .fl-file-name>div>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .file-upload .fl-file-name:hover{opacity:1}::ng-deep .file-upload .fl-file-name .suffix{min-width:45px}::ng-deep .file-upload .fl-buttons{flex:0 0 80px;display:flex;border-right:1px solid #ced4da;align-items:center;justify-content:space-evenly;border-left:1px solid #ced4da}::ng-deep .file-upload .nfl-signature{display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.8;padding:0 10px;color:#109bf8;overflow:hidden}::ng-deep .file-upload .nfl-signature:hover{opacity:1}::ng-deep .file-upload .signature i{position:absolute;top:0;right:0}"]
                 },] }
     ];
     ServiceFileUploadComponent.ctorParameters = function () { return [
@@ -39764,6 +41010,7 @@
         { type: NotifierService },
         { type: DownloadLinkService },
         { type: FileExplorerService },
+        { type: ngxDeviceDetector.DeviceDetectorService },
         { type: i0.Injector }
     ]; };
     ServiceFileUploadComponent.propDecorators = {
@@ -39777,6 +41024,7 @@
         entity: [{ type: i0.Input }],
         entityKey: [{ type: i0.Input }],
         chooseLabel: [{ type: i0.Input }],
+        parentSetting: [{ type: i0.Input }],
         onInit: [{ type: i0.Output }],
         onSelect: [{ type: i0.Output }],
         onRemove: [{ type: i0.Output }],
@@ -45421,13 +46669,13 @@
         return UserPickerSetting;
     }());
     var DatasourceFieldFilter = [
-        { id: 'userName', ten: 'Tài khoản' },
-        { id: 'code', ten: 'Mã' },
-        { id: 'email', ten: 'Email' },
+        { id: 'userName', ten: 'Tài khoản', placeholder: 'thuan.pd\nvan.nbt' },
+        { id: 'code', ten: 'Mã cán bộ', placeholder: '00000408\n00014270' },
+        { id: 'email', ten: 'Email', placeholder: 'linh123@gmail.com\ntnam123@gmail.com' },
     ];
     var DatasourceFilterCanBo = [
-        { id: 'code', ten: 'Mã' },
-        { id: 'email', ten: 'Email' }
+        { id: 'code', ten: 'Mã cán bộ', placeholder: '00000408\n00014270' },
+        { id: 'email', ten: 'Email', placeholder: 'linh123@gmail.com\ntnam123@gmail.com' },
     ];
 
     var AutoCompletePickerComponent = /** @class */ (function (_super) {
@@ -47678,7 +48926,7 @@
         });
         EntityPickerDataComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a;
+            var _a, _b;
             this.loadDetailFromQueryParam = true;
             this.plusUrl = this.control.plusUrl;
             this.setting.hiddenAuthorizeButton = true;
@@ -47702,6 +48950,9 @@
             if (this.control.baseService instanceof CanBoHoSoService) {
                 this.datasourceFieldFilter = DatasourceFilterCanBo;
             }
+            if ((_b = this.control.datasourceFieldFilter) === null || _b === void 0 ? void 0 : _b.length) {
+                this.datasourceFieldFilter = this.control.datasourceFieldFilter;
+            }
             this.control.columns.forEach(function (column) {
                 if (column.isDisplay) {
                     var newCol = new ColumnSchemaBase({
@@ -48394,6 +49645,7 @@
             configurable: true
         });
         EntityPickerSearchFormComponent.prototype.ngOnInit = function () {
+            var _this = this;
             this.doNotCheckBaseService = true;
             this.setting.schema = [
                 new RadioButtonListControlSchema({
@@ -48404,8 +49656,8 @@
                     mdWidth: 12,
                     hidden: !this.datasourceFieldFilter.length,
                     onChanged: function (evt) {
-                        var plusPlaceholder = evt.parentModel.fieldFilter == 'email' ? '@gmail.com' : '';
-                        evt.formControls['lstDataCheck'].placeholder = "linh123" + plusPlaceholder + "\nnam123" + plusPlaceholder;
+                        var _a;
+                        evt.formControls['lstDataCheck'].placeholder = (_a = _this.datasourceFieldFilter.find(function (p) { return p.id == evt.parentModel.fieldFilter; })) === null || _a === void 0 ? void 0 : _a.placeholder;
                     }
                 }),
                 new TextAreaControlSchema({
@@ -48428,16 +49680,17 @@
         };
         EntityPickerSearchFormComponent.prototype.onFormInitialized = function (controls) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     return [2 /*return*/];
                 });
             });
         };
         EntityPickerSearchFormComponent.prototype.initDataAdd = function (evt) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     if (this.datasourceFieldFilter.length) {
                         evt.rootModel.fieldFilter = this.datasourceFieldFilter[0].id;
+                        evt.formControls['lstDataCheck'].placeholder = this.datasourceFieldFilter[0].placeholder;
                     }
                     evt.rootModel.lstDataCheck = undefined;
                     evt.rootModel.lstDataNotExist = undefined;
@@ -48447,7 +49700,7 @@
         };
         EntityPickerSearchFormComponent.prototype.modifyDetailData = function (data) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     return [2 /*return*/];
                 });
             });
@@ -48455,11 +49708,11 @@
         EntityPickerSearchFormComponent.prototype.customSave = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var isValid;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0: return [4 /*yield*/, this.crudForm.validateForm()];
                         case 1:
-                            isValid = _a.sent();
+                            isValid = _b.sent();
                             if (!isValid)
                                 return [2 /*return*/];
                             this.model.data.lstData = this.model.data.lstDataCheck.split('\n').map(function (p) { return p.trim(); }).filter(function (p) { return p; });
@@ -49327,6 +50580,21 @@
         EntityPickerComponent.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
         };
+        EntityPickerComponent.prototype._view = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.control.onViewDetail) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.control.onViewDetail(rowData)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return EntityPickerComponent;
     }(DataListBase));
     EntityPickerComponent.decorators = [
@@ -56326,11 +57594,14 @@
 
     var UserPickerBoxComponent = /** @class */ (function (_super) {
         __extends(UserPickerBoxComponent, _super);
-        function UserPickerBoxComponent(_injector, _userV5Service, _organizationService, _coCauToChucService) {
-            var _this = _super.call(this, _injector) || this;
+        function UserPickerBoxComponent(_injector, _userV5Service, _organizationService, _coCauToChucService, _moduleConfigService) {
+            var _this = this;
+            var _a, _b, _c;
+            _this = _super.call(this, _injector) || this;
             _this._userV5Service = _userV5Service;
             _this._organizationService = _organizationService;
             _this._coCauToChucService = _coCauToChucService;
+            _this._moduleConfigService = _moduleConfigService;
             _this.multiple = false;
             _this.disabled = false;
             _this.enableCaching = true;
@@ -56359,6 +57630,10 @@
             _this.rootFilter = {};
             _this.treeLoading = false;
             _this.datasourceFieldFilter = DatasourceFieldFilter;
+            var _environment = _moduleConfigService.getConfig().environment;
+            if (((_b = (_a = _environment.cauHinhNghiepVu) === null || _a === void 0 ? void 0 : _a.datasourceFieldFilterCanBo) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                _this.datasourceFieldFilter = (_c = _environment.cauHinhNghiepVu) === null || _c === void 0 ? void 0 : _c.datasourceFieldFilterCanBo;
+            }
             return _this;
         }
         UserPickerBoxComponent.prototype.ngOnInit = function () {
@@ -56380,7 +57655,7 @@
         UserPickerBoxComponent.prototype.nodeSelect = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var target;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_d) {
                     target = event.originalEvent.target;
                     if (target.classList.contains('custom-node')) {
                         this.selectedNodeData = target.id;
@@ -56411,19 +57686,19 @@
         UserPickerBoxComponent.prototype.initTree = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var rs;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             if (!this.controlSetting.lazyLoadOrganization) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._organizationService.getOrganizationByParentId(this._commonService.guidEmpty())];
                         case 1:
-                            rs = _a.sent();
+                            rs = _d.sent();
                             this.rootTreeNode = rs.data;
                             this.loadTree(this.rootTreeNode[0], true);
                             return [3 /*break*/, 3];
                         case 2:
                             this.loadTree(null);
-                            _a.label = 3;
+                            _d.label = 3;
                         case 3: return [2 /*return*/];
                     }
                 });
@@ -56456,7 +57731,7 @@
             }
             else {
                 this._organizationService.getOrganizationTree(this.controlSetting.parentOrgCode).then(function (result) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
+                    return __generator(this, function (_d) {
                         this.rootTreeNode = result.data;
                         this.rootTreeNode[0].expanded = true;
                         this.treeLoading = true;
@@ -56476,15 +57751,15 @@
         UserPickerBoxComponent.prototype.modifyFilter = function (filters) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             Object.keys(this.rootFilter).forEach(function (item) {
                                 filters.push(_this.rootFilter[item]);
                             });
                             return [4 /*yield*/, appendDefaultFilter(filters, this.controlSetting.defaultFilters)];
                         case 1:
-                            _a.sent();
+                            _d.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -56528,7 +57803,8 @@
         { type: i0.Injector },
         { type: UserV5Service },
         { type: OrganizationService },
-        { type: CoCauToChucTestService }
+        { type: CoCauToChucTestService },
+        { type: ModuleConfigService }
     ]; };
     UserPickerBoxComponent.propDecorators = {
         multiple: [{ type: i0.Input }],
@@ -58190,6 +59466,7 @@
 
     // 1
     // 2
+    // 3
     function coreDeclaration() {
         return [
             AddressComponent,