@sd-angular/core 1.0.78 → 1.0.81

package/bundles/sd-angular-core-chip.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('uuid'), require('@angular/forms'), require('rxjs'), require('@sd-angular/core/utility'), require('@angular/material/autocomplete'), require('@sd-angular/core/common'), require('@angular/material/input'), require('@angular/material/form-field'), require('@sd-angular/core/translate'), require('@angular/material/chips')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/chip', ['exports', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/progress-spinner', '@angular/cdk/keycodes', 'rxjs/operators', 'uuid', '@angular/forms', 'rxjs', '@sd-angular/core/utility', '@angular/material/autocomplete', '@sd-angular/core/common', '@angular/material/input', '@angular/material/form-field', '@sd-angular/core/translate', '@angular/material/chips'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.chip = {}), global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.progressSpinner, global.ng.cdk.keycodes, global.rxjs.operators, global.uuid, global.ng.forms, global.rxjs, global['sd-angular'].core.utility, global.ng.material.autocomplete, global['sd-angular'].core.common, global.ng.material.input, global.ng.material.formField, global['sd-angular'].core.translate, global.ng.material.chips));
-}(this, (function (exports, core, common$1, icon, tooltip, progressSpinner, keycodes, operators, uuid, forms, rxjs, utility, autocomplete, common, input, formField, translate, chips) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('uuid'), require('@angular/forms'), require('rxjs'), require('@angular/material/autocomplete'), require('@sd-angular/core/common'), require('@angular/material/input'), require('@angular/material/form-field'), require('@sd-angular/core/translate'), require('@angular/material/chips')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/chip', ['exports', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/progress-spinner', '@angular/cdk/keycodes', 'rxjs/operators', 'uuid', '@angular/forms', 'rxjs', '@angular/material/autocomplete', '@sd-angular/core/common', '@angular/material/input', '@angular/material/form-field', '@sd-angular/core/translate', '@angular/material/chips'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.chip = {}), global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.progressSpinner, global.ng.cdk.keycodes, global.rxjs.operators, global.uuid, global.ng.forms, global.rxjs, global.ng.material.autocomplete, global['sd-angular'].core.common, global.ng.material.input, global.ng.material.formField, global['sd-angular'].core.translate, global.ng.material.chips));
+}(this, (function (exports, core, common$1, icon, tooltip, progressSpinner, keycodes, operators, uuid, forms, rxjs, autocomplete, common, input, formField, translate, chips) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -337,7 +337,7 @@
         { type: core.TemplateRef }
     ]; };
 
-    var _name, _form, _itemChanges, _items, _subscription, _updateValidator;
+    var _name, _form, _addable, _allItems, _allItem, _cache, _delay, _itemsChanges, _filteredItems, _subscription, _updateValidator, _loadItems, _loadSelectedItems;
     var SdChipErrotStateMatcher = /** @class */ (function () {
         function SdChipErrotStateMatcher(formControl) {
             this.formControl = formControl;
@@ -350,19 +350,35 @@
         return SdChipErrotStateMatcher;
     }());
     var SdChip = /** @class */ (function () {
-        function SdChip(ref, utilityService) {
+        function SdChip(ref) {
             var _this = this;
             this.ref = ref;
-            this.utilityService = utilityService;
             _name.set(this, uuid.v4());
             this.separatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
             this.selectable = true;
             _form.set(this, void 0);
+            _addable.set(this, void 0);
             this.removable = true;
-            _itemChanges.set(this, new rxjs.Subject());
-            _items.set(this, []);
+            // @Input() set items(items: undefined | any[]) {
+            //   if (!items) {
+            //     this.#items = [];
+            //   } else if (Array.isArray(items)) {
+            //     this.#items = items.filter(e => (e ?? '').toString().trim() !== '');
+            //   } else {
+            //     this.#items = items;
+            //   }
+            //   this.inputControl.updateValueAndValidity();
+            //   this.#itemChanges.next(this.items);
+            // }
+            // Server search
+            this.loading = false;
+            _allItems.set(this, void 0);
+            _allItem.set(this, {});
+            _cache.set(this, {});
+            _delay.set(this, 200); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện gọi hàm
+            _itemsChanges.set(this, new rxjs.BehaviorSubject([]));
             this.limit = 50;
-            this.selectedItems = [];
+            _filteredItems.set(this, void 0);
             // Validator
             this.isRequired = false;
             this.modelChange = new core.EventEmitter();
@@ -371,7 +387,7 @@
             this.chipSelected = new core.EventEmitter();
             this.isFocused = false;
             this.inputControl = new forms.FormControl();
-            this.formControl = new forms.FormControl();
+            this.formControl = new common.SdFormControl();
             this.matcher = new SdChipErrotStateMatcher(this.formControl);
             _subscription.set(this, new rxjs.Subscription());
             _updateValidator.set(this, function () {
@@ -392,40 +408,136 @@
                 _this.formControl.setAsyncValidators(asyncValidators);
                 _this.formControl.updateValueAndValidity();
             });
-            this.filter = function (value) {
-                return __classPrivateFieldGet(_this, _items).filter(function (item) {
-                    var _a;
-                    if ((_a = _this.formControl.value) === null || _a === void 0 ? void 0 : _a.some(function (val) { return val === item[_this.valueField]; })) {
-                        return false;
+            _loadItems.set(this, function (searchText, items) { return __awaiter(_this, void 0, void 0, function () {
+                var results, objItem, selectedItems;
+                var _this = this;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            searchText = (searchText === null || searchText === void 0 ? void 0 : searchText.toString()) || '';
+                            if (!(__classPrivateFieldGet(this, _cache)[searchText] === undefined)) return [3 /*break*/, 2];
+                            this.loading = true;
+                            return [4 /*yield*/, items(searchText).catch(function () { return []; }).finally(function () { return _this.loading = false; })];
+                        case 1:
+                            results = _f.sent();
+                            objItem = Array.toObject(results, this.valueField);
+                            __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _allItem)), objItem));
+                            __classPrivateFieldGet(this, _cache)[searchText] = results.union(this.valueField);
+                            _f.label = 2;
+                        case 2: return [4 /*yield*/, __classPrivateFieldGet(this, _loadSelectedItems).call(this, this.formControl.value, items)];
+                        case 3:
+                            selectedItems = _f.sent();
+                            // Đưa những selectedItems lên đầu nếu không mat-select-trigger sẽ không work
+                            return [2 /*return*/, __spread(selectedItems, __classPrivateFieldGet(this, _cache)[searchText]).union(this.valueField)];
                     }
-                    return !value || _this.utilityService.changeAliasLowerCase(item[_this.displayField])
-                        .indexOf(_this.utilityService.changeAliasLowerCase(value)) !== -1;
-                }).filter(function (item, index) { return index < _this.limit; });
-            };
+                });
+            }); });
+            _loadSelectedItems.set(this, function (value, items) { return __awaiter(_this, void 0, void 0, function () {
+                var values, results, objItem, objValue;
+                var _this = this;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            if (!(value === null || value === void 0 ? void 0 : value.toString())) {
+                                return [2 /*return*/, []];
+                            }
+                            values = Array.isArray(value) ? value : [value];
+                            if (!this.valueField && !this.displayField) {
+                                return [2 /*return*/, values];
+                            }
+                            this.loading = true;
+                            if (!values.some(function (val) { return __classPrivateFieldGet(_this, _allItem)[val] === undefined; })) return [3 /*break*/, 2];
+                            return [4 /*yield*/, items(value, true).catch(function () { return []; }).finally(function () { return _this.loading = false; })];
+                        case 1:
+                            results = _f.sent();
+                            objItem = Array.toObject(results, this.valueField);
+                            objValue = Array.toObject(values.map(function (val) {
+                                var _f, _g;
+                                return (_f = {}, _f[val === null || val === void 0 ? void 0 : val.toString()] = (_g = {}, _g[_this.valueField] = val, _g[_this.displayField] = val, _g), _f);
+                            }), this.valueField);
+                            __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign(Object.assign({}, objValue), __classPrivateFieldGet(this, _allItem)), objItem));
+                            _f.label = 2;
+                        case 2: return [2 /*return*/, values.map(function (val) {
+                                var _f;
+                                var _a;
+                                return (_a = __classPrivateFieldGet(_this, _allItem)[val === null || val === void 0 ? void 0 : val.toString()]) !== null && _a !== void 0 ? _a : (_f = {}, _f[_this.valueField] = val, _f[_this.displayField] = val, _f);
+                            })];
+                    }
+                });
+            }); });
             this.onAdd = function (event) {
-                var _a, _b;
+                var _a, _b, _c, _d, _e;
                 // Add item only when MatAutocomplete is not open
                 // To make sure this does not conflict with OptionSelected Event
-                if (!_this.matAutocomplete.isOpen) {
-                    var value_1 = ((_a = event.value) !== null && _a !== void 0 ? _a : '').toString().toLowerCase().trim();
-                    if (value_1) {
-                        var item = __classPrivateFieldGet(_this, _items).find(function (e) { return e[_this.displayField]
-                            && e[_this.displayField].toString().toLowerCase().trim() === value_1; });
+                // if (!this.matAutocomplete.isOpen) {
+                //   const value = (event.value ?? '').toString().trim();
+                //   if (value) {
+                //     if (this.valueField && this.displayField) {
+                //       const item = this.#filteredItems.find(e => e[this.displayField] === value);
+                //       if (item) {
+                //         const values: (string | number)[] = this.formControl.value ?? [];
+                //         values.push(item[this.valueField]);
+                //         this.formControl.setValue(values);
+                //       } else if (this.#addable) {
+                //         const values: (string | number)[] = this.formControl.value ?? [];
+                //         values.push(value);
+                //         this.formControl.setValue(values);
+                //       }
+                //     } else {
+                //       console.log(value);
+                //       console.log(this.#filteredItems);
+                //       const item = this.#filteredItems.find(item => item === value);
+                //       if (item) {
+                //         const values: (string | number)[] = this.formControl.value ?? [];
+                //         values.push(item);
+                //         this.formControl.setValue(values);
+                //       } else if (this.#addable) {
+                //         const values: (string | number)[] = this.formControl.value ?? [];
+                //         values.push(value);
+                //         this.formControl.setValue(values);
+                //       }
+                //     }
+                //   }
+                //   this.inputControl.setValue('');
+                // }
+                var value = ((_a = event.value) !== null && _a !== void 0 ? _a : '').toString().trim();
+                if (value) {
+                    if (_this.valueField && _this.displayField) {
+                        var item = __classPrivateFieldGet(_this, _filteredItems).find(function (e) { return e[_this.displayField] === value; });
                         if (item) {
                             var values = (_b = _this.formControl.value) !== null && _b !== void 0 ? _b : [];
                             values.push(item[_this.valueField]);
                             _this.formControl.setValue(values);
                         }
+                        else if (__classPrivateFieldGet(_this, _addable)) {
+                            var values = (_c = _this.formControl.value) !== null && _c !== void 0 ? _c : [];
+                            values.push(value);
+                            _this.formControl.setValue(values);
+                        }
+                    }
+                    else {
+                        var item = __classPrivateFieldGet(_this, _filteredItems).find(function (item) { return item === value; });
+                        if (item) {
+                            var values = (_d = _this.formControl.value) !== null && _d !== void 0 ? _d : [];
+                            values.push(item);
+                            _this.formControl.setValue(values);
+                        }
+                        else if (__classPrivateFieldGet(_this, _addable)) {
+                            var values = (_e = _this.formControl.value) !== null && _e !== void 0 ? _e : [];
+                            values.push(value);
+                            _this.formControl.setValue(values);
+                        }
                     }
-                    _this.inputControl.setValue('');
                 }
+                _this.input.nativeElement.value = '';
+                _this.inputControl.setValue('');
             };
             // andn1 viết để xử lý tạm us B2B1D-18289 ở S69
             this.onAdd2 = function (event) {
                 var _a, _b;
                 var value = ((_a = event.value) !== null && _a !== void 0 ? _a : '').toString().toLowerCase().trim();
                 if (value) {
-                    var item = __classPrivateFieldGet(_this, _items).find(function (e) { return e[_this.valueField]
+                    var item = __classPrivateFieldGet(_this, _filteredItems).find(function (e) { return e[_this.valueField]
                         && e[_this.valueField].toString().toLowerCase().trim() === value; });
                     if (item) {
                         var values = (_b = _this.formControl.value) !== null && _b !== void 0 ? _b : [];
@@ -436,56 +548,92 @@
                     }
                 }
                 _this.inputControl.setValue('');
-                _this.ref.detectChanges();
             };
             this.onRemove = function (item) {
                 var _a;
                 var values = (_a = _this.formControl.value) !== null && _a !== void 0 ? _a : [];
-                _this.formControl.setValue(values.filter(function (value) { return (item === null || item === void 0 ? void 0 : item[_this.valueField]) !== value; }));
+                if (typeof (item) === 'string' || typeof (item) === 'number') {
+                    _this.formControl.setValue(values.filter(function (value) { return item !== value; }));
+                }
+                else if (_this.valueField) {
+                    _this.formControl.setValue(values.filter(function (value) { return (item === null || item === void 0 ? void 0 : item[_this.valueField]) !== value; }));
+                }
                 _this.inputControl.setValue('');
             };
             this.select = function (item) {
                 _this.chipSelected.emit(item);
             };
+            // onSelect = (event: MatAutocompleteSelectedEvent) => {
+            //   const value = (event.option.value?.[this.valueField] ?? '').toString().trim();
+            //   if (value) {
+            //     const item = this.#items.find(e => e[this.valueField]
+            //       && e[this.valueField].toString().trim() === value);
+            //     if (item) {
+            //       const values: (string | number)[] = this.formControl.value ?? [];
+            //       values.push(item[this.valueField]);
+            //       this.formControl.setValue(values);
+            //       this.input.nativeElement.value = '';
+            //       this.inputControl.setValue('');
+            //       setTimeout(() => {
+            //         this.autocompleteTrigger?.openPanel();
+            //       }, 0);
+            //     }
+            //   }
+            // }
             this.onSelect = function (event) {
-                var _a, _b, _c;
-                var value = ((_b = (_a = event.option.value) === null || _a === void 0 ? void 0 : _a[_this.valueField]) !== null && _b !== void 0 ? _b : '').toString().trim();
-                if (value) {
-                    var item = __classPrivateFieldGet(_this, _items).find(function (e) { return e[_this.valueField]
-                        && e[_this.valueField].toString().trim() === value; });
-                    if (item) {
-                        var values = (_c = _this.formControl.value) !== null && _c !== void 0 ? _c : [];
-                        values.push(item[_this.valueField]);
-                        _this.formControl.setValue(values);
-                        _this.input.nativeElement.value = '';
-                        _this.inputControl.setValue('');
-                        setTimeout(function () {
-                            var _a;
-                            (_a = _this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
-                        }, 0);
-                    }
-                }
-            };
-            this.displayFn = function (value) {
-                if (typeof value === 'string') {
-                    if (!__classPrivateFieldGet(_this, _items)) {
-                        return undefined;
-                    }
-                    var selectedItem = __classPrivateFieldGet(_this, _items).find(function (item) { return item[_this.valueField] === value; });
-                    if (selectedItem) {
-                        return selectedItem[_this.displayField];
-                    }
-                    if (__classPrivateFieldGet(_this, _items).some(function (item) { return item[_this.displayField].toLowerCase().indexOf(value.toLowerCase()) !== -1; })) {
-                        return value;
+                var _a;
+                var item = event.option.value;
+                var values = (_a = _this.formControl.value) !== null && _a !== void 0 ? _a : [];
+                if (item) {
+                    if (typeof (item) === 'string' || typeof (item) === 'number') {
+                        if (!values.includes(item)) {
+                            values.push(item);
+                            _this.formControl.setValue(values);
+                            _this.modelChange.emit(values);
+                            _this.sdChange.emit(values);
+                            setTimeout(function () {
+                                var _a;
+                                (_a = _this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
+                            }, 0);
+                        }
                     }
-                    else {
-                        return undefined;
+                    else if (_this.valueField) {
+                        var val = (item === null || item === void 0 ? void 0 : item[_this.valueField]) || null;
+                        if (!values.includes(val)) {
+                            values.push(val);
+                            _this.formControl.setValue(values);
+                            _this.modelChange.emit(values);
+                            _this.sdChange.emit(values);
+                            setTimeout(function () {
+                                var _a;
+                                (_a = _this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
+                            }, 0);
+                        }
                     }
-                }
-                else {
-                    return value ? value[_this.displayField] : undefined;
+                    _this.input.nativeElement.value = '';
+                    _this.inputControl.setValue('', {
+                        emitEvent: false
+                    });
                 }
             };
+            // displayFn = (value: string | { [key: string]: string }): string | undefined => {
+            //   if (typeof value === 'string') {
+            //     if (!this.#items) {
+            //       return undefined;
+            //     }
+            //     const selectedItem = this.#items.find(item => item[this.valueField] === value);
+            //     if (selectedItem) {
+            //       return selectedItem[this.displayField];
+            //     }
+            //     if (this.#items.some(item => item[this.displayField].toLowerCase().indexOf(value.toLowerCase()) !== -1)) {
+            //       return value;
+            //     } else {
+            //       return undefined;
+            //     }
+            //   } else {
+            //     return value ? value[this.displayField] : undefined;
+            //   }
+            // }
             this.onFocus = function () {
                 _this.isFocused = true;
                 _this.inputControl.setValue('');
@@ -545,6 +693,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SdChip.prototype, "addable", {
+            set: function (val) {
+                __classPrivateFieldSet(this, _addable, (val === '') || val);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SdChip.prototype, "_removable", {
             set: function (val) {
                 this.removable = (val === '') || val;
@@ -554,17 +709,18 @@
         });
         Object.defineProperty(SdChip.prototype, "items", {
             set: function (items) {
+                __classPrivateFieldSet(this, _delay, 0);
                 if (!items) {
-                    __classPrivateFieldSet(this, _items, []);
+                    __classPrivateFieldGet(this, _itemsChanges).next([]);
                 }
                 else if (Array.isArray(items)) {
-                    __classPrivateFieldSet(this, _items, items.filter(function (e) { return (e !== null && e !== void 0 ? e : '').toString().trim() !== ''; }));
+                    __classPrivateFieldGet(this, _itemsChanges).next(items.filter(function (e) { return e !== null && e !== undefined; }));
                 }
                 else {
-                    __classPrivateFieldSet(this, _items, items);
+                    __classPrivateFieldSet(this, _delay, 500);
+                    __classPrivateFieldGet(this, _itemsChanges).next(items);
                 }
-                this.inputControl.updateValueAndValidity();
-                __classPrivateFieldGet(this, _itemChanges).next(this.items);
+                this.formControl.updateValueAndValidity();
             },
             enumerable: false,
             configurable: true
@@ -575,9 +731,7 @@
                 if (!Array.isArray(values)) {
                     values = [];
                 }
-                this.formControl.setValue(values, {
-                    emitEvent: false
-                });
+                this.formControl.setValue(values);
             },
             enumerable: false,
             configurable: true
@@ -623,45 +777,107 @@
             configurable: true
         });
         SdChip.prototype.ngOnInit = function () {
-            var _this = this;
-            this.filteredItems = this.inputControl.valueChanges.pipe(operators.startWith(''), operators.map(function (item) { var _a; return typeof item === 'string' ? item : ((_a = item === null || item === void 0 ? void 0 : item[_this.displayField]) !== null && _a !== void 0 ? _a : ''); }), operators.map(function (name) { return _this.filter(name); }));
         };
         SdChip.prototype.ngAfterViewInit = function () {
             var _this = this;
             var _a;
-            __classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.subscribe(function () {
-                var values = _this.formControl.value || [];
-                _this.selectedItems = __classPrivateFieldGet(_this, _items).filter(function (item) { return values.findIndex(function (value) { return value === (item === null || item === void 0 ? void 0 : item[_this.valueField]); }) !== -1; });
-                _this.modelChange.emit(values);
-                _this.sdChange.emit(values);
-                setTimeout(function () {
-                    var _a;
-                    (_a = __classPrivateFieldGet(_this, _form)) === null || _a === void 0 ? void 0 : _a.markAsDirty();
-                }, 0);
+            __classPrivateFieldGet(this, _subscription).add(this.formControl.sdChanges.subscribe(function () {
+                _this.ref.markForCheck();
             }));
-            __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _itemChanges).pipe(operators.startWith(__classPrivateFieldGet(this, _items))).subscribe(function () {
-                var e_1, _d;
+            __classPrivateFieldSet(this, _allItems, rxjs.combineLatest([
+                __classPrivateFieldGet(this, _itemsChanges).asObservable(),
+                this.inputControl.valueChanges.pipe(operators.startWith(''), operators.debounceTime(__classPrivateFieldGet(this, _delay))),
+                this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value))
+            ]).pipe(operators.switchMap(function (_f) {
+                var _g = __read(_f, 1), items = _g[0];
+                return __awaiter(_this, void 0, void 0, function () {
+                    var val, values, hasFields;
+                    var _this = this;
+                    return __generator(this, function (_f) {
+                        switch (_f.label) {
+                            case 0:
+                                val = this.inputControl.value;
+                                values = this.formControl.value || [];
+                                if (!(typeof (items) === 'function')) return [3 /*break*/, 2];
+                                return [4 /*yield*/, __classPrivateFieldGet(this, _loadItems).call(this, val, items)];
+                            case 1: return [2 /*return*/, _f.sent()];
+                            case 2:
+                                __classPrivateFieldSet(this, _allItem, items.toObject(this.valueField));
+                                hasFields = !!this.valueField && !!this.displayField;
+                                __classPrivateFieldSet(this, _filteredItems, items.filter(function (item) {
+                                    var value = hasFields ? item[_this.valueField] : item;
+                                    var display = hasFields ? item[_this.displayField] : item;
+                                    if (String.aliasIncludes(value, val) || String.aliasIncludes(display, val)) {
+                                        return true;
+                                    }
+                                    return values.some(function (e) { return e === value; });
+                                }));
+                                return [2 /*return*/, __classPrivateFieldGet(this, _filteredItems)];
+                        }
+                    });
+                });
+            })));
+            this.selectedItems = rxjs.combineLatest([
+                __classPrivateFieldGet(this, _itemsChanges).asObservable(),
+                this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value))
+            ])
+                .pipe(operators.switchMap(function (_f) {
+                var _g = __read(_f, 2), items = _g[0], val = _g[1];
+                return __awaiter(_this, void 0, void 0, function () {
+                    var _b;
+                    var _this = this;
+                    return __generator(this, function (_f) {
+                        switch (_f.label) {
+                            case 0:
+                                // Vì một số lý do chưa xác định mà khi sử dụng sdViewDef thì khi chuyển sang dạng view sẽ trigger val = null
+                                // Nhưng formControl.value vẫn có giá trị đúng nên thực hiện gán val = this.formControl.value;
+                                val = this.formControl.value;
+                                if (!this.valueField) {
+                                    return [2 /*return*/, this.formControl.value];
+                                }
+                                if (!(typeof (items) === 'function')) return [3 /*break*/, 2];
+                                return [4 /*yield*/, __classPrivateFieldGet(this, _loadSelectedItems).call(this, val, items)];
+                            case 1: return [2 /*return*/, _f.sent()];
+                            case 2: return [2 /*return*/, (_b = (this.formControl.value || [])) === null || _b === void 0 ? void 0 : _b.map(function (value) {
+                                    var _f;
+                                    return (items === null || items === void 0 ? void 0 : items.find(function (item) { return item[_this.valueField] === value; })) || (_f = {},
+                                        _f[_this.valueField] = value,
+                                        _f[_this.displayField] = value,
+                                        _f);
+                                })];
+                        }
+                    });
+                });
+            }));
+            this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(operators.map(function (allItems) { return allItems.filter(function (item) {
                 var values = _this.formControl.value || [];
-                _this.selectedItems = [];
-                var _loop_1 = function (value) {
-                    var _d;
-                    var item = __classPrivateFieldGet(_this, _items).find(function (e) { return (e === null || e === void 0 ? void 0 : e[_this.valueField]) === value; }) || {};
-                    _this.selectedItems.push(Object.assign(Object.assign({}, item), (_d = {}, _d[_this.valueField] = value, _d)));
-                };
-                try {
-                    for (var values_1 = __values(values), values_1_1 = values_1.next(); !values_1_1.done; values_1_1 = values_1.next()) {
-                        var value = values_1_1.value;
-                        _loop_1(value);
-                    }
+                if (_this.valueField) {
+                    return !values.includes(item === null || item === void 0 ? void 0 : item[_this.valueField]);
                 }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (values_1_1 && !values_1_1.done && (_d = values_1.return)) _d.call(values_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }));
+                return !values.includes(item);
+            }).paging(_this.limit); }));
+            // this.display = this.selectedItems.pipe(
+            //   map(selectedItems => selectedItems?.map(item => this.displayField ? item[this.displayField] : item)?.join(', ')));
+            // this.#subscription.add(this.formControl.valueChanges.subscribe(() => {
+            //   const values: (string | number)[] = this.formControl.value || [];
+            //   this.selectedItems = this.#items.filter(item => values.findIndex(value => value === item?.[this.valueField]) !== -1);
+            //   this.modelChange.emit(values);
+            //   this.sdChange.emit(values);
+            //   setTimeout(() => {
+            //     this.#form?.markAsDirty();
+            //   }, 0);
+            // }));
+            // this.#subscription.add(this.#itemChanges.pipe(startWith(this.#items)).subscribe(() => {
+            //   const values: (string | number)[] = this.formControl.value || [];
+            //   this.selectedItems = [];
+            //   for (const value of values) {
+            //     const item = this.#items.find(e => e?.[this.valueField] === value) || {};
+            //     this.selectedItems.push({
+            //       ...item,
+            //       [this.valueField]: value
+            //     });
+            //   }
+            // }));
             (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
         };
         SdChip.prototype.ngOnDestroy = function () {
@@ -671,22 +887,23 @@
         };
         return SdChip;
     }());
-    _name = new WeakMap(), _form = new WeakMap(), _itemChanges = new WeakMap(), _items = new WeakMap(), _subscription = new WeakMap(), _updateValidator = new WeakMap();
+    _name = new WeakMap(), _form = new WeakMap(), _addable = new WeakMap(), _allItems = new WeakMap(), _allItem = new WeakMap(), _cache = new WeakMap(), _delay = new WeakMap(), _itemsChanges = new WeakMap(), _filteredItems = new WeakMap(), _subscription = new WeakMap(), _updateValidator = new WeakMap(), _loadItems = new WeakMap(), _loadSelectedItems = new WeakMap();
     SdChip.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-chip',
-                    template: "<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !autocompleteTrigger?.panelOpen && !isFocused; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value}\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"c-md\" [ngClass]=\"{'c-sm': size === 'sm'}\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n      <mat-chip-list [formControl]=\"formControl\" #chipList>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <mat-chip *ngIf=\"item\" [selectable]=\"selectable\" [removable]=\"true\" (removed)=\"onRemove(item)\"\r\n            [selected]=\"item.isSelected\" (selectionChange)=\"select(item)\" [disabled]=\"inputControl.disabled\"\r\n            (click)=\"item.isSelected = !item.isSelected\">\r\n            <ng-container *ngIf=\"sdChipDisplay?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"sdChipDisplay.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <span *ngIf=\"!sdChipDisplay?.templateRef\">{{item[displayField] || item[valueField]}}</span>\r\n            <mat-icon *ngIf=\"!inputControl.disabled && item | sdRemovableChip:removable\" matChipRemove>cancel</mat-icon>\r\n          </mat-chip>\r\n        </ng-container>\r\n        <input #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"placeholder || label\"\r\n          [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n          (matChipInputTokenEnd)=\"onAdd($event)\" autocomplete=\"off\" [errorStateMatcher]=\"matcher\" (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\" matInput #input>\r\n      </mat-chip-list>\r\n      <mat-error *ngIf=\"formControl?.errors?.minItem\">\r\n        {{formControl?.errors?.minItem}}\r\n      </mat-error>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onSelect($event)\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\">\r\n          {{item[displayField]}}\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>",
+                    template: "<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container *ngIf=\"sdView?.templateRef && !autocompleteTrigger?.panelOpen && !isFocused; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value}\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"c-md\" [ngClass]=\"{'c-sm': size === 'sm'}\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n      <mat-chip-list [formControl]=\"formControl\" #chipList>\r\n        <ng-container *ngFor=\"let item of selectedItems | async\">\r\n          <mat-chip *ngIf=\"item\" [selectable]=\"selectable\" [removable]=\"true\" (removed)=\"onRemove(item)\"\r\n            [selected]=\"item.isSelected\" (selectionChange)=\"select(item)\" [disabled]=\"inputControl.disabled\"\r\n            (click)=\"item.isSelected = !item.isSelected\">\r\n            <ng-container *ngIf=\"sdChipDisplay?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"sdChipDisplay.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <span *ngIf=\"!sdChipDisplay?.templateRef\">{{item[displayField] || item[valueField] || item}}</span>\r\n            <mat-icon *ngIf=\"!inputControl.disabled && item | sdRemovableChip:removable\" matChipRemove>cancel</mat-icon>\r\n          </mat-chip>\r\n        </ng-container>\r\n        <input #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"placeholder || label\"\r\n          [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n          (matChipInputTokenEnd)=\"onAdd($event)\" autocomplete=\"off\" [errorStateMatcher]=\"matcher\" (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\" matInput #input>\r\n      </mat-chip-list>\r\n      <mat-error *ngIf=\"formControl?.errors?.minItem\">\r\n        {{formControl?.errors?.minItem}}\r\n      </mat-error>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event)\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"displayField ? item[displayField] : item\">\r\n          {{ displayField ? item[displayField] : item }}\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;padding-top:5px}:host ::ng-deep mat-form-field.c-md .mat-form-field-infix{min-height:43.5px;padding:2px 0}:host ::ng-deep mat-form-field.c-md .mat-standard-chip{min-height:26px;padding:7px 10px}:host ::ng-deep mat-form-field.c-md .mat-standard-chip.mat-chip-with-trailing-icon{padding:7px 7px 7px 10px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]
                 },] }
     ];
     SdChip.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: utility.SdUtilityService }
+        { type: core.ChangeDetectorRef }
     ]; };
     SdChip.propDecorators = {
         name: [{ type: core.Input }],
         size: [{ type: core.Input }],
         form: [{ type: core.Input }],
+        addable: [{ type: core.Input }],
         label: [{ type: core.Input }],
         valueField: [{ type: core.Input }],
         displayField: [{ type: core.Input }],