tnx-shared 5.1.202 → 5.1.203

package/bundles/tnx-shared.umd.js

@@ -4186,6 +4186,7 @@
             _this.multiple = false;
             _this.maxSelectedLabels = 5;
             _this.maxItemDisplay = 50;
+            _this.fitPanel = true;
             _this.enableCaching = true;
             _this.needClone = false; // Sử dụng trong table schema, khi datasource của một cột trên mỗi dòng là khác nhau cần set needClone = true
             _this.quickAdd = false;
@@ -4397,6 +4398,7 @@
             this.sortField = '';
             this.sortDir = 1;
             this.fieldPlus = '';
+            this.page = 1;
             this.pageSize = 666;
             this.isServerLoad = false;
             this.refFields = [];
@@ -5786,7 +5788,7 @@
             });
             if (result.isServerLoad) {
                 result.pageSize = schema.pageSize;
-                // result.pageSize = 5;
+                // result.pageSize = 2;
             }
             return result;
         };
@@ -6775,15 +6777,19 @@
         BaseService.prototype.generateGridInfoDropdown = function (filters, options) {
             var gridInfo = {
                 pageInfo: {
-                    page: 1,
+                    page: options.page,
                     pageSize: options.pageSize
                 },
                 filters: filters,
                 sorts: [],
                 fields: null
             };
-            var strField = "" + options.valueField + (options.displayField == options.valueField ? '' : ',' + options.displayField) + options.fieldPlus;
-            gridInfo.fields = this._commonService.addDistinct(strField.split(','), []).toString();
+            var lstField = [
+                options.valueField,
+                options.displayField
+            ];
+            lstField.push.apply(lstField, __spread(options.fieldPlus.split(',').filter(function (q) { return !!q; })));
+            gridInfo.fields = this._commonService.addDistinct(lstField, []).toString();
             if (options.sorts != null && options.sorts.length > 0) {
                 gridInfo.sorts = __spread(options.sorts);
             }
@@ -6793,7 +6799,7 @@
             return gridInfo;
         };
         BaseService.prototype.setDefaultOptions = function (options) {
-            if (options.fieldPlus.length > 0 && !options.fieldPlus.startsWith(',')) {
+            if (options.fieldPlus.length && !options.fieldPlus.startsWith(',')) {
                 options.fieldPlus = ',' + options.fieldPlus;
             }
             if (options.sortField == '') {
@@ -6801,43 +6807,47 @@
             }
         };
         BaseService.prototype.setDefaultOptionsTree = function (options, fieldParent) {
+            if (options.fieldPlus.length && !options.fieldPlus.startsWith(',')) {
+                options.fieldPlus = ',' + options.fieldPlus;
+            }
             if (options.fieldPlus.length > 0) {
                 options.fieldPlus += ',';
             }
             options.fieldPlus += fieldParent;
-            if (options.fieldPlus.length > 0 && !options.fieldPlus.startsWith(',')) {
-                options.fieldPlus = ',' + options.fieldPlus;
-            }
         };
         BaseService.prototype.getDataDropdown = function (options) {
+            return this.getDataDropdownByFilter([], options);
+        };
+        BaseService.prototype.getDataDropdownByFilter = function (filters, options) {
             var _this = this;
-            if (options == null)
-                options = new DropdownOptions();
-            this.setDefaultOptions(options);
             return new Promise(function (resolve, reject) {
-                _this.getByGridRequest(_this.generateGridInfoDropdown([], options), options.plusUrl)
+                _this.getDataDropdownByFilterRaw(filters, options)
                     .then(function (res) {
                     resolve(res.data);
-                }).catch(function (err) { return reject(err); });
+                })
+                    .catch(function (err) { return reject(err); });
             });
         };
-        BaseService.prototype.getDataDropdownByFilter = function (filters, options) {
-            var _this = this;
+        BaseService.prototype.getDataDropdownByFilterRaw = function (filters, options) {
             if (options == null)
                 options = new DropdownOptions();
             this.setDefaultOptions(options);
+            return this._getDataDropdownByFilter(filters, options);
+        };
+        BaseService.prototype._getDataDropdownByFilter = function (filters, options) {
+            var _this = this;
             return new Promise(function (resolve, reject) {
                 var gridInfo = _this.generateGridInfoDropdown(filters, options);
                 if (options.isServerLoad) {
                     _this.getByGridRequest(gridInfo, options.plusUrl)
                         .then(function (res) {
-                        resolve(res.data);
+                        resolve(res);
                     }).catch(function (err) { return reject(err); });
                 }
                 else {
                     _this.getAllByGridInfo(gridInfo, options.plusUrl)
                         .then(function (res) {
-                        resolve(res.data);
+                        resolve(res);
                     }).catch(function (err) { return reject(err); });
                 }
             });
@@ -6870,38 +6880,34 @@
             return result;
         };
         BaseService.prototype.getTreeDataDropdown = function (fieldParent, valueParentRoot, options) {
+            if (valueParentRoot === void 0) { valueParentRoot = -1; }
+            return this.getTreeDataDropdownByFilter([], fieldParent, valueParentRoot, options);
+        };
+        BaseService.prototype.getTreeDataDropdownByFilter = function (filters, fieldParent, valueParentRoot, options) {
             var _this = this;
             if (valueParentRoot === void 0) { valueParentRoot = -1; }
-            if (options == null)
-                options = new DropdownOptions();
-            this.setDefaultOptionsTree(options, fieldParent);
             return new Promise(function (resolve, reject) {
-                _this.getByGridRequest(_this.generateGridInfoDropdown([], options))
+                _this.getTreeDataDropdownByFilterRaw(filters, fieldParent, valueParentRoot, options)
                     .then(function (res) {
-                    resolve(_this.getTreeData(res.data, fieldParent, valueParentRoot, options));
-                }).catch(function (err) { return reject(err); });
+                    resolve(res.data);
+                })
+                    .catch(function (err) { return reject(err); });
             });
         };
-        BaseService.prototype.getTreeDataDropdownByFilter = function (filters, fieldParent, valueParentRoot, options) {
+        BaseService.prototype.getTreeDataDropdownByFilterRaw = function (filters, fieldParent, valueParentRoot, options) {
             var _this = this;
             if (valueParentRoot === void 0) { valueParentRoot = -1; }
             if (options == null)
                 options = new DropdownOptions();
             this.setDefaultOptionsTree(options, fieldParent);
             return new Promise(function (resolve, reject) {
-                var gridInfo = _this.generateGridInfoDropdown(filters, options);
-                if (options.isServerLoad) {
-                    _this.getByGridRequest(gridInfo, options.plusUrl)
-                        .then(function (res) {
-                        resolve(_this.getTreeData(res.data, fieldParent, valueParentRoot, options));
-                    }).catch(function (err) { return reject(err); });
-                }
-                else {
-                    _this.getAllByGridInfo(gridInfo, options.plusUrl)
-                        .then(function (res) {
-                        resolve(_this.getTreeData(res.data, fieldParent, valueParentRoot, options));
-                    }).catch(function (err) { return reject(err); });
-                }
+                _this._getDataDropdownByFilter(filters, options)
+                    .then(function (res) {
+                    var treeData = _this.getTreeData(res.data, fieldParent, valueParentRoot, options);
+                    res.data = treeData;
+                    resolve(res);
+                })
+                    .catch(function (err) { return reject(err); });
             });
         };
         BaseService.prototype.getDetail = function (id) {
@@ -33968,9 +33974,8 @@
 
     var DropdownComponent = /** @class */ (function (_super) {
         __extends(DropdownComponent, _super);
-        function DropdownComponent(_dropDownService, _deviceDetectorService, injector, _crudService) {
+        function DropdownComponent(_deviceDetectorService, injector, _crudService) {
             var _this = _super.call(this, injector) || this;
-            _this._dropDownService = _dropDownService;
             _this._deviceDetectorService = _deviceDetectorService;
             _this.disableDisplayFieldServerSearch = false;
             _this.control = new DropdownControlSchema();
@@ -33997,14 +34002,19 @@
             _this.funcReturnValue = function (value) { return value; };
             _this.hideTransitionOptions = '195ms ease-in';
             _this.showTransitionOptions = '225ms ease-out';
+            _this.virtualScroll = true;
             _this.valueSearchServer = '';
             _this.keyUp = new rxjs.Subject();
             _this._hasLoadedDatasource = false;
             _this.showQuickAddForm = false;
             _this.formModel = {};
             _this.flashCacheParent = [];
+            _this.filterFromParents = [];
             _this.dropdownOptions = [];
             _this.delayFilter = 100;
+            _this.loading = false;
+            _this.page = 1;
+            _this.totalPage = 2;
             _this.modifyOptionWhenFilter = function (options) {
                 _this.dropdownOptions = _this.dropdown._options;
                 _this._modifyOptionWhenFilter(options);
@@ -34013,6 +34023,16 @@
                 _this.dropdownOptions = _this.multiSelect._options;
                 _this._modifyOptionWhenFilter(options);
             };
+            _this.handleScroll = function (evt) {
+                if (evt.srcElement.scrollTop > 0
+                    && evt.srcElement.offsetHeight + evt.srcElement.scrollTop == evt.srcElement.scrollHeight) {
+                    if (_this.timeoutScroll)
+                        clearTimeout(_this.timeoutScroll);
+                    _this.timeoutScroll = setTimeout(function (f) {
+                        _this.getDataNextPage();
+                    }, 150);
+                }
+            };
             return _this;
         }
         Object.defineProperty(DropdownComponent.prototype, "showClear", {
@@ -34035,7 +34055,7 @@
         });
         Object.defineProperty(DropdownComponent.prototype, "dataSource", {
             set: function (value) {
-                this.combineDataSource(value);
+                this.combineDataSource(value, 1);
                 this.checkAndFireEvent();
             },
             enumerable: false,
@@ -34070,6 +34090,15 @@
         });
         DropdownComponent.prototype.ngOnInit = function () {
             var _this = this;
+            if (this.control.fitPanel) {
+                var classWrapContent = '--wrap-content';
+                if (!this.control.panelClass) {
+                    this.control.panelClass = classWrapContent;
+                }
+                else {
+                    this.control.panelClass += " " + classWrapContent;
+                }
+            }
             this.control._component = this;
             if (this.control.placeholder == null && this.control.multiple) {
                 this.control.placeholder = 'Chưa chọn bản ghi';
@@ -34077,6 +34106,7 @@
             this.setDefaultSetting();
             if (this.control.baseService) {
                 if (this.control.isServerLoad) {
+                    this.virtualScroll = false;
                     this.createFilterFunction();
                     this.subscription = this.keyUp.pipe(operators.map(function (event) { return event.target.value; }), operators.debounceTime(500), operators.distinctUntilChanged()).subscribe(function (value) {
                         _this._getData();
@@ -34221,49 +34251,35 @@
             }
         };
         DropdownComponent.prototype.getData = function (filterParents) {
-            this._getData(filterParents);
+            if (!filterParents)
+                filterParents = [];
+            this.filterFromParents = filterParents;
+            this._getData();
         };
-        DropdownComponent.prototype.combineDataSource = function (dataSource) {
-            var _this = this;
+        DropdownComponent.prototype.combineDataSource = function (dataSource, page) {
             if (!dataSource)
                 dataSource = [];
             if (this.control.isServerLoad) {
-                var tmpDataSource_1 = __spread(dataSource);
-                if (this.dataSourceSelected && this.dataSourceSelected) {
+                if (page > 1) {
+                    if (this.dropdown)
+                        this.dropdown.selectedOptionUpdated = false;
+                    // Append thêm datasource
+                    var tmpDataSource_1 = __spread(this.dataSourceInternal);
+                    this.appendDataSource(tmpDataSource_1, dataSource);
+                    if (tmpDataSource_1.length == this.dataSourceInternal.length) {
+                        return this.getDataNextPage();
+                    }
+                    this.dataSourceInternal = tmpDataSource_1;
+                    return;
+                }
+                var tmpDataSource = __spread(dataSource);
+                if (this.dataSourceSelected && this.dataSourceSelected.length) {
                     this._hasLoadedDatasource = true;
                     if (!this.valueSearchServer) {
-                        if (this.control.isTree) {
-                            this.dataSourceSelected.forEach(function (source) {
-                                var index = tmpDataSource_1.findIndex(function (q) { return q.value[_this.control.fieldMaPhanCap] > source.value[_this.control.fieldMaPhanCap]; });
-                                if (index == -1) {
-                                    tmpDataSource_1.push(source);
-                                }
-                                else if (index == 0) {
-                                    tmpDataSource_1.unshift(source);
-                                }
-                                else {
-                                    // Nếu bản ghi ngay trước vị trí cần insert là bản ghi hiện tại thì k insert
-                                    if (tmpDataSource_1[index - 1].value[_this.control.valueField] == source.value[_this.control.valueField]) {
-                                        if (!source.disabled) {
-                                            tmpDataSource_1[index - 1].disabled = false;
-                                        }
-                                        return;
-                                    }
-                                    tmpDataSource_1.splice(index, 0, source);
-                                }
-                            });
-                        }
-                        else {
-                            this.dataSourceSelected.forEach(function (source) {
-                                var index = tmpDataSource_1.findIndex(function (q) { return q.value[_this.control.valueField] == source.value[_this.control.valueField]; });
-                                if (index == -1) {
-                                    tmpDataSource_1.unshift(source);
-                                }
-                            });
-                        }
+                        this.appendDataSource(tmpDataSource, this.dataSourceSelected, -1);
                     }
                 }
-                this.dataSourceInternal = tmpDataSource_1;
+                this.dataSourceInternal = tmpDataSource;
             }
             else {
                 this.dataSourceInternal = dataSource;
@@ -34272,6 +34288,49 @@
                 }
             }
         };
+        DropdownComponent.prototype.appendDataSource = function (destSource, dataSource, direction) {
+            var _this = this;
+            if (direction === void 0) { direction = 1; }
+            if (this.control.isTree) {
+                dataSource.forEach(function (source) {
+                    var index = destSource.findIndex(function (q) { return q.value[_this.control.fieldMaPhanCap] > source.value[_this.control.fieldMaPhanCap]; });
+                    if (index == -1) {
+                        if (direction == -1) {
+                            destSource.unshift(source);
+                        }
+                        else {
+                            destSource.push(source);
+                        }
+                    }
+                    else if (index == 0) {
+                        destSource.unshift(source);
+                    }
+                    else {
+                        // Nếu bản ghi ngay trước vị trí cần insert là bản ghi hiện tại thì k insert
+                        if (destSource[index - 1].value[_this.control.valueField] == source.value[_this.control.valueField]) {
+                            if (!source.disabled) {
+                                destSource[index - 1].disabled = false;
+                            }
+                            return;
+                        }
+                        destSource.splice(index, 0, source);
+                    }
+                });
+            }
+            else {
+                dataSource.forEach(function (source) {
+                    var index = destSource.findIndex(function (q) { return q.value[_this.control.valueField] == source.value[_this.control.valueField]; });
+                    if (index == -1) {
+                        if (direction == -1) {
+                            destSource.unshift(source);
+                        }
+                        else {
+                            destSource.push(source);
+                        }
+                    }
+                });
+            }
+        };
         DropdownComponent.prototype.checkAndFireEvent = function (force) {
             if (force === void 0) { force = false; }
             if (!this._hasLoadedDatasource) {
@@ -34322,9 +34381,9 @@
         };
         DropdownComponent.prototype.setSelectedValue = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var filters, length, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var filters, length, dataSource;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (!this.control.isServerLoad) return [3 /*break*/, 2];
                             filters = [];
@@ -34336,12 +34395,12 @@
                             else {
                                 filters.push(this.newFilter(this.control.valueField, exports.Operator.equal, this._value));
                             }
-                            _a = this;
-                            return [4 /*yield*/, this._getDataSourceByService(filters, length)];
+                            return [4 /*yield*/, this._getDataSourceByService(filters, 1, length)];
                         case 1:
-                            _a.dataSourceSelected = _b.sent();
-                            this.combineDataSource(this.dataSourceInternal);
-                            _b.label = 2;
+                            dataSource = (_a.sent()).dataSource;
+                            this.dataSourceSelected = dataSource;
+                            this.combineDataSource(this.dataSourceInternal, 1);
+                            _a.label = 2;
                         case 2:
                             this.checkAndFireEvent();
                             return [2 /*return*/];
@@ -34446,15 +34505,14 @@
             this.dataSourceInternal = [];
             this._hasLoadedDatasource = false;
         };
-        DropdownComponent.prototype._getData = function (filterParents) {
+        DropdownComponent.prototype._getData = function (page) {
+            if (page === void 0) { page = 1; }
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             if (!this.control.baseService) return [3 /*break*/, 2];
-                            if (!filterParents)
-                                filterParents = [];
-                            return [4 /*yield*/, this._getDataSource(filterParents)];
+                            return [4 /*yield*/, this._getDataSource(page)];
                         case 1:
                             _a.sent();
                             _a.label = 2;
@@ -34463,23 +34521,29 @@
                 });
             });
         };
-        DropdownComponent.prototype._getDataSource = function (filterFromParents) {
+        DropdownComponent.prototype._getDataSource = function (page) {
             return __awaiter(this, void 0, void 0, function () {
-                var filters, dataSource;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.filterProcess(filterFromParents)];
+                var filters, _a, dataSource, totalPage;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            this.page = page;
+                            this.loading = true;
+                            return [4 /*yield*/, this.filterProcess(this.filterFromParents)];
                         case 1:
-                            filters = _a.sent();
+                            filters = _b.sent();
                             if (filters == null) {
-                                this.combineDataSource([]);
+                                this.loading = false;
+                                this.combineDataSource([], page);
                                 this.checkAndFireEvent(false);
                                 return [2 /*return*/];
                             }
-                            return [4 /*yield*/, this._getDataSourceByService(filters)];
+                            return [4 /*yield*/, this._getDataSourceByService(filters, page)];
                         case 2:
-                            dataSource = _a.sent();
-                            this.combineDataSource(dataSource);
+                            _a = _b.sent(), dataSource = _a.dataSource, totalPage = _a.totalPage;
+                            this.totalPage = totalPage;
+                            this.loading = false;
+                            this.combineDataSource(dataSource, page);
                             if (!this.control.isServerLoad) {
                                 this.checkAndFireEvent(true);
                             }
@@ -34503,16 +34567,19 @@
                 });
             });
         };
-        DropdownComponent.prototype._getDataSourceByService = function (filters, pageSize) {
+        DropdownComponent.prototype._getDataSourceByService = function (filters, page, pageSize) {
+            if (page === void 0) { page = 1; }
             if (pageSize === void 0) { pageSize = null; }
             return __awaiter(this, void 0, void 0, function () {
-                var dataSource, dropdownOptions, result, dataSource_3, dataSource_3_1, item;
+                var dataSource, totalPage, dropdownOptions, response, result, dataSource_3, dataSource_3_1, item;
                 var e_4, _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
                             dataSource = null;
+                            totalPage = 1;
                             dropdownOptions = this._crudService.createDropdownOptions(this.control);
+                            dropdownOptions.page = page;
                             if (pageSize) {
                                 dropdownOptions.pageSize = pageSize;
                             }
@@ -34520,19 +34587,24 @@
                             return [4 /*yield*/, this.control.baseService.getDataDropdownByFilter(this.control.groupCode, null, filters, dropdownOptions)];
                         case 1:
                             dataSource = _b.sent();
-                            return [3 /*break*/, 6];
+                            return [3 /*break*/, 7];
                         case 2:
+                            response = null;
                             if (!this.control.isTree) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.control.baseService.getTreeDataDropdownByFilter(filters, this.control.fieldTree, this.control.valueParentRoot, dropdownOptions)];
+                            return [4 /*yield*/, this.control.baseService.getTreeDataDropdownByFilterRaw(filters, this.control.fieldTree, this.control.valueParentRoot, dropdownOptions)];
                         case 3:
-                            dataSource = _b.sent();
+                            response = _b.sent();
                             return [3 /*break*/, 6];
-                        case 4: return [4 /*yield*/, this.control.baseService.getDataDropdownByFilter(filters, dropdownOptions)];
+                        case 4: return [4 /*yield*/, this.control.baseService.getDataDropdownByFilterRaw(filters, dropdownOptions)];
                         case 5:
-                            dataSource = _b.sent();
+                            response = _b.sent();
                             _b.label = 6;
-                        case 6: return [4 /*yield*/, this._crudService.getRefData(dataSource, dropdownOptions)];
-                        case 7:
+                        case 6:
+                            dataSource = response.data;
+                            totalPage = Math.ceil(response.totalRecord / dropdownOptions.pageSize);
+                            _b.label = 7;
+                        case 7: return [4 /*yield*/, this._crudService.getRefData(dataSource, dropdownOptions)];
+                        case 8:
                             _b.sent();
                             if (!dataSource)
                                 dataSource = [];
@@ -34550,7 +34622,7 @@
                                 }
                                 finally { if (e_4) throw e_4.error; }
                             }
-                            return [2 /*return*/, result];
+                            return [2 /*return*/, { dataSource: result, totalPage: totalPage }];
                     }
                 });
             });
@@ -34561,7 +34633,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            filters = filterFromParents;
+                            filters = __spread(filterFromParents);
                             return [4 /*yield*/, appendDefaultFilter(filters, this.control.defaultFilters)];
                         case 1:
                             _a.sent();
@@ -34717,9 +34789,15 @@
                 component: this,
                 event: evt
             });
+            if (this.control.panelClass) {
+                this.dropdown.overlay.style.width = this.dropdown.overlay.style.minWidth;
+            }
             if (!this.control.isServerLoad) {
                 return;
             }
+            // this.scrollContainer = this.dropdown.overlay.querySelector('.cdk-virtual-scroll-viewport');
+            this.scrollContainer = this.dropdown.overlay.querySelector('.p-dropdown-items-wrapper');
+            this.scrollContainer.addEventListener('scroll', this.handleScroll);
             var defaultInput = this.dropdown.filterViewChild.nativeElement;
             this._insertTextboxAndFocus(defaultInput);
             this.onShowSmartEvent.emit(evt);
@@ -34729,14 +34807,25 @@
                 component: this,
                 event: evt
             });
+            if (this.control.panelClass) {
+                this.multiSelect.overlay.style.width = this.multiSelect.overlay.style.minWidth;
+            }
             this.selectedValueBefore = this._value;
             if (!this.control.isServerLoad) {
                 return;
             }
+            this.scrollContainer = this.multiSelect.overlay.querySelector('.p-multiselect-items-wrapper');
+            this.scrollContainer.addEventListener('scroll', this.handleScroll);
             var defaultInput = this.multiSelect.filterInputChild.nativeElement;
             this._insertTextboxAndFocus(defaultInput);
             this.onShowSmartEvent.emit(evt);
         };
+        DropdownComponent.prototype.getDataNextPage = function () {
+            if (this.loading || this.page >= this.totalPage)
+                return;
+            this.page++;
+            this._getData(this.page);
+        };
         DropdownComponent.prototype._insertTextboxAndFocus = function (defaultInput) {
             this.input.nativeElement.classList.remove('hide');
             // defaultInput.disabled = true;
@@ -34762,6 +34851,9 @@
                 }
                 this.selectedValueBefore = this._value;
             }
+            if (this.scrollContainer) {
+                this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+            }
         };
         DropdownComponent.prototype.handleFocus = function (evt) {
             this.onFocus.emit(evt);
@@ -34786,13 +34878,12 @@
     DropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dropdown',
-                    template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\">\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [maxItemDisplay]=\"control.maxItemDisplay\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [selectedItemsLabel]=\"control.selectedItemsLabel\" [maxSelectedLabels]=\"control.maxSelectedLabels\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onChange)=\"onChangeSelected($event)\" (onClick)=\"onDropdownClickHandler($event)\"\r\n        (onPanelShow)=\"onPanelShowHandler($event)\" (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [(ngModel)]=\"valueSearchServer\"\r\n        (keyup)=\"keyUp.next($event)\" />\r\n    <button *ngIf=\"control.quickAdd && control.cols\" type=\"button\" pButton icon=\"pi pi-plus\"\r\n        class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\" tooltipPosition=\"top\"\r\n        (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"showQuickAddForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"'Th\u00EAm m\u1EDBi ' + control.label | translate\" [popupSize]=\"control.popupSize\"\r\n    (onHide)=\"showQuickAddForm = false\">\r\n    <quick-add-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\" [control]=\"control\"\r\n        [baseService]=\"control.baseService\" (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form>\r\n</tn-dialog>",
+                    template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\">\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [virtualScroll]=\"virtualScroll\" itemSize=\"30\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [autofocusSelectedItem]=\"false\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [selectedItemsLabel]=\"control.selectedItemsLabel\" [maxSelectedLabels]=\"control.maxSelectedLabels\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onChange)=\"onChangeSelected($event)\" (onClick)=\"onDropdownClickHandler($event)\"\r\n        (onPanelShow)=\"onPanelShowHandler($event)\" (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [disabled]=\"loading\"\r\n        [(ngModel)]=\"valueSearchServer\" (keyup)=\"keyUp.next($event)\" />\r\n    <button *ngIf=\"control.quickAdd && control.cols\" type=\"button\" pButton icon=\"pi pi-plus\"\r\n        class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\" tooltipPosition=\"top\"\r\n        (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"showQuickAddForm\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"'Th\u00EAm m\u1EDBi ' + control.label | translate\" [popupSize]=\"control.popupSize\"\r\n    (onHide)=\"showQuickAddForm = false\">\r\n    <quick-add-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\" [control]=\"control\"\r\n        [baseService]=\"control.baseService\" (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form>\r\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.input-mask{background:transparent;border:1px solid transparent;border-radius:3px;box-sizing:border-box;outline:none;padding-left:12px;position:absolute;width:100%;z-index:1}.input-mask.hide{display:none}.input-mask:focus{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa}.custom-select-item{align-items:center;background:#d2eefb;border:1px solid #a9d8ff;border-radius:3px;display:inline-flex;margin:0 0 0 3px;padding:3px 5px}.custom-select-item>span{color:#555;font-size:12px;margin-left:3px}.custom-select-item>span i{font-size:10px}.custom-select-item.min{margin-left:2px;padding:1px 5px}.custom-select-item:first-child{margin-left:0}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{box-sizing:border-box;height:22px;left:1px;padding:.2em;text-indent:1.5em;top:1px;width:calc(100% - 2px)}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}"]
                 },] }
     ];
     DropdownComponent.ctorParameters = function () { return [
-        { type: DropdownService },
         { type: ngxDeviceDetector.DeviceDetectorService },
         { type: i0.Injector },
         { type: CrudService }