WIP: add snazzy-info-window support

.gitignore

@@ -1,9 +1,9 @@
 node_modules/
 dist
 docs_generated
-src/**/*.js
-src/**/*.map
-src/**/*.ngfactory.js
+packages/**/*.js
+packages/**/*.map
+packages/**/*.ngfactory.js
 .tmp
 test-built
 npm-debug.log

docs/content/api-docs/index.md

@@ -6,4 +6,7 @@ title = "API Docs for Angular Google Maps"
 
 **Here you find the API docs for the @agm Packages:**
 
-* [@agm/core - Provides components and services for the official Google Maps API v3](./agm-core/modules/AgmCoreModule.html)
+* [@agm/core](./agm-core/modules/AgmCoreModule.html)  
+  Provides Angular integration solutions for the official Google Maps Core API v3
+* [@agm/snazzy-info-window](./agm-snazzy-info-window/modules/AgmSnazzyInfoWindowModule.html)  
+  Styled Info Windows with [Snazzy Info Window](https://github.com/atmist/snazzy-info-window)

docs/content/guides/snazzy-info-window/custom-info-windows-with-snazzy-info-window.md

@@ -0,0 +1,106 @@
++++
+date = "2017-06-20T20:11:15+02:00"
+draft = false
+title = "Styled Info Windows with Snazzy Info Window & Angular Google Maps"
++++
+
+Angular Google Maps provides a package that allows you to use [Snazzy Info Window](https://github.com/atmist/snazzy-info-window) together with @agm/core. 'Snazzy Info Window' allows you to create custom info window that are styleable via CSS or Angular inputs.
+
+Please note: The @agm/snazzy-info-window package currently supports Angular 4.x only.
+
+## Install the needed packages
+First make sure that you install the following NPM packages:
+
+```bash
+npm install @agm/core @agm/snazzy-info-window snazzy-info-window@^1.1.0
+```
+
+Make sure you have a Google Maps API Key - [you can get one here](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de).
+
+## Loading the modules
+
+Update your root component (e.g. src/app/app.module.ts) and import the following modules:
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+
+// add these imports
+import { AgmCoreModule } from '@agm/core';
+import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AgmCoreModule.forRoot({
+      apiKey: ['YOUR_API_KEY_HERE']
+    }),
+    AgmSnazzyInfoWindowModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+## Load the CSS file
+
+There are some basic style that get shipped with the `snazzy-info-window` NPM package. The CSS file is located here:
+
+```
+node_modules/snazzy-info-window/dist/snazzy-info-window.css
+```
+
+If you are using Angular CLI, you can simply add this file to your `.angular-cli.json` file like this:
+
+```json
+"styles": [
+  "styles.css",
+  "../node_modules/snazzy-info-window/dist/snazzy-info-window.css"
+]
+```
+
+## Using the directive with a marker (AgmMarker)
+
+When you import the `AgmSnazzyInfoWindowModule`, you can use the `agmSnazzyInfoWindow` directive  in your template.
+
+
+```html
+<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
+  <agm-marker [latitude]="51.673858" [longitude]="7.815982">
+    <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
+      <ng-template>
+        My first Snazzy Info Window!
+      </ng-template>
+    </agm-snazzy-info-window>
+  </agm-marker>
+</agm-map>
+```
+
+This creates a basic stylable info window that opens when the user clicks on the marker and closes when another snazzy info window opens.
+
+## Using the directive as a standalone info winodw
+
+
+```html
+<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
+  <agm-snazzy-info-window [isOpen]="true" [latitude]="51.673858" [longitude]="7.815982" [closeWhenOthersOpen]="true">
+    <ng-template>
+      My first Snazzy Info Window!
+    </ng-template>
+  </agm-snazzy-info-window>
+</agm-map>
+```
+
+## Styling
+There a two ways to style the snazzy info window:
+1. Via CSS - [simply use these CSS classes shown in this HTML](https://github.com/atmist/snazzy-info-window#html-structure)
+1. Via Angular inputs
+
+### Styling via Angular Inputs
+
+There a sevarel inputs that you can use for styling. [Check out the docs of the `agmSnazzyInfoWindow` directive here](/api-docs/agm-snazzy-info-window/directives/AgmSnazzyInfoWindow.html). 

docs/themes/angular-google-maps/layouts/_default/single.html

@@ -9,18 +9,25 @@
 
       <div class="android-content mdl-layout__content">
         <div class="content-grid mdl-grid">
-          <div class="mdl-cell mdl-cell--2-col">
+          <div class="mdl-cell mdl-cell--3-col">
             <div class="content-sidebar">
-                <section>
-                  <h5 class="section-title">General</h5>
-                  <ul>
-                    <li><a href="/guides/getting-started">Getting started</a></li>
-                  </ul>
-                </section>
+              <section>
+                <h5 class="section-title">General</h5>
+                <ul>
+                  <li><a href="/guides/getting-started">Getting started</a></li>
+                </ul>
+              </section>
 
-              </div>
+              <section>
+                <h5 class="section-title">@agm/snazzy-info-window</h5>
+                <ul>
+                  <li><a href="/guides/snazzy-info-window/custom-info-windows-with-snazzy-info-window/">Styled info windows with 'Snazzy Info Window'</a></li>
+                </ul>
+              </section>
+
+            </div>
           </div>
-          <div class="mdl-cell mdl-cell--10-col page-content-cell">
+          <div class="mdl-cell mdl-cell--9-col page-content-cell">
             <div class="page-title">
               <h1>{{ .Title }}</h1>
             </div>

karma-test-shim.js

@@ -1,7 +1,7 @@
 // Turn on full stack traces in errors to help debugging
 Error.stackTraceLimit=Infinity;
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
 
 require('core-js/client/shim');
 require('reflect-metadata');
@@ -16,7 +16,7 @@ require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
 
-var ctx = require.context('./src', true, /\.spec\.ts/);
+var ctx = require.context('./packages', true, /\.spec\.ts/);
 ctx.keys().forEach(ctx);
 
 var testing = require('@angular/core/testing');

karma.conf.js

@@ -91,5 +91,4 @@ module.exports = function (config) {
   }
 
   config.set(_config);
-
 };

package.json

@@ -1,5 +1,6 @@
 {
-  "name": "@agm/core-src",
+  "name": "@agm/dummy",
+  "private": true,
   "version": "1.0.0-beta.0",
   "description": "Angular 2+ components for Google Maps",
   "repository": {
@@ -17,24 +18,26 @@
     "angular2"
   ],
   "scripts": {
-    "clean": "rimraf dist && rimraf .tmp && mkdir dist && mkdir .tmp && rimraf 'src/**/*.ngfactory.ts'",
+    "clean": "rimraf dist && rimraf .tmp && mkdir dist && mkdir .tmp && rimraf 'packages/**/*.ngfactory.ts'",
     "prebuild": "npm run clean",
     "build": "npm run lint && npm run scripts && npm run packagejson && npm run copyassets",
-    "lint": "tslint -c tslint.json 'src/**/*.ts'",
+    "lint": "tslint -c tslint.json 'packages/**/*.ts'",
     "packagejson": "node ./scripts/create-package-json.js",
-    "copyassets": "cp -R assets/release/* dist/core && cp LICENSE dist/core",
-    "scripts": "npm run ngc:esm && npm run bundle:umd",
-    "bundle:umd": "rollup -c rollup.config.js",
+    "copyassets": "node ./scripts/copy-package-assets.js",
+    "scripts": "npm run ngc:esm && npm run bundle",
+    "bundle": "npm run bundle:umd:core",
+    "bundle:umd:core": "rollup -c rollup.core.config.js",
     "ngc:esm": "ngc -p tsconfig.json",
-    "clang:format": "clang-format --glob=src/**/*.ts -i",
-    "postngc:esm": "mkdir -p dist/ && cp -R .tmp/esm/src/* dist/ && rimraf src/**/*.ngfactory.ts",
+    "clang:format": "clang-format --glob=packages/**/*.ts -i",
+    "postngc:esm": "mkdir -p dist/ && cp -R .tmp/esm/* dist/ && rimraf packages/**/*.ngfactory.ts",
     "test": "karma start",
     "test:watch": "karma start --no-single-run --auto-watch",
     "ci": "npm run build && npm run test",
     "docs:clean": "rimraf docs/public",
     "docs:hugo": "cd docs && hugo",
-    "docs": "npm run docs:hugo && npm run apidocs:core",
-    "apidocs:core": "compodoc -p tsconfig.json --name AgmCoreModule --output docs/public/api-docs/agm-core/ --disablePrivateOrInternalSupport --hideGenerator --disableCoverage"
+    "docs": "npm run docs:hugo && npm run apidocs:core && npm run apidocs:snazzy",
+    "apidocs:core": "compodoc -p packages/core/tsconfig.compodoc.json --name @agm/core --output docs/public/api-docs/agm-core/ --disablePrivateOrInternalSupport --hideGenerator --disableCoverage",
+    "apidocs:snazzy": "compodoc -p packages/snazzy-info-window/tsconfig.compodoc.json --name @agm/snazzy-info-window  --output docs/public/api-docs/agm-snazzy-info-window/ --disablePrivateOrInternalSupport --hideGenerator --disableCoverage"
   },
   "author": "Sebastian Müller <[email protected]>",
   "license": "MIT",

assets/release/README.md → packages/core/README.md

@@ -1,6 +1,8 @@
-Angular Google Maps (AGM) - Angular 2+ Google Maps components
+Angular Google Maps (AGM) Core - Angular 2+ Google Maps components
 =========
 
+@agm/core contains solutions for the Google Maps JavaScript Core API.
+
 The sources for this package are in the [angular-google-maps](https://github.com/SebastianM/angular-google-maps) repository. Please file issues and pull requests against that repo.
 
 This package contains different sources for different users:

packages/core/tsconfig.compodoc.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "es2015",
+        "target": "es5",
+        "noImplicitAny": true,
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "outDir": ".tmp/esm",
+        "baseUrl": ".",
+        "sourceMap": true,
+        "removeComments": false,
+        "moduleResolution": "node",
+        "declaration": true,
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "types": [
+            "jasmine"
+        ],
+        "paths": {
+            "@agm/*": ["../packages/*"]
+        }
+    }
+}

packages/snazzy-info-window/README.md

@@ -0,0 +1,13 @@
+Angular Google Maps (AGM) Core - Angular 2+ Google Maps components
+=========
+
+@agm/snazzy-info-window is an extension for the @agm/core package that provides solutions for styleable/customizable info windows with the help of ['Snazzy Info Window'](https://github.com/atmist/snazzy-info-window).
+
+The sources for this package are in the [angular-google-maps](https://github.com/SebastianM/angular-google-maps) repository. Please file issues and pull requests against that repo.
+
+This package contains different sources for different users:
+
+1. The files located in the root dirare ES5 based with ES2015 modules.
+1. Files with the name pattern *.umd.js are UMD bundled modules for fast load times during development.
+
+License: See LICENSE file in this folder.