@sd-angular/core 1.0.80 → 1.0.83

package/fesm2015/sd-angular-core-chip.js

@@ -1,15 +1,14 @@
-import { Directive, TemplateRef, EventEmitter, Component, ChangeDetectorRef, Input, Output, ViewChild, ContentChild, Pipe, NgModule } from '@angular/core';
+import { Directive, TemplateRef, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, ViewChild, ContentChild, Pipe, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { startWith, map, debounceTime, switchMap } from 'rxjs/operators';
+import { startWith, debounceTime, switchMap, map } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import { FormControl, Validators, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject, BehaviorSubject, Subscription, combineLatest } from 'rxjs';
-import { SdUtilityService } from '@sd-angular/core/utility';
+import { BehaviorSubject, Subscription, combineLatest } from 'rxjs';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { SdFormControl, SdViewDefDirective, SdCommonModule } from '@sd-angular/core/common';
 import { MatInputModule } from '@angular/material/input';
@@ -31,7 +30,7 @@ SdChipDisplayDef.ctorParameters = () => [
     { type: TemplateRef }
 ];
 
-var _name, _form, _itemChanges, _items, _allItems, _allItem, _cache, _delay, _itemsChanges, _subscription, _updateValidator, _loadItems, _loadSelectedItems;
+var _name, _form, _addable, _allItems, _allItem, _cache, _delay, _itemsChanges, _selectedItems, _filteredItems, _subscription, _updateValidator, _loadItems, _loadSelectedItems;
 class SdChipErrotStateMatcher {
     constructor(formControl) {
         this.formControl = formControl;
@@ -43,16 +42,15 @@ class SdChipErrotStateMatcher {
     }
 }
 class SdChip {
-    constructor(ref, utilityService) {
+    constructor(ref) {
         this.ref = ref;
-        this.utilityService = utilityService;
         _name.set(this, v4());
         this.separatorKeysCodes = [ENTER, COMMA];
         this.selectable = true;
         _form.set(this, void 0);
+        _addable.set(this, void 0);
         this.removable = true;
-        _itemChanges.set(this, new Subject());
-        _items.set(this, []);
+        this.disableErrorMessage = false;
         // @Input() set items(items: undefined | any[]) {
         //   if (!items) {
         //     this.#items = [];
@@ -72,6 +70,8 @@ class SdChip {
         _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 BehaviorSubject([]));
         this.limit = 50;
+        _selectedItems.set(this, []);
+        _filteredItems.set(this, void 0);
         // Validator
         this.isRequired = false;
         this.modelChange = new EventEmitter();
@@ -134,40 +134,87 @@ class SdChip {
             }
             return values.map(val => { var _a; return (_a = __classPrivateFieldGet(this, _allItem)[val === null || val === void 0 ? void 0 : val.toString()]) !== null && _a !== void 0 ? _a : { [this.valueField]: val, [this.displayField]: val }; });
         }));
-        this.filter = (value) => {
-            return __classPrivateFieldGet(this, _items).filter(item => {
-                var _a;
-                if ((_a = this.formControl.value) === null || _a === void 0 ? void 0 : _a.some(val => val === item[this.valueField])) {
-                    return false;
-                }
-                return !value || this.utilityService.changeAliasLowerCase(item[this.displayField])
-                    .indexOf(this.utilityService.changeAliasLowerCase(value)) !== -1;
-            }).filter((item, index) => index < this.limit);
-        };
         this.onAdd = (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) {
-                const value = ((_a = event.value) !== null && _a !== void 0 ? _a : '').toString().toLowerCase().trim();
-                if (value) {
-                    const item = __classPrivateFieldGet(this, _items).find(e => e[this.displayField]
-                        && e[this.displayField].toString().toLowerCase().trim() === value);
+            // 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('');
+            // }
+            const value = ((_a = event.value) !== null && _a !== void 0 ? _a : '').toString().trim();
+            if (value) {
+                if (this.valueField && this.displayField) {
+                    const item = __classPrivateFieldGet(this, _filteredItems).find(e => e[this.displayField] === value);
                     if (item) {
                         const values = (_b = this.formControl.value) !== null && _b !== void 0 ? _b : [];
                         values.push(item[this.valueField]);
                         this.formControl.setValue(values);
+                        this.modelChange.emit(this.formControl.value);
+                        this.sdChange.emit(this.formControl.value);
+                    }
+                    else if (__classPrivateFieldGet(this, _addable)) {
+                        const values = (_c = this.formControl.value) !== null && _c !== void 0 ? _c : [];
+                        values.push(value);
+                        this.formControl.setValue(values);
+                        this.modelChange.emit(this.formControl.value);
+                        this.sdChange.emit(this.formControl.value);
+                    }
+                }
+                else {
+                    const item = __classPrivateFieldGet(this, _filteredItems).find(item => item === value);
+                    if (item) {
+                        const values = (_d = this.formControl.value) !== null && _d !== void 0 ? _d : [];
+                        values.push(item);
+                        this.formControl.setValue(values);
+                        this.modelChange.emit(this.formControl.value);
+                        this.sdChange.emit(this.formControl.value);
+                    }
+                    else if (__classPrivateFieldGet(this, _addable)) {
+                        const values = (_e = this.formControl.value) !== null && _e !== void 0 ? _e : [];
+                        values.push(value);
+                        this.formControl.setValue(values);
+                        this.modelChange.emit(this.formControl.value);
+                        this.sdChange.emit(this.formControl.value);
                     }
                 }
-                this.inputControl.setValue('');
             }
+            this.input.nativeElement.value = '';
+            this.inputControl.setValue('');
         };
         // andn1 viết để xử lý tạm us B2B1D-18289 ở S69
         this.onAdd2 = (event) => {
             var _a, _b;
             const value = ((_a = event.value) !== null && _a !== void 0 ? _a : '').toString().toLowerCase().trim();
             if (value) {
-                const item = __classPrivateFieldGet(this, _items).find(e => e[this.valueField]
+                const item = __classPrivateFieldGet(this, _filteredItems).find(e => e[this.valueField]
                     && e[this.valueField].toString().toLowerCase().trim() === value);
                 if (item) {
                     const values = (_b = this.formControl.value) !== null && _b !== void 0 ? _b : [];
@@ -178,56 +225,96 @@ class SdChip {
                 }
             }
             this.inputControl.setValue('');
-            this.ref.detectChanges();
         };
         this.onRemove = (item) => {
             var _a;
             const values = (_a = this.formControl.value) !== null && _a !== void 0 ? _a : [];
-            this.formControl.setValue(values.filter(value => (item === null || item === void 0 ? void 0 : item[this.valueField]) !== value));
+            if (typeof (item) === 'string' || typeof (item) === 'number') {
+                this.formControl.setValue(values.filter(value => item !== value));
+                this.modelChange.emit(this.formControl.value);
+                this.sdChange.emit(this.formControl.value);
+            }
+            else if (this.valueField) {
+                this.formControl.setValue(values.filter(value => (item === null || item === void 0 ? void 0 : item[this.valueField]) !== value));
+                this.modelChange.emit(this.formControl.value);
+                this.sdChange.emit(this.formControl.value);
+            }
             this.inputControl.setValue('');
         };
         this.select = (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 = (event) => {
-            var _a, _b, _c;
-            const value = ((_b = (_a = event.option.value) === null || _a === void 0 ? void 0 : _a[this.valueField]) !== null && _b !== void 0 ? _b : '').toString().trim();
-            if (value) {
-                const item = __classPrivateFieldGet(this, _items).find(e => e[this.valueField]
-                    && e[this.valueField].toString().trim() === value);
-                if (item) {
-                    const 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(() => {
-                        var _a;
-                        (_a = this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
-                    }, 0);
-                }
-            }
-        };
-        this.displayFn = (value) => {
-            if (typeof value === 'string') {
-                if (!__classPrivateFieldGet(this, _items)) {
-                    return undefined;
-                }
-                const selectedItem = __classPrivateFieldGet(this, _items).find(item => item[this.valueField] === value);
-                if (selectedItem) {
-                    return selectedItem[this.displayField];
-                }
-                if (__classPrivateFieldGet(this, _items).some(item => item[this.displayField].toLowerCase().indexOf(value.toLowerCase()) !== -1)) {
-                    return value;
+            var _a;
+            const item = event.option.value;
+            const 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(this.formControl.value);
+                        this.sdChange.emit(this.formControl.value);
+                        setTimeout(() => {
+                            var _a;
+                            (_a = this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
+                        }, 0);
+                    }
                 }
-                else {
-                    return undefined;
+                else if (this.valueField) {
+                    const 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(this.formControl.value);
+                        this.sdChange.emit(this.formControl.value);
+                        setTimeout(() => {
+                            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 = () => {
             this.isFocused = true;
             this.inputControl.setValue('');
@@ -260,9 +347,12 @@ class SdChip {
             $event === null || $event === void 0 ? void 0 : $event.stopPropagation();
             this.inputControl.setValue('');
             this.formControl.setValue([]);
+            this.modelChange.emit(this.formControl.value);
+            this.sdChange.emit(this.formControl.value);
             (_a = this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
             this.ref.detectChanges();
         };
+        this.getSelectedItems = () => __classPrivateFieldGet(this, _selectedItems);
     }
     set name(val) {
         if (val) {
@@ -279,9 +369,15 @@ class SdChip {
             }
         }
     }
+    set addable(val) {
+        __classPrivateFieldSet(this, _addable, (val === '') || val);
+    }
     set _removable(val) {
         this.removable = (val === '') || val;
     }
+    set _disableErrorMessage(val) {
+        this.disableErrorMessage = (val === '') || val;
+    }
     set items(items) {
         __classPrivateFieldSet(this, _delay, 0);
         if (!items) {
@@ -328,7 +424,6 @@ class SdChip {
         }
     }
     ngOnInit() {
-        this.filteredItems = this.inputControl.valueChanges.pipe(startWith(''), map(item => { var _a; return typeof item === 'string' ? item : ((_a = item === null || item === void 0 ? void 0 : item[this.displayField]) !== null && _a !== void 0 ? _a : ''); }), map(name => this.filter(name)));
     }
     ngAfterViewInit() {
         var _a;
@@ -339,69 +434,56 @@ class SdChip {
             __classPrivateFieldGet(this, _itemsChanges).asObservable(),
             this.inputControl.valueChanges.pipe(startWith(''), debounceTime(__classPrivateFieldGet(this, _delay))),
             this.formControl.valueChanges.pipe(startWith(this.formControl.value))
-        ]).pipe(switchMap(([items, val, formValue]) => __awaiter(this, void 0, void 0, function* () {
+        ]).pipe(switchMap(([items]) => __awaiter(this, void 0, void 0, function* () {
+            const val = this.inputControl.value;
+            const values = this.formControl.value || [];
             if (typeof (items) === 'function') {
                 return yield __classPrivateFieldGet(this, _loadItems).call(this, val, items);
             }
             __classPrivateFieldSet(this, _allItem, items.toObject(this.valueField));
-            const isArray = Array.isArray(formValue);
             const hasFields = !!this.valueField && !!this.displayField;
-            const filteredItems = items.filter(item => {
+            __classPrivateFieldSet(this, _filteredItems, items.filter(item => {
                 const value = hasFields ? item[this.valueField] : item;
                 const display = hasFields ? item[this.displayField] : item;
                 if (String.aliasIncludes(value, val) || String.aliasIncludes(display, val)) {
                     return true;
                 }
-                if (isArray) {
-                    return formValue.some(e => e === value);
-                }
-                return formValue === value;
-            });
-            if (items.length <= this.limit) {
-                return filteredItems;
-            }
-            // Đưa những selectedItems lên đầu nếu không mat-select-trigger sẽ không work
-            return filteredItems.sort((current, next) => {
-                const value1 = hasFields ? current[this.valueField] : current;
-                const value2 = hasFields ? next[this.valueField] : next;
-                let flag1 = 0;
-                let flag2 = 0;
-                if (isArray) {
-                    flag1 = formValue.some(e => e === value1) ? 1 : 0;
-                    flag2 = formValue.some(e => e === value2) ? 1 : 0;
-                    return flag2 - flag1;
-                }
-                flag1 = formValue === value1 ? 1 : 0;
-                flag2 = formValue === value2 ? 1 : 0;
-                return flag2 - flag1;
-            });
+                return values.some(e => e === value);
+            }));
+            return __classPrivateFieldGet(this, _filteredItems);
         }))));
         this.selectedItems = combineLatest([
             __classPrivateFieldGet(this, _itemsChanges).asObservable(),
             this.formControl.valueChanges.pipe(startWith(this.formControl.value))
         ])
             .pipe(switchMap(([items, val]) => __awaiter(this, void 0, void 0, function* () {
+            var _b;
             // 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 [];
-            }
-            const values = Array.isArray(val) ? val : [val];
             if (!this.valueField) {
-                return values;
+                __classPrivateFieldSet(this, _selectedItems, this.formControl.value);
+                return __classPrivateFieldGet(this, _selectedItems);
             }
             if (typeof (items) === 'function') {
-                return yield __classPrivateFieldGet(this, _loadSelectedItems).call(this, val, items);
+                __classPrivateFieldSet(this, _selectedItems, yield __classPrivateFieldGet(this, _loadSelectedItems).call(this, val, items));
+                return __classPrivateFieldGet(this, _selectedItems);
             }
-            return values.map(value => {
+            __classPrivateFieldSet(this, _selectedItems, (_b = (this.formControl.value || [])) === null || _b === void 0 ? void 0 : _b.map(value => {
                 return (items === null || items === void 0 ? void 0 : items.find(item => item[this.valueField] === value)) || {
                     [this.valueField]: value,
                     [this.displayField]: value
                 };
-            });
+            }));
+            return __classPrivateFieldGet(this, _selectedItems);
         })));
-        this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(map(allItems => allItems.paging(this.limit)));
+        this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(map(allItems => allItems.filter(item => {
+            const 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(() => {
@@ -432,27 +514,29 @@ class SdChip {
         __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
 }
-_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(), _selectedItems = new WeakMap(), _filteredItems = new WeakMap(), _subscription = new WeakMap(), _updateValidator = new WeakMap(), _loadItems = new WeakMap(), _loadSelectedItems = new WeakMap();
 SdChip.decorators = [
     { type: 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>",
-                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}"]
+                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', 'no-padding-wrapper': disableErrorMessage}\" 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]=\"removable\" (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-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: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}: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 = () => [
-    { type: ChangeDetectorRef },
-    { type: SdUtilityService }
+    { type: ChangeDetectorRef }
 ];
 SdChip.propDecorators = {
     name: [{ type: Input }],
     size: [{ type: Input }],
     form: [{ type: Input }],
+    addable: [{ type: Input }],
     label: [{ type: Input }],
     valueField: [{ type: Input }],
     displayField: [{ type: Input }],
     placeholder: [{ type: Input }],
     _removable: [{ type: Input, args: ['removable',] }],
+    _disableErrorMessage: [{ type: Input, args: ['disableErrorMessage',] }],
     items: [{ type: Input }],
     limit: [{ type: Input }],
     model: [{ type: Input }],