@angular/material 8.0.0-beta.2 → 8.0.0

package/esm5/autocomplete.es5.js

@@ -23,7 +23,7 @@ import { Subscription, defer, fromEvent, merge, of, Subject } from 'rxjs';
 
 /**
  * @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
@@ -48,7 +48,7 @@ MatAutocompleteSelectedEvent = /** @class */ (function () {
 /**
  * \@docs-private
  */
-var  
+var 
 // Boilerplate for applying mixins to MatAutocomplete.
 /**
  * \@docs-private
@@ -154,10 +154,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 = {};
@@ -282,8 +287,8 @@ var MatAutocomplete = /** @class */ (function (_super) {
         { type: undefined, decorators: [{ type: Inject, args: [MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,] }] }
     ]; };
     MatAutocomplete.propDecorators = {
-        template: [{ type: ViewChild, args: [TemplateRef,] }],
-        panel: [{ type: ViewChild, args: ['panel',] }],
+        template: [{ type: ViewChild, args: [TemplateRef, { static: true },] }],
+        panel: [{ type: ViewChild, args: ['panel', { static: false },] }],
         options: [{ type: ContentChildren, args: [MatOption, { descendants: true },] }],
         optionGroups: [{ type: ContentChildren, args: [MatOptgroup,] }],
         displayWith: [{ type: Input }],
@@ -299,7 +304,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
@@ -324,7 +329,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.
@@ -347,7 +352,10 @@ var MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken('mat-autocomplete-scro
  * @return {?}
  */
 function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay) {
-    return function () { return overlay.scrollStrategies.reposition(); };
+    return (/**
+     * @return {?}
+     */
+    function () { return overlay.scrollStrategies.reposition(); });
 }
 /**
  * \@docs-private
@@ -365,7 +373,10 @@ var MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  */
 var MAT_AUTOCOMPLETE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(function () { return MatAutocompleteTrigger; }),
+    useExisting: forwardRef((/**
+     * @return {?}
+     */
+    function () { return MatAutocompleteTrigger; })),
     multi: true
 };
 /**
@@ -414,21 +425,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
@@ -438,20 +466,33 @@ var MatAutocompleteTrigger = /** @class */ (function () {
         /**
          * Stream of autocomplete option selections.
          */
-        this.optionSelections = (/** @type {?} */ (defer(function () {
+        this.optionSelections = (/** @type {?} */ (defer((/**
+         * @return {?}
+         */
+        function () {
             if (_this.autocomplete && _this.autocomplete.options) {
-                return merge.apply(void 0, _this.autocomplete.options.map(function (option) { return option.onSelectionChange; }));
+                return 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(take(1), switchMap(function () { return _this.optionSelections; }));
-        })));
+                .pipe(take(1), 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;
     }
@@ -476,6 +517,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 {?}
      */
@@ -580,11 +637,21 @@ var MatAutocompleteTrigger = /** @class */ (function () {
          */
         function () {
             var _this = this;
-            return merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter(function () { return _this._overlayAttached; })), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
-                this._overlayRef.detachments().pipe(filter(function () { return _this._overlayAttached; })) :
+            return merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter((/**
+             * @return {?}
+             */
+            function () { return _this._overlayAttached; }))), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
+                this._overlayRef.detachments().pipe(filter((/**
+                 * @return {?}
+                 */
+                function () { return _this._overlayAttached; }))) :
                 of()).pipe(
             // Normalize the output so we return a consistent type.
-            map(function (event) { return event instanceof MatOptionSelectionChange ? event : null; }));
+            map((/**
+             * @param {?} event
+             * @return {?}
+             */
+            function (event) { return event instanceof MatOptionSelectionChange ? event : null; })));
         },
         enumerable: true,
         configurable: true
@@ -617,11 +684,12 @@ var MatAutocompleteTrigger = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        if (!this._document) {
-            return of(null);
-        }
         return merge((/** @type {?} */ (fromEvent(this._document, 'click'))), (/** @type {?} */ (fromEvent(this._document, 'touchend'))))
-            .pipe(filter(function (event) {
+            .pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             /** @type {?} */
             var clickTarget = (/** @type {?} */ (event.target));
             /** @type {?} */
@@ -631,7 +699,7 @@ var MatAutocompleteTrigger = /** @class */ (function () {
                 clickTarget !== _this._element.nativeElement &&
                 (!formField || !formField.contains(clickTarget)) &&
                 (!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget));
-        }));
+        })));
     };
     // Implemented as part of ControlValueAccessor.
     // Implemented as part of ControlValueAccessor.
@@ -647,7 +715,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.
@@ -758,7 +829,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();
             }
         }
@@ -891,7 +962,10 @@ var MatAutocompleteTrigger = /** @class */ (function () {
         /** @type {?} */
         var firstStable = this._zone.onStable.asObservable().pipe(take(1));
         /** @type {?} */
-        var optionChanges = this.autocomplete.options.changes.pipe(tap(function () { return _this._positionStrategy.reapplyLastPosition(); }), 
+        var optionChanges = this.autocomplete.options.changes.pipe(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.
         delay(0));
@@ -900,18 +974,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...
-        switchMap(function () {
+        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...
         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. */
     /**
@@ -1007,11 +1097,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
@@ -1034,27 +1128,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 === ESCAPE || (event.keyCode === 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()) {
@@ -1096,29 +1195,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
@@ -1231,6 +1360,7 @@ var MatAutocompleteTrigger = /** @class */ (function () {
     ]; };
     MatAutocompleteTrigger.propDecorators = {
         autocomplete: [{ type: Input, args: ['matAutocomplete',] }],
+        position: [{ type: Input, args: ['matAutocompletePosition',] }],
         connectedTo: [{ type: Input, args: ['matAutocompleteConnectedTo',] }],
         autocompleteAttribute: [{ type: Input, args: ['autocomplete',] }],
         autocompleteDisabled: [{ type: Input, args: ['matAutocompleteDisabled',] }]
@@ -1240,7 +1370,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() {
@@ -1264,13 +1394,13 @@ var MatAutocompleteModule = /** @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
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MatAutocompleteSelectedEvent, MatAutocompleteBase, _MatAutocompleteMixinBase, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocomplete, MatAutocompleteModule, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, getMatAutocompleteMissingPanelError, AUTOCOMPLETE_OPTION_HEIGHT, AUTOCOMPLETE_PANEL_HEIGHT, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocompleteTrigger, MatAutocompleteOrigin };
+export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MatAutocompleteSelectedEvent, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocomplete, MatAutocompleteModule, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, getMatAutocompleteMissingPanelError, AUTOCOMPLETE_OPTION_HEIGHT, AUTOCOMPLETE_PANEL_HEIGHT, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocompleteTrigger, MatAutocompleteOrigin };
 //# sourceMappingURL=autocomplete.es5.js.map