feat(docs): added api doc generator

demo/.gitignore

@@ -0,0 +1,2 @@
+# Created by .ignore support plugin (hsz.mobi)
+src/api-doc.json

demo/src/app/api-docs/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-2016 Angular ng-bootstrap team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

demo/src/app/api-docs/analytics/analytics.ts

@@ -0,0 +1,57 @@
+/**
+ * @author ng-team
+ * @copyright ng-bootstrap
+ */
+import { Injectable } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { Location } from '@angular/common';
+
+import 'rxjs/add/operator/filter';
+
+declare const ga: any;
+
+/**
+ * Simple Google Analytics service. Note that all its methods don't do anything unless the app
+ * is deployed on ng-bootstrap.github.io. This avoids sending events and page views during development.
+ */
+@Injectable()
+export class Analytics {
+  private _enabled: boolean;
+  private _location: Location;
+  private _router: Router;
+
+  public constructor(_location: Location, _router: Router) {
+    this._location = _location;
+    this._router = _router;
+    this._enabled = window.location.href.indexOf('bootstrap') >= 0;
+  }
+
+  /**
+   * Intended to be called only once. Subscribes to router events and sends a page view
+   * after each ended navigation event.
+   */
+  public trackPageViews(): void {
+    if (!this._enabled) {
+      return;
+    }
+    this._router.events
+      .filter((event: any) => event instanceof NavigationEnd)
+      .subscribe(() => {
+        if (typeof ga !== 'undefined') {
+          ga('send', {hitType: 'pageview', page: this._location.path()});
+        }
+      });
+  }
+
+  /**
+   * Sends an event.
+   */
+  public trackEvent(action: string, category: string): void {
+    if (!this._enabled) {
+      return;
+    }
+    if (typeof ga !== 'undefined') {
+      ga('send', {hitType: 'event', eventCategory: category, eventAction: action});
+    }
+  }
+}

demo/src/app/api-docs/api-doc-class/api-doc-class.component.html

@@ -0,0 +1,46 @@
+<div class="api-doc-component">
+  <h2>
+    <a (click)="trackSourceClick()" href="https://github.com/valor-software/ng2-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
+  </h2>
+  <p>{{apiDocs.description}}</p>
+
+  <template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+    <section>
+      <h3 id="inputs">Properties</h3>
+      <table class="table table-sm table-hover">
+        <tbody>
+        <tr *ngFor="let prop of apiDocs.properties">
+          <td class="col-md-3"><code>{{prop.name}}</code></td>
+          <td class="col-md-3">
+            <div><i>Type: </i><code>{{ prop.type }}</code></div>
+            <template [ngIf]="prop.defaultValue">
+              <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
+            </template>
+
+          </td>
+          <td class="col-md-6"><div style="margin: 10px 0">{{ prop.description }}</div></td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+  </template>
+
+  <template [ngIf]="apiDocs.methods && apiDocs.methods.length">
+    <section>
+      <h3 id="methods">Methods</h3>
+      <table class="table table-sm table-hover">
+        <tbody>
+        <tr *ngFor="let method of apiDocs.methods">
+          <td class="col-md-3"><code>{{method.name}}</code></td>
+          <td class="col-md-3">
+            <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
+            <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
+          </td>
+          <td class="col-md-6"><div style="margin: 10px 0">{{ method.description }}</div></td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+  </template>
+</div>
+<hr/>

demo/src/app/api-docs/api-doc-class/api-doc-class.component.ts

@@ -0,0 +1,42 @@
+/**
+ * @author ng-team
+ * @copyright ng-bootstrap
+ */
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { ClassDesc, MethodDesc, signature, NgApiDoc } from '../api-docs.model';
+import { Analytics } from '../analytics/analytics';
+
+/**
+ * Displays the API docs of a class, which is not a directive.
+ *
+ * For Config services, use NgbdApiDocsConfig instead.
+ */
+@Component({
+  selector: 'ng-api-doc-class',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './api-doc-class.component.html'
+})
+export class NgApiDocClassComponent {
+  @Input()
+  public set type(typeName: string) {
+    this.apiDocs = this.docs[typeName];
+  }
+
+  public apiDocs: ClassDesc;
+
+  private _analytics: Analytics;
+  private docs: NgApiDoc;
+
+  public constructor(_analytics: Analytics, docs: NgApiDoc) {
+    this.docs = docs;
+    this._analytics = _analytics;
+  }
+
+  public methodSignature(method: MethodDesc): string {
+    return signature(method);
+  }
+
+  public trackSourceClick(): void {
+    this._analytics.trackEvent('Source File View', this.apiDocs.className);
+  }
+}

demo/src/app/api-docs/api-doc-config/api-doc-config.component.html

@@ -0,0 +1,38 @@
+<div (click)="trackSourceClick()" class="api-doc-component">
+  <h2>
+    <a href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
+  </h2>
+  <p>{{apiDocs.description}}</p>
+
+  <template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+    <section>
+      <h3 id="inputs">Properties</h3>
+      <table class="table table-sm table-hover">
+        <tbody>
+        <tr *ngFor="let prop of apiDocs.properties">
+          <td class="col-md-3"><code>{{prop.name}}</code></td>
+          <td class="col-md-3">
+            <div><i>Type: </i><code>{{ prop.type }}</code></div>
+            <template [ngIf]="prop.defaultValue">
+              <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
+            </template>
+          </td>
+          <td class="col-md-6"><div style="margin: 10px 0">{{ prop.description }}</div></td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+  </template>
+  <!--<template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+    <section>
+      <h3 id="inputs">Properties</h3>
+      <p>
+        <template ngFor let-property [ngForOf]="apiDocs.properties">
+          <code>{{ property.name }}</code>
+        </template>
+        <i>&mdash; Documentation available in {{ directiveName }}</i>
+      </p>
+    </section>
+  </template>-->
+</div>
+<hr/>

demo/src/app/api-docs/api-doc-config/api-doc-config.component.ts

@@ -0,0 +1,44 @@
+/**
+ * @author ng-team
+ * @copyright ng-bootstrap
+ */
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+// import docs from '../../../../api-docs';
+import { ClassDesc, NgApiDoc } from '../api-docs.model';
+import { Analytics } from '../analytics/analytics';
+
+const CONFIG_SUFFIX_LENGTH = 'Config'.length;
+
+/**
+ * Displays the API docs of a Config service. A Config service for a component Foo is named, by convention,
+ * FooConfig, and only has properties, whose name matches with an input of the directive.
+ * In order to avoid cluttering the demo pages, the only things displayed by this component
+ * is the description of the Config service and the list of its properties, whose documentation and
+ * default value is documented in the directive itself.
+ */
+@Component({
+  selector: 'ng-api-doc-config',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './api-doc-config.component.html'
+})
+export class NgApiDocConfigComponent {
+  public apiDocs: ClassDesc;
+  public directiveName: string;
+  private _analytics: Analytics;
+  private docs: NgApiDoc;
+
+  public constructor(_analytics: Analytics, docs: NgApiDoc) {
+    this._analytics = _analytics;
+    this.docs = docs;
+  }
+
+  @Input()
+  public set type(typeName: string) {
+    this.apiDocs = this.docs[typeName];
+    this.directiveName = typeName.slice(0, -CONFIG_SUFFIX_LENGTH);
+  }
+
+  public trackSourceClick(): void {
+    this._analytics.trackEvent('Source File View', this.apiDocs.className);
+  }
+}

demo/src/app/api-docs/api-doc/api-doc.component.html

@@ -0,0 +1,74 @@
+<div class="api-doc-component">
+  <h2>
+    <a (click)="trackSourceClick()" href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
+  </h2>
+  <p>{{apiDocs.description}}</p>
+    <table class="table table-sm table-hover">
+      <tbody>
+        <tr>
+          <td class="col-md-3">Selector</td>
+          <td class="col-md-9"><code>{{apiDocs.selector}}</code></td>
+        </tr>
+        <tr *ngIf="apiDocs.exportAs">
+          <td class="col-md-3">Exported as</td>
+          <td class="col-md-9"><code>{{apiDocs.exportAs}}</code></td>
+        </tr>
+      </tbody>
+    </table>
+
+  <template [ngIf]="apiDocs.inputs.length">
+    <section>
+      <h3 id="inputs">Inputs</h3>
+      <table class="table table-sm table-hover">
+        <tbody>
+        <tr *ngFor="let input of apiDocs.inputs">
+          <td class="col-md-3"><code>{{input.name}}</code></td>
+          <td class="col-md-3">
+            <div><i>Type: </i><code>{{ input.type }}</code></div>
+            <template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
+              <div>
+                <span><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span>
+                <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
+              </div>
+            </template>
+          </td>
+          <td class="col-md-6"><div style="margin: 10px 0">{{ input.description }}</div></td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+  </template>
+
+  <template [ngIf]="apiDocs.outputs.length">
+    <section>
+      <h3 id="outputs">Outputs</h3>
+      <table class="table table-sm table-hover">
+        <tbody>
+          <tr *ngFor="let output of apiDocs.outputs">
+            <td class="col-md-3"><code>{{output.name}}</code></td>
+            <td class="col-md-9"><div style="margin: 10px 0">{{output.description}}</div></td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+  </template>
+
+  <template [ngIf]="apiDocs.methods.length && apiDocs.exportAs">
+    <section>
+      <h3 id="methods">Methods</h3>
+      <table class="table table-sm table-hover">
+        <tbody>
+        <tr *ngFor="let method of apiDocs.methods">
+          <td class="col-md-3"><code>{{method.name}}</code></td>
+          <td class="col-md-6">
+            <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
+            <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
+          </td>
+          <td class="col-md-9"><div style="margin: 10px 0">{{ method.description }}</div></td>
+        </tr>
+        </tbody>
+      </table>
+    </section>
+  </template>
+</div>
+<hr/>