@ng-matero/extensions 12.9.2 → 12.10.0

package/bundles/mtxSelect.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('@ng-select/ng-select'), require('@angular/material/form-field'), require('@angular/cdk/coercion'), require('@angular/cdk/a11y'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/select', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@ng-select/ng-select', '@angular/material/form-field', '@angular/cdk/coercion', '@angular/cdk/a11y', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = global["ng-matero"].extensions || {}, global["ng-matero"].extensions.select = {}), global.ng.core, global.ng.common, global.ng.forms, global["ng-select"], global.ng.material.formField, global.ng.cdk.coercion, global.ng.cdk.a11y, global.rxjs, global.rxjs.operators));
-})(this, (function (exports, core, common, forms, ngSelect, formField, coercion, a11y, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@ng-select/ng-select'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/material/core'), require('@angular/material/form-field'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/select', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@ng-select/ng-select', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/material/core', '@angular/material/form-field', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = global["ng-matero"].extensions || {}, global["ng-matero"].extensions.select = {}), global.ng.core, global.ng.common, global.ng.forms, global["ng-select"], global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.material.core, global.ng.material.formField, global.rxjs, global.rxjs.operators));
+})(this, (function (exports, core, common, forms, ngSelect, a11y, coercion, core$1, formField, rxjs, operators) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -322,6 +322,77 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    var MtxOptionComponent = /** @class */ (function () {
+        function MtxOptionComponent(elementRef) {
+            this.elementRef = elementRef;
+            this._disabled = false;
+            this.stateChange$ = new rxjs.Subject();
+        }
+        Object.defineProperty(MtxOptionComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MtxOptionComponent.prototype, "label", {
+            get: function () {
+                return (this.elementRef.nativeElement.textContent || '').trim();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MtxOptionComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.disabled) {
+                this.stateChange$.next({
+                    value: this.value,
+                    disabled: this._disabled,
+                });
+            }
+        };
+        MtxOptionComponent.prototype.ngAfterViewChecked = function () {
+            if (this.label !== this._previousLabel) {
+                this._previousLabel = this.label;
+                this.stateChange$.next({
+                    value: this.value,
+                    disabled: this._disabled,
+                    label: this.elementRef.nativeElement.innerHTML,
+                });
+            }
+        };
+        MtxOptionComponent.prototype.ngOnDestroy = function () {
+            this.stateChange$.complete();
+        };
+        return MtxOptionComponent;
+    }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    MtxOptionComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'mtx-option',
+                    exportAs: 'mtxOption',
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    template: "<ng-content></ng-content>"
+                },] }
+    ];
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
+    MtxOptionComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
+    MtxOptionComponent.propDecorators = {
+        value: [{ type: core.Input }],
+        disabled: [{ type: core.Input }]
+    };
+
     var MtxSelectOptionTemplateDirective = /** @class */ (function () {
         function MtxSelectOptionTemplateDirective(template) {
             this.template = template;
@@ -543,163 +614,125 @@
         { type: core.TemplateRef }
     ]; };
 
-    var MtxOptionComponent = /** @class */ (function () {
-        function MtxOptionComponent(elementRef) {
-            this.elementRef = elementRef;
-            this.stateChange$ = new rxjs.Subject();
-            this._disabled = false;
-        }
-        Object.defineProperty(MtxOptionComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled;
-            },
-            set: function (value) {
-                this._disabled = this._isDisabled(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxOptionComponent.prototype, "label", {
-            get: function () {
-                return (this.elementRef.nativeElement.textContent || '').trim();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MtxOptionComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.disabled) {
-                this.stateChange$.next({
-                    value: this.value,
-                    disabled: this._disabled,
-                });
-            }
-        };
-        MtxOptionComponent.prototype.ngAfterViewChecked = function () {
-            if (this.label !== this._previousLabel) {
-                this._previousLabel = this.label;
-                this.stateChange$.next({
-                    value: this.value,
-                    disabled: this._disabled,
-                    label: this.elementRef.nativeElement.innerHTML,
-                });
-            }
-        };
-        MtxOptionComponent.prototype.ngOnDestroy = function () {
-            this.stateChange$.complete();
-        };
-        MtxOptionComponent.prototype._isDisabled = function (value) {
-            return value != null && "" + value !== 'false';
-        };
-        return MtxOptionComponent;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    MtxOptionComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'mtx-option',
-                    exportAs: 'mtxOption',
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    template: "<ng-content></ng-content>"
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    MtxOptionComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
-    MtxOptionComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
-    };
-
-    function isDefined(value) {
-        return value !== undefined && value !== null;
-    }
     var nextUniqueId = 0;
-    var MtxSelectComponent = /** @class */ (function () {
-        function MtxSelectComponent(_focusMonitor, _elementRef, _changeDetectorRef, ngControl) {
-            var _this = this;
-            this._focusMonitor = _focusMonitor;
-            this._elementRef = _elementRef;
-            this._changeDetectorRef = _changeDetectorRef;
+    // Boilerplate for applying mixins to MtxSelect.
+    /** @docs-private */
+    var _MtxSelectMixinBase = core$1.mixinErrorState(/** @class */ (function () {
+        function class_1(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, 
+        /**
+         * Form control bound to the component.
+         * Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
+        ngControl) {
+            this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
+            this._parentForm = _parentForm;
+            this._parentFormGroup = _parentFormGroup;
             this.ngControl = ngControl;
-            /** MtxSelect options */
-            this.addTag = false;
-            this.addTagText = 'Add item';
-            this.appearance = 'underline';
-            this.closeOnSelect = true;
-            this.clearAllText = 'Clear all';
-            this.clearable = true;
-            this.clearOnBackspace = true;
-            this.dropdownPosition = 'auto';
-            this.selectableGroup = false;
-            this.selectableGroupAsModel = true;
-            this.hideSelected = false;
-            this.loading = false;
-            this.loadingText = 'Loading...';
-            this.labelForId = null;
-            this.markFirst = true;
-            this.multiple = false;
-            this.notFoundText = 'No items found';
-            this.searchable = true;
-            this.readonly = false;
-            this.searchFn = null;
-            this.searchWhileComposing = true;
-            this.selectOnTab = false;
-            this.trackByFn = null;
-            this.inputAttrs = {};
-            this.minTermLength = 0;
-            this.editableSearchTerm = false;
-            this.keyDownFn = function (_) { return true; };
-            this.virtualScroll = false;
-            this.typeToSearchText = 'Type to search';
-            this.blurEvent = new core.EventEmitter();
-            this.focusEvent = new core.EventEmitter();
-            this.changeEvent = new core.EventEmitter();
-            this.openEvent = new core.EventEmitter();
-            this.closeEvent = new core.EventEmitter();
-            this.searchEvent = new core.EventEmitter();
-            this.clearEvent = new core.EventEmitter();
-            this.addEvent = new core.EventEmitter();
-            this.removeEvent = new core.EventEmitter();
-            this.scroll = new core.EventEmitter();
-            this.scrollToEnd = new core.EventEmitter();
-            this._items = [];
-            this._destroy$ = new rxjs.Subject();
-            this._value = null;
-            /** Implemented as part of MatFormFieldControl. */
+            /**
+             * Emits whenever the component state changes and should cause the parent
+             * form-field to update. Implemented as part of `MatFormFieldControl`.
+             * @docs-private
+             */
             this.stateChanges = new rxjs.Subject();
-            /** Unique id for this input. */
-            this._uid = "mtx-select-" + nextUniqueId++;
-            this._focused = false;
-            this._required = false;
-            this._disabled = false;
-            this.errorState = false;
+        }
+        return class_1;
+    }()));
+    var MtxSelectComponent = /** @class */ (function (_super) {
+        __extends(MtxSelectComponent, _super);
+        function MtxSelectComponent(_changeDetectorRef, _elementRef, _focusMonitor, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl, _parentFormField) {
+            var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
+            _this._changeDetectorRef = _changeDetectorRef;
+            _this._elementRef = _elementRef;
+            _this._focusMonitor = _focusMonitor;
+            _this._parentFormField = _parentFormField;
+            _this.addTag = false;
+            _this.addTagText = 'Add item';
+            _this.appearance = 'underline';
+            _this.closeOnSelect = true;
+            _this.clearAllText = 'Clear all';
+            _this.clearable = true;
+            _this.clearOnBackspace = true;
+            _this.dropdownPosition = 'auto';
+            _this.selectableGroup = false;
+            _this.selectableGroupAsModel = true;
+            _this.hideSelected = false;
+            _this.loading = false;
+            _this.loadingText = 'Loading...';
+            _this.labelForId = null;
+            _this.markFirst = true;
+            _this.multiple = false;
+            _this.notFoundText = 'No items found';
+            _this.searchable = true;
+            _this.readonly = false;
+            _this.searchFn = null;
+            _this.searchWhileComposing = true;
+            _this.selectOnTab = false;
+            _this.trackByFn = null;
+            _this.inputAttrs = {};
+            _this.minTermLength = 0;
+            _this.editableSearchTerm = false;
+            _this.keyDownFn = function (_) { return true; };
+            _this.virtualScroll = false;
+            _this.typeToSearchText = 'Type to search';
+            _this.blurEvent = new core.EventEmitter();
+            _this.focusEvent = new core.EventEmitter();
+            _this.changeEvent = new core.EventEmitter();
+            _this.openEvent = new core.EventEmitter();
+            _this.closeEvent = new core.EventEmitter();
+            _this.searchEvent = new core.EventEmitter();
+            _this.clearEvent = new core.EventEmitter();
+            _this.addEvent = new core.EventEmitter();
+            _this.removeEvent = new core.EventEmitter();
+            _this.scroll = new core.EventEmitter();
+            _this.scrollToEnd = new core.EventEmitter();
+            _this._items = [];
+            _this._itemsAreUsed = false;
+            /** Emits whenever the component is destroyed. */
+            _this._destroy$ = new rxjs.Subject();
+            _this._value = null;
+            /** Implemented as part of MatFormFieldControl. */
+            _this.stateChanges = new rxjs.Subject();
+            /** Unique id for this select. */
+            _this._uid = "mtx-select-" + nextUniqueId++;
+            _this._focused = false;
+            _this._required = false;
+            _this._disabled = false;
+            /** Aria label of the select. */
+            _this.ariaLabel = '';
+            /** Input that can be used to specify the `aria-labelledby` attribute. */
+            _this.ariaLabelledby = null;
+            /** The aria-describedby attribute on the select for improved a11y. */
+            _this._ariaDescribedby = null;
             /** A name for this control that can be used by `mat-form-field`. */
-            this.controlType = 'mtx-select';
+            _this.controlType = 'mtx-select';
             /** `View -> model callback called when value changes` */
-            this._onChange = function () { };
+            _this._onChange = function () { };
             /** `View -> model callback called when select has been touched` */
-            this._onTouched = function () { };
-            _focusMonitor.monitor(_elementRef, true).subscribe(function (origin) {
+            _this._onTouched = function () { };
+            /** ID for the DOM node containing the select's value. */
+            _this._valueId = "mtx-select-value-" + nextUniqueId++;
+            _focusMonitor.monitor(_this._elementRef, true).subscribe(function (origin) {
                 if (_this._focused && !origin) {
                     _this._onTouched();
                 }
                 _this._focused = !!origin;
                 _this.stateChanges.next();
             });
-            if (this.ngControl != null) {
-                this.ngControl.valueAccessor = this;
+            if (_this.ngControl != null) {
+                // Note: we provide the value accessor through here, instead of
+                // the `providers` to avoid running into a circular import.
+                _this.ngControl.valueAccessor = _this;
             }
+            // Force setter to be called in case id was not specified.
+            // eslint-disable-next-line no-self-assign
+            _this.id = _this.id;
+            return _this;
         }
         Object.defineProperty(MtxSelectComponent.prototype, "clearSearchOnAdd", {
             get: function () {
-                return isDefined(this._clearSearchOnAdd) ? this._clearSearchOnAdd : this.closeOnSelect;
+                var _a;
+                return (_a = this._clearSearchOnAdd) !== null && _a !== void 0 ? _a : this.closeOnSelect;
             },
             set: function (value) {
                 this._clearSearchOnAdd = value;
@@ -756,7 +789,7 @@
             configurable: true
         });
         Object.defineProperty(MtxSelectComponent.prototype, "focused", {
-            /** Whether the input is focused. */
+            /** Whether the select is focused. */
             get: function () {
                 return this._focused;
             },
@@ -764,6 +797,7 @@
             configurable: true
         });
         Object.defineProperty(MtxSelectComponent.prototype, "empty", {
+            /** Whether the select has a value. */
             get: function () {
                 return this.value == null || (Array.isArray(this.value) && this.value.length === 0);
             },
@@ -771,6 +805,10 @@
             configurable: true
         });
         Object.defineProperty(MtxSelectComponent.prototype, "shouldLabelFloat", {
+            /**
+             * Implemented as part of MatFormFieldControl.
+             * @docs-private
+             */
             get: function () {
                 return this.focused || !this.empty;
             },
@@ -778,6 +816,7 @@
             configurable: true
         });
         Object.defineProperty(MtxSelectComponent.prototype, "required", {
+            /** Whether the component is required. */
             get: function () {
                 return this._required;
             },
@@ -789,6 +828,7 @@
             configurable: true
         });
         Object.defineProperty(MtxSelectComponent.prototype, "disabled", {
+            /** Whether the select is disabled. */
             get: function () {
                 return this._disabled;
             },
@@ -801,6 +841,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MtxSelectComponent.prototype, "panelOpen", {
+            /** Whether or not the overlay panel is open. */
+            get: function () {
+                return !!this.ngSelect.isOpen;
+            },
+            enumerable: false,
+            configurable: true
+        });
         MtxSelectComponent.prototype.ngOnInit = function () {
             // Fix compareWith warning of undefined value
             // https://github.com/ng-select/ng-select/issues/1537
@@ -815,8 +863,10 @@
         };
         MtxSelectComponent.prototype.ngDoCheck = function () {
             if (this.ngControl) {
-                this.errorState = (this.ngControl.invalid && this.ngControl.touched);
-                this.stateChanges.next();
+                // We need to re-evaluate this on every change detection cycle, because there are some
+                // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+                // that whatever logic is in here has to be super lean or we risk destroying the performance.
+                this.updateErrorState();
             }
         };
         MtxSelectComponent.prototype.ngOnDestroy = function () {
@@ -825,9 +875,22 @@
             this.stateChanges.complete();
             this._focusMonitor.stopMonitoring(this._elementRef);
         };
+        /** Gets the value for the `aria-labelledby` attribute of the inputs. */
+        MtxSelectComponent.prototype._getAriaLabelledby = function () {
+            var _a;
+            if (this.ariaLabel) {
+                return null;
+            }
+            var labelId = (_a = this._parentFormField) === null || _a === void 0 ? void 0 : _a.getLabelId();
+            var value = (labelId ? labelId + ' ' : '') + this._valueId;
+            if (this.ariaLabelledby) {
+                value += ' ' + this.ariaLabelledby;
+            }
+            return value;
+        };
         /** Implemented as part of MatFormFieldControl. */
         MtxSelectComponent.prototype.setDescribedByIds = function (ids) {
-            this._ariaDescribedby = ids.join(' ');
+            this._ariaDescribedby = ids.length ? ids.join(' ') : null;
         };
         /**
          * Disables the select. Part of the ControlValueAccessor interface required
@@ -877,7 +940,7 @@
         MtxSelectComponent.prototype.registerOnTouched = function (fn) {
             this._onTouched = fn;
         };
-        /** NgSelect: _setItemsFromNgOptions */
+        /** NgSelect's `_setItemsFromNgOptions` */
         MtxSelectComponent.prototype._setItemsFromMtxOptions = function () {
             var _this = this;
             var mapMtxOptions = function (options) {
@@ -922,17 +985,29 @@
             this.ngSelect.blur();
         };
         return MtxSelectComponent;
-    }());
+    }(_MtxSelectMixinBase));
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxSelectComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-select',
                     exportAs: 'mtxSelect',
                     host: {
+                        'role': 'combobox',
+                        'aria-autocomplete': 'none',
                         '[attr.id]': 'id',
+                        '[attr.aria-expanded]': 'panelOpen',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.aria-labelledby]': '_getAriaLabelledby()',
                         '[attr.aria-describedby]': '_ariaDescribedby || null',
+                        '[attr.aria-required]': 'required.toString()',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.aria-invalid]': 'errorState',
                         '[class.mtx-select-floating]': 'shouldLabelFloat',
+                        '[class.mtx-select-disabled]': 'disabled',
                         '[class.mtx-select-invalid]': 'errorState',
+                        '[class.mtx-select-required]': 'required',
+                        '[class.mtx-select-empty]': 'empty',
+                        '[class.mtx-select-multiple]': 'multiple',
                         'class': 'mtx-select',
                     },
                     template: "<ng-select #ngSelect [class.ng-select-invalid]=\"errorState\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           [items]=\"items\"\n           [addTag]=\"addTag\"\n           [addTagText]=\"addTagText\"\n           [appendTo]=\"appendTo\"\n           [appearance]=\"appearance\"\n           [bindLabel]=\"bindLabel\"\n           [bindValue]=\"bindValue\"\n           [closeOnSelect]=\"closeOnSelect\"\n           [clearAllText]=\"clearAllText\"\n           [clearable]=\"clearable\"\n           [clearOnBackspace]=\"clearOnBackspace\"\n           [dropdownPosition]=\"dropdownPosition\"\n           [groupBy]=\"groupBy\"\n           [groupValue]=\"groupValue\"\n           [hideSelected]=\"hideSelected\"\n           [isOpen]=\"isOpen\"\n           [inputAttrs]=\"inputAttrs\"\n           [loading]=\"loading\"\n           [loadingText]=\"loadingText\"\n           [labelForId]=\"labelForId\"\n           [markFirst]=\"markFirst\"\n           [maxSelectedItems]=\"maxSelectedItems\"\n           [multiple]=\"multiple\"\n           [notFoundText]=\"notFoundText\"\n           [readonly]=\"readonly\"\n           [typeahead]=\"typeahead\"\n           [typeToSearchText]=\"typeToSearchText\"\n           [trackByFn]=\"trackByFn\"\n           [searchable]=\"searchable\"\n           [searchFn]=\"searchFn\"\n           [searchWhileComposing]=\"searchWhileComposing\"\n           [clearSearchOnAdd]=\"clearSearchOnAdd\"\n           [selectableGroup]=\"selectableGroup\"\n           [selectableGroupAsModel]=\"selectableGroupAsModel\"\n           [selectOnTab]=\"selectOnTab\"\n           [tabIndex]=\"tabIndex\"\n           [openOnEnter]=\"openOnEnter\"\n           [minTermLength]=\"minTermLength\"\n           [editableSearchTerm]=\"editableSearchTerm\"\n           [keyDownFn]=\"keyDownFn\"\n           [virtualScroll]=\"virtualScroll\"\n           (blur)=\"blurEvent.emit($event)\"\n           (focus)=\"focusEvent.emit($event)\"\n           (change)=\"changeEvent.emit($event)\"\n           (open)=\"openEvent.emit($event)\"\n           (close)=\"closeEvent.emit($event)\"\n           (search)=\"searchEvent.emit($event)\"\n           (clear)=\"clearEvent.emit($event)\"\n           (add)=\"addEvent.emit($event)\"\n           (remove)=\"removeEvent.emit($event)\"\n           (scroll)=\"scroll.emit($event)\"\n           (scrollToEnd)=\"scrollToEnd.emit($event)\">\n\n  <ng-container *ngIf=\"optionTemplate\">\n    <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n                 let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"optionTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optgroupTemplate\">\n    <ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\"\n                 let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"optgroupTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, item$: item$, index: index, searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"labelTemplate\">\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n      <ng-template [ngTemplateOutlet]=\"labelTemplate\"\n                   [ngTemplateOutletContext]=\"{ item: item, clear: clear, label: label }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"multiLabelTemplate\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <ng-template [ngTemplateOutlet]=\"multiLabelTemplate\"\n                   [ngTemplateOutletContext]=\"{ items: items, clear: clear }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate\">\n    <ng-template ng-header-tmp>\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate\">\n    <ng-template ng-footer-tmp>\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"notFoundTemplate\">\n    <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"notFoundTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"typeToSearchTemplate\">\n    <ng-template ng-typetosearch-tmp>\n      <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"loadingTextTemplate\">\n    <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"loadingTextTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"tagTemplate\">\n    <ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n      <ng-template [ngTemplateOutlet]=\"tagTemplate\"\n                   [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"loadingSpinnerTemplate\">\n    <ng-template ng-loadingspinner-tmp>\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate\">\n      </ng-template>\n    </ng-template>\n  </ng-container>\n\n</ng-select>\n",
@@ -950,10 +1025,14 @@
      * @nocollapse
      */
     MtxSelectComponent.ctorParameters = function () { return [
-        { type: a11y.FocusMonitor },
-        { type: core.ElementRef },
         { type: core.ChangeDetectorRef },
-        { type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] }
+        { type: core.ElementRef },
+        { type: a11y.FocusMonitor },
+        { type: core$1.ErrorStateMatcher },
+        { type: forms.NgForm, decorators: [{ type: core.Optional }] },
+        { type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
+        { type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] },
+        { type: formField.MatFormField, decorators: [{ type: core.Optional }, { type: core.Inject, args: [formField.MAT_FORM_FIELD,] }] }
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxSelectComponent.propDecorators = {
@@ -1027,7 +1106,10 @@
         id: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         required: [{ type: core.Input }],
-        disabled: [{ type: core.Input }]
+        disabled: [{ type: core.Input }],
+        errorStateMatcher: [{ type: core.Input }],
+        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
+        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }]
     };
 
     var MtxSelectModule = /** @class */ (function () {
@@ -1090,7 +1172,6 @@
     exports.MtxSelectOptionTemplateDirective = MtxSelectOptionTemplateDirective;
     exports.MtxSelectTagTemplateDirective = MtxSelectTagTemplateDirective;
     exports.MtxSelectTypeToSearchTemplateDirective = MtxSelectTypeToSearchTemplateDirective;
-    exports.isDefined = isDefined;
 
     Object.defineProperty(exports, '__esModule', { value: true });