tnx-shared 5.3.365 → 5.3.367

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/bundles/tnx-shared.umd.js +66 -10
  2. package/bundles/tnx-shared.umd.js.map +1 -1
  3. package/bundles/tnx-shared.umd.min.js +1 -1
  4. package/bundles/tnx-shared.umd.min.js.map +1 -1
  5. package/classes/base/data-form-base.d.ts +4 -1
  6. package/classes/base/data-form-base.d.ts.map +1 -1
  7. package/components/tn-tinymce/tn-tinymce.component.d.ts +2 -1
  8. package/components/tn-tinymce/tn-tinymce.component.d.ts.map +1 -1
  9. package/esm2015/classes/base/data-form-base.js +28 -3
  10. package/esm2015/components/crud/crud-form/crud-form.component.js +2 -2
  11. package/esm2015/components/file-explorer/file-manager/file-manager.component.js +2 -2
  12. package/esm2015/components/tn-tinymce/tn-tinymce.component.js +38 -9
  13. package/fesm2015/tnx-shared.js +64 -10
  14. package/fesm2015/tnx-shared.js.map +1 -1
  15. package/package.json +2 -2
  16. package/tnx-shared.metadata.json +1 -1
package/fesm2015/tnx-shared.js CHANGED
@@ -14849,7 +14849,7 @@ class CrudFormComponent extends ComponentBase {
14849
14849
  CrudFormComponent.decorators = [
14850
14850
  { type: Component, args: [{
14851
14851
  selector: 'crud-form',
14852
- 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\"\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'\">\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</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>",
14852
+ 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\"\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'\">\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>",
14853
14853
  providers: [ComponentContextService],
14854
14854
  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}"]
14855
14855
  },] }
@@ -16309,7 +16309,7 @@ class DataFormBase extends ComponentBaseWithButton {
16309
16309
  }
16310
16310
  }
16311
16311
  else {
16312
- if (oldValue != newValue) {
16312
+ if (!this.areValuesEqual(newValue, oldValue)) {
16313
16313
  const [valueBefore, valueAfter] = this.getLogValueDefault(control, oldValue, newValue);
16314
16314
  this.logSetting.arrValueAfterUpdate.push(new LogColumn({
16315
16315
  field: control.field,
@@ -16329,6 +16329,31 @@ class DataFormBase extends ComponentBaseWithButton {
16329
16329
  console.error('----log data fail----');
16330
16330
  }
16331
16331
  }
16332
+ areValuesEqual(value1, value2) {
16333
+ if (value1 === value2)
16334
+ return true;
16335
+ if (Array.isArray(value1) && Array.isArray(value2)) {
16336
+ return this.areArraysEqual(value1, value2); // So sánh array
16337
+ }
16338
+ if (typeof value1 === 'object' && typeof value2 === 'object' && value1 !== null && value2 !== null) {
16339
+ return this.areObjectsEqual(value1, value2); // So sánh objects
16340
+ }
16341
+ return false;
16342
+ }
16343
+ areArraysEqual(arr1, arr2) {
16344
+ if (arr1.length !== arr2.length)
16345
+ return false; // Khác độ dài
16346
+ return arr1.every((item, index) => this.areValuesEqual(item, arr2[index])); // So sánh trên từng phần tử của array
16347
+ }
16348
+ areObjectsEqual(obj1, obj2) {
16349
+ const keys1 = Object.keys(obj1);
16350
+ const keys2 = Object.keys(obj2);
16351
+ if (keys1.length !== keys2.length)
16352
+ return false; // Khác độ dài
16353
+ return keys1.every(key => obj2.hasOwnProperty(key) &&
16354
+ this.areValuesEqual(obj1[key], obj2[key]) // So sánh trên từng phần tử của object
16355
+ );
16356
+ }
16332
16357
  isNullOrEmpty(input) {
16333
16358
  if (input !== undefined && input !== null) {
16334
16359
  if (Array.isArray(input)) {
@@ -31881,7 +31906,7 @@ FileManagerComponent.decorators = [
31881
31906
  { type: Component, args: [{
31882
31907
  // tslint:disable-next-line: component-selector
31883
31908
  selector: 'file-manager',
31884
- template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout p-grid\">\n <div *ngIf=\"visibleFolder && !control.uploadOnly\" class=\"tree-layout\"\n [class]=\"visibleFolder ? 'p-col-12 p-lg-2' : '' \">\n <div class=\"tree-layout-btn\">\n <button *ngIf=\"!hiddenCreateFolder && !readonly\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\n tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\n (click)=\"createFolder()\">\n </button>\n </div>\n <div class=\"tree-layout-wrapper\">\n <perfect-scrollbar #scrollbar class=\"defaulFlexColumn treeOrg\" [config]=\"{suppressScrollX : true}\">\n <p-tree class=\"folderTree\" selectionMode=\"single\" [style]=\"{ 'width' : '100%'}\"\n [(selection)]=\"selectedTreeNode\" [value]=\"rootTreeNode\" [contextMenu]=\"contextMenu\"\n (onNodeSelect)=\"nodeSelect($event)\">\n <ng-template let-node pTemplate=\"default\">\n <span [id]=\"node.data\" class=\"custom-node\"\n (contextmenu)=\"showContextMenu($event, node, true)\">{{node.label}}</span>\n </ng-template>\n </p-tree>\n </perfect-scrollbar>\n </div>\n </div>\n <div class=\"fm-grid\" [class]=\"visibleFolder ? 'p-col-12 p-lg-10' : 'p-col-12' \">\n <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\n [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\n [widthFunctionColumn]=\"'8.2rem'\" [showScrollHorizontal]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n (onRowSelect)=\"onRowSelect($event)\">\n <ng-template #customTitle>\n <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n </ng-template>\n <ng-template #toolbar>\n <button *ngIf=\"!control.uploadOnly\" pButton pRipple type=\"button\"\n [pTooltip]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" tooltipPosition=\"top\"\n [icon]=\"visibleFolder ? 'far fa-eye-slash': 'far fa-eye'\" class=\"p-button-text\"\n [label]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" iconPos=\"left\"\n (click)=\"changeVisibleFolder()\">\n </button>\n\n <button *ngIf=\"!hiddenCreateFolder && !readonly && !visibleFolder && !control.uploadOnly\" pButton\n pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\" (click)=\"createFolder()\">\n </button>\n\n <button *ngIf=\"!readonly\" pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\n tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\n (click)=\"selectFile()\"></button>\n\n <button *ngIf=\"!readonly && !control.uploadOnly\" pButton icon=\"pi pi-link\"\n pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\" type=\"button\"\n class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\n (click)=\"showAttachLinkBox = true\"></button>\n\n <button *ngIf=\"!inTaiLieu && !inTaiLieuChung && !readonly && !control.uploadOnly && !filePickerSetting\"\n pButton icon=\"pi pi-book\" pTooltip=\"Sao ch\u00E9p t\u1EEB t\u00E0i li\u1EC7u d\u00F9ng chung ho\u1EB7c c\u00E1 nh\u00E2n\"\n tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\n (click)=\"showTaiLieuDungChung = true;\">\n </button>\n\n <button *ngIf=\"filePickerSetting && !filePickerSetting.isHidden\" pButton icon=\"pi pi-book\"\n pTooltip=\"{{filePickerSetting.title}}\" tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\"\n label=\"{{filePickerSetting.title}}\" (click)=\"showPickerTaiLieu()\">\n </button>\n\n <button *ngIf=\"canSelect() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\"\n icon=\"fas fa-arrows-alt\" iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\n </button>\n\n <button *ngIf=\"canSetMove() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\"\n icon=\"far fa-hand-paper\" iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\n </button>\n\n <button *ngIf=\"canSetMove() && !control.uploadOnly\" icon=\"pi pi-undo\" pButton\n class=\"p-button-text p-button-secondary\" type=\"button\"\n pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\n (click)=\"cancelMove()\">\n </button>\n\n <button *ngIf=\"hasSelect() && !readonly\" pButton type=\"button\"\n pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\n (click)=\"deleteMutiple(model.selectedItems)\"></button>\n\n <button *ngIf=\"hasSelect() && !control.uploadOnly\" class=\"p-button-text p-button-secondary\" pButton\n type=\"button\" pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\"\n iconPos=\"left\" label=\"T\u1EA3i v\u1EC1\" (click)=\"downloadMultiple()\">\n </button>\n </ng-template>\n\n <ng-template #explorerItem let-rowData='rowData' let-col='col'>\n <div style=\"display: flex; align-items: center;\">\n <span *ngIf=\"rowData.tailFileUpper != '.JPG'\n && rowData.tailFileUpper != '.JPEG' && rowData.tailFileUpper != '.PNG' \"\n (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\" style=\"display: flex;\"\n [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n </span>\n\n <span *ngIf=\"rowData.isFile && (rowData.tailFileUpper == '.JPG'\n || rowData.tailFileUpper == '.JPEG' || rowData.tailFileUpper == '.PNG' )\"\n (click)=\"openObject(rowData)\" class=\"file-ex-thumbnail\" style=\"display: flex;\">\n <img class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"50px\" [alt]=\"rowData.name\"\n style=\"margin-right: 7px;\" />\n </span>\n\n <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n {{rowData.name}}\n </span>\n\n <span *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n <i class=\"fas fa-signature\"></i>\n </span>\n </div>\n </ng-template>\n\n <!-- <ng-template #thumbnail let-rowData=\"rowData\" let-col=\"col\">\n <div style=\"text-align: center;\">\n <img *ngIf=\"rowData.isFile && (rowData.tailFile.toUpperCase() == '.JPG'\n || rowData.tailFile.toUpperCase() == '.JPEG' || rowData.tailFile.toUpperCase() == '.PNG' )\"\n class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"100px\" [alt]=\"rowData.name\" />\n </div>\n </ng-template> -->\n\n <ng-template #fileSize let-rowData='rowData'>\n <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\n </ng-template>\n\n <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\n <div class=\"function-list\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\n icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\n\n <button *ngIf=\"control.showDelete\"\n class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\n pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n (click)=\"deleteFile(rowData)\"></button>\n\n <button 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, rowData)\"></button>\n </ng-container>\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\n (click)=\"download(rowData)\"></button>\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n (click)=\"copyDownloadLink(rowData)\"></button>\n </div>\n </ng-template>\n </crud-list>\n </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n <div class=\"fm-toolbar-buttons\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\n </button>\n <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\n <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\"\n tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\n (click)=\"showAttachLinkBox = true\"></button>\n <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n pTooltip=\"T\u00E0i li\u1EC7u d\u00F9ng chung\" tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\"\n label=\"T\u00E0i li\u1EC7u\" (click)=\"showTaiLieuDungChung = true;\">\n </button>\n </ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n </div>\n\n <div class=\"nfl-grid\">\n <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n <div class=\"nfl-no\">\n {{i + 1}}.\n </div>\n\n <div class=\"nfl-name\">\n <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n </span>\n <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n <span>\n <span>{{rowData.name}}</span>\n </span>\n </a>\n </div>\n <div *ngIf=\"rowData.signatures\" class=\"nfl-signature signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n <i class=\"fas fa-signature\"></i>\n </div>\n <div *ngIf=\"rowData.isFile\" class=\"nfl-version\">\n v{{rowData.currentFileVersion}}\n </div>\n\n <div class=\"nfl-function\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n <button *ngIf=\"control.showDelete\"\n class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n icon=\"pi pi-trash\"></button>\n </ng-container>\n\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\n icon=\"pi pi-cloud-download\"></button>\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n (click)=\"copyDownloadLink(rowData)\"></button>\n <button *ngIf=\"rowData.hasContextMenu\" 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, rowData)\"></button>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n {{ noFileMessage }}\n </div>\n </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE_FOR_LIST\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n <div class=\"fm-toolbar-buttons\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\n </button>\n <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\n <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\"\n tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\n (click)=\"showAttachLinkBox = true\"></button>\n <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n pTooltip=\"T\u00E0i li\u1EC7u d\u00F9ng chung\" tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\"\n label=\"T\u00E0i li\u1EC7u\" (click)=\"showTaiLieuDungChung = true;\">\n </button>\n </ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n </div>\n\n <div class=\"nfl-grid\">\n <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n <div class=\"nfl-no\">\n {{i + 1}}.\n </div>\n\n <div class=\"nfl-name\">\n <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n </span>\n\n <a *ngIf=\"!disabled\" class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\n <span>\n <span>{{rowData.name}}</span>\n </span>\n </a>\n\n <a *ngIf=\"disabled\" class=\"{{rowData.class}} file-ex-name\">\n <span>\n <span>{{rowData.name}}</span>\n </span>\n </a>\n </div>\n\n <div class=\"nfl-function\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n <button *ngIf=\"control.showDelete\"\n class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n icon=\"pi pi-trash\"></button>\n </ng-container>\n <button 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 [disabled]=\"disabled\" (click)=\"showContextMenu($event, rowData)\"></button>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n {{ noFileMessage }}\n </div>\n </div>\n</div>\n\n<ng-template #breadCrumb>\n <div *ngIf=\"data.breadcrumbs.length > 1\" class=\"fm-toolbar-path\">\n <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\n </div>\n</ng-template>\n\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" [name]=\"fileInForm\"\n [url]=\"apiUploadUrl\" auto=\"true\" [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\n [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\n [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\n [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\n [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\n [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" [accept]=\"accept\" [multiple]=\"control.multiple\"\n (onProgress)=\"onUploadProgress($event)\" (onBeforeUpload)=\"onBeforeUpload($event)\"\n (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\" (onError)=\"handleError($event)\">\n</p-fileUpload>\n<p-contextMenu *ngIf=\"data.itemsMenuFile && data.itemsMenuFile.length > 0\" #contextMenu [appendTo]=\"'body'\"\n [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\n (onHide)=\"onCancelForm(formIds.createFolder)\">\n <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\n [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\n (onCancel)=\"onCancelForm(formIds.createFolder)\">\n </folder-form>\n</tn-dialog>\n\n<!-- \u0110\u1ED5i t\u00EAn file -->\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\n (onHide)=\"onCancelForm(formIds.renameFile)\">\n <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\n (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\n </file-form>\n</tn-dialog>\n\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\n [model]=\"forms.fileViewer.formData\" (onClose)=\"closeFileViewer()\">\n</file-viewer>\n\n<!-- Xem phi\u00EAn b\u1EA3n -->\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\n (onHide)=\"onCancelForm(formIds.fileVersionList)\">\n <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\"\n (onSetMajorVersion)=\"_triggerProcessData()\">\n </file-version-list>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\n [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\n <div class=\"p-col-12\">\n <div class=\"p-grid\">\n <div class=\"p-md-10\">\n <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\"\n (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\" />\n </div>\n <div class=\"p-md-2\">\n <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton\n class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\n </div>\n </div>\n </div>\n <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\n</tn-dialog>\n\n<tn-dialog #dialog3 *ngIf=\"showTaiLieuDungChung\" [header]=\"'T\u00E0i li\u1EC7u' |translate\"\n [popupSize]=\"{ width:1200, height: 650 }\" (onHide)=\"showTaiLieuDungChung = false\">\n <file-tai-lieu #formBase [originalFolderId]=\"data.currentFolderId\" [filePickerSetting]=\"filePickerSetting\"\n (onSaved)=\"showTaiLieuDungChung = false; this._triggerProcessData()\" (onCancel)=\"showTaiLieuDungChung = false\">\n </file-tai-lieu>\n</tn-dialog>\n\n<!--\n\n<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n [model]=\"forms.shareFile.formData\">\n</share-file>\n\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n [model]=\"forms.shareFolder.formData\">\n</share-folder>\n -->\n\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)=\"onCancelForm(formIds.signatureDetail)\">\n <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\n </signature-detail>\n</tn-dialog>\n\n<!--K\u00FD s\u1ED1 sim-->\n<tn-dialog *ngIf=\"forms.kySoSim.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"forms.kySoSim.header | translate\"\n [popupSize]=\"forms.kySoSim.popupSize\" [showFooter]=\"true\" (onHide)=\"onCancelForm(formIds.kySoSim)\">\n <app-file-ky-so-sim #fileKySoSim [parentModel]=\"model\" [parentContext]=\"context\">\n </app-file-ky-so-sim>\n <ng-template #footer>\n <button type=\"button\" pButton icon=\"fas fa-images\" [disabled]=\"model.submitting\" class=\"p-button-text\"\n [label]=\"'Ch\u1ECDn ch\u1EEF k\u00FD' | translate\" (click)=\"chonChuKy()\"></button>\n <button type=\"button\" pButton icon=\"fas fa-signature\" class=\"p-button-text ui-button-success\"\n [disabled]=\"model.submitting\" [label]=\"'Th\u1EF1c hi\u1EC7n k\u00FD' | translate\" (click)=\"kySo()\"></button>\n <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\n [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"forms.kySoSim.show=false\"></button>\n </ng-template>\n</tn-dialog>\n\n<!-- Xem chi ti\u1EBFt -->\n<tn-dialog *ngIf=\"forms.viewDetail.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.viewDetail.header | translate\" [popupSize]=\"forms[formIds.viewDetail].popupSize\"\n (onHide)=\"onCancelForm(formIds.viewDetail)\">\n <view-detail #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms.viewDetail.formData\"\n (onCancel)=\"onCancelForm(formIds.viewDetail)\">\n </view-detail>\n</tn-dialog>",
31909
+ template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout p-grid\">\n <div *ngIf=\"visibleFolder && !control.uploadOnly\" class=\"tree-layout\"\n [class]=\"visibleFolder ? 'p-col-12 p-lg-2' : '' \">\n <div class=\"tree-layout-btn\">\n <button *ngIf=\"!hiddenCreateFolder && !readonly\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\n tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\n (click)=\"createFolder()\">\n </button>\n </div>\n <div class=\"tree-layout-wrapper\">\n <perfect-scrollbar #scrollbar class=\"defaulFlexColumn treeOrg\" [config]=\"{suppressScrollX : true}\">\n <p-tree class=\"folderTree\" selectionMode=\"single\" [style]=\"{ 'width' : '100%'}\"\n [(selection)]=\"selectedTreeNode\" [value]=\"rootTreeNode\" [contextMenu]=\"contextMenu\"\n (onNodeSelect)=\"nodeSelect($event)\">\n <ng-template let-node pTemplate=\"default\">\n <span [id]=\"node.data\" class=\"custom-node\"\n (contextmenu)=\"showContextMenu($event, node, true)\">{{node.label}}</span>\n </ng-template>\n </p-tree>\n </perfect-scrollbar>\n </div>\n </div>\n <div class=\"fm-grid\" [class]=\"visibleFolder ? 'p-col-12 p-lg-10' : 'p-col-12' \">\n <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\n [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\n [widthFunctionColumn]=\"'8.2rem'\" [showScrollHorizontal]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n (onRowSelect)=\"onRowSelect($event)\">\n <ng-template #customTitle>\n <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n </ng-template>\n <ng-template #toolbar>\n <button *ngIf=\"!control.uploadOnly\" pButton pRipple type=\"button\"\n [pTooltip]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" tooltipPosition=\"top\"\n [icon]=\"visibleFolder ? 'far fa-eye-slash': 'far fa-eye'\" class=\"p-button-text\"\n [label]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" iconPos=\"left\"\n (click)=\"changeVisibleFolder()\">\n </button>\n\n <button *ngIf=\"!hiddenCreateFolder && !readonly && !visibleFolder && !control.uploadOnly\" pButton\n pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\" (click)=\"createFolder()\">\n </button>\n\n <button *ngIf=\"!readonly\" pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\n tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\n (click)=\"selectFile()\"></button>\n\n <button *ngIf=\"!readonly && !control.uploadOnly\" pButton icon=\"pi pi-link\"\n pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\" type=\"button\"\n class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\n (click)=\"showAttachLinkBox = true\"></button>\n\n <button *ngIf=\"!inTaiLieu && !inTaiLieuChung && !readonly && !control.uploadOnly && !filePickerSetting\"\n pButton icon=\"pi pi-book\" pTooltip=\"Sao ch\u00E9p t\u1EEB t\u00E0i li\u1EC7u d\u00F9ng chung ho\u1EB7c c\u00E1 nh\u00E2n\"\n tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\n (click)=\"showTaiLieuDungChung = true;\">\n </button>\n\n <button *ngIf=\"filePickerSetting && !filePickerSetting.isHidden\" pButton icon=\"pi pi-book\"\n pTooltip=\"{{filePickerSetting.title}}\" tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\"\n label=\"{{filePickerSetting.title}}\" (click)=\"showPickerTaiLieu()\">\n </button>\n\n <button *ngIf=\"canSelect() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\"\n icon=\"fas fa-arrows-alt\" iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\n </button>\n\n <button *ngIf=\"canSetMove() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\"\n icon=\"far fa-hand-paper\" iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\n </button>\n\n <button *ngIf=\"canSetMove() && !control.uploadOnly\" icon=\"pi pi-undo\" pButton\n class=\"p-button-text p-button-secondary\" type=\"button\"\n pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\n (click)=\"cancelMove()\">\n </button>\n\n <button *ngIf=\"hasSelect() && !readonly\" pButton type=\"button\"\n pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\n (click)=\"deleteMutiple(model.selectedItems)\"></button>\n\n <button *ngIf=\"hasSelect() && !control.uploadOnly\" class=\"p-button-text p-button-secondary\" pButton\n type=\"button\" pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\"\n iconPos=\"left\" label=\"T\u1EA3i v\u1EC1\" (click)=\"downloadMultiple()\">\n </button>\n </ng-template>\n\n <ng-template #explorerItem let-rowData='rowData' let-col='col'>\n <div style=\"display: flex; align-items: center;\">\n <span *ngIf=\"rowData.tailFileUpper != '.JPG'\n && rowData.tailFileUpper != '.JPEG' && rowData.tailFileUpper != '.PNG' \"\n (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\" style=\"display: flex;\"\n [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n </span>\n\n <span *ngIf=\"rowData.isFile && (rowData.tailFileUpper == '.JPG'\n || rowData.tailFileUpper == '.JPEG' || rowData.tailFileUpper == '.PNG' )\"\n (click)=\"openObject(rowData)\" class=\"file-ex-thumbnail\" style=\"display: flex;\">\n <img class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"50px\" [alt]=\"rowData.name\"\n style=\"margin-right: 7px;\" />\n </span>\n\n <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n {{rowData.name}}\n </span>\n\n <span *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n <i class=\"fas fa-signature\"></i>\n </span>\n </div>\n </ng-template>\n\n <!-- <ng-template #thumbnail let-rowData=\"rowData\" let-col=\"col\">\n <div style=\"text-align: center;\">\n <img *ngIf=\"rowData.isFile && (rowData.tailFile.toUpperCase() == '.JPG'\n || rowData.tailFile.toUpperCase() == '.JPEG' || rowData.tailFile.toUpperCase() == '.PNG' )\"\n class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"100px\" [alt]=\"rowData.name\" />\n </div>\n </ng-template> -->\n\n <ng-template #fileSize let-rowData='rowData'>\n <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\n </ng-template>\n\n <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\n <div class=\"function-list\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\n icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\n\n <button *ngIf=\"control.showDelete\"\n class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\n pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n (click)=\"deleteFile(rowData)\"></button>\n\n <button 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, rowData)\"></button>\n </ng-container>\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\n (click)=\"download(rowData)\"></button>\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n (click)=\"copyDownloadLink(rowData)\"></button>\n </div>\n </ng-template>\n </crud-list>\n </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n <div class=\"fm-toolbar-buttons\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n type=\"button\" [pTooltip]=\"'T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi' | translate\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n class=\"p-button-text\" [label]=\"'T\u1EA1o th\u01B0 m\u1EE5c' | translate\" iconPos=\"left\">\n </button>\n <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n [pTooltip]=\"'T\u1EA3i l\u00EAn'| translate\" icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\"\n [label]=\"'T\u1EA3i l\u00EAn'| translate\"></button>\n <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\"\n [pTooltip]=\"'T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng'| translate\" tooltipPosition=\"top\" type=\"button\"\n class=\"p-button-text p-button-primary\" [label]=\"'T\u1EA3i li\u00EAn k\u1EBFt'| translate\"\n (click)=\"showAttachLinkBox = true\"></button>\n <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n [pTooltip]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\" tooltipPosition=\"top\" type=\"button\"\n class=\"p-button-text\" [label]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\"\n (click)=\"showTaiLieuDungChung = true;\">\n </button>\n </ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n </div>\n\n <div class=\"nfl-grid\">\n <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n <div class=\"nfl-no\">\n {{i + 1}}.\n </div>\n\n <div class=\"nfl-name\">\n <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n </span>\n <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n <span>\n <span>{{rowData.name}}</span>\n </span>\n </a>\n </div>\n <div *ngIf=\"rowData.signatures\" class=\"nfl-signature signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n <i class=\"fas fa-signature\"></i>\n </div>\n <div *ngIf=\"rowData.isFile\" class=\"nfl-version\">\n v{{rowData.currentFileVersion}}\n </div>\n\n <div class=\"nfl-function\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n <button *ngIf=\"control.showDelete\"\n class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n icon=\"pi pi-trash\"></button>\n </ng-container>\n\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\n icon=\"pi pi-cloud-download\"></button>\n <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n (click)=\"copyDownloadLink(rowData)\"></button>\n <button *ngIf=\"rowData.hasContextMenu\" 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, rowData)\"></button>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n {{ noFileMessage }}\n </div>\n </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE_FOR_LIST\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n <div class=\"fm-toolbar-buttons\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n type=\"button\" [pTooltip]=\"'T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi' | translate\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n class=\"p-button-text\" [label]=\"'T\u1EA1o th\u01B0 m\u1EE5c' | translate\" iconPos=\"left\">\n </button>\n <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" [label]=\"'T\u1EA3i l\u00EAn'| translate\"\n [pTooltip]=\"'T\u1EA3i l\u00EAn'| translate\"></button>\n <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\"\n [pTooltip]=\"'T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng'| translate\" tooltipPosition=\"top\" type=\"button\"\n class=\"p-button-text p-button-primary\" [label]=\"'T\u1EA3i li\u00EAn k\u1EBFt'| translate\"\n (click)=\"showAttachLinkBox = true\"></button>\n <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n [pTooltip]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\" tooltipPosition=\"top\" type=\"button\"\n class=\"p-button-text\" [label]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\"\n (click)=\"showTaiLieuDungChung = true;\">\n </button>\n </ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n </div>\n\n <div class=\"nfl-grid\">\n <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n <div class=\"nfl-no\">\n {{i + 1}}.\n </div>\n\n <div class=\"nfl-name\">\n <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n </span>\n\n <a *ngIf=\"!disabled\" class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\n <span>\n <span>{{rowData.name}}</span>\n </span>\n </a>\n\n <a *ngIf=\"disabled\" class=\"{{rowData.class}} file-ex-name\">\n <span>\n <span>{{rowData.name}}</span>\n </span>\n </a>\n </div>\n\n <div class=\"nfl-function\">\n <ng-container *ngIf=\"!readonly\">\n <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n <button *ngIf=\"control.showDelete\"\n class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n icon=\"pi pi-trash\"></button>\n </ng-container>\n <button 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 [disabled]=\"disabled\" (click)=\"showContextMenu($event, rowData)\"></button>\n </div>\n </div>\n </ng-container>\n <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n {{ noFileMessage }}\n </div>\n </div>\n</div>\n\n<ng-template #breadCrumb>\n <div *ngIf=\"data.breadcrumbs.length > 1\" class=\"fm-toolbar-path\">\n <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\n </div>\n</ng-template>\n\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" [name]=\"fileInForm\"\n [url]=\"apiUploadUrl\" auto=\"true\" [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\n [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\n [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\n [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\n [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\n [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" [accept]=\"accept\" [multiple]=\"control.multiple\"\n (onProgress)=\"onUploadProgress($event)\" (onBeforeUpload)=\"onBeforeUpload($event)\"\n (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\" (onError)=\"handleError($event)\">\n</p-fileUpload>\n<p-contextMenu *ngIf=\"data.itemsMenuFile && data.itemsMenuFile.length > 0\" #contextMenu [appendTo]=\"'body'\"\n [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\n (onHide)=\"onCancelForm(formIds.createFolder)\">\n <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\n [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\n (onCancel)=\"onCancelForm(formIds.createFolder)\">\n </folder-form>\n</tn-dialog>\n\n<!-- \u0110\u1ED5i t\u00EAn file -->\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\n (onHide)=\"onCancelForm(formIds.renameFile)\">\n <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\n (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\n </file-form>\n</tn-dialog>\n\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\n [model]=\"forms.fileViewer.formData\" (onClose)=\"closeFileViewer()\">\n</file-viewer>\n\n<!-- Xem phi\u00EAn b\u1EA3n -->\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\n (onHide)=\"onCancelForm(formIds.fileVersionList)\">\n <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\"\n (onSetMajorVersion)=\"_triggerProcessData()\">\n </file-version-list>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\n [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\n <div class=\"p-col-12\">\n <div class=\"p-grid\">\n <div class=\"p-md-10\">\n <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\"\n (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\" />\n </div>\n <div class=\"p-md-2\">\n <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton\n class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\n </div>\n </div>\n </div>\n <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\n</tn-dialog>\n\n<tn-dialog #dialog3 *ngIf=\"showTaiLieuDungChung\" [header]=\"'T\u00E0i li\u1EC7u' |translate\"\n [popupSize]=\"{ width:1200, height: 650 }\" (onHide)=\"showTaiLieuDungChung = false\">\n <file-tai-lieu #formBase [originalFolderId]=\"data.currentFolderId\" [filePickerSetting]=\"filePickerSetting\"\n (onSaved)=\"showTaiLieuDungChung = false; this._triggerProcessData()\" (onCancel)=\"showTaiLieuDungChung = false\">\n </file-tai-lieu>\n</tn-dialog>\n\n<!--\n\n<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n [model]=\"forms.shareFile.formData\">\n</share-file>\n\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n [model]=\"forms.shareFolder.formData\">\n</share-folder>\n -->\n\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)=\"onCancelForm(formIds.signatureDetail)\">\n <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\n </signature-detail>\n</tn-dialog>\n\n<!--K\u00FD s\u1ED1 sim-->\n<tn-dialog *ngIf=\"forms.kySoSim.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"forms.kySoSim.header | translate\"\n [popupSize]=\"forms.kySoSim.popupSize\" [showFooter]=\"true\" (onHide)=\"onCancelForm(formIds.kySoSim)\">\n <app-file-ky-so-sim #fileKySoSim [parentModel]=\"model\" [parentContext]=\"context\">\n </app-file-ky-so-sim>\n <ng-template #footer>\n <button type=\"button\" pButton icon=\"fas fa-images\" [disabled]=\"model.submitting\" class=\"p-button-text\"\n [label]=\"'Ch\u1ECDn ch\u1EEF k\u00FD' | translate\" (click)=\"chonChuKy()\"></button>\n <button type=\"button\" pButton icon=\"fas fa-signature\" class=\"p-button-text ui-button-success\"\n [disabled]=\"model.submitting\" [label]=\"'Th\u1EF1c hi\u1EC7n k\u00FD' | translate\" (click)=\"kySo()\"></button>\n <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\n [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"forms.kySoSim.show=false\"></button>\n </ng-template>\n</tn-dialog>\n\n<!-- Xem chi ti\u1EBFt -->\n<tn-dialog *ngIf=\"forms.viewDetail.show\" #dialog [styleClass]=\"'address-form'\"\n [header]=\"forms.viewDetail.header | translate\" [popupSize]=\"forms[formIds.viewDetail].popupSize\"\n (onHide)=\"onCancelForm(formIds.viewDetail)\">\n <view-detail #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms.viewDetail.formData\"\n (onCancel)=\"onCancelForm(formIds.viewDetail)\">\n </view-detail>\n</tn-dialog>",
31885
31910
  providers: [
31886
31911
  {
31887
31912
  provide: NG_VALUE_ACCESSOR,
@@ -47228,6 +47253,29 @@ class TnTinymceComponent extends ComponentBase {
47228
47253
  editor.addShortcut('Alt+N', 'LuiRa', function () {
47229
47254
  editor.execCommand('outdent', false);
47230
47255
  });
47256
+ editor.ui.registry.addMenuButton('Language', {
47257
+ tooltip: 'Language',
47258
+ icon: 'language',
47259
+ fetch: (callback) => {
47260
+ const items = [
47261
+ {
47262
+ type: 'menuitem',
47263
+ text: 'Tiếng Việt',
47264
+ onAction: (_) => {
47265
+ $this.handleChangeLanguage('vi_VN');
47266
+ }
47267
+ },
47268
+ {
47269
+ type: 'menuitem',
47270
+ text: 'English',
47271
+ onAction: (_) => {
47272
+ $this.handleChangeLanguage('en');
47273
+ }
47274
+ },
47275
+ ];
47276
+ callback(items);
47277
+ }
47278
+ });
47231
47279
  },
47232
47280
  mobile: {
47233
47281
  theme: 'silver',
@@ -47238,26 +47286,26 @@ class TnTinymceComponent extends ComponentBase {
47238
47286
  config.plugins = [
47239
47287
  'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus editFileNew addNews'
47240
47288
  ];
47241
- config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link editFileNew addNews | print removeformat undo redo | fullscreen ';
47242
- config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
47289
+ config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link editFileNew addNews | print removeformat undo redo | fullscreen | Language';
47290
+ config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen | Language';
47243
47291
  // return config;
47244
47292
  }
47245
47293
  else if (mode == 'medium') {
47246
47294
  config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'];
47247
- config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link | print removeformat undo redo | fullscreen';
47248
- config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
47295
+ config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link | print removeformat undo redo | fullscreen | Language';
47296
+ config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen | Language';
47249
47297
  // return config;
47250
47298
  }
47251
47299
  else if (mode == 'simple') {
47252
47300
  config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'];
47253
- config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
47254
- config.mobile.toolbar = 'fullscreen | bold italic Strikethrough forecolor backcolor | bullist numlist';
47301
+ config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen | Language';
47302
+ config.mobile.toolbar = 'fullscreen | bold italic Strikethrough forecolor backcolor | bullist numlist | Language';
47255
47303
  // return config;
47256
47304
  }
47257
47305
  else {
47258
47306
  config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'];
47259
47307
  // config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor| alignleft aligncenter alignright alignjustify | bullist numlist';
47260
- config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
47308
+ config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen | Language';
47261
47309
  }
47262
47310
  config.paste_data_images = true;
47263
47311
  return config;
@@ -47411,6 +47459,12 @@ class TnTinymceComponent extends ComponentBase {
47411
47459
  const blob = new Blob([int8Array], { type: fileType });
47412
47460
  return blob;
47413
47461
  }
47462
+ handleChangeLanguage(language) {
47463
+ tinymce.EditorManager.execCommand('mceRemoveEditor', true, this.id);
47464
+ const config = this.modes[this.mode];
47465
+ config.language = language;
47466
+ tinymce.init(config);
47467
+ }
47414
47468
  }
47415
47469
  TnTinymceComponent.decorators = [
47416
47470
  { type: Component, args: [{