@sd-angular/core 0.0.1006 → 0.0.1010

package/bundles/sd-angular-core-select.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/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@sd-angular/core/typing'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('uuid'), require('rxjs'), require('rxjs/operators'), require('@sd-angular/core/utility'), require('@sd-angular/core/common'), require('@angular/material/select'), require('@sd-angular/core/translate'), require('@angular/material/checkbox')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/select', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@sd-angular/core/typing', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/progress-spinner', 'uuid', 'rxjs', 'rxjs/operators', '@sd-angular/core/utility', '@sd-angular/core/common', '@angular/material/select', '@sd-angular/core/translate', '@angular/material/checkbox'], 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.select = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.input, global['sd-angular'].core.typing, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.progressSpinner, global.uuid, global.rxjs, global.rxjs.operators, global['sd-angular'].core.utility, global['sd-angular'].core.common, global.ng.material.select, global['sd-angular'].core.translate, global.ng.material.checkbox));
-}(this, (function (exports, core, common$1, forms, formField, input, typing, icon, tooltip, progressSpinner, uuid, rxjs, operators, utility, common, select, translate, checkbox) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('uuid'), require('rxjs'), require('rxjs/operators'), require('@sd-angular/core/utility'), require('@sd-angular/core/common'), require('@angular/material/select'), require('@sd-angular/core/translate'), require('@angular/material/checkbox')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/select', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/progress-spinner', 'uuid', 'rxjs', 'rxjs/operators', '@sd-angular/core/utility', '@sd-angular/core/common', '@angular/material/select', '@sd-angular/core/translate', '@angular/material/checkbox'], 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.select = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.progressSpinner, global.uuid, global.rxjs, global.rxjs.operators, global['sd-angular'].core.utility, global['sd-angular'].core.common, global.ng.material.select, global['sd-angular'].core.translate, global.ng.material.checkbox));
+}(this, (function (exports, core, common$1, forms, formField, input, icon, tooltip, progressSpinner, uuid, rxjs, operators, utility, common, select, translate, checkbox) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -337,7 +337,7 @@
         { type: core.TemplateRef }
     ]; };
 
-    var _input, _name, _form, _items, _currentItems, _allItem, _delay, _validator, _allItems, _subscription, _updateValidator, _search, _loadItems, _onChange, _customValidator;
+    var _input, _name, _form, _items, _delay, _validator, _subscription, _selectedItems, _allItems, _allItem, _updateValidator, _loadSelectedItems, _loadItems, _onChange, _customValidator;
     var SdSelect = /** @class */ (function () {
         function SdSelect(ref, utilityService) {
             var _this = this;
@@ -351,8 +351,6 @@
             _form.set(this, void 0);
             // Items
             _items.set(this, []);
-            _currentItems.set(this, []);
-            _allItem.set(this, {});
             // Server search
             this.loading = false;
             _delay.set(this, 500); // 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
@@ -363,12 +361,15 @@
             this.limit = 100;
             this.filtered = false;
             this.selectAll = false;
-            _allItems.set(this, void 0);
-            this.allSelected = false;
             this.modelChange = new core.EventEmitter();
             this.sdChange = new core.EventEmitter();
             this.sdSelection = new core.EventEmitter();
             _subscription.set(this, new rxjs.Subscription());
+            _selectedItems.set(this, void 0);
+            _allItems.set(this, void 0);
+            _allItem.set(this, {});
+            this.allSelected = false;
+            this.isFocused = false;
             _updateValidator.set(this, function () {
                 _this.formControl.clearValidators();
                 _this.formControl.clearAsyncValidators();
@@ -384,23 +385,36 @@
                 _this.formControl.setAsyncValidators(asyncValidators);
                 _this.formControl.updateValueAndValidity();
             });
-            _search.set(this, function (value, items) { return __awaiter(_this, void 0, void 0, function () {
-                var results;
+            _loadSelectedItems.set(this, function (value, items) { return __awaiter(_this, void 0, void 0, function () {
+                var values, results, objItem;
                 var _this = this;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
-                        case 0: return [4 /*yield*/, items(value).catch(function () { return []; })];
+                        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).finally(function () { return _this.loading = false; })];
                         case 1:
                             results = _c.sent();
-                            if (Array.isArray(value)) {
-                                return [2 /*return*/, results.filter(function (e) { return !!e && (value.includes(e) || value.includes(e[_this.valueField])); })];
-                            }
-                            return [2 /*return*/, results.filter(function (e) { return !!e && (e === value || e[_this.valueField] === value); })];
+                            objItem = Array.toObject(results, this.valueField);
+                            __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign(Object.assign({}, values.map(function (val) {
+                                var _c, _d;
+                                return (_c = {}, _c[val] = (_d = {}, _d[_this.valueField] = val, _d[_this.displayField] = val, _d), _c);
+                            })), __classPrivateFieldGet(this, _allItem)), objItem));
+                            _c.label = 2;
+                        case 2: return [2 /*return*/, values.map(function (val) { return __classPrivateFieldGet(_this, _allItem)[val]; })];
                     }
                 });
             }); });
             _loadItems.set(this, function (searchText, items) { return __awaiter(_this, void 0, void 0, function () {
-                var _a, results, objItem, values;
+                var results, objItem, selectedItems;
                 var _this = this;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
@@ -409,32 +423,14 @@
                             return [4 /*yield*/, items(searchText).finally(function () { return _this.loading = false; })];
                         case 1:
                             results = _c.sent();
-                            objItem = this.valueField ? this.utilityService.arrayToObject(results, this.valueField) : results.forEach(function (item) { return objItem[item === null || item === void 0 ? void 0 : item.toString()] = item; });
-                            Object.assign(__classPrivateFieldGet(this, _allItem), objItem);
-                            if (!((_a = this.formControl.value) === null || _a === void 0 ? void 0 : _a.toString())) {
-                                return [2 /*return*/, results];
-                            }
-                            values = Array.isArray(this.formControl.value) ? this.formControl.value : [this.formControl.value];
-                            values.map(function (val) { return val === null || val === void 0 ? void 0 : val.toString(); }).forEach(function (val) {
-                                var _c;
-                                if (!objItem[val]) {
-                                    if (__classPrivateFieldGet(_this, _allItem)[val]) {
-                                        results.push(__classPrivateFieldGet(_this, _allItem)[val]);
-                                    }
-                                    else {
-                                        if (_this.valueField && _this.displayField) {
-                                            results.push((_c = {},
-                                                _c[_this.valueField] = val,
-                                                _c[_this.displayField] = val,
-                                                _c));
-                                        }
-                                        else {
-                                            results.push(val);
-                                        }
-                                    }
-                                }
-                            });
-                            return [2 /*return*/, results];
+                            objItem = Array.toObject(results, this.valueField);
+                            __classPrivateFieldSet(this, _allItem, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _allItem)), objItem));
+                            if (!this.multiple) return [3 /*break*/, 3];
+                            return [4 /*yield*/, __classPrivateFieldGet(this, _loadSelectedItems).call(this, this.formControl.value, items)];
+                        case 2:
+                            selectedItems = _c.sent();
+                            return [2 /*return*/, __spread(selectedItems, results).union(this.valueField)];
+                        case 3: return [2 /*return*/, results.union(this.valueField)];
                     }
                 });
             }); });
@@ -454,13 +450,12 @@
                 _this.formControl.updateValueAndValidity({ emitEvent: true });
             };
             _onChange.set(this, function (value) {
-                var _a, _b;
                 if (Array.isArray(value)) {
                     _this.modelChange.emit(value);
                     _this.sdChange.emit(value);
                     _this.sdSelection.emit({
                         value: value,
-                        items: (_a = __classPrivateFieldGet(_this, _currentItems)) === null || _a === void 0 ? void 0 : _a.filter(function (e) { return value.some(function (e1) { return e1 === (e === null || e === void 0 ? void 0 : e[_this.valueField]); }); })
+                        items: _this.selectedItems
                     });
                 }
                 else {
@@ -468,7 +463,7 @@
                     _this.sdChange.emit(value);
                     _this.sdSelection.emit({
                         value: value,
-                        item: (_b = __classPrivateFieldGet(_this, _currentItems)) === null || _b === void 0 ? void 0 : _b.find(function (e) { return value === (e === null || e === void 0 ? void 0 : e[_this.valueField]); })
+                        item: _this.selectedItems[0]
                     });
                 }
             });
@@ -493,6 +488,22 @@
                     });
                 }
             };
+            this.onClick = function () {
+                var _a;
+                if ((_a = _this.sdView) === null || _a === void 0 ? void 0 : _a.templateRef) {
+                    if (!_this.formControl.disabled && !_this.isFocused) {
+                        _this.focus();
+                    }
+                }
+            };
+            this.focus = function () {
+                _this.isFocused = true;
+                setTimeout(function () {
+                    var _a, _b;
+                    (_a = _this.select) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = _this.select) === null || _b === void 0 ? void 0 : _b.open();
+                }, 100);
+            };
             _customValidator.set(this, function (func) {
                 return function (c) { return __awaiter(_this, void 0, void 0, function () {
                     var value, result, message;
@@ -526,11 +537,15 @@
             });
             this.onOpenChange = function (isOpened) {
                 if (isOpened) {
+                    _this.isFocused = true;
                     if (__classPrivateFieldGet(_this, _input)) {
                         __classPrivateFieldGet(_this, _input).value = null;
                     }
                     _this.searchTerm$.next('');
                 }
+                else {
+                    _this.isFocused = false;
+                }
             };
         }
         Object.defineProperty(SdSelect.prototype, "input", {
@@ -576,20 +591,7 @@
         });
         Object.defineProperty(SdSelect.prototype, "model", {
             set: function (value) {
-                // this.#model = value;
-                // if (Array.isArray(value)) {
-                //   this.formControl.setValue(value.map(val => (val ?? '') + ''));
-                // } else {
-                //   this.formControl.setValue((value ?? '') + '');
-                // }
-                // this.ref.detectChanges();
-                // this.#model = value;
-                if (Array.isArray(value)) {
-                    this.formControl.setValue(value);
-                }
-                else {
-                    this.formControl.setValue(value);
-                }
+                this.formControl.setValue(value);
             },
             enumerable: false,
             configurable: true
@@ -666,75 +668,57 @@
             __classPrivateFieldGet(this, _subscription).add(this.formControl.touchedChanges.subscribe(function () {
                 _this.ref.markForCheck();
             }));
-            __classPrivateFieldSet(this, _allItems, this.searchTerm$.asObservable().pipe(operators.startWith(''), operators.debounceTime(typeof (__classPrivateFieldGet(this, _items)) === 'function' ? __classPrivateFieldGet(this, _delay) : 0), operators.switchMap(function (val) { return __awaiter(_this, void 0, void 0, function () {
-                var changeAliasLowerCase, searchText, formValue, isArray, hasFields;
-                var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            if (!(typeof (__classPrivateFieldGet(this, _items)) === 'function')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, __classPrivateFieldGet(this, _loadItems).call(this, val, __classPrivateFieldGet(this, _items))];
-                        case 1: return [2 /*return*/, _c.sent()];
-                        case 2:
-                            changeAliasLowerCase = this.utilityService.changeAliasLowerCase;
-                            searchText = changeAliasLowerCase(val);
-                            formValue = this.formControl.value;
-                            isArray = Array.isArray(formValue);
-                            hasFields = !!this.valueField && !!this.displayField;
-                            return [2 /*return*/, __classPrivateFieldGet(this, _items).filter(function (item) {
-                                    var value = hasFields ? item[_this.valueField] : item;
-                                    var display = hasFields ? item[_this.displayField] : item;
-                                    if (changeAliasLowerCase(value).includes(searchText) || changeAliasLowerCase(display).includes(searchText)) {
-                                        return true;
-                                    }
-                                    if (isArray) {
-                                        return formValue.some(function (e) { return e === value; });
-                                    }
-                                    return formValue === value;
-                                }).sort(function (a, b) {
-                                    if (!_this.multiple) {
-                                        return 0;
-                                    }
-                                    var value1 = hasFields ? a[_this.valueField] : a;
-                                    var value2 = hasFields ? b[_this.valueField] : b;
-                                    if (isArray) {
-                                        var t1_1 = formValue.some(function (e) { return e === value1; });
-                                        var t2_1 = formValue.some(function (e) { return e === value2; });
-                                        if (t1_1 && !t2_1) {
-                                            return -1;
+            __classPrivateFieldSet(this, _allItems, rxjs.combineLatest([
+                this.searchTerm$.asObservable().pipe(operators.startWith(''), operators.debounceTime(typeof (__classPrivateFieldGet(this, _items)) === 'function' ? __classPrivateFieldGet(this, _delay) : 0)),
+                this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value))
+            ]).pipe(operators.switchMap(function (_c) {
+                var _d = __read(_c, 2), val = _d[0], formValue = _d[1];
+                return __awaiter(_this, void 0, void 0, function () {
+                    var isArray, hasFields;
+                    var _this = this;
+                    return __generator(this, function (_c) {
+                        switch (_c.label) {
+                            case 0:
+                                if (!(typeof (__classPrivateFieldGet(this, _items)) === 'function')) return [3 /*break*/, 2];
+                                return [4 /*yield*/, __classPrivateFieldGet(this, _loadItems).call(this, val, __classPrivateFieldGet(this, _items))];
+                            case 1: return [2 /*return*/, _c.sent()];
+                            case 2:
+                                isArray = Array.isArray(formValue);
+                                hasFields = !!this.valueField && !!this.displayField;
+                                return [2 /*return*/, __classPrivateFieldGet(this, _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 (!t1_1 && t2_1) {
-                                            return 1;
+                                        if (isArray) {
+                                            return formValue.some(function (e) { return e === value; });
                                         }
-                                        return 0;
-                                    }
-                                    var t1 = formValue === value1;
-                                    var t2 = formValue === value2;
-                                    if (t1 && !t2) {
-                                        return -1;
-                                    }
-                                    if (!t1 && t2) {
-                                        return 1;
-                                    }
-                                    return 0;
-                                })];
+                                        return formValue === value;
+                                    })];
+                        }
+                    });
+                });
+            })));
+            __classPrivateFieldSet(this, _selectedItems, __classPrivateFieldGet(this, _allItems).pipe(operators.map(function (items) {
+                var formValue = _this.formControl.value;
+                if (!(formValue === null || formValue === void 0 ? void 0 : formValue.toString())) {
+                    return [];
+                }
+                var values = Array.isArray(formValue) ? formValue : [formValue];
+                _this.selectedItems = values.map(function (val) {
+                    if (_this.valueField) {
+                        return items === null || items === void 0 ? void 0 : items.find(function (item) { return item[_this.valueField] === val; });
                     }
+                    return val;
                 });
-            }); })));
+                return _this.selectedItems;
+            })));
             this.filteredItems = __classPrivateFieldGet(this, _allItems).pipe(operators.map(function (allItems) {
-                __classPrivateFieldSet(_this, _currentItems, allItems);
-                return allItems.filter(function (item, index) { return index < _this.limit; });
-            }));
-            this.display = rxjs.combineLatest([__classPrivateFieldGet(this, _allItems), this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value))]).pipe(operators.map(function (_c) {
-                var _d = __read(_c, 2), items = _d[0], formValue = _d[1];
-                var isArray = Array.isArray(formValue);
-                if (!_this.valueField || !_this.displayField) {
-                    return isArray ? formValue === null || formValue === void 0 ? void 0 : formValue.join(', ') : formValue;
-                }
-                return items.filter(function (e) { return isArray ? formValue.includes(e[_this.valueField]) : formValue === e[_this.valueField]; })
-                    .map(function (e) { var _a; return (_a = e[_this.displayField]) === null || _a === void 0 ? void 0 : _a.toString(); })
-                    .join(', ');
+                console.log(allItems);
+                return allItems.paging(_this.limit);
             }));
+            this.display = __classPrivateFieldGet(this, _selectedItems).pipe(operators.map(function (selectedItems) { var _a; return (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(function (item) { return _this.displayField ? item[_this.displayField] : item; })) === null || _a === void 0 ? void 0 : _a.join(', '); }));
         };
         SdSelect.prototype.ngAfterViewInit = function () {
             var _a;
@@ -756,13 +740,13 @@
         };
         return SdSelect;
     }());
-    _input = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _items = new WeakMap(), _currentItems = new WeakMap(), _allItem = new WeakMap(), _delay = new WeakMap(), _validator = new WeakMap(), _allItems = new WeakMap(), _subscription = new WeakMap(), _updateValidator = new WeakMap(), _search = new WeakMap(), _loadItems = new WeakMap(), _onChange = new WeakMap(), _customValidator = new WeakMap();
+    _input = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _items = new WeakMap(), _delay = new WeakMap(), _validator = new WeakMap(), _subscription = new WeakMap(), _selectedItems = new WeakMap(), _allItems = new WeakMap(), _allItem = new WeakMap(), _updateValidator = new WeakMap(), _loadSelectedItems = new WeakMap(), _loadItems = new WeakMap(), _onChange = new WeakMap(), _customValidator = new WeakMap();
     SdSelect.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-select',
-                    template: "<div class=\"d-flex align-items-center\">\r\n  <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n    appearance=\"outline\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\" multiple\r\n      (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n      [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n      [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" *ngIf=\"multiple\">\r\n      <mat-select-trigger>\r\n        {{display | async }}\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n          <mat-icon matPrefix>search</mat-icon>\r\n          <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n        </mat-form-field>\r\n      </mat-option>\r\n      <ng-container *ngIf=\"multiple && selectAll\">\r\n        <mat-checkbox class=\"mat-option\" [(ngModel)]=\"allSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n          (change)=\"onSelectAll()\">\r\n          T\u1EA5t c\u1EA3</mat-checkbox>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"valueField && displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item[displayField] }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!valueField && !displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n    <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n      (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n      [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n      (openedChange)=\"onOpenChange($event)\" *ngIf=\"!multiple\">\r\n      <mat-select-trigger>\r\n        {{display | async }}\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n        <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n          <mat-icon matPrefix>search</mat-icon>\r\n          <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n        </mat-form-field>\r\n      </mat-option>\r\n      <ng-container *ngIf=\"valueField && displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item[displayField] }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!valueField && !displayField\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item\">\r\n          <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n            {{ item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n    <mat-icon\r\n      *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n      class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel\r\n    </mat-icon>\r\n    <mat-error *ngIf=\"formControl.errors?.required && !disableErrorMessage\">\r\n      {{'This field is required' | sdTranslate}}\r\n    </mat-error>\r\n    <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n      {{formControl?.errors?.customValidator}}\r\n    </mat-error>\r\n  </mat-form-field>\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 && !isFocused; else default\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value, selectedItems: selectedItems }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n      appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n      <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\" multiple\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && (multiple ? formControl?.value?.length : formControl?.value)}\"\r\n        [required]=\"isRequired\" (openedChange)=\"onOpenChange($event)\" *ngIf=\"multiple\">\r\n        <mat-select-trigger>\r\n          {{display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n          <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf=\"multiple && selectAll\">\r\n          <mat-checkbox class=\"mat-option\" [(ngModel)]=\"allSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n            (change)=\"onSelectAll()\">\r\n            T\u1EA5t c\u1EA3</mat-checkbox>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[displayField]\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item[displayField] }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-select #select [formControl]=\"formControl\" placeholder=\"{{placeholder || label}}\"\r\n        (selectionChange)=\"onSelectionChange($event)\" disableOptionCentering=\"true\" panelClass=\"sd-select-panel\"\r\n        [ngClass]=\"{'sd-selected': !isRequired && formControl?.value}\" [required]=\"isRequired\"\r\n        (openedChange)=\"onOpenChange($event)\" *ngIf=\"!multiple\">\r\n        <mat-select-trigger>\r\n          {{display | async }}\r\n        </mat-select-trigger>\r\n        <mat-option *ngIf=\"filtered\" class=\"sd-filtered-input\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n          <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n            <mat-icon matPrefix>search</mat-icon>\r\n            <input #input placeholder=\"{{'Search' | sdTranslate}}\" matInput autocomplete=\"off\"\r\n              (keydown)=\"$event.stopPropagation()\" (keyup)=\"searchTerm$.next($event.target.value)\">\r\n          </mat-form-field>\r\n        </mat-option>\r\n        <ng-container *ngIf=\"valueField && displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item[valueField]\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[displayField]\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item[displayField] }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!valueField && !displayField\">\r\n          <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item\">\r\n            <ng-container *ngIf=\"selectDisplayDef?.templateRef\">\r\n              <ng-container *ngTemplateOutlet=\"selectDisplayDef.templateRef;context:{item: item}\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!selectDisplayDef?.templateRef\">\r\n              {{ item }}\r\n            </ng-container>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n      <mat-icon\r\n        *ngIf=\"(multiple ? formControl?.value?.length : formControl?.value) && !isRequired && !formControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-error *ngIf=\"formControl.errors?.required && !disableErrorMessage\">\r\n        {{'This field is required' | sdTranslate}}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        {{formControl?.errors?.customValidator}}\r\n      </mat-error>\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.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}::ng-deep .sd-select-panel .mat-option.sd-filtered-input{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline{width:100%}::ng-deep .sd-select-panel .mat-option.sd-filtered-input mat-pseudo-checkbox{display:none}::ng-deep .mat-select-panel .mat-option.sd-filtered-input{height:auto}::ng-deep .sd-select-panel .mat-option.sd-filtered-input input{color:#000}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field-prefix .mat-icon{margin-right:0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding:10px 0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-outline{background-color:rgba(0,0,0,.04)}"]
+                    styles: [":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none}:host ::ng-deep .sd-selected .mat-select-arrow{border:none}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field mat-select.mat-select-disabled .mat-select-value{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline{width:100%}::ng-deep .sd-select-panel .mat-option.sd-filtered-input mat-pseudo-checkbox{display:none}::ng-deep .mat-select-panel .mat-option.sd-filtered-input{height:auto}::ng-deep .sd-select-panel .mat-option.sd-filtered-input input{color:#000}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field-prefix .mat-icon{margin-right:0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding:10px 0}::ng-deep .sd-select-panel .mat-option.sd-filtered-input .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-outline{background-color:rgba(0,0,0,.04)}"]
                 },] }
     ];
     SdSelect.ctorParameters = function () { return [
@@ -792,7 +776,8 @@
         _selectAll: [{ type: core.Input, args: ['selectAll',] }],
         modelChange: [{ type: core.Output }],
         sdChange: [{ type: core.Output }],
-        sdSelection: [{ type: core.Output }]
+        sdSelection: [{ type: core.Output }],
+        sdView: [{ type: core.ContentChild, args: [common.SdViewDefDirective,] }]
     };
 
     var SdSelectModule = /** @class */ (function () {
@@ -813,7 +798,8 @@
                         select.MatSelectModule,
                         progressSpinner.MatProgressSpinnerModule,
                         checkbox.MatCheckboxModule,
-                        translate.SdTranslateModule
+                        translate.SdTranslateModule,
+                        common.SdCommonModule
                     ],
                     declarations: [
                         SdSelect,
@@ -821,7 +807,8 @@
                     ],
                     exports: [
                         SdSelect,
-                        SdSelectDisplayDefDirective
+                        SdSelectDisplayDefDirective,
+                        common.SdCommonModule
                     ],
                     providers: []
                 },] }