demo: refactored demo to use custom tabs component

demo: switched to stackblitz
refactor: upgrade to Angular v6

.gitignore

@@ -10,5 +10,5 @@ dist.tgz
 .vscode
 coverage
 demo/src/api-docs.ts
-demo/src/public/**/plnkr.html
+demo/src/public/**/stackblitz.html
 local.docs.json

README.md

@@ -8,14 +8,19 @@
 [![Sauce Test Status](https://saucelabs.com/buildstatus/ng-mentions)](https://saucelabs.com/u/ng-mentions)
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/ng-mentions.svg)](https://saucelabs.com/u/ng-mentions)
 
-Native Angular v5+ components & directives for customizable mentions. Allowing for customizable search results and mention formatting.
+Native Angular components & directives for customizable mentions. Allowing for customizable search results and mention formatting.
 
 ## Demo and Docs
 
 View it in action at https://nth-cloud.github.io/ng-mentions
 
 ## Dependencies
-* [Angular](https://angular.io) (tested with 5.1.0)
+* [Angular](https://angular.io) (tested with 6.1.10)
+
+| ng-mentions | Angular |
+| ----------- | ------- |
+| 0.x.x       | 5.2.1   |
+| 1.x.x       | 6.1.0   |
 
 ## Installation
 After installing the above dependencies, install `ng-mentions` via:
@@ -25,16 +30,16 @@ npm install --save @nth-cloud/ng-mentions
 
 Import the main module into your project:
 ```js
-import {MentionsModule} from "@nth-cloud/ng-mentions";
+import {NgMentionsModule} from "@nth-cloud/ng-mentions";
 ```
 
 Import the module into your application:
 ```js
-import {MentionsModule} from "@nth-cloud/ng-mentions";
+import {NgMentionsModule} from "@nth-cloud/ng-mentions";
 
 @NgModule({
     ...
-    imports: [MentionsModule, ...],
+    imports: [NgMentionsModule, ...],
     ...
 })
 export class AppModule {
@@ -60,8 +65,6 @@ We strive to support the same browsers and versions as supported by Angular. Che
 * Edge (20+)
 * Safari (7+)
 
-Also, check [Bootstrap 4's notes](https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#supported-browsers) on supported browsers.
-
 ### Big Thanks
 
 Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com)

angular.json

@@ -25,6 +25,10 @@
           "options": {
             "main": "src/test.ts",
             "tsConfig": "src/tsconfig.spec.json",
+            "codeCoverageExclude": [
+              "src/test.ts",
+              "src/test/**"
+            ],
             "karmaConfig": "src/karma.conf.js"
           }
         },
@@ -45,7 +49,7 @@
       "root": "demo",
       "sourceRoot": "demo/src",
       "projectType": "application",
-      "prefix": "ngxd",
+      "prefix": "nthd",
       "schematics": {},
       "architect": {
         "build": {
@@ -105,6 +109,18 @@
               "browserTarget": "demo:build:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "demo/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "**/api-docs.ts"
+            ]
+          }
         }
       }
     }

demo/src/app/app.module.ts

@@ -1,6 +1,5 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {FormsModule} from '@angular/forms';
 
 import {PrismComponent} from './default/prism.component';
@@ -22,7 +21,6 @@ import {NthdSharedModule} from './shared';
         BrowserModule,
         FormsModule,
         routing,
-        NgbModule.forRoot(),
         NthdDemoModule,
         NthdSharedModule
     ],

demo/src/app/components/mentions/demos/string-values/mentions-string-values.html

@@ -1,3 +1,6 @@
+<p class="text-danger">
+    A limitation of plain string values is that the mention value cannot contain any spaces.
+</p>
 <div>
     <ng-mentions
         [mentions]="model.mentions"
@@ -9,6 +12,3 @@
     ></ng-mentions>
 </div>
 <pre class="my-2">{{model | json}}</pre>
-<p class="text-danger">
-    A limitation of plain string values is that the mention value cannot contain any spaces.
-</p>

demo/src/app/components/mentions/index.ts

@@ -2,16 +2,15 @@
 export * from './mention.component';
 
 import {NgModule} from '@angular/core';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
-import {MentionsModule} from '@nth-cloud/ng-mentions';
+import {NgMentionsModule} from '@nth-cloud/ng-mentions';
 import {NthdSharedModule} from '../../shared';
-import {NgxdComponentsSharedModule} from '../shared';
+import {NthdComponentsSharedModule} from '../shared';
 import {NthdMentionsComponent} from './mention.component';
 import {DEMO_DIRECTIVES} from './demos';
 
 @NgModule({
-  imports: [NthdSharedModule, NgxdComponentsSharedModule, MentionsModule, NgbModule],
+  imports: [NthdSharedModule, NthdComponentsSharedModule, NgMentionsModule],
   exports: [NthdMentionsComponent],
   declarations: [NthdMentionsComponent, ...DEMO_DIRECTIVES]
 })

demo/src/app/components/mentions/mention.component.ts

@@ -5,17 +5,17 @@ import {DEMO_SNIPPETS} from './demos';
   selector: 'nthd-mention',
   template: `
     <nthd-component-wrapper component="NgMentions">
-      <nthd-api-docs directive="MentionsComponent"></nthd-api-docs>
-      <nthd-example-box demoTitle="Basic" [snippets]="snippets" component="mentions" demo="basic">
+      <nthd-api-docs directive="NgMentionsComponent"></nthd-api-docs>
+      <nthd-example-box title="Basic" [snippets]="snippets" component="mentions" demo="basic" id="basic">
         <nthd-mentions-basic></nthd-mentions-basic>
       </nthd-example-box>
-      <nthd-example-box demoTitle="Validation" [snippets]="snippets" component="mentions" demo="validation">
+      <nthd-example-box title="Validation" [snippets]="snippets" component="mentions" demo="validation" id="validation">
         <nthd-mentions-validation></nthd-mentions-validation>
       </nthd-example-box>
-      <nthd-example-box demoTitle="Custom Search" [snippets]="snippets" component="mentions" demo="custom-search">
+      <nthd-example-box title="Custom Search" [snippets]="snippets" component="mentions" demo="custom-search" id="search">
         <nthd-mentions-custom-search></nthd-mentions-custom-search>
       </nthd-example-box>
-      <nthd-example-box demoTitle="String Values" [snippets]="snippets" component="mentions" demo="string-values">
+      <nthd-example-box title="String Values" [snippets]="snippets" component="mentions" demo="string-values" id="values">
         <nthd-mentions-string-values></nthd-mentions-string-values>
       </nthd-example-box>
     </nthd-component-wrapper>

demo/src/app/components/shared/api-docs/api-docs-class.component.html

@@ -12,7 +12,7 @@ <h3>
     <a
       class="github-link"
       (click)="trackSourceClick()"
-      href="https://github.com/nth-cloud/ng-mentions/tree/master/{{apiDocs.fileName}}"
+      href="https://github.com/nth-cloud/ng-toggle/tree/master/{{apiDocs.fileName}}"
       target="_blank"
       title="Link to Github: {{apiDocs.className}}"
     >

demo/src/app/components/shared/api-docs/api-docs-class.component.ts

@@ -6,7 +6,7 @@ import {Analytics} from '../../../shared/analytics/analytics';
 /**
  * Displays the API docs of a class, which is not a directive.
  *
- * For Config services, use NgxdApiDocsConfig instead.
+ * For Config services, use NthdApiDocsConfig instead.
  */
 @Component({
   selector: 'nthd-api-docs-class',

demo/src/app/components/shared/api-docs/api-docs-config.component.html

@@ -12,7 +12,7 @@ <h3>
     {{apiDocs.className}}
     <a
       class="github-link"
-      href="https://github.com/nth-cloud/ng-mentions/tree/master/{{apiDocs.fileName}}"
+      href="https://github.com/nth-cloud/ng-toggle/tree/master/{{apiDocs.fileName}}"
       target="_blank"
       title="Link to Github: {{apiDocs.className}}"
     >

demo/src/app/components/shared/api-docs/api-docs.component.html

@@ -11,7 +11,7 @@ <h2 class="title">
     <a
       class="github-link ml-2"
       (click)="trackSourceClick()"
-      href="https://github.com/nth-cloud/ng-mentions/tree/master/{{apiDocs.fileName}}"
+      href="https://github.com/nth-cloud/ng-toggle/tree/master/{{apiDocs.fileName}}"
       target="_blank"
       title="Link to Github: {{apiDocs.className}}"
     >

demo/src/app/components/shared/api-docs/api-docs.component.ts

@@ -8,8 +8,6 @@ import {Analytics} from '../../../shared/analytics/analytics';
  *
  * The default values of its inputs are looked for in the directive api doc itself, or in the matching property
  * of associated Config service, if any.
- *
- * The config service of a directive NgbFoo is, by convention, named NgbFooConfig.
  */
 @Component({
   selector: 'nthd-api-docs',

demo/src/app/components/shared/example-box/example-box.component.html

@@ -1,37 +1,29 @@
 <div class="component-demo">
+  <a [id]="id"></a>
   <h2>
-    {{ demoTitle }}
-    <a
-      class="plunker"
-      target="_blank" href="app/components/{{component}}/demos/{{demo}}/plnkr.html"
-      title="Edit in Plunker"
-    >
-      <img src="img/plunker-icon.png" height="24" width="24" alt="Plunker icon"/>
+    <span>{{ title }}</span>
+    <a role="button" (click)="trackStackBlitzClick()" class="stackblitz btn btn-light" target="_blank"
+       href="app/components/{{component}}/demos/{{id}}/stackblitz.html" title="Edit in StackBlitz">
+      <img class="stackblitz-icon" src="img/stackblitz-icon.svg" alt="StackBlitz icon"/>
+      StackBlitz
     </a>
   </h2>
-  <div class="card">
-    <div class="card-body">
-      <ng-content></ng-content>
+  <hr class="mt-1 mb-4"/>
+  <div class="row">
+    <div class="col-12 col-lg-6"><ng-content></ng-content></div>
+    <div class="col-12 col-lg-6">
+      <nthd-tabset class="tabset-code">
+        <nthd-tab id="{{component}}-{{demo}}-markup" title="Markup">
+          <ng-template nthd-tab-content>
+            <nthd-code [code]="snippets[demo]['markup']" lang="html"></nthd-code>
+          </ng-template>
+        </nthd-tab>
+        <nthd-tab id="{{component}}-{{demo}}-typescript" title="Typescript">
+          <ng-template nthd-tab-content>
+            <nthd-code [code]="snippets[demo]['code']" lang="typescript"></nthd-code>
+          </ng-template>
+        </nthd-tab>
+      </nthd-tabset>
     </div>
-    <ngb-tabset class="tabset-code">
-      <ngb-tab id="{{component}}-{{demo}}-html">
-        <ng-template ngbTabTitle>
-          <small class="badge badge-secondary" title="HTML template">T</small>
-          <span class="ml-2">{{component}}-{{demo}}.html</span>
-        </ng-template>
-        <ng-template ngbTabContent>
-          <nthd-code [code]="snippets[demo]['markup']" lang="html"></nthd-code>
-        </ng-template>
-      </ngb-tab>
-      <ngb-tab id="{{component}}-{{demo}}-typescript">
-        <ng-template ngbTabTitle>
-          <small class="badge badge-info" title="Component class">C</small>
-          <span class="ml-2">{{component}}-{{demo}}.ts</span>
-        </ng-template>
-        <ng-template ngbTabContent>
-          <nthd-code [code]="snippets[demo]['code']" lang="typescript"></nthd-code>
-        </ng-template>
-      </ngb-tab>
-    </ngb-tabset>
   </div>
 </div>

demo/src/app/components/shared/example-box/example-box.component.ts

@@ -6,10 +6,19 @@ import {Analytics} from '../../../shared/analytics/analytics';
   templateUrl: './example-box.component.html'
 })
 export class ExampleBoxComponent {
-  @Input() demoTitle: string;
+  @Input() title: string;
   @Input() component: string;
+  @Input() id: string;
   @Input() demo: string;
   @Input() snippets: Object;
 
   constructor(private _analytics: Analytics) {}
+
+  trackStackBlitzClick() {
+    this._analytics.trackEvent('StackBlitz View', this.component + ' ' + this.id);
+  }
+
+  trackPlunkrClick() {
+    this._analytics.trackEvent('Plunkr View', this.component + ' ' + this.id);
+  }
 }

demo/src/app/components/shared/index.ts

@@ -1,14 +1,17 @@
 import {NgModule} from '@angular/core';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 import {NthdSharedModule} from '../../shared';
 import {ExampleBoxComponent} from './example-box';
 import {NthdApiDocs, NthdApiDocsBadge, NthdApiDocsClass, NthdApiDocsConfig} from './api-docs';
 import {NthdFragment} from './fragment';
 
+const declarations = [
+  ExampleBoxComponent, NthdApiDocsBadge, NthdApiDocs, NthdApiDocsClass, NthdApiDocsConfig, NthdFragment
+];
+
 @NgModule({
-  imports: [NthdSharedModule, NgbModule],
-  declarations: [ExampleBoxComponent, NthdApiDocsBadge, NthdApiDocs, NthdApiDocsClass, NthdApiDocsConfig, NthdFragment],
-  exports: [ExampleBoxComponent, NthdApiDocsBadge, NthdApiDocs, NthdApiDocsClass, NthdApiDocsConfig, NthdFragment]
+  imports: [NthdSharedModule],
+  declarations: declarations,
+  exports: declarations
 })
-export class NgxdComponentsSharedModule {}
+export class NthdComponentsSharedModule {}

demo/src/app/default/default.component.html

@@ -22,12 +22,12 @@
 
   <div class="heading">Dependencies</div>
   <p>
-    This repository contains a Angular v5+ rich mentions component. It allows for customizable mention display and custom searching.
+    This repository contains a Angular rich mentions component. It allows for customizable mention display and custom searching.
     The only required dependencies are:
   </p>
   <ul>
     <li>
-      <a href="https://angular.io" target="_blank">Angular</a> (<em>requires</em> Angular version 6 or higher, tested with 5.0.0)
+      <a href="https://angular.io" target="_blank">Angular</a> (<em>requires</em> Angular version 6 or higher, tested with 6.1.10)
     </li>
   </ul>
 

demo/src/app/default/import.md

@@ -1 +1 @@
-import {MentionsModule} from '@nth-cloud/ng-mentions';
+import {NgMentionsModule} from '@nth-cloud/ng-mentions';

demo/src/app/default/usage.md

@@ -1,8 +1,8 @@
-import {MentionsModule} from '@nth-cloud/ng-mentions';
+import {NgMentionsModule} from '@nth-cloud/ng-mentions';
 
 @NgModule({
   declarations: [AppComponent, ...],
-  imports: [MentionsModule, ...],
+  imports: [NgMentionsModule, ...],
   bootstrap: [AppComponent]
 })
 export class AppModule {

demo/src/app/shared/analytics/analytics.ts

@@ -8,14 +8,14 @@ declare const ga: any;
 
 /**
  * Simple Google Analytics service. Note that all its methods don't do anything unless the app
- * is deployed on nth-cloud.github.io/ng-mentions. This avoids sending events and page views during development.
+ * is deployed on nth-cloud.github.io/ng-toggle. This avoids sending events and page views during development.
  */
 @Injectable()
 export class Analytics {
     private _enabled: boolean;
 
     constructor(private _location: Location, private _router: Router) {
-        this._enabled = window.location.href.indexOf('nth-cloud.github.io/ng-mentions') >= 0;
+        this._enabled = window.location.href.indexOf('nth-cloud.github.io/ng-toggle') >= 0;
     }
 
     /**