@angular/material 8.0.0-beta.2 → 8.0.0

package/bundles/material-autocomplete.umd.js

@@ -42,7 +42,7 @@ function __extends(d, b) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Autocomplete IDs need to be unique across components, so this counter exists outside of
@@ -67,7 +67,7 @@ MatAutocompleteSelectedEvent = /** @class */ (function () {
 /**
  * \@docs-private
  */
-var   
+var 
 // Boilerplate for applying mixins to MatAutocomplete.
 /**
  * \@docs-private
@@ -173,10 +173,15 @@ var MatAutocomplete = /** @class */ (function (_super) {
          */
         function (value) {
             if (value && value.length) {
-                this._classList = value.split(' ').reduce(function (classList, className) {
+                this._classList = value.split(' ').reduce((/**
+                 * @param {?} classList
+                 * @param {?} className
+                 * @return {?}
+                 */
+                function (classList, className) {
                     classList[className.trim()] = true;
                     return classList;
-                }, (/** @type {?} */ ({})));
+                }), (/** @type {?} */ ({})));
             }
             else {
                 this._classList = {};
@@ -301,8 +306,8 @@ var MatAutocomplete = /** @class */ (function (_super) {
         { type: undefined, decorators: [{ type: core.Inject, args: [MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,] }] }
     ]; };
     MatAutocomplete.propDecorators = {
-        template: [{ type: core.ViewChild, args: [core.TemplateRef,] }],
-        panel: [{ type: core.ViewChild, args: ['panel',] }],
+        template: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }],
+        panel: [{ type: core.ViewChild, args: ['panel', { static: false },] }],
         options: [{ type: core.ContentChildren, args: [core$1.MatOption, { descendants: true },] }],
         optionGroups: [{ type: core.ContentChildren, args: [core$1.MatOptgroup,] }],
         displayWith: [{ type: core.Input }],
@@ -318,7 +323,7 @@ var MatAutocomplete = /** @class */ (function (_super) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Directive applied to an element to make it usable
@@ -343,7 +348,7 @@ var MatAutocompleteOrigin = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * The height of each autocomplete option.
@@ -366,7 +371,10 @@ var MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new core.InjectionToken('mat-autocomplete
  * @return {?}
  */
 function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay$$1) {
-    return function () { return overlay$$1.scrollStrategies.reposition(); };
+    return (/**
+     * @return {?}
+     */
+    function () { return overlay$$1.scrollStrategies.reposition(); });
 }
 /**
  * \@docs-private
@@ -384,7 +392,10 @@ var MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  */
 var MAT_AUTOCOMPLETE_VALUE_ACCESSOR = {
     provide: forms.NG_VALUE_ACCESSOR,
-    useExisting: core.forwardRef(function () { return MatAutocompleteTrigger; }),
+    useExisting: core.forwardRef((/**
+     * @return {?}
+     */
+    function () { return MatAutocompleteTrigger; })),
     multi: true
 };
 /**
@@ -433,21 +444,38 @@ var MatAutocompleteTrigger = /** @class */ (function () {
          * Event handler for when the window is blurred. Needs to be an
          * arrow function in order to preserve the context.
          */
-        this._windowBlurHandler = function () {
+        this._windowBlurHandler = (/**
+         * @return {?}
+         */
+        function () {
             // If the user blurred the window while the autocomplete is focused, it means that it'll be
             // refocused when they come back. In this case we want to skip the first focus event, if the
             // pane was closed, in order to avoid reopening it unintentionally.
             _this._canOpenOnNextFocus =
-                document.activeElement !== _this._element.nativeElement || _this.panelOpen;
-        };
+                _this._document.activeElement !== _this._element.nativeElement || _this.panelOpen;
+        });
         /**
          * `View -> model callback called when value changes`
          */
-        this._onChange = function () { };
+        this._onChange = (/**
+         * @return {?}
+         */
+        function () { });
         /**
          * `View -> model callback called when autocomplete has been touched`
          */
-        this._onTouched = function () { };
+        this._onTouched = (/**
+         * @return {?}
+         */
+        function () { });
+        /**
+         * Position of the autocomplete panel relative to the trigger element. A position of `auto`
+         * will render the panel underneath the trigger if there is enough space for it to fit in
+         * the viewport, otherwise the panel will be shown above it. If the position is set to
+         * `above` or `below`, the panel will always be shown above or below the trigger. no matter
+         * whether it fits completely in the viewport.
+         */
+        this.position = 'auto';
         /**
          * `autocomplete` attribute to be set on the input element.
          * \@docs-private
@@ -457,20 +485,33 @@ var MatAutocompleteTrigger = /** @class */ (function () {
         /**
          * Stream of autocomplete option selections.
          */
-        this.optionSelections = (/** @type {?} */ (rxjs.defer(function () {
+        this.optionSelections = (/** @type {?} */ (rxjs.defer((/**
+         * @return {?}
+         */
+        function () {
             if (_this.autocomplete && _this.autocomplete.options) {
-                return rxjs.merge.apply(void 0, _this.autocomplete.options.map(function (option) { return option.onSelectionChange; }));
+                return rxjs.merge.apply(void 0, _this.autocomplete.options.map((/**
+                 * @param {?} option
+                 * @return {?}
+                 */
+                function (option) { return option.onSelectionChange; })));
             }
             // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
             // Return a stream that we'll replace with the real one once everything is in place.
             return _this._zone.onStable
                 .asObservable()
-                .pipe(operators.take(1), operators.switchMap(function () { return _this.optionSelections; }));
-        })));
+                .pipe(operators.take(1), operators.switchMap((/**
+             * @return {?}
+             */
+            function () { return _this.optionSelections; })));
+        }))));
         if (typeof window !== 'undefined') {
-            _zone.runOutsideAngular(function () {
+            _zone.runOutsideAngular((/**
+             * @return {?}
+             */
+            function () {
                 window.addEventListener('blur', _this._windowBlurHandler);
-            });
+            }));
         }
         this._scrollStrategy = scrollStrategy;
     }
@@ -495,6 +536,22 @@ var MatAutocompleteTrigger = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    MatAutocompleteTrigger.prototype.ngOnChanges = /**
+     * @param {?} changes
+     * @return {?}
+     */
+    function (changes) {
+        if (changes['position'] && this._positionStrategy) {
+            this._setStrategyPositions(this._positionStrategy);
+            if (this.panelOpen) {
+                (/** @type {?} */ (this._overlayRef)).updatePosition();
+            }
+        }
+    };
     /**
      * @return {?}
      */
@@ -599,11 +656,21 @@ var MatAutocompleteTrigger = /** @class */ (function () {
          */
         function () {
             var _this = this;
-            return rxjs.merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(operators.filter(function () { return _this._overlayAttached; })), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
-                this._overlayRef.detachments().pipe(operators.filter(function () { return _this._overlayAttached; })) :
+            return rxjs.merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(operators.filter((/**
+             * @return {?}
+             */
+            function () { return _this._overlayAttached; }))), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
+                this._overlayRef.detachments().pipe(operators.filter((/**
+                 * @return {?}
+                 */
+                function () { return _this._overlayAttached; }))) :
                 rxjs.of()).pipe(
             // Normalize the output so we return a consistent type.
-            operators.map(function (event) { return event instanceof core$1.MatOptionSelectionChange ? event : null; }));
+            operators.map((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) { return event instanceof core$1.MatOptionSelectionChange ? event : null; })));
         },
         enumerable: true,
         configurable: true
@@ -636,11 +703,12 @@ var MatAutocompleteTrigger = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        if (!this._document) {
-            return rxjs.of(null);
-        }
         return rxjs.merge((/** @type {?} */ (rxjs.fromEvent(this._document, 'click'))), (/** @type {?} */ (rxjs.fromEvent(this._document, 'touchend'))))
-            .pipe(operators.filter(function (event) {
+            .pipe(operators.filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             /** @type {?} */
             var clickTarget = (/** @type {?} */ (event.target));
             /** @type {?} */
@@ -650,7 +718,7 @@ var MatAutocompleteTrigger = /** @class */ (function () {
                 clickTarget !== _this._element.nativeElement &&
                 (!formField$$1 || !formField$$1.contains(clickTarget)) &&
                 (!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget));
-        }));
+        })));
     };
     // Implemented as part of ControlValueAccessor.
     // Implemented as part of ControlValueAccessor.
@@ -666,7 +734,10 @@ var MatAutocompleteTrigger = /** @class */ (function () {
      */
     function (value) {
         var _this = this;
-        Promise.resolve(null).then(function () { return _this._setTriggerValue(value); });
+        Promise.resolve(null).then((/**
+         * @return {?}
+         */
+        function () { return _this._setTriggerValue(value); }));
     };
     // Implemented as part of ControlValueAccessor.
     // Implemented as part of ControlValueAccessor.
@@ -777,7 +848,7 @@ var MatAutocompleteTrigger = /** @class */ (function () {
         if (this._previousValue !== value) {
             this._previousValue = value;
             this._onChange(value);
-            if (this._canOpen() && document.activeElement === event.target) {
+            if (this._canOpen() && this._document.activeElement === event.target) {
                 this.openPanel();
             }
         }
@@ -910,7 +981,10 @@ var MatAutocompleteTrigger = /** @class */ (function () {
         /** @type {?} */
         var firstStable = this._zone.onStable.asObservable().pipe(operators.take(1));
         /** @type {?} */
-        var optionChanges = this.autocomplete.options.changes.pipe(operators.tap(function () { return _this._positionStrategy.reapplyLastPosition(); }), 
+        var optionChanges = this.autocomplete.options.changes.pipe(operators.tap((/**
+         * @return {?}
+         */
+        function () { return _this._positionStrategy.reapplyLastPosition(); })), 
         // Defer emitting to the stream until the next tick, because changing
         // bindings in here will cause "changed after checked" errors.
         operators.delay(0));
@@ -919,18 +993,34 @@ var MatAutocompleteTrigger = /** @class */ (function () {
             .pipe(
         // create a new stream of panelClosingActions, replacing any previous streams
         // that were created, and flatten it so our stream only emits closing events...
-        operators.switchMap(function () {
+        operators.switchMap((/**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var wasOpen = _this.panelOpen;
             _this._resetActiveItem();
             _this.autocomplete._setVisibility();
             if (_this.panelOpen) {
                 (/** @type {?} */ (_this._overlayRef)).updatePosition();
+                // If the `panelOpen` state changed, we need to make sure to emit the `opened`
+                // event, because we may not have emitted it when the panel was attached. This
+                // can happen if the users opens the panel and there are no options, but the
+                // options come in slightly later or as a result of the value changing.
+                if (wasOpen !== _this.panelOpen) {
+                    _this.autocomplete.opened.emit();
+                }
             }
             return _this.panelClosingActions;
-        }), 
+        })), 
         // when the first closing event occurs...
         operators.take(1))
             // set the value, close the panel, and complete.
-            .subscribe(function (event) { return _this._setValueAndClose(event); });
+            .subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) { return _this._setValueAndClose(event); }));
     };
     /** Destroys the autocomplete suggestion panel. */
     /**
@@ -1026,11 +1116,15 @@ var MatAutocompleteTrigger = /** @class */ (function () {
      * @return {?}
      */
     function (skip) {
-        this.autocomplete.options.forEach(function (option) {
+        this.autocomplete.options.forEach((/**
+         * @param {?} option
+         * @return {?}
+         */
+        function (option) {
             if (option != skip && option.selected) {
                 option.deselect();
             }
-        });
+        }));
     };
     /**
      * @private
@@ -1053,27 +1147,32 @@ var MatAutocompleteTrigger = /** @class */ (function () {
             this._overlayRef = overlayRef;
             // Use the `keydownEvents` in order to take advantage of
             // the overlay event targeting provided by the CDK overlay.
-            overlayRef.keydownEvents().subscribe(function (event) {
+            overlayRef.keydownEvents().subscribe((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) {
                 // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
                 // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
                 if (event.keyCode === keycodes.ESCAPE || (event.keyCode === keycodes.UP_ARROW && event.altKey)) {
                     _this._resetActiveItem();
                     _this._closeKeyEventStream.next();
                 }
-            });
+            }));
             if (this._viewportRuler) {
-                this._viewportSubscription = this._viewportRuler.change().subscribe(function () {
+                this._viewportSubscription = this._viewportRuler.change().subscribe((/**
+                 * @return {?}
+                 */
+                function () {
                     if (_this.panelOpen && overlayRef) {
                         overlayRef.updateSize({ width: _this._getPanelWidth() });
                     }
-                });
+                }));
             }
         }
         else {
-            /** @type {?} */
-            var position = (/** @type {?} */ (overlayRef.getConfig().positionStrategy));
             // Update the trigger, panel width and direction, in case anything has changed.
-            position.setOrigin(this._getConnectedElement());
+            this._positionStrategy.setOrigin(this._getConnectedElement());
             overlayRef.updateSize({ width: this._getPanelWidth() });
         }
         if (overlayRef && !overlayRef.hasAttached()) {
@@ -1115,29 +1214,59 @@ var MatAutocompleteTrigger = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this._positionStrategy = this._overlay.position()
+        /** @type {?} */
+        var strategy = this._overlay.position()
             .flexibleConnectedTo(this._getConnectedElement())
             .withFlexibleDimensions(false)
-            .withPush(false)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top'
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                // The overlay edge connected to the trigger should have squared corners, while
-                // the opposite end has rounded corners. We apply a CSS class to swap the
-                // border-radius based on the overlay position.
-                panelClass: 'mat-autocomplete-panel-above'
-            }
-        ]);
-        return this._positionStrategy;
+            .withPush(false);
+        this._setStrategyPositions(strategy);
+        this._positionStrategy = strategy;
+        return strategy;
+    };
+    /** Sets the positions on a position strategy based on the directive's input state. */
+    /**
+     * Sets the positions on a position strategy based on the directive's input state.
+     * @private
+     * @param {?} positionStrategy
+     * @return {?}
+     */
+    MatAutocompleteTrigger.prototype._setStrategyPositions = /**
+     * Sets the positions on a position strategy based on the directive's input state.
+     * @private
+     * @param {?} positionStrategy
+     * @return {?}
+     */
+    function (positionStrategy) {
+        /** @type {?} */
+        var belowPosition = {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        };
+        /** @type {?} */
+        var abovePosition = {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            // The overlay edge connected to the trigger should have squared corners, while
+            // the opposite end has rounded corners. We apply a CSS class to swap the
+            // border-radius based on the overlay position.
+            panelClass: 'mat-autocomplete-panel-above'
+        };
+        /** @type {?} */
+        var positions;
+        if (this.position === 'above') {
+            positions = [abovePosition];
+        }
+        else if (this.position === 'below') {
+            positions = [belowPosition];
+        }
+        else {
+            positions = [belowPosition, abovePosition];
+        }
+        positionStrategy.withPositions(positions);
     };
     /**
      * @private
@@ -1250,6 +1379,7 @@ var MatAutocompleteTrigger = /** @class */ (function () {
     ]; };
     MatAutocompleteTrigger.propDecorators = {
         autocomplete: [{ type: core.Input, args: ['matAutocomplete',] }],
+        position: [{ type: core.Input, args: ['matAutocompletePosition',] }],
         connectedTo: [{ type: core.Input, args: ['matAutocompleteConnectedTo',] }],
         autocompleteAttribute: [{ type: core.Input, args: ['autocomplete',] }],
         autocompleteDisabled: [{ type: core.Input, args: ['matAutocompleteDisabled',] }]
@@ -1259,7 +1389,7 @@ var MatAutocompleteTrigger = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var MatAutocompleteModule = /** @class */ (function () {
     function MatAutocompleteModule() {
@@ -1283,8 +1413,6 @@ var MatAutocompleteModule = /** @class */ (function () {
 
 exports.MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY = MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY;
 exports.MatAutocompleteSelectedEvent = MatAutocompleteSelectedEvent;
-exports.MatAutocompleteBase = MatAutocompleteBase;
-exports._MatAutocompleteMixinBase = _MatAutocompleteMixinBase;
 exports.MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = MAT_AUTOCOMPLETE_DEFAULT_OPTIONS;
 exports.MatAutocomplete = MatAutocomplete;
 exports.MatAutocompleteModule = MatAutocompleteModule;