@angular/material 8.0.0-beta.2 → 8.0.0

package/esm2015/autocomplete.js

@@ -22,7 +22,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
@@ -130,10 +130,15 @@ class MatAutocomplete extends _MatAutocompleteMixinBase {
      */
     set classList(value) {
         if (value && value.length) {
-            this._classList = value.split(' ').reduce((classList, className) => {
+            this._classList = value.split(' ').reduce((/**
+             * @param {?} classList
+             * @param {?} className
+             * @return {?}
+             */
+            (classList, className) => {
                 classList[className.trim()] = true;
                 return classList;
-            }, (/** @type {?} */ ({})));
+            }), (/** @type {?} */ ({})));
         }
         else {
             this._classList = {};
@@ -220,8 +225,8 @@ MatAutocomplete.ctorParameters = () => [
     { 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 }],
@@ -235,7 +240,7 @@ MatAutocomplete.propDecorators = {
 
 /**
  * @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
@@ -262,7 +267,7 @@ MatAutocompleteOrigin.ctorParameters = () => [
 
 /**
  * @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.
@@ -285,7 +290,10 @@ const MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken('mat-autocomplete-sc
  * @return {?}
  */
 function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay) {
-    return () => overlay.scrollStrategies.reposition();
+    return (/**
+     * @return {?}
+     */
+    () => overlay.scrollStrategies.reposition());
 }
 /**
  * \@docs-private
@@ -303,7 +311,10 @@ const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  */
 const MAT_AUTOCOMPLETE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MatAutocompleteTrigger),
+    useExisting: forwardRef((/**
+     * @return {?}
+     */
+    () => MatAutocompleteTrigger)),
     multi: true
 };
 /**
@@ -363,21 +374,38 @@ class MatAutocompleteTrigger {
          * Event handler for when the window is blurred. Needs to be an
          * arrow function in order to preserve the context.
          */
-        this._windowBlurHandler = () => {
+        this._windowBlurHandler = (/**
+         * @return {?}
+         */
+        () => {
             // 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 = () => { };
+        this._onChange = (/**
+         * @return {?}
+         */
+        () => { });
         /**
          * `View -> model callback called when autocomplete has been touched`
          */
-        this._onTouched = () => { };
+        this._onTouched = (/**
+         * @return {?}
+         */
+        () => { });
+        /**
+         * 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
@@ -387,20 +415,33 @@ class MatAutocompleteTrigger {
         /**
          * Stream of autocomplete option selections.
          */
-        this.optionSelections = (/** @type {?} */ (defer(() => {
+        this.optionSelections = (/** @type {?} */ (defer((/**
+         * @return {?}
+         */
+        () => {
             if (this.autocomplete && this.autocomplete.options) {
-                return merge(...this.autocomplete.options.map(option => option.onSelectionChange));
+                return merge(...this.autocomplete.options.map((/**
+                 * @param {?} option
+                 * @return {?}
+                 */
+                option => 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(() => this.optionSelections));
-        })));
+                .pipe(take(1), switchMap((/**
+             * @return {?}
+             */
+            () => this.optionSelections)));
+        }))));
         if (typeof window !== 'undefined') {
-            _zone.runOutsideAngular(() => {
+            _zone.runOutsideAngular((/**
+             * @return {?}
+             */
+            () => {
                 window.addEventListener('blur', this._windowBlurHandler);
-            });
+            }));
         }
         this._scrollStrategy = scrollStrategy;
     }
@@ -417,6 +458,18 @@ class MatAutocompleteTrigger {
     set autocompleteDisabled(value) {
         this._autocompleteDisabled = coerceBooleanProperty(value);
     }
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    ngOnChanges(changes) {
+        if (changes['position'] && this._positionStrategy) {
+            this._setStrategyPositions(this._positionStrategy);
+            if (this.panelOpen) {
+                (/** @type {?} */ (this._overlayRef)).updatePosition();
+            }
+        }
+    }
     /**
      * @return {?}
      */
@@ -488,11 +541,21 @@ class MatAutocompleteTrigger {
      * @return {?}
      */
     get panelClosingActions() {
-        return merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter(() => this._overlayAttached)), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
-            this._overlayRef.detachments().pipe(filter(() => this._overlayAttached)) :
+        return merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter((/**
+         * @return {?}
+         */
+        () => this._overlayAttached))), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
+            this._overlayRef.detachments().pipe(filter((/**
+             * @return {?}
+             */
+            () => this._overlayAttached))) :
             of()).pipe(
         // Normalize the output so we return a consistent type.
-        map(event => event instanceof MatOptionSelectionChange ? event : null));
+        map((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => event instanceof MatOptionSelectionChange ? event : null)));
     }
     /**
      * The currently active option, coerced to MatOption type.
@@ -510,11 +573,12 @@ class MatAutocompleteTrigger {
      * @return {?}
      */
     _getOutsideClickStream() {
-        if (!this._document) {
-            return of(null);
-        }
         return merge((/** @type {?} */ (fromEvent(this._document, 'click'))), (/** @type {?} */ (fromEvent(this._document, 'touchend'))))
-            .pipe(filter(event => {
+            .pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             /** @type {?} */
             const clickTarget = (/** @type {?} */ (event.target));
             /** @type {?} */
@@ -524,7 +588,7 @@ class MatAutocompleteTrigger {
                 clickTarget !== this._element.nativeElement &&
                 (!formField || !formField.contains(clickTarget)) &&
                 (!!this._overlayRef && !this._overlayRef.overlayElement.contains(clickTarget));
-        }));
+        })));
     }
     // Implemented as part of ControlValueAccessor.
     /**
@@ -532,7 +596,10 @@ class MatAutocompleteTrigger {
      * @return {?}
      */
     writeValue(value) {
-        Promise.resolve(null).then(() => this._setTriggerValue(value));
+        Promise.resolve(null).then((/**
+         * @return {?}
+         */
+        () => this._setTriggerValue(value)));
     }
     // Implemented as part of ControlValueAccessor.
     /**
@@ -614,7 +681,7 @@ class MatAutocompleteTrigger {
         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();
             }
         }
@@ -692,7 +759,10 @@ class MatAutocompleteTrigger {
         /** @type {?} */
         const firstStable = this._zone.onStable.asObservable().pipe(take(1));
         /** @type {?} */
-        const optionChanges = this.autocomplete.options.changes.pipe(tap(() => this._positionStrategy.reapplyLastPosition()), 
+        const optionChanges = this.autocomplete.options.changes.pipe(tap((/**
+         * @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));
@@ -701,18 +771,34 @@ class MatAutocompleteTrigger {
             .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(() => {
+        switchMap((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            const 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(event => this._setValueAndClose(event));
+            .subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => this._setValueAndClose(event)));
     }
     /**
      * Destroys the autocomplete suggestion panel.
@@ -775,11 +861,15 @@ class MatAutocompleteTrigger {
      * @return {?}
      */
     _clearPreviousSelectedOption(skip) {
-        this.autocomplete.options.forEach(option => {
+        this.autocomplete.options.forEach((/**
+         * @param {?} option
+         * @return {?}
+         */
+        option => {
             if (option != skip && option.selected) {
                 option.deselect();
             }
-        });
+        }));
     }
     /**
      * @private
@@ -797,27 +887,32 @@ class MatAutocompleteTrigger {
             this._overlayRef = overlayRef;
             // Use the `keydownEvents` in order to take advantage of
             // the overlay event targeting provided by the CDK overlay.
-            overlayRef.keydownEvents().subscribe(event => {
+            overlayRef.keydownEvents().subscribe((/**
+             * @param {?} event
+             * @return {?}
+             */
+            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(() => {
+                this._viewportSubscription = this._viewportRuler.change().subscribe((/**
+                 * @return {?}
+                 */
+                () => {
                     if (this.panelOpen && overlayRef) {
                         overlayRef.updateSize({ width: this._getPanelWidth() });
                     }
-                });
+                }));
             }
         }
         else {
-            /** @type {?} */
-            const 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()) {
@@ -851,29 +946,52 @@ class MatAutocompleteTrigger {
      * @return {?}
      */
     _getOverlayPosition() {
-        this._positionStrategy = this._overlay.position()
+        /** @type {?} */
+        const 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.
+     * @private
+     * @param {?} positionStrategy
+     * @return {?}
+     */
+    _setStrategyPositions(positionStrategy) {
+        /** @type {?} */
+        const belowPosition = {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        };
+        /** @type {?} */
+        const 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 {?} */
+        let positions;
+        if (this.position === 'above') {
+            positions = [abovePosition];
+        }
+        else if (this.position === 'below') {
+            positions = [belowPosition];
+        }
+        else {
+            positions = [belowPosition, abovePosition];
+        }
+        positionStrategy.withPositions(positions);
     }
     /**
      * @private
@@ -957,6 +1075,7 @@ MatAutocompleteTrigger.ctorParameters = () => [
 ];
 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',] }]
@@ -964,7 +1083,7 @@ MatAutocompleteTrigger.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class MatAutocompleteModule {
 }
@@ -985,13 +1104,13 @@ MatAutocompleteModule.decorators = [
 
 /**
  * @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.js.map