feat(google-maps): add google-map component

Fix lint issues. Fix overviews bazel rule typo.

Author: mbehrlich

.github/CODEOWNERS

@@ -140,6 +140,7 @@
 /src/dev-app/expansion/**                          @josephperrott
 /src/dev-app/focus-origin/**                       @mmalerba
 /src/dev-app/gestures/**                           @jelbourn
+/src/dev-app/google-map/**                         @mbehrlich
 /src/dev-app/grid-list/**                          @jelbourn
 /src/dev-app/icon/**                               @jelbourn
 /src/dev-app/input/**                              @mmalerba

src/google-maps/BUILD.bazel

@@ -5,29 +5,29 @@ load("//tools:defaults.bzl", "ng_module", "ng_package")
 
 # Root "@angular/google-maps" entry-point that does not re-export individual entry-points.
 ng_module(
-  name = "google-maps",
-  srcs = glob(
-    ["*.ts"],
-    exclude = ["**/*.spec.ts"],
-  ),
-  module_name = "@angular/google-maps",
-  deps = [
-    "@npm//@angular/core",
-    "@npm//@types/googlemaps",
-  ],
+    name = "google-maps",
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/google-maps",
+    deps = [
+        "@npm//@angular/core",
+        "@npm//@types/googlemaps",
+    ],
 )
 
 filegroup(
-  name = "overviews",
-  srcs = ["//src/material/%s:overview" % name for name in GOOGLE_MAPS_PACKAGES],
+    name = "overviews",
+    srcs = ["//src/google-maps/%s:overview" % name for name in GOOGLE_MAPS_PACKAGES],
 )
 
 # Creates the @angular/google-maps package published to npm
 ng_package(
-  name = "npm_package",
-  srcs = ["package.json"],
-  entry_point = ":public-api.ts",
-  entry_point_name = "google-maps",
-  globals = ROLLUP_GLOBALS,
-  deps = GOOGLE_MAPS_TARGETS,
+    name = "npm_package",
+    srcs = ["package.json"],
+    entry_point = ":public-api.ts",
+    entry_point_name = "google-maps",
+    globals = ROLLUP_GLOBALS,
+    deps = GOOGLE_MAPS_TARGETS,
 )

src/google-maps/google-map/BUILD.bazel

@@ -4,49 +4,48 @@ load(
     "//tools:defaults.bzl",
     "markdown_to_html",
     "ng_module",
-    "ng_package",
     "ng_test_library",
     "ng_web_test_suite",
 )
 
 ng_module(
-  name = "google-map",
-  srcs = glob(
-    ["**/*.ts"],
-    exclude = ["**/*.spec.ts"],
-  ),
-  module_name = "@angular/google-maps/google-map",
-  deps = [
-    "@npm//@angular/core",
-    "@npm//@types/googlemaps",
-    "@npm//rxjs",
-  ],
+    name = "google-map",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/google-maps/google-map",
+    deps = [
+        "@npm//@angular/core",
+        "@npm//@types/googlemaps",
+        "@npm//rxjs",
+    ],
 )
 
 ng_test_library(
-  name = "unit_test_sources",
-  srcs = glob(
-    ["**/*.spec.ts"],
-    exclude = ["**/*.e2e.spec.ts"],
-  ),
-  deps = [
-    ":google-map",
-    "//src/google-maps/google-map/testing",
-    "@npm//@angular/platform-browser",
-  ],
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":google-map",
+        "//src/google-maps/google-map/testing",
+        "@npm//@angular/platform-browser",
+    ],
 )
 
 ng_web_test_suite(
-  name = "unit_tests",
-  deps = [":unit_test_sources"],
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
 )
 
 markdown_to_html(
-  name = "overview",
-  srcs = [":google-map.md"],
+    name = "overview",
+    srcs = [":google-map.md"],
 )
 
 filegroup(
-  name = "source-files",
-  srcs = glob(["**/*.ts"]),
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
 )

src/google-maps/google-map/google-map.spec.ts

@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
 import {createMapConstructorSpy, createMapSpy} from './testing/fake-google-map-utils';
-import {GoogleMap, GoogleMapModule} from './index';
+import {GoogleMapModule} from './index';
 
 const DEFAULT_OPTIONS: google.maps.MapOptions = {
   center: {lat: 50, lng: 50},

src/google-maps/google-map/google-map.ts

@@ -1,7 +1,19 @@
-import {ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
-import {combineLatest, ReplaySubject} from 'rxjs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {ReplaySubject} from 'rxjs';
 import {take} from 'rxjs/operators';
 
+/**
+ * Angular component that renders a Google Map via the Google Maps JavaScript
+ * API.
+ * @see https://developers.google.com/maps/documentation/javascript/reference/
+ */
 @Component({
   selector: 'google-map',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10,14 +22,14 @@ import {take} from 'rxjs/operators';
 export class GoogleMap implements OnInit {
   @Input() height = '500px';
   @Input() width = '500px';
-  //TODO(mbehrlich): add options, handlers, properties, and methods.
+  // TODO(mbehrlich): add options, handlers, properties, and methods.
 
-  @ViewChild('map', {static: true}) set _mapEl(mapEl: ElementRef) {
-    this.mapEl$.next(mapEl);
+  @ViewChild('map', {static: true}) set mapEl(mapEl: ElementRef) {
+    this._mapEl$.next(mapEl);
   }
 
-  private readonly mapEl$ = new ReplaySubject<ElementRef>(1);
-  private readonly map$ = new ReplaySubject<google.maps.Map>(1);
+  private readonly _mapEl$ = new ReplaySubject<ElementRef>(1);
+  private readonly _map$ = new ReplaySubject<google.maps.Map>(1);
 
   ngOnInit() {
     // default options for now
@@ -26,12 +38,12 @@ export class GoogleMap implements OnInit {
       zoom: 4,
     };
 
-    this.mapEl$.pipe(take(1)).subscribe(mapElRef => {
+    this._mapEl$.pipe(take(1)).subscribe(mapElRef => {
       const mapEl = mapElRef.nativeElement;
       mapEl.style.height = this.height;
       mapEl.style.width = this.width;
       const map = new google.maps.Map(mapEl, options);
-      this.map$.next(map);
+      this._map$.next(map);
     });
   }
 }

src/google-maps/google-map/testing/BUILD.bazel

@@ -3,11 +3,11 @@ package(default_visibility = ["//visibility:public"])
 load("//tools:defaults.bzl", "ts_library")
 
 ts_library(
-  name = "testing",
-  testonly = 1,
-  srcs = glob(["**/*.ts"]),
-  deps = [
-    "@npm//@types/jasmine",
-    "@npm//@types/googlemaps",
-  ],
+    name = "testing",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "@npm//@types/googlemaps",
+        "@npm//@types/jasmine",
+    ],
 )

src/google-maps/google-map/testing/fake-google-map-utils.ts

@@ -1,6 +1,10 @@
 declare global {
   interface Window {
-    google?: {maps: {Map: jasmine.Spy;}};
+    google?: {
+      maps: {
+        Map: jasmine.Spy;
+      };
+    };
   }
 }
 

tools/package-tools/rollup-globals.ts

@@ -23,7 +23,8 @@ const cdkSecondaryEntryPoints = getSubdirectoryNames(join(buildConfig.packagesDi
 const matSecondaryEntryPoints = getSubdirectoryNames(join(buildConfig.packagesDir, 'material'));
 
 /** List of potential secondary entry-points for the google-maps package. */
-const googleMapsSecondaryEntryPoints = getSubdirectoryNames(join(buildConfig.packagesDir, 'google-maps'));
+const googleMapsSecondaryEntryPoints =
+    getSubdirectoryNames(join(buildConfig.packagesDir, 'google-maps'));
 
 /** List of potential secondary entry-points for the cdk-experimental package. */
 const cdkExperimentalSecondaryEntryPoints =
@@ -44,7 +45,8 @@ const rollupCdkEntryPoints = generateRollupEntryPoints('cdk', cdkSecondaryEntryP
 const rollupMatEntryPoints = generateRollupEntryPoints('material', matSecondaryEntryPoints);
 
 /** Object with all google-maps entry points in the format of Rollup globals. */
-const rollupGoogleMapsEntryPoints = generateRollupEntryPoints('google-maps', googleMapsSecondaryEntryPoints);
+const rollupGoogleMapsEntryPoints =
+    generateRollupEntryPoints('google-maps', googleMapsSecondaryEntryPoints);
 
 /** Object with all material-experimental entry points in the format of Rollup globals. */
 const rollupMaterialExperimentalEntryPoints =