tnx-shared 5.3.242 → 5.3.244

package/bundles/tnx-shared.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/common/http'), require('fast-safe-stringify'), require('moment'), require('underscore'), require('uuid'), require('angular-oauth2-oidc'), require('@ngx-translate/core'), require('tn-custom-primeng/api'), require('@angular/router'), require('@aspnet/signalr'), require('file-saver'), require('print-js'), require('@angular/platform-browser'), require('jquery'), require('ngx-device-detector'), require('jwt-decode'), require('tn-custom-primeng/table'), require('@angular/common/locales/vi'), require('@angular/forms'), require('@angular/platform-browser/animations'), require('ngx-img-fallback'), require('ngx-mask'), require('ng2-signalr'), require('tn-custom-primeng/fileupload'), require('tn-custom-primeng/dropdown'), require('tn-custom-primeng/multiselect'), require('tn-custom-primeng/dom'), require('angular-split'), require('ng2-currency-mask'), require('ngx-drag-drop'), require('ngx-extended-pdf-viewer'), require('ngx-perfect-scrollbar'), require('tn-custom-primeng/accordion'), require('tn-custom-primeng/autocomplete'), require('tn-custom-primeng/blockui'), require('tn-custom-primeng/breadcrumb'), require('tn-custom-primeng/button'), require('tn-custom-primeng/calendar'), require('tn-custom-primeng/card'), require('tn-custom-primeng/chart'), require('tn-custom-primeng/checkbox'), require('tn-custom-primeng/chips'), require('tn-custom-primeng/colorpicker'), require('tn-custom-primeng/confirmdialog'), require('tn-custom-primeng/contextmenu'), require('tn-custom-primeng/dataview'), require('tn-custom-primeng/dialog'), require('tn-custom-primeng/fieldset'), require('tn-custom-primeng/focustrap'), require('tn-custom-primeng/inputmask'), require('tn-custom-primeng/inputswitch'), require('tn-custom-primeng/inputtext'), require('tn-custom-primeng/inputtextarea'), require('tn-custom-primeng/menu'), require('tn-custom-primeng/menubar'), require('tn-custom-primeng/overlaypanel'), require('tn-custom-primeng/paginator'), require('tn-custom-primeng/panel'), require('tn-custom-primeng/progressspinner'), require('tn-custom-primeng/radiobutton'), require('tn-custom-primeng/scrollpanel'), require('tn-custom-primeng/selectbutton'), require('tn-custom-primeng/sidebar'), require('tn-custom-primeng/slider'), require('tn-custom-primeng/spinner'), require('tn-custom-primeng/splitbutton'), require('tn-custom-primeng/steps'), require('tn-custom-primeng/tabview'), require('tn-custom-primeng/toast'), require('tn-custom-primeng/tooltip'), require('tn-custom-primeng/tree'), require('tn-custom-primeng/treetable'), require('tn-custom-primeng/tristatecheckbox'), require('@angular/animations'), require('qrcode'), require('nanoid'), require('tn-custom-primeng/dragdrop')) :
-    typeof define === 'function' && define.amd ? define('tnx-shared', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/common/http', 'fast-safe-stringify', 'moment', 'underscore', 'uuid', 'angular-oauth2-oidc', '@ngx-translate/core', 'tn-custom-primeng/api', '@angular/router', '@aspnet/signalr', 'file-saver', 'print-js', '@angular/platform-browser', 'jquery', 'ngx-device-detector', 'jwt-decode', 'tn-custom-primeng/table', '@angular/common/locales/vi', '@angular/forms', '@angular/platform-browser/animations', 'ngx-img-fallback', 'ngx-mask', 'ng2-signalr', 'tn-custom-primeng/fileupload', 'tn-custom-primeng/dropdown', 'tn-custom-primeng/multiselect', 'tn-custom-primeng/dom', 'angular-split', 'ng2-currency-mask', 'ngx-drag-drop', 'ngx-extended-pdf-viewer', 'ngx-perfect-scrollbar', 'tn-custom-primeng/accordion', 'tn-custom-primeng/autocomplete', 'tn-custom-primeng/blockui', 'tn-custom-primeng/breadcrumb', 'tn-custom-primeng/button', 'tn-custom-primeng/calendar', 'tn-custom-primeng/card', 'tn-custom-primeng/chart', 'tn-custom-primeng/checkbox', 'tn-custom-primeng/chips', 'tn-custom-primeng/colorpicker', 'tn-custom-primeng/confirmdialog', 'tn-custom-primeng/contextmenu', 'tn-custom-primeng/dataview', 'tn-custom-primeng/dialog', 'tn-custom-primeng/fieldset', 'tn-custom-primeng/focustrap', 'tn-custom-primeng/inputmask', 'tn-custom-primeng/inputswitch', 'tn-custom-primeng/inputtext', 'tn-custom-primeng/inputtextarea', 'tn-custom-primeng/menu', 'tn-custom-primeng/menubar', 'tn-custom-primeng/overlaypanel', 'tn-custom-primeng/paginator', 'tn-custom-primeng/panel', 'tn-custom-primeng/progressspinner', 'tn-custom-primeng/radiobutton', 'tn-custom-primeng/scrollpanel', 'tn-custom-primeng/selectbutton', 'tn-custom-primeng/sidebar', 'tn-custom-primeng/slider', 'tn-custom-primeng/spinner', 'tn-custom-primeng/splitbutton', 'tn-custom-primeng/steps', 'tn-custom-primeng/tabview', 'tn-custom-primeng/toast', 'tn-custom-primeng/tooltip', 'tn-custom-primeng/tree', 'tn-custom-primeng/treetable', 'tn-custom-primeng/tristatecheckbox', '@angular/animations', 'qrcode', 'nanoid', 'tn-custom-primeng/dragdrop'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["tnx-shared"] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.common.http, global.stringify, global.moment_, global._, global.uuid, global.i4, global.core, global.i1, global.ng.router, global.signalR, global.FileSaver, global.printJS$3, global.ng.platformBrowser, global.jQuery_, global.ngxDeviceDetector, global.JWT_, global.table, global.ng.common.locales.vi, global.ng.forms, global.ng.platformBrowser.animations, global.ngxImgFallback, global.ngxMask, global.i1$2, global.fileupload, global.dropdown, global.multiselect, global.dom, global.angularSplit, global.ng2CurrencyMask, global.ngxDragDrop, global.ngxExtendedPdfViewer, global.ngxPerfectScrollbar, global.accordion, global.autocomplete, global.blockui, global.breadcrumb, global.button, global.calendar, global.card, global.chart, global.checkbox, global.chips, global.colorpicker, global.confirmdialog, global.contextmenu, global.dataview, global.dialog, global.fieldset, global.focustrap, global.inputmask, global.inputswitch, global.inputtext, global.inputtextarea, global.menu, global.menubar, global.overlaypanel, global.paginator, global.panel, global.progressspinner, global.radiobutton, global.scrollpanel, global.selectbutton, global.sidebar, global.slider, global.spinner, global.splitbutton, global.steps, global.tabview, global.toast, global.tooltip, global.tree, global.treetable, global.tristatecheckbox, global.ng.animations, global.qrcode, global.nanoid, global.dragdrop));
-})(this, (function (exports, i0, rxjs, operators, i3, i1$1, stringify, moment_, _, uuid, i4, core, i1, i3$1, signalR, FileSaver, printJS$3, platformBrowser, jQuery_, ngxDeviceDetector, JWT_, table, localeVi, forms, animations, ngxImgFallback, ngxMask, i1$2, fileupload, dropdown, multiselect, dom, angularSplit, ng2CurrencyMask, ngxDragDrop, ngxExtendedPdfViewer, ngxPerfectScrollbar, accordion, autocomplete, blockui, breadcrumb, button, calendar, card, chart, checkbox, chips, colorpicker, confirmdialog, contextmenu, dataview, dialog, fieldset, focustrap, inputmask, inputswitch, inputtext, inputtextarea, menu, menubar, overlaypanel, paginator, panel, progressspinner, radiobutton, scrollpanel, selectbutton, sidebar, slider, spinner, splitbutton, steps, tabview, toast, tooltip, tree, treetable, tristatecheckbox, animations$1, qrcode, nanoid, dragdrop) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/common/http'), require('fast-safe-stringify'), require('moment'), require('underscore'), require('uuid'), require('angular-oauth2-oidc'), require('@ngx-translate/core'), require('tn-custom-primeng/api'), require('@angular/router'), require('@aspnet/signalr'), require('file-saver'), require('print-js'), require('@angular/platform-browser'), require('jquery'), require('ngx-device-detector'), require('jwt-decode'), require('tn-custom-primeng/table'), require('@angular/common/locales/vi'), require('@angular/forms'), require('@angular/platform-browser/animations'), require('ngx-img-fallback'), require('ngx-mask'), require('ng2-signalr'), require('tn-custom-primeng/fileupload'), require('tn-custom-primeng/dropdown'), require('tn-custom-primeng/multiselect'), require('tn-custom-primeng/dom'), require('angular-split'), require('ng2-currency-mask'), require('ngx-drag-drop'), require('ngx-extended-pdf-viewer'), require('ngx-perfect-scrollbar'), require('tn-custom-primeng/accordion'), require('tn-custom-primeng/blockui'), require('tn-custom-primeng/breadcrumb'), require('tn-custom-primeng/button'), require('tn-custom-primeng/calendar'), require('tn-custom-primeng/card'), require('tn-custom-primeng/chart'), require('tn-custom-primeng/checkbox'), require('tn-custom-primeng/chips'), require('tn-custom-primeng/colorpicker'), require('tn-custom-primeng/confirmdialog'), require('tn-custom-primeng/contextmenu'), require('tn-custom-primeng/dataview'), require('tn-custom-primeng/dialog'), require('tn-custom-primeng/fieldset'), require('tn-custom-primeng/focustrap'), require('tn-custom-primeng/inputmask'), require('tn-custom-primeng/inputswitch'), require('tn-custom-primeng/inputtext'), require('tn-custom-primeng/inputtextarea'), require('tn-custom-primeng/menu'), require('tn-custom-primeng/menubar'), require('tn-custom-primeng/overlaypanel'), require('tn-custom-primeng/paginator'), require('tn-custom-primeng/panel'), require('tn-custom-primeng/progressspinner'), require('tn-custom-primeng/radiobutton'), require('tn-custom-primeng/scrollpanel'), require('tn-custom-primeng/selectbutton'), require('tn-custom-primeng/sidebar'), require('tn-custom-primeng/slider'), require('tn-custom-primeng/spinner'), require('tn-custom-primeng/splitbutton'), require('tn-custom-primeng/steps'), require('tn-custom-primeng/tabview'), require('tn-custom-primeng/toast'), require('tn-custom-primeng/tooltip'), require('tn-custom-primeng/tree'), require('tn-custom-primeng/treetable'), require('tn-custom-primeng/tristatecheckbox'), require('@angular/animations'), require('qrcode'), require('tn-custom-primeng/dragdrop'), require('tn-custom-primeng/ripple'), require('tn-custom-primeng/utils'), require('nanoid')) :
+    typeof define === 'function' && define.amd ? define('tnx-shared', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/common/http', 'fast-safe-stringify', 'moment', 'underscore', 'uuid', 'angular-oauth2-oidc', '@ngx-translate/core', 'tn-custom-primeng/api', '@angular/router', '@aspnet/signalr', 'file-saver', 'print-js', '@angular/platform-browser', 'jquery', 'ngx-device-detector', 'jwt-decode', 'tn-custom-primeng/table', '@angular/common/locales/vi', '@angular/forms', '@angular/platform-browser/animations', 'ngx-img-fallback', 'ngx-mask', 'ng2-signalr', 'tn-custom-primeng/fileupload', 'tn-custom-primeng/dropdown', 'tn-custom-primeng/multiselect', 'tn-custom-primeng/dom', 'angular-split', 'ng2-currency-mask', 'ngx-drag-drop', 'ngx-extended-pdf-viewer', 'ngx-perfect-scrollbar', 'tn-custom-primeng/accordion', 'tn-custom-primeng/blockui', 'tn-custom-primeng/breadcrumb', 'tn-custom-primeng/button', 'tn-custom-primeng/calendar', 'tn-custom-primeng/card', 'tn-custom-primeng/chart', 'tn-custom-primeng/checkbox', 'tn-custom-primeng/chips', 'tn-custom-primeng/colorpicker', 'tn-custom-primeng/confirmdialog', 'tn-custom-primeng/contextmenu', 'tn-custom-primeng/dataview', 'tn-custom-primeng/dialog', 'tn-custom-primeng/fieldset', 'tn-custom-primeng/focustrap', 'tn-custom-primeng/inputmask', 'tn-custom-primeng/inputswitch', 'tn-custom-primeng/inputtext', 'tn-custom-primeng/inputtextarea', 'tn-custom-primeng/menu', 'tn-custom-primeng/menubar', 'tn-custom-primeng/overlaypanel', 'tn-custom-primeng/paginator', 'tn-custom-primeng/panel', 'tn-custom-primeng/progressspinner', 'tn-custom-primeng/radiobutton', 'tn-custom-primeng/scrollpanel', 'tn-custom-primeng/selectbutton', 'tn-custom-primeng/sidebar', 'tn-custom-primeng/slider', 'tn-custom-primeng/spinner', 'tn-custom-primeng/splitbutton', 'tn-custom-primeng/steps', 'tn-custom-primeng/tabview', 'tn-custom-primeng/toast', 'tn-custom-primeng/tooltip', 'tn-custom-primeng/tree', 'tn-custom-primeng/treetable', 'tn-custom-primeng/tristatecheckbox', '@angular/animations', 'qrcode', 'tn-custom-primeng/dragdrop', 'tn-custom-primeng/ripple', 'tn-custom-primeng/utils', 'nanoid'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["tnx-shared"] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.common.http, global.stringify, global.moment_, global._, global.uuid, global.i4, global.core, global.i1, global.ng.router, global.signalR, global.FileSaver, global.printJS$3, global.ng.platformBrowser, global.jQuery_, global.ngxDeviceDetector, global.JWT_, global.table, global.ng.common.locales.vi, global.ng.forms, global.ng.platformBrowser.animations, global.ngxImgFallback, global.ngxMask, global.i1$2, global.fileupload, global.dropdown, global.multiselect, global.dom, global.angularSplit, global.ng2CurrencyMask, global.ngxDragDrop, global.ngxExtendedPdfViewer, global.ngxPerfectScrollbar, global.accordion, global.blockui, global.breadcrumb, global.button, global.calendar, global.card, global.chart, global.checkbox, global.chips, global.colorpicker, global.confirmdialog, global.contextmenu, global.dataview, global.dialog, global.fieldset, global.focustrap, global.inputmask, global.inputswitch, global.inputtext, global.inputtextarea, global.menu, global.menubar, global.overlaypanel, global.paginator, global.panel, global.progressspinner, global.radiobutton, global.scrollpanel, global.selectbutton, global.sidebar, global.slider, global.spinner, global.splitbutton, global.steps, global.tabview, global.toast, global.tooltip, global.tree, global.treetable, global.tristatecheckbox, global.ng.animations, global.qrcode, global.dragdrop, global.ripple, global.utils, global.nanoid));
+})(this, (function (exports, i0, rxjs, operators, i3, i1$1, stringify, moment_, _, uuid, i4, core, i1, i3$1, signalR, FileSaver, printJS$3, platformBrowser, jQuery_, ngxDeviceDetector, JWT_, table, localeVi, forms, animations, ngxImgFallback, ngxMask, i1$2, fileupload, dropdown, multiselect, dom, angularSplit, ng2CurrencyMask, ngxDragDrop, ngxExtendedPdfViewer, ngxPerfectScrollbar, accordion, blockui, breadcrumb, button, calendar, card, chart, checkbox, chips, colorpicker, confirmdialog, contextmenu, dataview, dialog, fieldset, focustrap, inputmask, inputswitch, inputtext, inputtextarea, menu, menubar, overlaypanel, paginator, panel, progressspinner, radiobutton, scrollpanel, selectbutton, sidebar, slider, spinner, splitbutton, steps, tabview, toast, tooltip, tree, treetable, tristatecheckbox, animations$1, qrcode, dragdrop, ripple, utils, nanoid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43808,7 +43808,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'autocomplete-picker',
-                    template: "<div class=\"p-inputgroup autocomplete-picker\" *ngIf=\"control\" [class.has-value]=\"hasValue\"\n    [class.multiple]=\"control.multiple\" [class.disabled]=\"control.disabled\">\n    <div style=\"width: calc(100% - 28px)\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\">\n        <p-autoComplete #autoComplete emptyMessage=\"Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3 n\u00E0o\" [ngClass]=\"'custom-autocomplete'\"\n            [disabled]=\"disabled\" [placeholder]=\"control.placeholder\" [appendTo]=\"control.appendTo\"\n            [suggestions]=\"results\" field=\"label\" [styleClass]=\"control.validators && control.required ? 'rq' : ''\"\n            [multiple]=\"control.multiple\" [minLength]=\"2\" [(ngModel)]=\"selectedValueObject\"\n            (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (completeMethod)=\"search($event)\"\n            (onKeyUp)=\"handleKeyUp($event)\" (onSelect)=\"handleSelect($event)\" (onUnselect)=\"handleUnSelect($event)\">\n        </p-autoComplete>\n    </div>\n    <span *ngIf=\"!control.multiple && !disabled && hasValue\" class=\"icon-clear\" (click)=\"clearValue()\"><i\n            class=\"fas fa-times\"></i></span>\n    <button class=\"custom-autocomplete-button\" *ngIf=\"control.usePicker\" [disabled]=\"disabled\" tabindex=\"-1\"\n        (click)=\"showPickForm()\" pButton [pTooltip]=\"control.title\" icon=\"fas fa-external-link-alt\"\n        type=\"button\"></button>\n</div>\n<tn-dialog #dialog *ngIf=\"showFormPicker\" styleClass=\"entity-picker-box-dialog no-padding\" [useDefaultScrollBar]=\"true\"\n    [header]=\"control.title | translate\" [popupSize]=\"popupSize\" (onHide)=\"handleHide($event)\">\n    <entity-picker-box #entityPickerBox [currentNode]=\"currentNode\" [control]=\"control\" [parentSetting]=\"setting\" [datasourceFieldFilter]=\"datasourceFieldFilter\"\n        [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\n        (onContentLeftInit)=\"handleContentLeftInit($event)\" (onContentRightInit)=\"handleContentRightInit($event)\"\n        (onChanged)=\"handleChangeEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\n        (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleHide($event)\"\n        (onRowSelect)=\"handleRowSelect($event)\">\n    </entity-picker-box>\n    <ng-template #footer>\n        <button type=\" button\" pButton class=\"p-button-text\" (click)=\"onClickSubmitButton($event, entityPickerBox)\"\n            [label]=\"'Ho\u00E0n th\u00E0nh' | translate\" icon=\"pi pi-check\"></button>\n    </ng-template>\n</tn-dialog>",
+                    template: "<div class=\"p-inputgroup autocomplete-picker\" *ngIf=\"control\" [class.has-value]=\"hasValue\"\n    [class.multiple]=\"control.multiple\" [class.disabled]=\"control.disabled\">\n    <div style=\"width: calc(100% - 28px)\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\">\n        <p-autoComplete #autoComplete emptyMessage=\"Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3 n\u00E0o\" [ngClass]=\"'custom-autocomplete'\"\n            [disabled]=\"disabled\" [placeholder]=\"control.placeholder\" [appendTo]=\"control.appendTo\" [maxRowItem]=\"2\"\n            [suggestions]=\"results\" field=\"label\" [styleClass]=\"control.validators && control.required ? 'rq' : ''\"\n            [multiple]=\"control.multiple\" [minLength]=\"2\" [(ngModel)]=\"selectedValueObject\"\n            (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (completeMethod)=\"search($event)\"\n            (onKeyUp)=\"handleKeyUp($event)\" (onSelect)=\"handleSelect($event)\" (onUnselect)=\"handleUnSelect($event)\">\n        </p-autoComplete>\n    </div>\n    <span *ngIf=\"!control.multiple && !disabled && hasValue\" class=\"icon-clear\" (click)=\"clearValue()\"><i\n            class=\"fas fa-times\"></i></span>\n    <button class=\"custom-autocomplete-button\" *ngIf=\"control.usePicker\" [disabled]=\"disabled\" tabindex=\"-1\"\n        (click)=\"showPickForm()\" pButton [pTooltip]=\"control.title\" icon=\"fas fa-external-link-alt\"\n        type=\"button\"></button>\n</div>\n<tn-dialog #dialog *ngIf=\"showFormPicker\" styleClass=\"entity-picker-box-dialog no-padding\" [useDefaultScrollBar]=\"true\"\n    [header]=\"control.title | translate\" [popupSize]=\"popupSize\" (onHide)=\"handleHide($event)\">\n    <entity-picker-box #entityPickerBox [currentNode]=\"currentNode\" [control]=\"control\" [parentSetting]=\"setting\" [datasourceFieldFilter]=\"datasourceFieldFilter\"\n        [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\n        (onContentLeftInit)=\"handleContentLeftInit($event)\" (onContentRightInit)=\"handleContentRightInit($event)\"\n        (onChanged)=\"handleChangeEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\n        (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleHide($event)\"\n        (onRowSelect)=\"handleRowSelect($event)\">\n    </entity-picker-box>\n    <ng-template #footer>\n        <button type=\" button\" pButton class=\"p-button-text\" (click)=\"onClickSubmitButton($event, entityPickerBox)\"\n            [label]=\"'Ho\u00E0n th\u00E0nh' | translate\" icon=\"pi pi-check\"></button>\n    </ng-template>\n</tn-dialog>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -45602,7 +45602,7 @@
     EntityPickerDataComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-entity-picker-data',
-                    template: "<crud-list #crudList [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [showScrollHorizontal]=\"true\" (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onRowSelect)=\"handleRowSelect($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\"\n    (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!isSingleSelection && model.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" (click)=\"pickAll()\"></button>\n        <button *ngIf=\"!isSingleSelection && selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-right\"\n            class=\"p-button-text p-button-success\" (click)=\"pickSelected(selectedItems)\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length\" type=\"button\" pButton pRipple label=\"T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng\"\n            icon=\"pi pi-search\" class=\"p-button-text p-button-primary\" (click)=\"handleAdvansearch()\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length && searchData\" type=\"button\" pButton pRipple\n            label=\"X\u00F3a danh s\u00E1ch t\u00ECm ki\u1EBFm\" pTooltip=\"X\u00F3a t\u1EA5t c\u1EA3 ng\u01B0\u1EDDi d\u00F9ng \u1EDF Danh s\u00E1ch t\u00ECm ki\u1EBFm\" icon=\"pi pi-times\"\n            class=\"p-button-text p-button-primary\" (click)=\"handleSearch(null)\"></button>\n    </ng-template>\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button pButton type=\"button\" class=\"link-or-action p-button-success p-button-text p-button-rounded\"\n            icon=\"pi pi-check\" pTooltip=\"Ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" [disabled]=\"rowData.disabled\"\n            (click)=\"pickEntity(rowData)\"></button>\n    </ng-template>\n</crud-list>\n\n\n<tn-dialog *ngIf=\"showFormAdvancedSearch\" #dialog [styleClass]=\"'address-form'\" [header]=\"'T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng'\"\n    [popupSize]=\"popupSizeSearchForm\" [maskClass]=\"setting.maskClass\" (onHide)=\"showFormAdvancedSearch = false\">\n    <entity-picker-search-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [parentSetting]=\"setting\"\n        [datasourceFieldFilter]=\"datasourceFieldFilter\" [lstDataNotExist]=\"lstDataNotExist\" [model]=\"formModel\"\n        (onSearch)=\"handleSearch($event)\" (onCancel)=\"showFormAdvancedSearch = false;\">\n    </entity-picker-search-form>\n</tn-dialog>",
+                    template: "<crud-list #crudList [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [showScrollHorizontal]=\"true\" (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onRowSelect)=\"handleRowSelect($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\"\n    (onDelete)=\"_delete($event)\" (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"!isSingleSelection && model.dataSource.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y t\u1EA5t c\u1EA3 ({{model.dataSource.length}})\" icon=\"pi pi-angle-double-right\"\n            class=\"p-button-text p-button-success\" [disabled]=\"model.loading\" (click)=\"pickAll()\"></button>\n        <button *ngIf=\"!isSingleSelection && selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"L\u1EA5y m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-right\"\n            class=\"p-button-text p-button-success\" [disabled]=\"model.loading\" (click)=\"pickSelected(selectedItems)\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length\" type=\"button\" pButton pRipple label=\"T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng\"\n            icon=\"pi pi-search\" class=\"p-button-text p-button-primary\" [disabled]=\"model.loading\" (click)=\"handleAdvansearch()\"></button>\n        <button *ngIf=\"datasourceFieldFilter.length && searchData\" type=\"button\" pButton pRipple\n            label=\"X\u00F3a danh s\u00E1ch t\u00ECm ki\u1EBFm\" pTooltip=\"X\u00F3a t\u1EA5t c\u1EA3 ng\u01B0\u1EDDi d\u00F9ng \u1EDF Danh s\u00E1ch t\u00ECm ki\u1EBFm\" icon=\"pi pi-times\"\n            class=\"p-button-text p-button-primary\" [disabled]=\"model.loading\" (click)=\"handleSearch(null)\"></button>\n    </ng-template>\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button pButton type=\"button\" class=\"link-or-action p-button-success p-button-text p-button-rounded\"\n            icon=\"pi pi-check\" pTooltip=\"Ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" [disabled]=\"rowData.disabled\"\n            (click)=\"pickEntity(rowData)\"></button>\n    </ng-template>\n</crud-list>\n\n\n<tn-dialog *ngIf=\"showFormAdvancedSearch\" #dialog [styleClass]=\"'address-form'\" [header]=\"'T\u00ECm ki\u1EBFm nhi\u1EC1u ng\u01B0\u1EDDi d\u00F9ng'\"\n    [popupSize]=\"popupSizeSearchForm\" [maskClass]=\"setting.maskClass\" (onHide)=\"showFormAdvancedSearch = false\">\n    <entity-picker-search-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [parentSetting]=\"setting\"\n        [datasourceFieldFilter]=\"datasourceFieldFilter\" [lstDataNotExist]=\"lstDataNotExist\" [model]=\"formModel\"\n        (onSearch)=\"handleSearch($event)\" (onCancel)=\"showFormAdvancedSearch = false;\">\n    </entity-picker-search-form>\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: ["::ng-deep app-entity-picker-data .custom-card{padding:.5em!important}"]
                 },] }
@@ -45743,6 +45743,7 @@
                     this._value = this._selectedValue.map(function (item) { return item[_this.control.valueField]; });
                     if (this._value.length == 0) {
                         this.itemCanDeletes = [];
+                        this.model.selectedItems = [];
                     }
                 }
                 else {
@@ -45752,6 +45753,7 @@
             else {
                 this._value = null;
                 this.itemCanDeletes = [];
+                this.model.selectedItems = [];
             }
         };
         EntityPickerSelectedComponent.prototype.modifyGridInfo = function (gridInfo) {
@@ -45848,7 +45850,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'app-entity-picker-selected',
-                    template: "<crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\" [showScrollHorizontal]=\"true\"\n    (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\n    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"itemCanDeletes.length\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF t\u1EA5t c\u1EA3 ({{itemCanDeletes.length}})\" icon=\"pi pi-angle-double-left\"\n            class=\"p-button-text p-button-danger\" (click)=\"unPickAll()\"></button>\n        <button *ngIf=\"selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-left\"\n            class=\"p-button-text p-button-danger\" (click)=\"unPickSelected(selectedItems)\"></button>\n    </ng-template>\n\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.hiddenDelete\" pButton type=\"button\"\n            class=\"link-or-action p-button-danger p-button-text p-button-rounded\" icon=\"pi pi-times\"\n            pTooltip=\"B\u1ECF ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" (click)=\"unPickEntity(rowData)\"></button>\n    </ng-template>\n\n</crud-list>",
+                    template: "<crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\" [showScrollHorizontal]=\"true\"\n    (onContentInit)=\"onContentInit.emit($event)\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\n    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\n\n    <ng-template #toolbar let-crudList=\"crudList\" let-selectedItems=\"selectedItems\">\n        <button *ngIf=\"!model.dataSource.length && setting.hiddenAdvanceSearch\" pButton\n            style=\"visibility: hidden\"></button>\n        <button *ngIf=\"itemCanDeletes.length\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF t\u1EA5t c\u1EA3 ({{itemCanDeletes.length}})\" icon=\"pi pi-angle-double-left\"\n            class=\"p-button-text p-button-danger\" [disabled]=\"model.loading\" (click)=\"unPickAll()\"></button>\n        <button *ngIf=\"selectedItems.length > 0\" type=\"button\" pButton pRipple\n            label=\"B\u1ECF m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{selectedItems.length}})\" icon=\"pi pi-angle-left\"\n            class=\"p-button-text p-button-danger\" [disabled]=\"model.loading\" (click)=\"unPickSelected(selectedItems)\"></button>\n    </ng-template>\n\n    <ng-template let-crudList=\"crudList\" #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.hiddenDelete\" pButton type=\"button\"\n            class=\"link-or-action p-button-danger p-button-text p-button-rounded\" icon=\"pi pi-times\"\n            pTooltip=\"B\u1ECF ch\u1ECDn m\u1EE5c n\u00E0y\" tooltipPosition=\"top\" (click)=\"unPickEntity(rowData)\"></button>\n    </ng-template>\n\n</crud-list>",
                     providers: [ComponentContextService],
                     styles: ["::ng-deep app-entity-picker-selected .custom-card{padding:.5em .5em 0!important}"]
                 },] }
@@ -49863,6 +49865,1030 @@
         onInit: [{ type: i0.Output }]
     };
 
+    var AUTOCOMPLETE_VALUE_ACCESSOR = {
+        provide: forms.NG_VALUE_ACCESSOR,
+        useExisting: i0.forwardRef(function () { return AutoComplete; }),
+        multi: true
+    };
+    var AutoComplete = /** @class */ (function () {
+        function AutoComplete(el, renderer, cd, differs) {
+            this.el = el;
+            this.renderer = renderer;
+            this.cd = cd;
+            this.differs = differs;
+            this.minLength = 1;
+            this.delay = 300;
+            this.type = 'text';
+            this.autoZIndex = true;
+            this.baseZIndex = 0;
+            this.dropdownIcon = "pi pi-chevron-down";
+            this.unique = true;
+            this.completeOnFocus = false;
+            this.completeMethod = new i0.EventEmitter();
+            this.onSelect = new i0.EventEmitter();
+            this.onUnselect = new i0.EventEmitter();
+            this.onFocus = new i0.EventEmitter();
+            this.onBlur = new i0.EventEmitter();
+            this.onDropdownClick = new i0.EventEmitter();
+            this.onClear = new i0.EventEmitter();
+            this.onKeyUp = new i0.EventEmitter();
+            this.onShow = new i0.EventEmitter();
+            this.onHide = new i0.EventEmitter();
+            this.scrollHeight = '200px';
+            this.dropdownMode = 'blank';
+            this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+            this.hideTransitionOptions = '.1s linear';
+            this.autocomplete = 'off';
+            this.onModelChange = function () { };
+            this.onModelTouched = function () { };
+            this.showCountItem = false;
+            this.overlayVisible = false;
+            this.focus = false;
+            this.inputFieldValue = null;
+            this.differ = differs.find([]).create(null);
+            this.listId = utils.UniqueComponentId() + '_list';
+        }
+        Object.defineProperty(AutoComplete.prototype, "maxRowItem", {
+            set: function (value) {
+                var rowHeight = 27;
+                var padding = 7;
+                this._maxHeighContainerItem = Math.round(value * 30.5) + 7;
+                this._maxHeighContainerItemStr = this._maxHeighContainerItem.toString() + 'px';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AutoComplete.prototype, "suggestions", {
+            get: function () {
+                return this._suggestions;
+            },
+            set: function (val) {
+                this._suggestions = val;
+                this.handleSuggestionsChange();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AutoComplete.prototype.ngAfterViewChecked = function () {
+            var _this = this;
+            //Use timeouts as since Angular 4.2, AfterViewChecked is broken and not called after panel is updated
+            if (this.suggestionsUpdated && this.overlay && this.overlay.offsetParent) {
+                setTimeout(function () {
+                    if (_this.overlay) {
+                        _this.alignOverlay();
+                    }
+                }, 1);
+                this.suggestionsUpdated = false;
+            }
+            if (this.highlightOptionChanged) {
+                setTimeout(function () {
+                    if (_this.overlay) {
+                        var listItem = dom.DomHandler.findSingle(_this.overlay, 'li.p-highlight');
+                        if (listItem) {
+                            dom.DomHandler.scrollInView(_this.overlay, listItem);
+                        }
+                    }
+                }, 1);
+                this.highlightOptionChanged = false;
+            }
+            if (this.multiContainerEL) {
+                var lastItemSelected = dom.DomHandler.findSingle(this.multiContainerEL.nativeElement, 'li:first-child');
+                this.multiContainerEL.nativeElement.scrollTop = 10000;
+                var rectParent = this.multiContainerEL.nativeElement.getBoundingClientRect();
+                var rectLastItem = lastItemSelected.getBoundingClientRect();
+                if (rectLastItem.y < rectParent.y) {
+                    this.showCountItem = true;
+                }
+                else {
+                    this.showCountItem = false;
+                }
+            }
+            var countItem = dom.DomHandler.findSingle(this.multiContainerEL.nativeElement, '.p-autocomplete-countItem');
+            if (this.showCountItem && !countItem) {
+                this.focusInput();
+            }
+        };
+        AutoComplete.prototype.handleSuggestionsChange = function () {
+            if (this._suggestions != null && this.loading) {
+                this.highlightOption = null;
+                if (this._suggestions.length) {
+                    this.noResults = false;
+                    this.show();
+                    this.suggestionsUpdated = true;
+                    if (this.autoHighlight) {
+                        this.highlightOption = this._suggestions[0];
+                    }
+                }
+                else {
+                    this.noResults = true;
+                    if (this.emptyMessage) {
+                        this.show();
+                        this.suggestionsUpdated = true;
+                    }
+                    else {
+                        this.hide();
+                    }
+                }
+                this.loading = false;
+            }
+        };
+        AutoComplete.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.templates.forEach(function (item) {
+                switch (item.getType()) {
+                    case 'item':
+                        _this.itemTemplate = item.template;
+                        break;
+                    case 'selectedItem':
+                        _this.selectedItemTemplate = item.template;
+                        break;
+                    default:
+                        _this.itemTemplate = item.template;
+                        break;
+                }
+            });
+        };
+        AutoComplete.prototype.writeValue = function (value) {
+            this.value = value;
+            this.filled = this.value && this.value != '';
+            this.updateInputField();
+            this.cd.markForCheck();
+        };
+        AutoComplete.prototype.registerOnChange = function (fn) {
+            this.onModelChange = fn;
+        };
+        AutoComplete.prototype.registerOnTouched = function (fn) {
+            this.onModelTouched = fn;
+        };
+        AutoComplete.prototype.setDisabledState = function (val) {
+            this.disabled = val;
+            this.cd.markForCheck();
+        };
+        AutoComplete.prototype.onInput = function (event) {
+            var _this = this;
+            // When an input element with a placeholder is clicked, the onInput event is invoked in IE.
+            if (!this.inputKeyDown && dom.DomHandler.isIE()) {
+                return;
+            }
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+            var value = event.target.value;
+            if (!this.multiple && !this.forceSelection) {
+                this.onModelChange(value);
+            }
+            if (value.length === 0 && !this.multiple) {
+                this.hide();
+                this.onClear.emit(event);
+                this.onModelChange(value);
+            }
+            if (value.length >= this.minLength) {
+                this.timeout = setTimeout(function () {
+                    _this.search(event, value);
+                }, this.delay);
+            }
+            else {
+                this.suggestions = null;
+                this.hide();
+            }
+            this.updateFilledState();
+            this.inputKeyDown = false;
+        };
+        AutoComplete.prototype.onInputClick = function (event) {
+            if (this.documentClickListener) {
+                this.inputClick = true;
+            }
+        };
+        AutoComplete.prototype.search = function (event, query) {
+            //allow empty string but not undefined or null
+            if (query === undefined || query === null) {
+                return;
+            }
+            this.loading = true;
+            this.completeMethod.emit({
+                originalEvent: event,
+                query: query
+            });
+        };
+        AutoComplete.prototype.selectItem = function (option, focus) {
+            if (focus === void 0) { focus = true; }
+            if (this.forceSelectionUpdateModelTimeout) {
+                clearTimeout(this.forceSelectionUpdateModelTimeout);
+                this.forceSelectionUpdateModelTimeout = null;
+            }
+            if (this.multiple) {
+                this.multiInputEL.nativeElement.value = '';
+                this.value = this.value || [];
+                if (!this.isSelected(option) || !this.unique) {
+                    this.value = __spreadArray(__spreadArray([], __read(this.value)), [option]);
+                    this.onModelChange(this.value);
+                }
+            }
+            else {
+                this.inputEL.nativeElement.value = this.field ? utils.ObjectUtils.resolveFieldData(option, this.field) || '' : option;
+                this.value = option;
+                this.onModelChange(this.value);
+            }
+            this.onSelect.emit(option);
+            this.updateFilledState();
+            if (focus) {
+                this.itemClicked = true;
+                this.focusInput();
+            }
+        };
+        AutoComplete.prototype.show = function () {
+            if (this.multiInputEL || this.inputEL) {
+                var hasFocus = this.multiple ?
+                    this.multiInputEL.nativeElement.ownerDocument.activeElement == this.multiInputEL.nativeElement :
+                    this.inputEL.nativeElement.ownerDocument.activeElement == this.inputEL.nativeElement;
+                if (!this.overlayVisible && hasFocus) {
+                    this.overlayVisible = true;
+                }
+            }
+        };
+        AutoComplete.prototype.onOverlayAnimationStart = function (event) {
+            switch (event.toState) {
+                case 'visible':
+                    this.overlay = event.element;
+                    this.appendOverlay();
+                    if (this.autoZIndex) {
+                        this.overlay.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
+                    }
+                    this.alignOverlay();
+                    this.bindDocumentClickListener();
+                    this.bindDocumentResizeListener();
+                    this.bindScrollListener();
+                    this.onShow.emit(event);
+                    break;
+                case 'void':
+                    this.onOverlayHide();
+                    break;
+            }
+        };
+        AutoComplete.prototype.onOverlayAnimationDone = function (event) {
+            if (event.toState === 'void') {
+                this._suggestions = null;
+            }
+        };
+        AutoComplete.prototype.appendOverlay = function () {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.overlay);
+                else
+                    dom.DomHandler.appendChild(this.overlay, this.appendTo);
+                if (!this.overlay.style.minWidth) {
+                    this.overlay.style.minWidth = dom.DomHandler.getWidth(this.el.nativeElement.children[0]) + 'px';
+                }
+            }
+        };
+        AutoComplete.prototype.resolveFieldData = function (value) {
+            return this.field ? utils.ObjectUtils.resolveFieldData(value, this.field) : value;
+        };
+        AutoComplete.prototype.restoreOverlayAppend = function () {
+            if (this.overlay && this.appendTo) {
+                this.el.nativeElement.appendChild(this.overlay);
+            }
+        };
+        AutoComplete.prototype.alignOverlay = function () {
+            if (this.appendTo)
+                dom.DomHandler.absolutePosition(this.overlay, (this.multiple ? this.multiContainerEL.nativeElement : this.inputEL.nativeElement));
+            else
+                dom.DomHandler.relativePosition(this.overlay, (this.multiple ? this.multiContainerEL.nativeElement : this.inputEL.nativeElement));
+        };
+        AutoComplete.prototype.hide = function () {
+            this.overlayVisible = false;
+            this.cd.markForCheck();
+        };
+        AutoComplete.prototype.handleDropdownClick = function (event) {
+            if (!this.overlayVisible) {
+                this.focusInput();
+                var queryValue = this.multiple ? this.multiInputEL.nativeElement.value : this.inputEL.nativeElement.value;
+                if (this.dropdownMode === 'blank')
+                    this.search(event, '');
+                else if (this.dropdownMode === 'current')
+                    this.search(event, queryValue);
+                this.onDropdownClick.emit({
+                    originalEvent: event,
+                    query: queryValue
+                });
+            }
+            else {
+                this.hide();
+            }
+        };
+        AutoComplete.prototype.focusInput = function () {
+            if (this.multiple)
+                this.multiInputEL.nativeElement.focus();
+            else
+                this.inputEL.nativeElement.focus();
+        };
+        AutoComplete.prototype.removeItem = function (item) {
+            var itemIndex = dom.DomHandler.index(item);
+            var removedValue = this.value[itemIndex];
+            this.value = this.value.filter(function (val, i) { return i != itemIndex; });
+            this.onModelChange(this.value);
+            this.updateFilledState();
+            this.onUnselect.emit(removedValue);
+        };
+        AutoComplete.prototype.onKeydown = function (event) {
+            if (this.overlayVisible) {
+                var highlightItemIndex = this.findOptionIndex(this.highlightOption);
+                switch (event.which) {
+                    //down
+                    case 40:
+                        if (highlightItemIndex != -1) {
+                            var nextItemIndex = highlightItemIndex + 1;
+                            if (nextItemIndex != (this.suggestions.length)) {
+                                this.highlightOption = this.suggestions[nextItemIndex];
+                                this.highlightOptionChanged = true;
+                            }
+                        }
+                        else {
+                            this.highlightOption = this.suggestions[0];
+                        }
+                        event.preventDefault();
+                        break;
+                    //up
+                    case 38:
+                        if (highlightItemIndex > 0) {
+                            var prevItemIndex = highlightItemIndex - 1;
+                            this.highlightOption = this.suggestions[prevItemIndex];
+                            this.highlightOptionChanged = true;
+                        }
+                        event.preventDefault();
+                        break;
+                    //enter
+                    case 13:
+                        if (this.highlightOption) {
+                            this.selectItem(this.highlightOption);
+                            this.hide();
+                        }
+                        event.preventDefault();
+                        break;
+                    //escape
+                    case 27:
+                        this.hide();
+                        event.preventDefault();
+                        break;
+                    //tab
+                    case 9:
+                        if (this.highlightOption) {
+                            this.selectItem(this.highlightOption);
+                        }
+                        this.hide();
+                        break;
+                }
+            }
+            else {
+                if (event.which === 40 && this.suggestions) {
+                    this.search(event, event.target.value);
+                }
+            }
+            if (this.multiple) {
+                switch (event.which) {
+                    //backspace
+                    case 8:
+                        if (this.value && this.value.length && !this.multiInputEL.nativeElement.value) {
+                            this.value = __spreadArray([], __read(this.value));
+                            var removedValue = this.value.pop();
+                            this.onModelChange(this.value);
+                            this.updateFilledState();
+                            this.onUnselect.emit(removedValue);
+                        }
+                        break;
+                }
+            }
+            this.inputKeyDown = true;
+        };
+        AutoComplete.prototype.onKeyup = function (event) {
+            this.onKeyUp.emit(event);
+        };
+        AutoComplete.prototype.onInputFocus = function (event) {
+            if (!this.itemClicked && this.completeOnFocus) {
+                var queryValue = this.multiple ? this.multiInputEL.nativeElement.value : this.inputEL.nativeElement.value;
+                this.search(event, queryValue);
+            }
+            this.focus = true;
+            this.onFocus.emit(event);
+            this.itemClicked = false;
+        };
+        AutoComplete.prototype.onInputBlur = function (event) {
+            this.focus = false;
+            this.onModelTouched();
+            this.onBlur.emit(event);
+        };
+        AutoComplete.prototype.onInputChange = function (event) {
+            var e_1, _a;
+            var _this = this;
+            if (this.forceSelection) {
+                var valid = false;
+                var inputValue = event.target.value.trim();
+                if (this.suggestions) {
+                    var _loop_1 = function (suggestion) {
+                        var itemValue = this_1.field ? utils.ObjectUtils.resolveFieldData(suggestion, this_1.field) : suggestion;
+                        if (itemValue && inputValue === itemValue.trim()) {
+                            valid = true;
+                            this_1.forceSelectionUpdateModelTimeout = setTimeout(function () {
+                                _this.selectItem(suggestion, false);
+                            }, 250);
+                            return "break";
+                        }
+                    };
+                    var this_1 = this;
+                    try {
+                        for (var _b = __values(this.suggestions), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var suggestion = _c.value;
+                            var state_1 = _loop_1(suggestion);
+                            if (state_1 === "break")
+                                break;
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+                if (!valid) {
+                    if (this.multiple) {
+                        this.multiInputEL.nativeElement.value = '';
+                    }
+                    else {
+                        this.value = null;
+                        this.inputEL.nativeElement.value = '';
+                    }
+                    this.onClear.emit(event);
+                    this.onModelChange(this.value);
+                }
+            }
+        };
+        AutoComplete.prototype.onInputPaste = function (event) {
+            this.onKeydown(event);
+        };
+        AutoComplete.prototype.isSelected = function (val) {
+            var selected = false;
+            if (this.value && this.value.length) {
+                for (var i = 0; i < this.value.length; i++) {
+                    if (utils.ObjectUtils.equals(this.value[i], val, this.dataKey)) {
+                        selected = true;
+                        break;
+                    }
+                }
+            }
+            return selected;
+        };
+        AutoComplete.prototype.findOptionIndex = function (option) {
+            var index = -1;
+            if (this.suggestions) {
+                for (var i = 0; i < this.suggestions.length; i++) {
+                    if (utils.ObjectUtils.equals(option, this.suggestions[i])) {
+                        index = i;
+                        break;
+                    }
+                }
+            }
+            return index;
+        };
+        AutoComplete.prototype.updateFilledState = function () {
+            if (this.multiple)
+                this.filled = (this.value && this.value.length) || (this.multiInputEL && this.multiInputEL.nativeElement && this.multiInputEL.nativeElement.value != '');
+            else
+                this.filled = (this.inputFieldValue && this.inputFieldValue != '') || (this.inputEL && this.inputEL.nativeElement && this.inputEL.nativeElement.value != '');
+            ;
+        };
+        AutoComplete.prototype.updateInputField = function () {
+            var formattedValue = this.value ? (this.field ? utils.ObjectUtils.resolveFieldData(this.value, this.field) || '' : this.value) : '';
+            this.inputFieldValue = formattedValue;
+            if (this.inputEL && this.inputEL.nativeElement) {
+                this.inputEL.nativeElement.value = formattedValue;
+            }
+            this.updateFilledState();
+        };
+        AutoComplete.prototype.bindDocumentClickListener = function () {
+            var _this = this;
+            if (!this.documentClickListener) {
+                var documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
+                this.documentClickListener = this.renderer.listen(documentTarget, 'click', function (event) {
+                    if (event.which === 3) {
+                        return;
+                    }
+                    if (!_this.inputClick && !_this.isDropdownClick(event)) {
+                        _this.hide();
+                    }
+                    _this.inputClick = false;
+                    _this.cd.markForCheck();
+                });
+            }
+        };
+        AutoComplete.prototype.isDropdownClick = function (event) {
+            if (this.dropdown) {
+                var target = event.target;
+                return (target === this.dropdownButton.nativeElement || target.parentNode === this.dropdownButton.nativeElement);
+            }
+            else {
+                return false;
+            }
+        };
+        AutoComplete.prototype.unbindDocumentClickListener = function () {
+            if (this.documentClickListener) {
+                this.documentClickListener();
+                this.documentClickListener = null;
+            }
+        };
+        AutoComplete.prototype.bindDocumentResizeListener = function () {
+            this.documentResizeListener = this.onWindowResize.bind(this);
+            window.addEventListener('resize', this.documentResizeListener);
+        };
+        AutoComplete.prototype.unbindDocumentResizeListener = function () {
+            if (this.documentResizeListener) {
+                window.removeEventListener('resize', this.documentResizeListener);
+                this.documentResizeListener = null;
+            }
+        };
+        AutoComplete.prototype.onWindowResize = function () {
+            this.hide();
+        };
+        AutoComplete.prototype.bindScrollListener = function () {
+            var _this = this;
+            if (!this.scrollHandler) {
+                this.scrollHandler = new dom.ConnectedOverlayScrollHandler(this.containerEL.nativeElement, function () {
+                    if (_this.overlayVisible) {
+                        _this.hide();
+                    }
+                });
+            }
+            this.scrollHandler.bindScrollListener();
+        };
+        AutoComplete.prototype.unbindScrollListener = function () {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        };
+        AutoComplete.prototype.onOverlayHide = function () {
+            this.unbindDocumentClickListener();
+            this.unbindDocumentResizeListener();
+            this.unbindScrollListener();
+            this.overlay = null;
+            this.onHide.emit();
+        };
+        AutoComplete.prototype.ngOnDestroy = function () {
+            if (this.forceSelectionUpdateModelTimeout) {
+                clearTimeout(this.forceSelectionUpdateModelTimeout);
+                this.forceSelectionUpdateModelTimeout = null;
+            }
+            if (this.scrollHandler) {
+                this.scrollHandler.destroy();
+                this.scrollHandler = null;
+            }
+            this.restoreOverlayAppend();
+            this.onOverlayHide();
+        };
+        AutoComplete.prototype.showMore = function () {
+            this._maxHeighContainerItemStrOld = this._maxHeighContainerItemStr;
+            this._maxHeighContainerItemStr = '10000px';
+            this.showCountItem = false;
+        };
+        AutoComplete.prototype.showLess = function () {
+            this._maxHeighContainerItemStr = this._maxHeighContainerItemStrOld;
+            this._maxHeighContainerItemStrOld = null;
+            this.showCountItem = true;
+        };
+        return AutoComplete;
+    }());
+    AutoComplete.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'p-autoComplete',
+                    template: "\n        <span #container [ngClass]=\"{'p-autocomplete p-component':true,'p-autocomplete-dd':dropdown,'p-autocomplete-multiple':multiple}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input *ngIf=\"!multiple\" #in [attr.type]=\"type\" [attr.id]=\"inputId\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [autocomplete]=\"autocomplete\" [attr.required]=\"required\" [attr.name]=\"name\"\n            class=\"p-autocomplete-input p-inputtext p-component\" [ngClass]=\"{'p-autocomplete-dd-input':dropdown,'p-disabled': disabled}\" [value]=\"inputFieldValue\" aria-autocomplete=\"list\" [attr.aria-controls]=\"listId\" role=\"searchbox\" [attr.aria-expanded]=\"overlayVisible\" aria-haspopup=\"true\" [attr.aria-activedescendant]=\"'p-highlighted-option'\"\n            (click)=\"onInputClick($event)\" (input)=\"onInput($event)\" (keydown)=\"onKeydown($event)\" (keyup)=\"onKeyup($event)\" [attr.autofocus]=\"autofocus\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\"\n            [attr.placeholder]=\"placeholder\" [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [readonly]=\"readonly\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\"\n            ><ul *ngIf=\"multiple\" #multiContainer class=\"p-autocomplete-multiple-container p-component p-inputtext\" [ngClass]=\"{'p-disabled':disabled,'p-focus':focus}\" (click)=\"multiIn.focus()\" [style.max-height]=\"_maxHeighContainerItemStr\">\n                <li #token *ngFor=\"let val of value\" class=\"p-autocomplete-token\" [class.disabled]=\"val._disabled\">\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: {$implicit: val}\"></ng-container>\n                    <span *ngIf=\"!selectedItemTemplate\" class=\"p-autocomplete-token-label\">{{resolveFieldData(val)}}</span>\n                    <span *ngIf=\"!disabled && !val._disabled\" class=\"p-autocomplete-token-icon pi pi-times-circle\" (click)=\"removeItem(token)\"></span>\n                </li>\n                <li class=\"p-autocomplete-token p-autocomplete-countItem\" *ngIf=\"showCountItem && value \" (click)=\"showMore()\">C\u00F3 {{value.length}} b\u1EA3n ghi ...</li>\n                <!-- <ng-container *ngIf=\"value?.length > 10\">\n                    <li class=\"p-autocomplete-token p-autocomplete-countItem\" (click)=\"showMore()\">\n                        C\u00F3 {{value.length}} b\u1EA3n ghi ...\n                    </li>\n                </ng-container>     -->\n                <li class=\"p-autocomplete-token p-autocomplete-countItem\" *ngIf=\"_maxHeighContainerItemStrOld != null\" (click)=\"showLess()\"><span><i class=\"fas fa-arrow-up\"></i></span><span>Thu l\u1EA1i</span></li>\n                <li class=\"p-autocomplete-input-token\">\n                    <input #multiIn [attr.type]=\"type\" [attr.id]=\"inputId\" [disabled]=\"disabled\" [attr.placeholder]=\"(value&&value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" [attr.maxlength]=\"maxlength\" (input)=\"onInput($event)\"  (click)=\"onInputClick($event)\"\n                            (keydown)=\"onKeydown($event)\" [readonly]=\"readonly\" (keyup)=\"onKeyup($event)\" [attr.autofocus]=\"autofocus\" (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"onInputChange($event)\" (paste)=\"onInputPaste($event)\" [autocomplete]=\"autocomplete\"\n                            [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-required]=\"required\"\n                            aria-autocomplete=\"list\" [attr.aria-controls]=\"listId\" role=\"searchbox\" [attr.aria-expanded]=\"overlayVisible\" aria-haspopup=\"true\" [attr.aria-activedescendant]=\"'p-highlighted-option'\">\n                </li>\n            </ul>\n            <i *ngIf=\"loading\" class=\"p-autocomplete-loader pi pi-spinner pi-spin\"></i><button #ddBtn type=\"button\" pButton [icon]=\"dropdownIcon\" class=\"p-autocomplete-dropdown\" [disabled]=\"disabled\" pRipple\n                (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\" [attr.tabindex]=\"tabindex\"></button>\n            <div #panel *ngIf=\"overlayVisible\" [ngClass]=\"['p-autocomplete-panel p-component']\" [style.max-height]=\"scrollHeight\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\"\n                [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" >\n                <ul role=\"listbox\" [attr.id]=\"listId\" class=\"p-autocomplete-items\">\n                    <li role=\"option\" *ngFor=\"let option of suggestions; let idx = index\" class=\"p-autocomplete-item\" pRipple [ngClass]=\"{'p-highlight': (option === highlightOption)}\" [id]=\"highlightOption == option ? 'p-highlighted-option':''\" (click)=\"selectItem(option)\">\n                        <span *ngIf=\"!itemTemplate\">{{resolveFieldData(option)}}</span>\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: idx}\"></ng-container>\n                    </li>\n                    <li *ngIf=\"noResults && emptyMessage\" class=\"p-autocomplete-emptymessage p-autocomplete-item\">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n    ",
+                    animations: [
+                        animations$1.trigger('overlayAnimation', [
+                            animations$1.transition(':enter', [
+                                animations$1.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                animations$1.animate('{{showTransitionParams}}')
+                            ]),
+                            animations$1.transition(':leave', [
+                                animations$1.animate('{{hideTransitionParams}}', animations$1.style({ opacity: 0 }))
+                            ])
+                        ])
+                    ],
+                    host: {
+                        '[class.p-inputwrapper-filled]': 'filled',
+                        '[class.p-inputwrapper-focus]': 'focus && !disabled'
+                    },
+                    providers: [AUTOCOMPLETE_VALUE_ACCESSOR],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    styles: [".p-autocomplete{display:inline-flex;position:relative}.p-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.p-autocomplete-dd .p-autocomplete-input{flex:1 1 auto;width:1%}.p-autocomplete-dd .p-autocomplete-input,.p-autocomplete-dd .p-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.p-autocomplete-dd .p-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.p-autocomplete .p-autocomplete-panel{min-width:100%}.p-autocomplete-panel{position:absolute;overflow:auto}.p-autocomplete-items{margin:0;padding:0;list-style-type:none}.p-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.p-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-autocomplete-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto;padding:.125em .5em;margin-right:.125em;border:0;font-size:.9em}.p-autocomplete-token-icon{cursor:pointer}.p-autocomplete-input-token{display:inline-block;vertical-align:middle;list-style-type:none;margin:0 0 0 .125em;padding:.25em .25em .25em 0}.p-autocomplete-input-token input{border:0;width:10em;outline:medium none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0}.p-fluid .p-autocomplete{display:flex}.p-fluid .p-autocomplete-dd .p-autocomplete-input{width:1%}.p-autocomplete-countItem{background-color:#e1e1e1!important;box-sizing:border-box;display:inline-flex;align-items:center;cursor:pointer}"]
+                },] }
+    ];
+    AutoComplete.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.IterableDiffers }
+    ]; };
+    AutoComplete.propDecorators = {
+        minLength: [{ type: i0.Input }],
+        delay: [{ type: i0.Input }],
+        style: [{ type: i0.Input }],
+        panelStyle: [{ type: i0.Input }],
+        styleClass: [{ type: i0.Input }],
+        panelStyleClass: [{ type: i0.Input }],
+        inputStyle: [{ type: i0.Input }],
+        inputId: [{ type: i0.Input }],
+        inputStyleClass: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        maxlength: [{ type: i0.Input }],
+        name: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        size: [{ type: i0.Input }],
+        appendTo: [{ type: i0.Input }],
+        autoHighlight: [{ type: i0.Input }],
+        forceSelection: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        autoZIndex: [{ type: i0.Input }],
+        baseZIndex: [{ type: i0.Input }],
+        ariaLabel: [{ type: i0.Input }],
+        ariaLabelledBy: [{ type: i0.Input }],
+        dropdownIcon: [{ type: i0.Input }],
+        unique: [{ type: i0.Input }],
+        completeOnFocus: [{ type: i0.Input }],
+        completeMethod: [{ type: i0.Output }],
+        onSelect: [{ type: i0.Output }],
+        onUnselect: [{ type: i0.Output }],
+        onFocus: [{ type: i0.Output }],
+        onBlur: [{ type: i0.Output }],
+        onDropdownClick: [{ type: i0.Output }],
+        onClear: [{ type: i0.Output }],
+        onKeyUp: [{ type: i0.Output }],
+        onShow: [{ type: i0.Output }],
+        onHide: [{ type: i0.Output }],
+        field: [{ type: i0.Input }],
+        scrollHeight: [{ type: i0.Input }],
+        dropdown: [{ type: i0.Input }],
+        dropdownMode: [{ type: i0.Input }],
+        multiple: [{ type: i0.Input }],
+        tabindex: [{ type: i0.Input }],
+        dataKey: [{ type: i0.Input }],
+        emptyMessage: [{ type: i0.Input }],
+        showTransitionOptions: [{ type: i0.Input }],
+        hideTransitionOptions: [{ type: i0.Input }],
+        autofocus: [{ type: i0.Input }],
+        autocomplete: [{ type: i0.Input }],
+        maxRowItem: [{ type: i0.Input }],
+        containerEL: [{ type: i0.ViewChild, args: ['container',] }],
+        inputEL: [{ type: i0.ViewChild, args: ['in',] }],
+        multiInputEL: [{ type: i0.ViewChild, args: ['multiIn',] }],
+        multiContainerEL: [{ type: i0.ViewChild, args: ['multiContainer',] }],
+        dropdownButton: [{ type: i0.ViewChild, args: ['ddBtn',] }],
+        templates: [{ type: i0.ContentChildren, args: [i1.PrimeTemplate,] }],
+        suggestions: [{ type: i0.Input }]
+    };
+    var AutoCompleteModule = /** @class */ (function () {
+        function AutoCompleteModule() {
+        }
+        return AutoCompleteModule;
+    }());
+    AutoCompleteModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [i3.CommonModule, inputtext.InputTextModule, button.ButtonModule, i1.SharedModule, ripple.RippleModule],
+                    exports: [AutoComplete, i1.SharedModule],
+                    declarations: [AutoComplete]
+                },] }
+    ];
+
+    /* eslint-disable prefer-const */
+    var HtmlPreviewComponent = /** @class */ (function () {
+        function HtmlPreviewComponent(gs, _commonService) {
+            this.gs = gs;
+            this._commonService = _commonService;
+            this.control = new HtmlPreviewControlSchema();
+            this.onChanged = new i0.EventEmitter();
+            this.content = '';
+            this.id = '';
+            this.id = this._commonService.guid();
+        }
+        // ngOnChanges(changes: SimpleChanges) {
+        //     if (changes['content']) {
+        //         this.renderMath();
+        //     }
+        // }
+        HtmlPreviewComponent.prototype.writeValue = function (obj) {
+            if (obj) {
+                this.content = obj;
+            }
+            else {
+                this.content = '';
+            }
+            this.renderMath();
+        };
+        HtmlPreviewComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        HtmlPreviewComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        HtmlPreviewComponent.prototype.renderMath = function () {
+            var _this = this;
+            this.mathJaxObject = this.gs.nativeGlobal()['MathJax'];
+            if (!this.mathJaxObject && !this.mathContent) {
+                return;
+            }
+            setTimeout(function () {
+                var _a, _b;
+                var $this = _this;
+                var autoScrollBottom = !!((_a = $this.control) === null || _a === void 0 ? void 0 : _a.autoScrollBottom);
+                var output = $this.mathContent.nativeElement;
+                var content = ((_b = $this.content) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+                if (!$this.control.isHtml) {
+                    content = content.replace(/\n/g, '<br>');
+                }
+                output.innerHTML = content;
+                if ($this.mathJaxObject.texReset) {
+                    $this.mathJaxObject.texReset();
+                }
+                if ($this.mathJaxObject.typesetClear) {
+                    $this.mathJaxObject.typesetClear();
+                }
+                if ($this.mathJaxObject.typesetPromise) {
+                    $this.mathJaxObject.typesetPromise([output]).catch(function (err) {
+                        output.innerHTML = '';
+                        output.appendChild(document.createTextNode(err.message));
+                        console.error(err);
+                    }).then(function () {
+                        var _a, _b, _c;
+                        // Do something after typeset
+                        if (autoScrollBottom) {
+                            var box = document.querySelector("#math-preview-box-" + $this.id);
+                            var elem = box.getElementsByClassName('ps--active-y')[0];
+                            if (elem) {
+                                elem.scrollTop = elem.scrollHeight;
+                            }
+                        }
+                        var value = (_c = (_b = (_a = document.getElementById("mathPreview-" + $this.id)) === null || _a === void 0 ? void 0 : _a.innerHTML) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+                        $this.onChange(value);
+                        $this.onChanged.emit(value);
+                    });
+                }
+                return $this.mathJaxObject.startup.defaultPageReady ? $this.mathJaxObject.startup.defaultPageReady() : $this.mathJaxObject.startup.defaultPageReady;
+            });
+        };
+        HtmlPreviewComponent.prototype.loadMathConfig = function () {
+            var _this = this;
+            var _a, _b, _c;
+            var wd = this.gs.nativeGlobal();
+            wd.MathJax = {
+                'loader': { load: ['input/asciimath', 'output/chtml', 'ui/menu', 'output/svg', '[mml]/mml3'] },
+                'tex': {
+                    inlineMath: [['$', '$'], ['\\(', '\\)']],
+                    processEscapes: true
+                },
+                'startup': {
+                    pageReady: function () { return _this.renderMath(); }
+                },
+                'svg': {
+                    scale: 1,
+                    minScale: .5
+                },
+                'options': {
+                    enableMenu: !!((_a = this.control) === null || _a === void 0 ? void 0 : _a.useMathJaxMenu),
+                    menuOptions: {
+                        settings: {
+                            texHints: true,
+                            semantics: false,
+                            zoom: 'Double-Click',
+                            zscale: '200%',
+                            renderer: ((_b = this.control) === null || _b === void 0 ? void 0 : _b.mathJaxType) ? this.control.mathJaxType : 'CHTML',
+                            scale: 1,
+                            inTabOrder: true,
+                            assistiveMml: true,
+                            collapsible: false,
+                            explorer: false, // true if the expression explorer should be active
+                        },
+                        annotationTypes: {
+                            TeX: ['TeX', 'LaTeX', 'application/x-tex'],
+                            StarMath: ['StarMath 5.0'],
+                            Maple: ['Maple'],
+                            ContentMathML: ['MathML-Content', 'application/mathml-content+xml'],
+                            OpenMath: ['OpenMath']
+                        }
+                    }
+                }
+            };
+            var script = document.createElement('script');
+            if (((_c = this.control) === null || _c === void 0 ? void 0 : _c.mathJaxType) == 'SVG') {
+                script.src = 'assets/vendor/mathjax/tex-mml-svg.js';
+            }
+            else {
+                script.src = 'assets/vendor/mathjax/tex-mml-chtml.js';
+            }
+            script.setAttribute('id', 'MathJax-script');
+            document.head.appendChild(script);
+        };
+        HtmlPreviewComponent.prototype.ngOnInit = function () {
+            this.loadMathConfig();
+        };
+        return HtmlPreviewComponent;
+    }());
+    HtmlPreviewComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'html-preview',
+                    template: "<div class=\"preview-box\" id=\"math-preview-box-{{id}}\" [ngStyle]=\"{'height': control.height + 'px'}\">\n    <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\n        <div #mathContent id=\"mathPreview-{{id}}\"></div>\n    </tn-custom-scrollbar>\n</div>",
+                    providers: [
+                        ComponentContextService,
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: i0.forwardRef(function () { return HtmlPreviewComponent; }),
+                            multi: true
+                        },
+                    ],
+                    styles: ["::ng-deep html-preview .preview-box{border:1px solid #ced4da;padding:10px}"]
+                },] }
+    ];
+    HtmlPreviewComponent.ctorParameters = function () { return [
+        { type: GlobalService },
+        { type: CommonService }
+    ]; };
+    HtmlPreviewComponent.propDecorators = {
+        mathContent: [{ type: i0.ViewChild, args: ['mathContent',] }],
+        control: [{ type: i0.Input }],
+        onChanged: [{ type: i0.Output }]
+    };
+
+    var SettingAuthorizeButtonComponent = /** @class */ (function (_super) {
+        __extends(SettingAuthorizeButtonComponent, _super);
+        function SettingAuthorizeButtonComponent(_injector, _basePermissionService, _moduleConfigService) {
+            var _this = _super.call(this, _injector) || this;
+            _this._injector = _injector;
+            _this._basePermissionService = _basePermissionService;
+            _this._moduleConfigService = _moduleConfigService;
+            _this.authorizeButtonKey = '';
+            _this.dataSource = [];
+            _this.appCode = '';
+            return _this;
+        }
+        SettingAuthorizeButtonComponent.prototype.ngOnInit = function () {
+            this.appCode = this._moduleConfigService.getConfig().appCode;
+            this.setting.baseService = this._basePermissionService;
+            this.customGetData = true;
+            this.setting.hiddenAdvanceSearch = true;
+            this.setting.hiddenHeader = true;
+            this.setting.heightType = exports.HeightType.dynamic;
+            this.setting.hiddenOrderColumn = true;
+            this.setting.hiddenFilterRow = true;
+            this.setting.hiddenSettingWorkflow = true;
+            this.setting.hiddenAuthorizeButton = true;
+            this.setting.hiddenSettingPermission = true;
+            this.setting.fixHeightTypeInDialog = false;
+            this.setting.hiddenCheckbox = false;
+            this.setting.showEditLink = false;
+            this.setting.modelSchemas = [
+                new ModelSchema({
+                    field: 'permissionCode',
+                    name: 'Mã',
+                }),
+                new ModelSchema({
+                    field: 'rawText',
+                    name: 'Tên',
+                }),
+                new ModelSchema({
+                    field: 'isAuthorize',
+                    name: 'Đã tạo quyền',
+                }),
+                new ModelSchema({
+                    field: 'ma1',
+                    name: 'Mã',
+                }),
+            ];
+            this.setting.cols = [
+                new ColumnSchemaBase({ field: 'permissionCode', sort: false, showEditLink: false }),
+                new ColumnSchemaBase({ field: 'rawText', width: '300px', sort: false }),
+                new ColumnSchemaBase({ field: 'isAuthorize', dataType: exports.DataType.boolean, width: '100px', sort: false }),
+            ];
+            _super.prototype.ngOnInit.call(this);
+        };
+        SettingAuthorizeButtonComponent.prototype.getDataCustom = function (gridInfo) {
+            this.model.dataSource = this.dataSource;
+            this.afterGetData();
+        };
+        SettingAuthorizeButtonComponent.prototype.addBasePermission = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                var insertRes;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this._basePermissionService.post(rowData)];
+                        case 1:
+                            insertRes = _b.sent();
+                            if (insertRes.success) {
+                                this._notifierService.showSuccess('Thêm quyền thành công');
+                                this.updateDataSource(insertRes.data);
+                                return [2 /*return*/];
+                            }
+                            this._notifierService.showWarning('Có lỗi trong quá trình xử lý, vui lòng thử lại');
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        SettingAuthorizeButtonComponent.prototype.deleteBasePermission = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    this._notifierService.showConfirm('Xác nhận xóa quyền').then(function (res) { return __awaiter(_this, void 0, void 0, function () {
+                        var deleteRes;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    if (!res)
+                                        return [2 /*return*/];
+                                    return [4 /*yield*/, this._basePermissionService.delete(rowData.id)];
+                                case 1:
+                                    deleteRes = _b.sent();
+                                    if (deleteRes.success) {
+                                        this._notifierService.showSuccess('Xóa quyền thành công');
+                                        this.updateDataSource(rowData.id, true);
+                                        return [2 /*return*/];
+                                    }
+                                    this._notifierService.showWarning(deleteRes.message);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        SettingAuthorizeButtonComponent.prototype.updateDataSource = function (id, isDeleted) {
+            if (isDeleted === void 0) { isDeleted = false; }
+            var currentRow = this.model.dataSource.find(function (p) { return p.id == id; });
+            if (!currentRow)
+                return;
+            if (isDeleted) {
+                currentRow.id = this._commonService.guid();
+            }
+            currentRow.isAuthorize = !isDeleted;
+            this.afterGetData();
+        };
+        SettingAuthorizeButtonComponent.prototype.afterGetData = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    this._unmarkLoading();
+                    if (!this.model.dataSource.length)
+                        return [2 /*return*/];
+                    this.model.dataSource.forEach(function (item) {
+                        item.name = item.rawText;
+                        item.code = item.permissionCode;
+                        item.moduleCode = _this.appCode;
+                    });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        SettingAuthorizeButtonComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            var _a;
+            var buttonSetting = JSON.parse(sessionStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE) || '{}');
+            buttonSetting[_a = this.authorizeButtonKey] || (buttonSetting[_a] = []);
+            this.model.dataSource.forEach(function (rowData) {
+                var _a;
+                var buttonItem = (_a = buttonSetting[_this.authorizeButtonKey]) === null || _a === void 0 ? void 0 : _a.find(function (p) { return p.code == rowData.code; });
+                if (rowData.isAuthorize && !buttonItem) {
+                    buttonSetting[_this.authorizeButtonKey].push({
+                        id: rowData.id,
+                        code: rowData.code,
+                    });
+                }
+                else if (!rowData.isAuthorize && buttonItem) {
+                    var index = buttonSetting[_this.authorizeButtonKey].indexOf(buttonItem);
+                    buttonSetting[_this.authorizeButtonKey].splice(index, 1);
+                }
+            });
+            sessionStorage.setItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE, JSON.stringify(buttonSetting));
+        };
+        return SettingAuthorizeButtonComponent;
+    }(DataListBase));
+    SettingAuthorizeButtonComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'settings-authorize-button',
+                    template: "<crud-list #crudList [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [hiddenAdd]=\"true\" [hiddenDelete]=\"true\" [hiddenCopyLink]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\" (onCopyLink)=\"_copyLink($event)\"\n    (onCopyLinkMultiple)=\"_copyLinkMultiple()\">\n    <ng-template #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.isAuthorize\" class=\"p-button-rounded p-button-text p-button-info link-or-action\"\n            type=\"button\" pButton icon=\"pi pi-plus\" pTooltip=\"Th\u00EAm m\u1EDBi\" (click)=\"addBasePermission(rowData)\"></button>\n        <button *ngIf=\"rowData.isAuthorize\"\n            class=\"p-button-rounded  p-button-text p-button-danger p-button-info link-or-action\" type=\"button\" pButton\n            icon=\"pi pi-trash\" pTooltip=\"X\u00F3a\" (click)=\"deleteBasePermission(rowData)\"></button>\n    </ng-template>\n</crud-list>",
+                    providers: [ComponentContextService],
+                    styles: [""]
+                },] }
+    ];
+    SettingAuthorizeButtonComponent.ctorParameters = function () { return [
+        { type: i0.Injector },
+        { type: BasePermissionService },
+        { type: ModuleConfigService }
+    ]; };
+    SettingAuthorizeButtonComponent.propDecorators = {
+        authorizeButtonKey: [{ type: i0.Input }],
+        dataSource: [{ type: i0.Input }]
+    };
+
     var SettingsRowComponent = /** @class */ (function (_super) {
         __extends(SettingsRowComponent, _super);
         function SettingsRowComponent(_injector, _domService, _userService) {
@@ -50197,177 +51223,6 @@
         parentSetting: [{ type: i0.Input }]
     };
 
-    var SettingAuthorizeButtonComponent = /** @class */ (function (_super) {
-        __extends(SettingAuthorizeButtonComponent, _super);
-        function SettingAuthorizeButtonComponent(_injector, _basePermissionService, _moduleConfigService) {
-            var _this = _super.call(this, _injector) || this;
-            _this._injector = _injector;
-            _this._basePermissionService = _basePermissionService;
-            _this._moduleConfigService = _moduleConfigService;
-            _this.authorizeButtonKey = '';
-            _this.dataSource = [];
-            _this.appCode = '';
-            return _this;
-        }
-        SettingAuthorizeButtonComponent.prototype.ngOnInit = function () {
-            this.appCode = this._moduleConfigService.getConfig().appCode;
-            this.setting.baseService = this._basePermissionService;
-            this.customGetData = true;
-            this.setting.hiddenAdvanceSearch = true;
-            this.setting.hiddenHeader = true;
-            this.setting.heightType = exports.HeightType.dynamic;
-            this.setting.hiddenOrderColumn = true;
-            this.setting.hiddenFilterRow = true;
-            this.setting.hiddenSettingWorkflow = true;
-            this.setting.hiddenAuthorizeButton = true;
-            this.setting.hiddenSettingPermission = true;
-            this.setting.fixHeightTypeInDialog = false;
-            this.setting.hiddenCheckbox = false;
-            this.setting.showEditLink = false;
-            this.setting.modelSchemas = [
-                new ModelSchema({
-                    field: 'permissionCode',
-                    name: 'Mã',
-                }),
-                new ModelSchema({
-                    field: 'rawText',
-                    name: 'Tên',
-                }),
-                new ModelSchema({
-                    field: 'isAuthorize',
-                    name: 'Đã tạo quyền',
-                }),
-                new ModelSchema({
-                    field: 'ma1',
-                    name: 'Mã',
-                }),
-            ];
-            this.setting.cols = [
-                new ColumnSchemaBase({ field: 'permissionCode', sort: false, showEditLink: false }),
-                new ColumnSchemaBase({ field: 'rawText', width: '300px', sort: false }),
-                new ColumnSchemaBase({ field: 'isAuthorize', dataType: exports.DataType.boolean, width: '100px', sort: false }),
-            ];
-            _super.prototype.ngOnInit.call(this);
-        };
-        SettingAuthorizeButtonComponent.prototype.getDataCustom = function (gridInfo) {
-            this.model.dataSource = this.dataSource;
-            this.afterGetData();
-        };
-        SettingAuthorizeButtonComponent.prototype.addBasePermission = function (rowData) {
-            return __awaiter(this, void 0, void 0, function () {
-                var insertRes;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this._basePermissionService.post(rowData)];
-                        case 1:
-                            insertRes = _b.sent();
-                            if (insertRes.success) {
-                                this._notifierService.showSuccess('Thêm quyền thành công');
-                                this.updateDataSource(insertRes.data);
-                                return [2 /*return*/];
-                            }
-                            this._notifierService.showWarning('Có lỗi trong quá trình xử lý, vui lòng thử lại');
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        SettingAuthorizeButtonComponent.prototype.deleteBasePermission = function (rowData) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_b) {
-                    this._notifierService.showConfirm('Xác nhận xóa quyền').then(function (res) { return __awaiter(_this, void 0, void 0, function () {
-                        var deleteRes;
-                        return __generator(this, function (_b) {
-                            switch (_b.label) {
-                                case 0:
-                                    if (!res)
-                                        return [2 /*return*/];
-                                    return [4 /*yield*/, this._basePermissionService.delete(rowData.id)];
-                                case 1:
-                                    deleteRes = _b.sent();
-                                    if (deleteRes.success) {
-                                        this._notifierService.showSuccess('Xóa quyền thành công');
-                                        this.updateDataSource(rowData.id, true);
-                                        return [2 /*return*/];
-                                    }
-                                    this._notifierService.showWarning(deleteRes.message);
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); });
-                    return [2 /*return*/];
-                });
-            });
-        };
-        SettingAuthorizeButtonComponent.prototype.updateDataSource = function (id, isDeleted) {
-            if (isDeleted === void 0) { isDeleted = false; }
-            var currentRow = this.model.dataSource.find(function (p) { return p.id == id; });
-            if (!currentRow)
-                return;
-            if (isDeleted) {
-                currentRow.id = this._commonService.guid();
-            }
-            currentRow.isAuthorize = !isDeleted;
-            this.afterGetData();
-        };
-        SettingAuthorizeButtonComponent.prototype.afterGetData = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_b) {
-                    this._unmarkLoading();
-                    if (!this.model.dataSource.length)
-                        return [2 /*return*/];
-                    this.model.dataSource.forEach(function (item) {
-                        item.name = item.rawText;
-                        item.code = item.permissionCode;
-                        item.moduleCode = _this.appCode;
-                    });
-                    return [2 /*return*/];
-                });
-            });
-        };
-        SettingAuthorizeButtonComponent.prototype.ngOnDestroy = function () {
-            var _this = this;
-            var _a;
-            var buttonSetting = JSON.parse(sessionStorage.getItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE) || '{}');
-            buttonSetting[_a = this.authorizeButtonKey] || (buttonSetting[_a] = []);
-            this.model.dataSource.forEach(function (rowData) {
-                var _a;
-                var buttonItem = (_a = buttonSetting[_this.authorizeButtonKey]) === null || _a === void 0 ? void 0 : _a.find(function (p) { return p.code == rowData.code; });
-                if (rowData.isAuthorize && !buttonItem) {
-                    buttonSetting[_this.authorizeButtonKey].push({
-                        id: rowData.id,
-                        code: rowData.code,
-                    });
-                }
-                else if (!rowData.isAuthorize && buttonItem) {
-                    var index = buttonSetting[_this.authorizeButtonKey].indexOf(buttonItem);
-                    buttonSetting[_this.authorizeButtonKey].splice(index, 1);
-                }
-            });
-            sessionStorage.setItem(ComCtxConstants.LOCALSTORAGE_KEY.BUTTON_AUTHORIZE, JSON.stringify(buttonSetting));
-        };
-        return SettingAuthorizeButtonComponent;
-    }(DataListBase));
-    SettingAuthorizeButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'settings-authorize-button',
-                    template: "<crud-list #crudList [menuButtons]=\"getMenuButtons\" [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\n    [hiddenAdd]=\"true\" [hiddenDelete]=\"true\" [hiddenCopyLink]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n    (onAdd)=\"_add($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\n    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\" (onCopyLink)=\"_copyLink($event)\"\n    (onCopyLinkMultiple)=\"_copyLinkMultiple()\">\n    <ng-template #function let-rowData=\"rowData\">\n        <button *ngIf=\"!rowData.isAuthorize\" class=\"p-button-rounded p-button-text p-button-info link-or-action\"\n            type=\"button\" pButton icon=\"pi pi-plus\" pTooltip=\"Th\u00EAm m\u1EDBi\" (click)=\"addBasePermission(rowData)\"></button>\n        <button *ngIf=\"rowData.isAuthorize\"\n            class=\"p-button-rounded  p-button-text p-button-danger p-button-info link-or-action\" type=\"button\" pButton\n            icon=\"pi pi-trash\" pTooltip=\"X\u00F3a\" (click)=\"deleteBasePermission(rowData)\"></button>\n    </ng-template>\n</crud-list>",
-                    providers: [ComponentContextService],
-                    styles: [""]
-                },] }
-    ];
-    SettingAuthorizeButtonComponent.ctorParameters = function () { return [
-        { type: i0.Injector },
-        { type: BasePermissionService },
-        { type: ModuleConfigService }
-    ]; };
-    SettingAuthorizeButtonComponent.propDecorators = {
-        authorizeButtonKey: [{ type: i0.Input }],
-        dataSource: [{ type: i0.Input }]
-    };
-
     var SettingsComponent = /** @class */ (function (_super) {
         __extends(SettingsComponent, _super);
         function SettingsComponent(_injector, _domService, _userService) {
@@ -54348,164 +55203,6 @@
                 },] }
     ];
 
-    /* eslint-disable prefer-const */
-    var HtmlPreviewComponent = /** @class */ (function () {
-        function HtmlPreviewComponent(gs, _commonService) {
-            this.gs = gs;
-            this._commonService = _commonService;
-            this.control = new HtmlPreviewControlSchema();
-            this.onChanged = new i0.EventEmitter();
-            this.content = '';
-            this.id = '';
-            this.id = this._commonService.guid();
-        }
-        // ngOnChanges(changes: SimpleChanges) {
-        //     if (changes['content']) {
-        //         this.renderMath();
-        //     }
-        // }
-        HtmlPreviewComponent.prototype.writeValue = function (obj) {
-            if (obj) {
-                this.content = obj;
-            }
-            else {
-                this.content = '';
-            }
-            this.renderMath();
-        };
-        HtmlPreviewComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        HtmlPreviewComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        HtmlPreviewComponent.prototype.renderMath = function () {
-            var _this = this;
-            this.mathJaxObject = this.gs.nativeGlobal()['MathJax'];
-            if (!this.mathJaxObject && !this.mathContent) {
-                return;
-            }
-            setTimeout(function () {
-                var _a, _b;
-                var $this = _this;
-                var autoScrollBottom = !!((_a = $this.control) === null || _a === void 0 ? void 0 : _a.autoScrollBottom);
-                var output = $this.mathContent.nativeElement;
-                var content = ((_b = $this.content) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-                if (!$this.control.isHtml) {
-                    content = content.replace(/\n/g, '<br>');
-                }
-                output.innerHTML = content;
-                if ($this.mathJaxObject.texReset) {
-                    $this.mathJaxObject.texReset();
-                }
-                if ($this.mathJaxObject.typesetClear) {
-                    $this.mathJaxObject.typesetClear();
-                }
-                if ($this.mathJaxObject.typesetPromise) {
-                    $this.mathJaxObject.typesetPromise([output]).catch(function (err) {
-                        output.innerHTML = '';
-                        output.appendChild(document.createTextNode(err.message));
-                        console.error(err);
-                    }).then(function () {
-                        var _a, _b, _c;
-                        // Do something after typeset
-                        if (autoScrollBottom) {
-                            var box = document.querySelector("#math-preview-box-" + $this.id);
-                            var elem = box.getElementsByClassName('ps--active-y')[0];
-                            if (elem) {
-                                elem.scrollTop = elem.scrollHeight;
-                            }
-                        }
-                        var value = (_c = (_b = (_a = document.getElementById("mathPreview-" + $this.id)) === null || _a === void 0 ? void 0 : _a.innerHTML) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
-                        $this.onChange(value);
-                        $this.onChanged.emit(value);
-                    });
-                }
-                return $this.mathJaxObject.startup.defaultPageReady ? $this.mathJaxObject.startup.defaultPageReady() : $this.mathJaxObject.startup.defaultPageReady;
-            });
-        };
-        HtmlPreviewComponent.prototype.loadMathConfig = function () {
-            var _this = this;
-            var _a, _b, _c;
-            var wd = this.gs.nativeGlobal();
-            wd.MathJax = {
-                'loader': { load: ['input/asciimath', 'output/chtml', 'ui/menu', 'output/svg', '[mml]/mml3'] },
-                'tex': {
-                    inlineMath: [['$', '$'], ['\\(', '\\)']],
-                    processEscapes: true
-                },
-                'startup': {
-                    pageReady: function () { return _this.renderMath(); }
-                },
-                'svg': {
-                    scale: 1,
-                    minScale: .5
-                },
-                'options': {
-                    enableMenu: !!((_a = this.control) === null || _a === void 0 ? void 0 : _a.useMathJaxMenu),
-                    menuOptions: {
-                        settings: {
-                            texHints: true,
-                            semantics: false,
-                            zoom: 'Double-Click',
-                            zscale: '200%',
-                            renderer: ((_b = this.control) === null || _b === void 0 ? void 0 : _b.mathJaxType) ? this.control.mathJaxType : 'CHTML',
-                            scale: 1,
-                            inTabOrder: true,
-                            assistiveMml: true,
-                            collapsible: false,
-                            explorer: false, // true if the expression explorer should be active
-                        },
-                        annotationTypes: {
-                            TeX: ['TeX', 'LaTeX', 'application/x-tex'],
-                            StarMath: ['StarMath 5.0'],
-                            Maple: ['Maple'],
-                            ContentMathML: ['MathML-Content', 'application/mathml-content+xml'],
-                            OpenMath: ['OpenMath']
-                        }
-                    }
-                }
-            };
-            var script = document.createElement('script');
-            if (((_c = this.control) === null || _c === void 0 ? void 0 : _c.mathJaxType) == 'SVG') {
-                script.src = 'assets/vendor/mathjax/tex-mml-svg.js';
-            }
-            else {
-                script.src = 'assets/vendor/mathjax/tex-mml-chtml.js';
-            }
-            script.setAttribute('id', 'MathJax-script');
-            document.head.appendChild(script);
-        };
-        HtmlPreviewComponent.prototype.ngOnInit = function () {
-            this.loadMathConfig();
-        };
-        return HtmlPreviewComponent;
-    }());
-    HtmlPreviewComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'html-preview',
-                    template: "<div class=\"preview-box\" id=\"math-preview-box-{{id}}\" [ngStyle]=\"{'height': control.height + 'px'}\">\n    <tn-custom-scrollbar [showScrollHorizontal]=\"true\">\n        <div #mathContent id=\"mathPreview-{{id}}\"></div>\n    </tn-custom-scrollbar>\n</div>",
-                    providers: [
-                        ComponentContextService,
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return HtmlPreviewComponent; }),
-                            multi: true
-                        },
-                    ],
-                    styles: ["::ng-deep html-preview .preview-box{border:1px solid #ced4da;padding:10px}"]
-                },] }
-    ];
-    HtmlPreviewComponent.ctorParameters = function () { return [
-        { type: GlobalService },
-        { type: CommonService }
-    ]; };
-    HtmlPreviewComponent.propDecorators = {
-        mathContent: [{ type: i0.ViewChild, args: ['mathContent',] }],
-        control: [{ type: i0.Input }],
-        onChanged: [{ type: i0.Output }]
-    };
-
     function coreDeclaration() {
         return [
             AddressComponent,
@@ -54665,7 +55362,6 @@
             core.TranslateModule,
             tree.TreeModule,
             scrollpanel.ScrollPanelModule,
-            autocomplete.AutoCompleteModule,
             paginator.PaginatorModule,
             blockui.BlockUIModule,
             menu.MenuModule,
@@ -54697,6 +55393,7 @@
             steps.StepsModule,
             progressspinner.ProgressSpinnerModule,
             ngxDragDrop.DndModule,
+            AutoCompleteModule,
             dragdrop.DragDropModule
         ];
     }
@@ -55323,6 +56020,9 @@
     exports["ɵdy"] = SettingsWorkflowNo1Component;
     exports["ɵdz"] = HtmlPreviewComponent;
     exports["ɵe"] = ListBase;
+    exports["ɵea"] = AUTOCOMPLETE_VALUE_ACCESSOR;
+    exports["ɵeb"] = AutoComplete;
+    exports["ɵec"] = AutoCompleteModule;
     exports["ɵf"] = ListComponentBase;
     exports["ɵg"] = TreeTableComponent;
     exports["ɵh"] = NotFoundComponent;