Add "material theme link" component

docs/app/shared/components/material-theme-link/material-theme-link.component.html

@@ -0,0 +1,15 @@
+<a
+  routerLink="/material"
+  class="eva-parent-hover"
+  [nbPopover]="popoverContent"
+  nbPopoverPlacement="bottom"
+  nbPopoverTrigger="noop"
+>
+  <i [innerHTML]="'color-palette-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"
+  ></i>
+  Material Theme
+</a>
+
+<ng-template #popoverContent>
+  <p class="material-theme-popover" (mouseover)="hidePopover()">New theme is available!</p>
+</ng-template>

docs/app/shared/components/material-theme-link/material-theme-link.component.scss

@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  align-items: center;
+  padding-right: 32px;
+}
+
+a {
+  display: flex;
+  align-items: center;
+}
+
+i {
+  margin-right: 8px;
+}
+
+.material-theme-popover {
+  margin: 0;
+  padding: 1rem 2rem;
+  color: #ff4d6b;
+  font-weight: 600;
+  font-size: 1.1rem;
+}

docs/app/shared/components/material-theme-link/material-theme-link.component.ts

@@ -0,0 +1,26 @@
+import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NbPopoverDirective } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-material-theme-link',
+  templateUrl: './material-theme-link.component.html',
+  styleUrls: ['./material-theme-link.component.scss'],
+})
+export class MaterialThemeLinkComponent implements AfterViewInit {
+  public showPopover: boolean = false;
+
+  @Input() public set withPopover(value: any) {
+    this.showPopover = coerceBooleanProperty(value);
+  }
+
+  @ViewChild(NbPopoverDirective, { static: true }) public popover: NbPopoverDirective;
+
+  public ngAfterViewInit(): void {
+    this.showPopover && this.popover && this.popover.show();
+  }
+
+  public hidePopover(): void {
+    this.popover && this.popover.hide();
+  }
+}

docs/app/shared/landing-shared.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { NbPopoverModule } from '@nebular/theme';
+import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component';
+import { CapitalizePipe } from './pipes/capitalize.pipe';
+import { EvaIconsPipe } from './pipes/eva-icons.pipe';
+import { RouterModule } from '@angular/router';
+
+const component = [MaterialThemeLinkComponent];
+const pipes = [CapitalizePipe, EvaIconsPipe];
+
+@NgModule({
+  imports: [RouterModule, NbPopoverModule],
+  declarations: [...component, ...pipes],
+  exports: [NbPopoverModule, ...component, ...pipes],
+})
+export class LandingSharedModule {}

docs/app/shared/pipes/capitalize.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxCapitalize' })
+export class CapitalizePipe implements PipeTransform {
+
+  transform(input: string): string {
+    return input && input.length
+      ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase())
+      : input;
+  }
+}

docs/app/shared/pipes/eva-icons.pipe.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { Pipe, PipeTransform } from '@angular/core';
+import { icons } from 'eva-icons';
+
+@Pipe({ name: 'eva' })
+export class EvaIconsPipe implements PipeTransform {
+
+  private defaultOptions = {
+    height: 24,
+    width: 24,
+    fill: 'inherit',
+    animationHover: true,
+    animationInfinity: false,
+  };
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(icon: string,
+            options: {
+              height: number;
+              width: number;
+              fill: string;
+              animationType?: string;
+              animationHover?: boolean;
+              animationInfinity?: boolean;
+            },
+  ) {
+    const mergedOptions = {
+      ...this.defaultOptions,
+      ...options,
+    };
+    const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
+    const animation = animationType ?
+      { type: animationType, hover: animationHover, infinite: animationInfinity } :
+      null;
+
+    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
+      width,
+      height,
+      fill,
+      animation,
+    }));
+  }
+}