@sd-angular/core 1.0.80 → 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, _allItems, _allItem, _cache, _delay, _itemsChanges, _subscription, _updateValidator, _loadItems, _loadSelectedItems;
+    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,17 +350,15 @@
         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 = [];
@@ -380,6 +378,7 @@
             _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;
+            _filteredItems.set(this, void 0);
             // Validator
             this.isRequired = false;
             this.modelChange = new core.EventEmitter();
@@ -412,22 +411,22 @@
             _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 (_d) {
-                    switch (_d.label) {
+                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 = _d.sent();
+                            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);
-                            _d.label = 2;
+                            _f.label = 2;
                         case 2: return [4 /*yield*/, __classPrivateFieldGet(this, _loadSelectedItems).call(this, this.formControl.value, items)];
                         case 3:
-                            selectedItems = _d.sent();
+                            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)];
                     }
@@ -436,8 +435,8 @@
             _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 (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (!(value === null || value === void 0 ? void 0 : value.toString())) {
                                 return [2 /*return*/, []];
@@ -450,56 +449,95 @@
                             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 = _d.sent();
+                            results = _f.sent();
                             objItem = Array.toObject(results, this.valueField);
                             objValue = Array.toObject(values.map(function (val) {
-                                var _d, _e;
-                                return (_d = {}, _d[val === null || val === void 0 ? void 0 : val.toString()] = (_e = {}, _e[_this.valueField] = val, _e[_this.displayField] = val, _e), _d);
+                                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));
-                            _d.label = 2;
+                            _f.label = 2;
                         case 2: return [2 /*return*/, values.map(function (val) {
-                                var _d;
+                                var _f;
                                 var _a;
-                                return (_a = __classPrivateFieldGet(_this, _allItem)[val === null || val === void 0 ? void 0 : val.toString()]) !== null && _a !== void 0 ? _a : (_d = {}, _d[_this.valueField] = val, _d[_this.displayField] = val, _d);
+                                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.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;
-                    }
-                    return !value || _this.utilityService.changeAliasLowerCase(item[_this.displayField])
-                        .indexOf(_this.utilityService.changeAliasLowerCase(value)) !== -1;
-                }).filter(function (item, index) { return index < _this.limit; });
-            };
             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 : [];
@@ -510,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('');
@@ -619,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;
@@ -696,8 +777,6 @@
             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;
@@ -709,50 +788,31 @@
                 __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 (_d) {
-                var _e = __read(_d, 3), items = _e[0], val = _e[1], formValue = _e[2];
+            ]).pipe(operators.switchMap(function (_f) {
+                var _g = __read(_f, 1), items = _g[0];
                 return __awaiter(_this, void 0, void 0, function () {
-                    var isArray, hasFields, filteredItems;
+                    var val, values, hasFields;
                     var _this = this;
-                    return __generator(this, function (_d) {
-                        switch (_d.label) {
+                    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*/, _d.sent()];
+                            case 1: return [2 /*return*/, _f.sent()];
                             case 2:
                                 __classPrivateFieldSet(this, _allItem, items.toObject(this.valueField));
-                                isArray = Array.isArray(formValue);
                                 hasFields = !!this.valueField && !!this.displayField;
-                                filteredItems = items.filter(function (item) {
+                                __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;
                                     }
-                                    if (isArray) {
-                                        return formValue.some(function (e) { return e === value; });
-                                    }
-                                    return formValue === value;
-                                });
-                                if (items.length <= this.limit) {
-                                    return [2 /*return*/, filteredItems];
-                                }
-                                // Đưa những selectedItems lên đầu nếu không mat-select-trigger sẽ không work
-                                return [2 /*return*/, filteredItems.sort(function (current, next) {
-                                        var value1 = hasFields ? current[_this.valueField] : current;
-                                        var value2 = hasFields ? next[_this.valueField] : next;
-                                        var flag1 = 0;
-                                        var flag2 = 0;
-                                        if (isArray) {
-                                            flag1 = formValue.some(function (e) { return e === value1; }) ? 1 : 0;
-                                            flag2 = formValue.some(function (e) { return e === value2; }) ? 1 : 0;
-                                            return flag2 - flag1;
-                                        }
-                                        flag1 = formValue === value1 ? 1 : 0;
-                                        flag2 = formValue === value2 ? 1 : 0;
-                                        return flag2 - flag1;
-                                    })];
+                                    return values.some(function (e) { return e === value; });
+                                }));
+                                return [2 /*return*/, __classPrivateFieldGet(this, _filteredItems)];
                         }
                     });
                 });
@@ -761,39 +821,41 @@
                 __classPrivateFieldGet(this, _itemsChanges).asObservable(),
                 this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value))
             ])
-                .pipe(operators.switchMap(function (_d) {
-                var _e = __read(_d, 2), items = _e[0], val = _e[1];
+                .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 values;
+                    var _b;
                     var _this = this;
-                    return __generator(this, function (_d) {
-                        switch (_d.label) {
+                    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 (!(val === null || val === void 0 ? void 0 : val.toString())) {
-                                    return [2 /*return*/, []];
-                                }
-                                values = Array.isArray(val) ? val : [val];
                                 if (!this.valueField) {
-                                    return [2 /*return*/, values];
+                                    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*/, _d.sent()];
-                            case 2: return [2 /*return*/, values.map(function (value) {
-                                    var _d;
-                                    return (items === null || items === void 0 ? void 0 : items.find(function (item) { return item[_this.valueField] === value; })) || (_d = {},
-                                        _d[_this.valueField] = value,
-                                        _d[_this.displayField] = value,
-                                        _d);
+                            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.paging(_this.limit); }));
+            this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(operators.map(function (allItems) { return allItems.filter(function (item) {
+                var values = _this.formControl.value || [];
+                if (_this.valueField) {
+                    return !values.includes(item === null || item === void 0 ? void 0 : item[_this.valueField]);
+                }
+                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(() => {
@@ -825,22 +887,23 @@
         };
         return SdChip;
     }());
-    _name = new WeakMap(), _form = new WeakMap(), _itemChanges = new WeakMap(), _items = new WeakMap(), _allItems = new WeakMap(), _allItem = new WeakMap(), _cache = new WeakMap(), _delay = new WeakMap(), _itemsChanges = new WeakMap(), _subscription = new WeakMap(), _updateValidator = new WeakMap(), _loadItems = new WeakMap(), _loadSelectedItems = 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 }],