Add "material theme link" component

docs/app/@theme/components/header/header.component.html

@@ -9,6 +9,7 @@
 </div>
 <div class="section middle">
   <nb-menu [items]="headerMenu"></nb-menu>
+  <ng-content></ng-content>
   <a routerLink="/" fragment="backend-bundles" class="backend-bundles eva-parent-hover">
     <i [innerHTML]="'gift-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"></i>
     <span>Backend Bundles</span>

docs/app/@theme/theme.module.ts

@@ -9,6 +9,17 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LazyLoadImageModule } from 'ng-lazyload-image';
+import {
+  NbLayoutModule,
+  NbThemeModule,
+  NbMenuModule,
+  NbCheckboxModule,
+  NbCardModule,
+  NbSidebarModule,
+  NbTabsetModule,
+} from '@nebular/theme';
+
+import { LandingSharedModule } from '../shared/landing-shared.module';
 
 // components
 import {
@@ -26,21 +37,6 @@ import {
 import { ngxLandingServices } from './services';
 // services
 
-// pipes
-import { EvaIconsPipe } from './pipes/eva-icons.pipe';
-import { CapitalizePipe } from './pipes/capitalize.pipe';
-// pipes
-
-import {
-  NbLayoutModule,
-  NbThemeModule,
-  NbMenuModule,
-  NbCheckboxModule,
-  NbCardModule,
-  NbSidebarModule,
-  NbTabsetModule,
-} from '@nebular/theme';
-
 const BASE_MODULES = [
   CommonModule,
   FormsModule,
@@ -67,14 +63,10 @@ const COMPONENTS = [
   NgxDocsFooterComponent,
 ];
 
-const PIPES = [
-  EvaIconsPipe,
-  CapitalizePipe,
-];
-
 @NgModule({
   imports: [
     RouterModule,
+    LandingSharedModule,
 
     ...BASE_MODULES,
 
@@ -82,8 +74,6 @@ const PIPES = [
   ],
   declarations: [
     ...COMPONENTS,
-
-    ...PIPES,
   ],
   exports: [
     RouterModule,
@@ -93,10 +83,6 @@ const PIPES = [
     ...NB_MODULES,
 
     ...COMPONENTS,
-
-    ...PIPES,
-  ],
-  entryComponents: [
   ],
 })
 export class NgxLandingThemeModule {

docs/app/app.module.ts

@@ -13,6 +13,7 @@ import { NgxLandingThemeModule } from './@theme/theme.module';
 import { CoreModule } from './@core/core.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { LandingSharedModule } from './shared/landing-shared.module';
 
 import { DOCS, STRUCTURE } from './app.options';
 const docs = require('../output.json');
@@ -28,6 +29,7 @@ import { structure  } from '../structure';
     HttpClientModule,
     AppRoutingModule,
 
+    LandingSharedModule,
     NgxLandingThemeModule.forRoot(),
     CoreModule.forRoot(),
   ],

docs/app/pages/docs/landing-docs.component.html

@@ -1,7 +1,9 @@
 <nb-layout>
   <nb-layout-header fixed>
     <div class="content-center">
-      <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true"></ngx-landing-header>
+      <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true">
+        <ngx-material-theme-link></ngx-material-theme-link>
+      </ngx-landing-header>
     </div>
   </nb-layout-header>
   <nb-sidebar class="menu-sidebar" [tag]="sidebarTag" [responsive]="true" [compactedBreakpoints]="[]" [collapsedBreakpoints]="collapsedBreakpoints">

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

@@ -11,6 +11,7 @@ import { NgxLandingThemeModule } from '../../@theme/theme.module';
 import { SwiperModule } from 'ngx-swiper-wrapper';
 import { NgxBlocksModule } from '../../blocks/blocks.module';
 import { LandingDocsRoutingModule } from './landing-docs-routing.module';
+import { LandingSharedModule } from '../../shared/landing-shared.module';
 // modules
 
 // components
@@ -32,6 +33,7 @@ const COMPONENTS = [
   imports: [
     NgxLandingThemeModule,
     SwiperModule,
+    LandingSharedModule,
     LandingDocsRoutingModule,
     NgxBlocksModule,
   ],

docs/app/pages/home/landing-home-routing.module.ts

@@ -7,6 +7,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LandingHomeComponent } from './landing-home.component';
+import { MaterialLandingComponent } from './material-landing/material-landing.component';
 
 
 export const routes: Routes = [
@@ -14,6 +15,10 @@ export const routes: Routes = [
     path: '',
     component: LandingHomeComponent,
   },
+  {
+    path: 'material',
+    component: MaterialLandingComponent,
+  },
 ];
 
 @NgModule({

docs/app/pages/home/landing-home.component.html

@@ -1,6 +1,8 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <ngx-landing-header></ngx-landing-header>
+    <ngx-landing-header>
+      <ngx-material-theme-link withPopover></ngx-material-theme-link>
+    </ngx-landing-header>
   </nb-layout-header>
 
   <nb-layout-column>

docs/app/pages/home/landing-home.module.ts

@@ -26,12 +26,15 @@ import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-l
 import { BackendBundlesSectionComponent } from './backend-bundles-section/backend-bundles-section.component';
 import { LicensePipe } from './backend-bundles-section/license.pipe';
 import { BackgroundImagePipe } from './backend-bundles-section/background-image.pipe';
+import { MaterialLandingComponent } from './material-landing/material-landing.component';
+import { LandingSharedModule } from '../../shared/landing-shared.module';
 // components
 
 const PIPES = [LicensePipe, BackgroundImagePipe];
 
 const COMPONENTS = [
   LandingHomeComponent,
+  MaterialLandingComponent,
   NgxLandingSectionsContainerComponent,
   MainInfoSectionComponent,
   DescriptionSectionComponent,
@@ -53,6 +56,7 @@ const COMPONENTS = [
     NgxLandingThemeModule,
     SwiperModule,
     LandingHomeRoutingModule,
+    LandingSharedModule,
   ],
   providers: [
     ...PIPES,

docs/app/pages/home/material-landing/material-landing.component.html

@@ -0,0 +1,9 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <ngx-landing-header></ngx-landing-header>
+  </nb-layout-header>
+
+  <nb-layout-footer class="footer" fixed>
+    <ngx-landing-footer></ngx-landing-footer>
+  </nb-layout-footer>
+</nb-layout>

docs/app/pages/home/material-landing/material-landing.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-landing',
+  templateUrl: './material-landing.component.html',
+  styleUrls: [
+    './material-landing.component.scss',
+    '../landing-home.component.scss'
+  ]
+})
+export class MaterialLandingComponent {}

docs/app/pages/home/theme-section/theme-section.component.html

@@ -7,7 +7,7 @@
         [swiper]="swiperConfig"
         [(index)]="sliderIndex">
     <div class="swiper-wrapper">
-      <a href="https://hubs.ly/" target="_blank" class="image-container swiper-slide">
+      <a href="https://hubs.ly/todo" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
             data-src="assets/img/material-light-theme.png"
             class="swiper-lazy"
@@ -17,15 +17,15 @@
             defaultImage="assets/img/default.png"
             alt="Material Light Theme" />
       </a>
-      <a href="https://hubs.ly/" target="_blank" class="image-container swiper-slide">
+      <a href="https://hubs.ly/todo" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
             data-src="assets/img/material-dark-theme.png"
             class="swiper-lazy"
             alt="Material Dark Theme" />
         <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
             lazyLoad="assets/img/material-dark-theme.png"
-            alt="Material Dark Theme"
+            defaultImage="assets/img/default.png"
-            defaultImage="assets/img/default.png" />
+            alt="Material Dark Theme" />
       </a>
       <a href="https://hubs.ly/H0n54_z0" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"

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 {}