@sd-angular/core 0.0.1005 → 0.0.1009

package/bundles/sd-angular-core-autocomplete.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('rxjs/operators'), require('uuid'), require('rxjs'), require('@sd-angular/core/utility'), require('@angular/material/autocomplete'), require('@sd-angular/core/common'), require('@sd-angular/core/typing'), require('@angular/material/icon'), require('@sd-angular/core/translate'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/autocomplete', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/input', 'rxjs/operators', 'uuid', 'rxjs', '@sd-angular/core/utility', '@angular/material/autocomplete', '@sd-angular/core/common', '@sd-angular/core/typing', '@angular/material/icon', '@sd-angular/core/translate', '@angular/material/tooltip', '@angular/material/progress-spinner'], 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.autocomplete = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.rxjs.operators, global.uuid, global.rxjs, global['sd-angular'].core.utility, global.ng.material.autocomplete, global['sd-angular'].core.common, global['sd-angular'].core.typing, global.ng.material.icon, global['sd-angular'].core.translate, global.ng.material.tooltip, global.ng.material.progressSpinner));
-}(this, (function (exports, core, common$1, forms, formField, input, operators, uuid, rxjs, utility, autocomplete, common, typing, icon, translate, tooltip, progressSpinner) { '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('rxjs/operators'), require('uuid'), require('rxjs'), require('@angular/material/autocomplete'), require('@sd-angular/core/common'), require('@angular/material/icon'), require('@sd-angular/core/translate'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/autocomplete', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/input', 'rxjs/operators', 'uuid', 'rxjs', '@angular/material/autocomplete', '@sd-angular/core/common', '@angular/material/icon', '@sd-angular/core/translate', '@angular/material/tooltip', '@angular/material/progress-spinner'], 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.autocomplete = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.rxjs.operators, global.uuid, global.rxjs, global.ng.material.autocomplete, global['sd-angular'].core.common, global.ng.material.icon, global['sd-angular'].core.translate, global.ng.material.tooltip, global.ng.material.progressSpinner));
+}(this, (function (exports, core, common$1, forms, formField, input, operators, uuid, rxjs, autocomplete, common, icon, translate, tooltip, progressSpinner) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -28,6 +28,8 @@
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -213,11 +215,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -226,7 +230,17 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -291,18 +305,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var SdAutocompleteDisplayDefDirective = /** @class */ (function () {
@@ -320,7 +337,7 @@
         { type: core.TemplateRef }
     ]; };
 
-    var _model, _items, _currentItems, _delay, _name, _form, _subscription, _loadItems;
+    var _model, _delay, _name, _form, _itemsChanges, _subscription, _cache, _item;
     var SdAutocompleteErrotStateMatcher = /** @class */ (function () {
         function SdAutocompleteErrotStateMatcher(formControl) {
             this.formControl = formControl;
@@ -333,21 +350,19 @@
         return SdAutocompleteErrotStateMatcher;
     }());
     var SdAutocomplete = /** @class */ (function () {
-        function SdAutocomplete(ref, utilityService) {
+        function SdAutocomplete(ref) {
             var _this = this;
             this.ref = ref;
-            this.utilityService = utilityService;
             this.id = "I" + uuid.v4();
             _model.set(this, void 0);
-            _items.set(this, []);
-            _currentItems.set(this, []);
-            _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
+            _delay.set(this, 0); // 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
             _name.set(this, uuid.v4());
             this.loading = false;
             this.inputControl = new forms.FormControl();
             this.formControl = new common.SdFormControl();
             this.matcher = new SdAutocompleteErrotStateMatcher(this.formControl);
             _form.set(this, void 0);
+            _itemsChanges.set(this, new rxjs.BehaviorSubject([]));
             this.limit = 100;
             this.action = new core.EventEmitter();
             this.modelChange = new core.EventEmitter();
@@ -355,17 +370,9 @@
             this.isRequired = false;
             this.disableErrorMessage = false;
             _subscription.set(this, new rxjs.Subscription());
-            _loadItems.set(this, function (searchText, items) { return __awaiter(_this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            this.loading = true;
-                            return [4 /*yield*/, items(searchText).finally(function () { return _this.loading = false; })];
-                        case 1: return [2 /*return*/, _d.sent()];
-                    }
-                });
-            }); });
+            this.isFocused = false;
+            _cache.set(this, {});
+            _item.set(this, {});
             this.onSelect = function (item) {
                 if (item) {
                     if (typeof (item) === 'string' || typeof (item) === 'number') {
@@ -386,21 +393,39 @@
                     _this.inputControl.setValue('', {
                         emitEvent: false
                     });
-                    // this.ref.markForCheck();
-                    // this.inputControl.setValue('', {
-                    //   emitEvent: false
-                    // });
                 }
             };
             this.onFocus = function () {
+                _this.isFocused = true;
                 _this.inputControl.setValue('');
                 // this.inputControl.updateValueAndValidity();
             };
             this.onBlur = function () {
+                _this.isFocused = false;
                 _this.inputControl.setValue('', {
                     emitEvent: false
                 });
             };
+            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.blur = function () {
+                var _a, _b;
+                (_b = (_a = _this.input) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.blur();
+            };
+            this.focus = function () {
+                _this.isFocused = true;
+                setTimeout(function () {
+                    var _a, _b, _c;
+                    (_a = _this.autocompleteTrigger) === null || _a === void 0 ? void 0 : _a.openPanel();
+                    (_c = (_b = _this.input) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.focus();
+                }, 100);
+            };
             this.clear = function ($event) {
                 var _a;
                 $event === null || $event === void 0 ? void 0 : $event.stopPropagation();
@@ -421,21 +446,11 @@
                 _this.inputControl.updateValueAndValidity({ emitEvent: true });
             };
         }
-        Object.defineProperty(SdAutocomplete.prototype, "isNumber", {
-            get: function () {
-                var _a;
-                if (__classPrivateFieldGet(this, _model) || __classPrivateFieldGet(this, _model) === 0) {
-                    return typeof (__classPrivateFieldGet(this, _model)) === 'number';
-                }
-                if ((_a = __classPrivateFieldGet(this, _currentItems)) === null || _a === void 0 ? void 0 : _a.length) {
-                    if (this.valueField) {
-                        return typeof (__classPrivateFieldGet(this, _currentItems)[0][this.valueField]) === 'number';
-                    }
-                    else {
-                        return typeof (__classPrivateFieldGet(this, _currentItems)[0]) === 'number';
-                    }
+        Object.defineProperty(SdAutocomplete.prototype, "name", {
+            set: function (val) {
+                if (val) {
+                    __classPrivateFieldSet(this, _name, val);
                 }
-                return false;
             },
             enumerable: false,
             configurable: true
@@ -457,16 +472,16 @@
         Object.defineProperty(SdAutocomplete.prototype, "items", {
             set: function (items) {
                 if (!items) {
-                    __classPrivateFieldSet(this, _items, []);
+                    __classPrivateFieldGet(this, _itemsChanges).next([]);
                 }
                 else if (Array.isArray(items)) {
-                    __classPrivateFieldSet(this, _items, items.filter(function (e) { return e !== null && e !== undefined; }));
+                    __classPrivateFieldGet(this, _itemsChanges).next(items.filter(function (e) { return e !== null && e !== undefined; }));
                 }
                 else {
-                    __classPrivateFieldSet(this, _items, items);
+                    __classPrivateFieldGet(this, _itemsChanges).next(items);
+                    __classPrivateFieldSet(this, _delay, 500);
                 }
                 this.formControl.updateValueAndValidity();
-                this.inputControl.updateValueAndValidity();
             },
             enumerable: false,
             configurable: true
@@ -485,9 +500,11 @@
                 val = (val === '') || val;
                 if (val) {
                     this.inputControl.disable();
+                    this.formControl.disable();
                 }
                 else {
                     this.inputControl.enable();
+                    this.formControl.disable();
                 }
             },
             enumerable: false,
@@ -519,74 +536,76 @@
             __classPrivateFieldGet(this, _subscription).add(this.formControl.touchedChanges.subscribe(function () {
                 _this.ref.markForCheck();
             }));
+            this.filteredItems = rxjs.combineLatest([
+                __classPrivateFieldGet(this, _itemsChanges).asObservable(),
+                this.inputControl.valueChanges.pipe(operators.debounceTime(__classPrivateFieldGet(this, _delay)))
+            ]).pipe(operators.switchMap(function (_e) {
+                var _f = __read(_e, 2), items = _f[0], searchText = _f[1];
+                searchText = searchText || '';
+                if (typeof (items) === 'function') {
+                    if (__classPrivateFieldGet(_this, _cache)[searchText] !== undefined) {
+                        return __classPrivateFieldGet(_this, _cache)[searchText].asObservable();
+                    }
+                    var obs = void 0;
+                    var func_1 = items(searchText, true);
+                    if (func_1 instanceof Promise) {
+                        obs = rxjs.defer(function () { return rxjs.from(func_1); });
+                    }
+                    else {
+                        obs = func_1;
+                    }
+                    _this.loading = true;
+                    return obs.pipe(operators.map(function (data) {
+                        __classPrivateFieldGet(_this, _cache)[searchText] = data || [];
+                        Object.assign(__classPrivateFieldGet(_this, _item), Array.toObject(__classPrivateFieldGet(_this, _cache)[searchText], _this.valueField));
+                        return __classPrivateFieldGet(_this, _cache)[searchText];
+                    }), operators.finalize(function () { return _this.loading = false; }));
+                }
+                return items
+                    .search(searchText, [_this.valueField, _this.displayField])
+                    .paging(_this.limit)
+                    .asObservable();
+            }));
+            this.selected = rxjs.combineLatest([
+                __classPrivateFieldGet(this, _itemsChanges).asObservable(),
+                this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value))
+            ])
+                .pipe(operators.switchMap(function (_e) {
+                var _f = __read(_e, 2), items = _f[0], val = _f[1];
+                if (!_this.valueField) {
+                    return rxjs.of(val);
+                }
+                if (val || val === 0) {
+                    if (typeof (items) === 'function') {
+                        if (__classPrivateFieldGet(_this, _item)[val]) {
+                            return rxjs.of(__classPrivateFieldGet(_this, _item)[val]);
+                        }
+                        var obs = void 0;
+                        var func_2 = items(val, true);
+                        if (func_2 instanceof Promise) {
+                            obs = rxjs.defer(function () { return rxjs.from(func_2); });
+                        }
+                        else {
+                            obs = func_2;
+                        }
+                        return obs.pipe(operators.map(function (data) {
+                            var _e;
+                            Object.assign(__classPrivateFieldGet(_this, _item), Array.toObject(data, _this.valueField));
+                            return __classPrivateFieldGet(_this, _item)[val] || (_e = {},
+                                _e[_this.valueField] = val,
+                                _e[_this.displayField] = val,
+                                _e);
+                        }));
+                    }
+                    return rxjs.of(items.find(function (e) { return e[_this.valueField] === val; }));
+                }
+                return rxjs.of('');
+            }));
+            this.controlPlaceHolder = this.selected.pipe(operators.map(function (item) { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item[_this.displayField]) !== null && _a !== void 0 ? _a : item) !== null && _b !== void 0 ? _b : _this.placeholder) !== null && _c !== void 0 ? _c : _this.label) !== null && _d !== void 0 ? _d : ''; }));
         };
         SdAutocomplete.prototype.ngAfterViewInit = function () {
-            var _this = this;
             var _a;
-            __classPrivateFieldGet(this, _subscription).add(this.formControl.statusChanges.subscribe(function () { return _this.ref.markForCheck(); }));
-            this.filteredItems = this.inputControl.valueChanges.pipe(operators.debounceTime(typeof (__classPrivateFieldGet(this, _items)) === 'function' ? __classPrivateFieldGet(this, _delay) : 0), 
-            // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes
-            operators.switchMap(function () { return __awaiter(_this, void 0, void 0, function () {
-                var val, items, changeAliasLowerCase;
-                var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            val = this.inputControl.value || '';
-                            if (!(typeof (__classPrivateFieldGet(this, _items)) === 'function')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, __classPrivateFieldGet(this, _loadItems).call(this, val, __classPrivateFieldGet(this, _items))];
-                        case 1:
-                            items = _d.sent();
-                            __classPrivateFieldSet(this, _currentItems, items.filter(function (item, index) { return index < _this.limit; }));
-                            return [2 /*return*/, __classPrivateFieldGet(this, _currentItems)];
-                        case 2:
-                            changeAliasLowerCase = this.utilityService.changeAliasLowerCase;
-                            __classPrivateFieldSet(this, _currentItems, __classPrivateFieldGet(this, _items).filter(function (item) {
-                                var value = item[_this.valueField];
-                                var display = item[_this.displayField];
-                                var searchText = changeAliasLowerCase(val);
-                                return changeAliasLowerCase(value).indexOf(searchText) !== -1 || changeAliasLowerCase(display).indexOf(searchText) !== -1;
-                            }).filter(function (item, index) { return index < _this.limit; }));
-                            return [2 /*return*/, __classPrivateFieldGet(this, _currentItems)];
-                    }
-                });
-            }); }));
-            this.controlPlaceHolder = this.formControl.valueChanges.pipe(operators.startWith(''), 
-            // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes
-            operators.switchMap(function () { return __awaiter(_this, void 0, void 0, function () {
-                var val, currentItems, items, item;
-                var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            val = this.formControl.value;
-                            if (!(val || val === 0)) return [3 /*break*/, 4];
-                            currentItems = [];
-                            items = __classPrivateFieldGet(this, _items);
-                            if (!(typeof (items) === 'function')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, __classPrivateFieldGet(this, _loadItems).call(this, val, items)];
-                        case 1:
-                            currentItems = _d.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            currentItems = items || [];
-                            _d.label = 3;
-                        case 3:
-                            if (this.valueField && this.displayField) {
-                                item = currentItems.find(function (e) { return e[_this.valueField] === val; });
-                                return [2 /*return*/, (item === null || item === void 0 ? void 0 : item[this.displayField]) || val];
-                            }
-                            else {
-                                return [2 /*return*/, currentItems.find(function (e) { return e === val; }) || val];
-                            }
-                            return [3 /*break*/, 5];
-                        case 4: return [2 /*return*/, this.placeholder || this.label || ''];
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            }); }));
             (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
-            this.ref.detectChanges();
         };
         SdAutocomplete.prototype.ngOnDestroy = function () {
             var _a;
@@ -595,29 +614,27 @@
         };
         return SdAutocomplete;
     }());
-    _model = new WeakMap(), _items = new WeakMap(), _currentItems = new WeakMap(), _delay = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _subscription = new WeakMap(), _loadItems = new WeakMap();
+    _model = new WeakMap(), _delay = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _itemsChanges = new WeakMap(), _subscription = new WeakMap(), _cache = new WeakMap(), _item = new WeakMap();
     SdAutocomplete.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-autocomplete',
-                    template: "<div class=\"d-flex align-items-center\">\r\n  <div class=\"mat-label mr-12 mb-12\" *ngIf=\"leftLabel\" [ngStyle]=\"{'min-width': labelMinWidth}\">{{leftLabel}}</div>\r\n  <div class=\"media-body\">\r\n    <mat-form-field class=\"sd-md\" [ngClass]=\"{'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage}\"\r\n      [floatLabel]=\"size === 'sm' || formControl.value ? 'always':'auto'\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label && !leftLabel\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"controlPlaceHolder | async\"\r\n        [ngClass]=\"{'c-selected': formControl?.value}\" [matAutocomplete]=\"auto\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        matInput [autocomplete]=\"id\" autocorrect=\"off\" [errorStateMatcher]=\"matcher\" [required]=\"isRequired\" />\r\n      <mat-icon *ngIf=\"!loading && formControl?.value && !inputControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon *ngIf=\"actionIcon && !loading && !formControl?.value && !inputControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"onAction($event)\" matSuffix>{{actionIcon}}\r\n      </mat-icon>\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\" matSuffix>\r\n      </mat-spinner>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[displayField]\">\r\n          <ng-container *ngIf=\"autocompleteDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"autocompleteDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!autocompleteDisplayDef?.templateRef\">\r\n            {{ item[displayField] }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </div>\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, selectedItem: selected | async }\">\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      [floatLabel]=\"size === 'sm' || formControl.value ? 'always':'auto'\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" #autocompleteTrigger [formControl]=\"inputControl\" [placeholder]=\"controlPlaceHolder | async\"\r\n        [ngClass]=\"{'c-selected': formControl?.value}\" [matAutocomplete]=\"auto\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        matInput [autocomplete]=\"id\" autocorrect=\"off\" [errorStateMatcher]=\"matcher\" [required]=\"isRequired\" #input />\r\n      <mat-icon *ngIf=\"!loading && formControl?.value && !inputControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon *ngIf=\"actionIcon && !loading && !formControl?.value && !inputControl.disabled\"\r\n        class=\"pointer sd-suffix-icon\" (click)=\"onAction($event)\" matSuffix>{{actionIcon}}\r\n      </mat-icon>\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\" matSuffix>\r\n      </mat-spinner>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\">\r\n        <mat-option *ngFor=\"let item of filteredItems | async\" [value]=\"item\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"displayField ? item[displayField] : item\">\r\n          <ng-container *ngIf=\"autocompleteDisplayDef?.templateRef\">\r\n            <ng-container *ngTemplateOutlet=\"autocompleteDisplayDef.templateRef;context:{item: item}\">\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!autocompleteDisplayDef?.templateRef\">\r\n            {{ displayField ? item[displayField] : item }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\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.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 input.c-selected::-moz-placeholder{color:#000;opacity:1}:host ::ng-deep .mat-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::-moz-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected:-ms-input-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::-ms-input-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}"]
+                    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.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.c-selected::-moz-placeholder{color:#000;opacity:1}:host ::ng-deep .mat-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::-moz-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected:-ms-input-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field input.mat-input-element:disabled.c-selected::-ms-input-placeholder{color:#4d4d4d}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]
                 },] }
     ];
     SdAutocomplete.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: utility.SdUtilityService }
+        { type: core.ChangeDetectorRef }
     ]; };
     SdAutocomplete.propDecorators = {
         autocompleteTrigger: [{ type: core.ViewChild, args: [autocomplete.MatAutocompleteTrigger, { read: autocomplete.MatAutocompleteTrigger },] }],
+        name: [{ type: core.Input }],
         size: [{ type: core.Input }],
         form: [{ type: core.Input }],
         label: [{ type: core.Input }],
         valueField: [{ type: core.Input }],
         displayField: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
-        leftLabel: [{ type: core.Input }],
-        labelMinWidth: [{ type: core.Input }],
         items: [{ type: core.Input }],
         limit: [{ type: core.Input }],
         model: [{ type: core.Input }],
@@ -628,7 +645,9 @@
         sdChange: [{ type: core.Output }],
         disabled: [{ type: core.Input }],
         required: [{ type: core.Input }],
-        _disableErrorMessage: [{ type: core.Input, args: ['disableErrorMessage',] }]
+        _disableErrorMessage: [{ type: core.Input, args: ['disableErrorMessage',] }],
+        input: [{ type: core.ViewChild, args: ['input',] }],
+        sdView: [{ type: core.ContentChild, args: [common.SdViewDefDirective,] }]
     };
 
     var SdAutocompleteModule = /** @class */ (function () {
@@ -648,7 +667,8 @@
                         autocomplete.MatAutocompleteModule,
                         icon.MatIconModule,
                         progressSpinner.MatProgressSpinnerModule,
-                        translate.SdTranslateModule
+                        translate.SdTranslateModule,
+                        common.SdCommonModule
                     ],
                     declarations: [
                         SdAutocomplete,
@@ -656,7 +676,8 @@
                     ],
                     exports: [
                         SdAutocomplete,
-                        SdAutocompleteDisplayDefDirective
+                        SdAutocompleteDisplayDefDirective,
+                        common.SdCommonModule
                     ],
                     providers: []
                 },] }