feat(demo): add home page content

projects/elements-demo/src/app/app.component.html

@@ -3,7 +3,7 @@
   [navOpened]="navOpened | async"
 ></demo-toolbar>
 <mat-sidenav-container
-  [hasBackdrop]="isSmallScreen | async"
+  [hasBackdrop]="isResponsiveLayout | async"
   (backdropClick)="onBackdropClick()"
 >
   <mat-sidenav mode="side" [opened]="navOpened | async" disableClose>

projects/elements-demo/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { MatSidenav } from '@angular/material';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { ResponsiveLayoutService } from './core/layout/responsive-layout.service';
+
 @Component({
   selector: 'demo-root',
   templateUrl: './app.component.html',
@@ -14,16 +15,17 @@ export class AppComponent implements OnInit {
 
   navOpened: Observable<boolean>;
   navToggled = new BehaviorSubject(false);
-  isSmallScreen: Observable<boolean>;
+  isResponsiveLayout: Observable<boolean>;
 
-  constructor(private breakpointObserver: BreakpointObserver) {}
+  constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
 
   ngOnInit() {
-    this.isSmallScreen = this.breakpointObserver
-      .observe([Breakpoints.Small, Breakpoints.XSmall])
-      .pipe(map(result => result.matches));
+    this.isResponsiveLayout = this.responsiveLayoutService.isResponsiveLayout;
 
-    this.navOpened = combineLatest([this.isSmallScreen, this.navToggled]).pipe(
+    this.navOpened = combineLatest([
+      this.isResponsiveLayout,
+      this.navToggled
+    ]).pipe(
       map(([isSmallScreen, navToggled]) => (!isSmallScreen ? true : navToggled))
     );
   }

projects/elements-demo/src/app/app.module.ts

@@ -21,9 +21,6 @@ import { AppComponent } from './app.component';
     BrowserAnimationsModule,
     HttpClientModule,
 
-    // the library module
-    LazyElementsModule,
-
     // local
     CoreModule,
     SharedModule,

projects/elements-demo/src/app/core/layout/responsive-layout.service.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ResponsiveLayoutService } from './responsive-layout.service';
+
+describe('ResponsiveLayoutService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ResponsiveLayoutService = TestBed.get(
+      ResponsiveLayoutService
+    );
+    expect(service).toBeTruthy();
+  });
+});

projects/elements-demo/src/app/core/layout/responsive-layout.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ResponsiveLayoutService {
+  // basic
+  isXSmallScreen: Observable<boolean>;
+  isSmallScreen: Observable<boolean>;
+  isMediumScreen: Observable<boolean>;
+  isLargeScreen: Observable<boolean>;
+  isXLargeScreen: Observable<boolean>;
+
+  // derived
+  columnCount: Observable<number>;
+  isResponsiveLayout: Observable<boolean>;
+
+  constructor(private breakpointObserver: BreakpointObserver) {
+    this.isXSmallScreen = this.breakpointObserver
+      .observe([Breakpoints.XSmall])
+      .pipe(map(result => result.matches));
+    this.isSmallScreen = this.breakpointObserver
+      .observe([Breakpoints.Small])
+      .pipe(map(result => result.matches));
+    this.isMediumScreen = this.breakpointObserver
+      .observe([Breakpoints.Medium])
+      .pipe(map(result => result.matches));
+    this.isLargeScreen = this.breakpointObserver
+      .observe([Breakpoints.Large])
+      .pipe(map(result => result.matches));
+    this.isXLargeScreen = this.breakpointObserver
+      .observe([Breakpoints.XLarge])
+      .pipe(map(result => result.matches));
+
+    this.columnCount = combineLatest([
+      this.isXSmallScreen,
+      this.isSmallScreen,
+      this.isMediumScreen,
+      this.isLargeScreen
+    ]).pipe(
+      map(([isXSmall, isSmall, isMedium, isLarge]) =>
+        isXSmall ? 1 : isSmall ? 2 : isMedium ? 2 : isLarge ? 3 : 4
+      )
+    );
+
+    this.isResponsiveLayout = this.breakpointObserver
+      .observe([Breakpoints.XSmall, Breakpoints.Small])
+      .pipe(map(result => result.matches));
+  }
+}

projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.html

@@ -1,7 +1,7 @@
 <mat-toolbar color="primary">
   <button
     mat-icon-button
-    *ngIf="isSmallScreen | async"
+    *ngIf="isResponsiveLayout | async"
     class="menu"
     (click)="toggleMenu()"
   >
@@ -21,7 +21,7 @@
   <span class="project-name">@angular-extensions/elements</span>
 
   <span class="spacer"></span>
-  <ng-container *ngIf="(isSmallScreen | async) === false">
+  <ng-container *ngIf="(isResponsiveLayout | async) === false">
     <button
       mat-flat-button
       routerLink="home"

projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+
+import { ResponsiveLayoutService } from '../responsive-layout.service';
 
 @Component({
   selector: 'demo-toolbar',
@@ -12,14 +12,12 @@ export class ToolbarComponent implements OnInit {
   @Input() navOpened: boolean;
   @Output() toggle = new EventEmitter<void>();
 
-  isSmallScreen: Observable<boolean>;
+  isResponsiveLayout: Observable<boolean>;
 
-  constructor(private breakpointObserver: BreakpointObserver) {}
+  constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
 
   ngOnInit() {
-    this.isSmallScreen = this.breakpointObserver
-      .observe([Breakpoints.Small, Breakpoints.XSmall])
-      .pipe(map(result => result.matches));
+    this.isResponsiveLayout = this.responsiveLayoutService.isResponsiveLayout;
   }
 
   toggleMenu() {

projects/elements-demo/src/app/features/home/home.module.ts

@@ -1,12 +1,14 @@
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { SharedModule } from '../../shared/shared.module';
 
 import { HomeComponent } from './home/home.component';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [HomeComponent],
-  imports: [SharedModule],
+  imports: [SharedModule, RouterModule],
   exports: [HomeComponent]
 })
 export class HomeModule {}

projects/elements-demo/src/app/features/home/home/home.component.html

@@ -7,12 +7,22 @@
   ></mat-icon>
   <h1>ANGULAR EXTENSIONS ELEMENTS</h1>
   <h3>
-    The easiest way to lazy-load Angular Elements or any other web components in
-    your Angular application!
+    The easiest way to lazy-load Angular Elements or any other web components
+    <br />
+    in your Angular application!
   </h3>
 </div>
 
-<h2>Get started</h2>
+<div class="cta">
+  <button mat-flat-button color="primary" routerLink="../docs">
+    Learn more
+  </button>
+  <button mat-flat-button color="accent" routerLink="../examples">
+    Explore examples
+  </button>
+</div>
+
+<h2>Quickstart</h2>
 <ol>
   <li>Install <code>npm i @angular-extension/elements</code></li>
   <li>
@@ -23,10 +33,26 @@ <h2>Get started</h2>
     >
   </li>
   <li>
-    And append <code>LazyElementsModule</code> to the
-    <code>imports: []</code> of your <code>AppModule</code>
+    Append <code>LazyElementsModule</code> to the <code>imports: []</code> of
+    your <code>AppModule</code>
   </li>
   <li>
-    Use <code>*axLazyElement</code> directive on an element you wish to load
+    Use <code>*axLazyElement</code> directive on an element you wish to load and
+    pass in the url of the element bundle
   </li>
 </ol>
+
+<h2>Features</h2>
+<mat-grid-list [cols]="columnCount | async" rowHeight="150">
+  <mat-grid-tile *ngFor="let feature of features">
+    <mat-card>
+      <mat-card-header>
+        <div mat-card-avatar>
+          <mat-icon color="primary">{{ feature.icon }}</mat-icon>
+        </div>
+        <mat-card-title>{{ feature.title }}</mat-card-title>
+        <mat-card-subtitle>{{ feature.subtitle }}</mat-card-subtitle>
+      </mat-card-header>
+    </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>

projects/elements-demo/src/app/features/home/home/home.component.scss

@@ -31,16 +31,52 @@
     }
 
     h3 {
-      font-size: 2em;
+      font-size: 1.8em;
       line-height: 1.3em;
       opacity: 0.5;
-      text-transform: uppercase;
-      padding: 20px 50px;
+      margin: 0;
     }
 
     mat-icon {
-      height: 160px;
-      margin: 0 0 25px 0;
+      height: 170px;
+      margin: 0 0 50px 0;
+    }
+  }
+
+  .cta {
+    margin: 40px 0 0 0;
+
+    button {
+      margin: 5px;
+      padding: 5px 35px;
+    }
+  }
+
+  h2 {
+    font-size: 2.5em;
+    text-transform: uppercase;
+    margin: 50px 0 15px 0;
+  }
+
+  mat-grid-list {
+    width: 100%;
+
+    mat-grid-tile {
+      mat-card {
+        width: calc(100% - 50px);
+        height: calc(100% - 50px);
+
+        mat-card-subtitle {
+          height: 60px;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        mat-icon {
+          font-size: 3em;
+        }
+      }
     }
   }
 }

projects/elements-demo/src/app/features/home/home/home.component.ts

@@ -1,12 +1,66 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { ResponsiveLayoutService } from '../../../core/layout/responsive-layout.service';
+
+const FEATURES = [
+  {
+    title: 'Lightweight',
+    subtitle:
+      'The library is extremely lightweight, all in all it is less than 5kb (or 1.5kb gzipped), epic!',
+    icon: 'cloud_queue'
+  },
+  {
+    title: 'Simple API',
+    subtitle:
+      'Just grab *axLazyElement directive set the element bundle url and you are ready to go!',
+    icon: 'sentiment_satisfied_alt'
+  },
+  {
+    title: 'Loading indicator support',
+    subtitle:
+      'Define optional custom loading indicator to be displayed before the element is ready...',
+    icon: 'hourglass_empty'
+  },
+  {
+    title: 'Lazy loading',
+    subtitle:
+      'This is as lazy as it gets! The request to load a bundle will be triggered only when the element appears in the template of some component!',
+    icon: 'schedule'
+  },
+  {
+    title: 'Angular template binding',
+    subtitle:
+      'Use standard Angular template binding for both properties and events as you would for any other Angular component!',
+    icon: 'view_compact'
+  },
+  {
+    title: 'Performance',
+    subtitle:
+      'Elements are loaded just once, even if you use it on multiple pages or even multiple time on single page!',
+    icon: 'offline_bolt'
+  },
+  {
+    title: 'Supports everything',
+    subtitle:
+      'Angular elements, web components, basically any custom element you can get your hands on...',
+    icon: 'category'
+  }
+];
 
 @Component({
   selector: 'demo-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
-  constructor() {}
+  columnCount: Observable<number>;
+
+  features = FEATURES;
+
+  constructor(private responsiveLayoutService: ResponsiveLayoutService) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.columnCount = this.responsiveLayoutService.columnCount;
+  }
 }