docs: add search to demos

Closes #904

Author: mattlewis92

projects/demos/app/demo-app.component.ts

@@ -18,6 +18,7 @@ interface Demo {
   label: string;
   path: string;
   sources?: Source[];
+  tags: string[];
 }
 
 async function getSources(folder: string): Promise<Source[]> {
@@ -82,9 +83,11 @@ const dependencyVersions: any = {
 })
 export class DemoAppComponent implements OnInit {
   demos: Demo[] = [];
+  filteredDemos: Demo[] = [];
   activeDemo: Demo;
   isMenuVisible = false;
   firstDemoLoaded = false;
+  searchText = '';
 
   constructor(private router: Router, analytics: Angulartics2GoogleAnalytics) {
     analytics.startTracking();
@@ -97,8 +100,10 @@ export class DemoAppComponent implements OnInit {
       .filter(route => route.path !== '**')
       .map(route => ({
         path: route.path,
-        label: route.data['label']
+        tags: route.data.tags || [],
+        label: route.data.label
       }));
+    this.updateFilteredDemos();
 
     this.router.events
       .pipe(filter(event => event instanceof NavigationEnd))
@@ -123,6 +128,16 @@ export class DemoAppComponent implements OnInit {
       });
   }
 
+  updateFilteredDemos() {
+    this.filteredDemos = this.demos.filter(
+      demo =>
+        !this.searchText ||
+        [demo.label.toLowerCase(), ...demo.tags].some(tag =>
+          tag.includes(this.searchText.toLowerCase())
+        )
+    );
+  }
+
   editInStackblitz(demo: Demo): void {
     const files: {
       [path: string]: string;

projects/demos/app/demo-app.css

@@ -16,6 +16,10 @@ h3 {
   margin-top: 15px;
 }
 
+.sidebar-nav {
+  padding-left: 5px;
+}
+
 .sidebar-nav h4 {
   margin-bottom: 20px;
 }

projects/demos/app/demo-app.html

@@ -123,7 +123,7 @@
 
 <div class="container-fluid">
   <div class="row fill-height">
-    <div class="col-md-9 fill-height scroll-y" perfectScrollbar>
+    <div class="col-md-9 col-xl-10 fill-height scroll-y" perfectScrollbar>
       <div class="card" *ngIf="firstDemoLoaded; else loading">
         <div class="card-header">
           <div class="row">
@@ -166,10 +166,19 @@
         </div>
       </div>
     </div>
-    <div class="col-md-3 fill-height sidebar-nav scroll-y" perfectScrollbar>
-      <h4>Demos</h4>
-      <ul class="list-unstyled">
-        <li *ngFor="let demo of demos">
+    <div
+      class="col-md-3 col-xl-2 fill-height sidebar-nav scroll-y"
+      perfectScrollbar
+    >
+      <input
+        type="search"
+        class="form-control"
+        placeholder="Search demos..."
+        [(ngModel)]="searchText"
+        (ngModelChange)="updateFilteredDemos()"
+      />
+      <ul class="list-unstyled spacer-top">
+        <li *ngFor="let demo of filteredDemos">
           <a
             [routerLink]="[demo.path]"
             [class.active]="activeDemo?.path === demo.path"
@@ -178,6 +187,7 @@ <h4>Demos</h4>
           </a>
         </li>
       </ul>
+      <em *ngIf="filteredDemos.length === 0">No matching demos found</em>
     </div>
   </div>
 </div>

projects/demos/app/demo-app.module.ts

@@ -13,12 +13,14 @@ import { DemoComponent as DefaultDemoComponent } from './demo-modules/kitchen-si
 import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/module';
 import { environment } from '../environments/environment';
 import { CustomHammerConfig } from './hammer-config';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [DemoAppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    FormsModule,
     NgbTabsetModule,
     NgbCollapseModule,
     DefaultDemoModule,
@@ -130,7 +132,8 @@ import { CustomHammerConfig } from './hammer-config';
           path: 'before-view-render',
           loadChildren: './demo-modules/before-view-render/module#DemoModule',
           data: {
-            label: 'Before view render'
+            label: 'Before view render',
+            tags: ['disable']
           }
         },
         {
@@ -144,7 +147,8 @@ import { CustomHammerConfig } from './hammer-config';
           path: 'i18n',
           loadChildren: './demo-modules/i18n/module#DemoModule',
           data: {
-            label: 'Internationalisation'
+            label: 'Internationalisation',
+            tags: ['translation', 'i18n', 'translate', 'locale']
           }
         },
         {
@@ -232,7 +236,8 @@ import { CustomHammerConfig } from './hammer-config';
           path: 'context-menu',
           loadChildren: './demo-modules/context-menu/module#DemoModule',
           data: {
-            label: 'Context menu'
+            label: 'Context menu',
+            tags: ['right click']
           }
         },
         {