feat: demo version additions

docs/app/shared/components/download-form/download-form.component.html

@@ -0,0 +1,11 @@
+<nb-card>
+  <nb-card-header>
+    <span>Download</span>
+    <button nbButton status="basic" appearance="ghost" class="close-icon" (click)="closeDialog()">
+      <i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
+    </button>
+  </nb-card-header>
+  <nb-card-body>
+    <div id="hubspotForm"></div>
+  </nb-card-body>
+</nb-card>

docs/app/shared/components/download-form/download-form.component.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card {
+    width: 30rem;
+  }
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .close-icon {
+    margin-left: auto;
+    padding: 0;
+  }
+
+  ::ng-deep .hs-custom-form .hs-submit-btn {
+    margin-top: 2rem;
+  }
+}

docs/app/shared/components/download-form/download-form.component.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { AfterViewInit, Component } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-download-form',
+  templateUrl: './download-form.component.html',
+  styleUrls: ['./download-form.component.scss'],
+})
+export class DownloadFormComponent implements AfterViewInit {
+
+  constructor(protected ref: NbDialogRef<DownloadFormComponent>) {
+  }
+
+  ngAfterViewInit() {
+    hbspt.forms.create({
+      portalId: '2452262',
+      formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e',
+      target: '#hubspotForm',
+      submitButtonClass: 'hs-submit-btn btn',
+      css: '',
+      cssClass: 'hs-custom-form',
+      redirectUrl: 'https://github.com/akveo/ngx-admin',
+    });
+  }
+
+  closeDialog() {
+    this.ref.close();
+  }
+}

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

@@ -0,0 +1,18 @@
+<div style="position: relative;">
+  <nb-badge text="New!" status="danger" position="top right"></nb-badge>
+  <a
+    routerLink="/material"
+    class="material-theme-link eva-parent-hover"
+    [nbPopover]="popoverContent"
+    nbPopoverPlacement="bottom"
+    nbPopoverAdjustment="noop"
+    nbPopoverTrigger="noop"
+    nbPopoverOffset="0"
+  >
+    Material Theme
+  </a>
+</div>
+
+<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,37 @@
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $menu-item-fg: nb-theme(color-fg-heading-light);
+  $menu-item-fg-active: nb-theme(header-menu-fg-active);
+
+  :host {
+    display: flex;
+    align-items: center;
+    padding-right: 32px;
+  }
+
+  a {
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 1.5rem;
+    padding: 0.675rem 1.375rem;
+    color: $menu-item-fg;
+    display: block;
+
+    &:hover, &.active, &:focus {
+      color: $menu-item-fg-active;
+      outline: none !important;
+    }
+  }
+}
+
+.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,74 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, merge } from 'rxjs';
+import { map, take, takeUntil } from 'rxjs/operators';
+import { NbMediaBreakpointsService, NbMediaBreakpoint, NbPopoverDirective, NbThemeService } 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, OnDestroy {
+
+  private destroy$ = new Subject<void>();
+  private hidePopover$ = new Subject<void>();
+
+  showPopover: boolean = false;
+
+  @Input()
+  set withPopover(value: any) {
+    this.showPopover = coerceBooleanProperty(value);
+  }
+
+  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
+
+  constructor(
+    private breakpointService: NbMediaBreakpointsService,
+    private themeService: NbThemeService,
+  ) {}
+
+  ngAfterViewInit(): void {
+    if (!this.showPopover) {
+      return;
+    }
+
+    this.themeService.onMediaQueryChange()
+      .pipe(
+        map(([, currentBreakpoint]: NbMediaBreakpoint[]) => this.shouldShowPopover(currentBreakpoint)),
+        takeUntil(merge(this.destroy$, this.hidePopover$)),
+      )
+      .subscribe((showPopover: boolean) => {
+        if (showPopover) {
+          this.popover.show();
+        } else {
+          this.popover.hide();
+        }
+      });
+
+    this.hidePopover$
+      .pipe(
+        take(1),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(() => this.popover.hide());
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
+
+  hidePopover(): void {
+    this.hidePopover$.next();
+  }
+
+  private shouldShowPopover(breakpoint: NbMediaBreakpoint): boolean {
+    return breakpoint.width >= this.breakpointService.getByName('is').width;
+  }
+}

docs/app/shared/components/premium-form/premium-form.component.html

@@ -0,0 +1,11 @@
+<nb-card>
+  <nb-card-header>
+    <span>Premium</span>
+    <button nbButton status="basic" appearance="ghost" class="close-icon" (click)="closeDialog()">
+      <i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
+    </button>
+  </nb-card-header>
+  <nb-card-body>
+    <div id="hubspotForm"></div>
+  </nb-card-body>
+</nb-card>

docs/app/shared/components/premium-form/premium-form.component.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card {
+    width: 30rem;
+  }
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .close-icon {
+    margin-left: auto;
+    padding: 0;
+  }
+
+  ::ng-deep .hs-custom-form .hs-submit-btn {
+    margin-top: 1rem;
+  }
+}

docs/app/shared/components/premium-form/premium-form.component.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { AfterViewInit, Component } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-premium-form',
+  templateUrl: './premium-form.component.html',
+  styleUrls: ['./premium-form.component.scss'],
+})
+export class PremiumFormComponent implements AfterViewInit {
+
+
+  constructor(protected ref: NbDialogRef<PremiumFormComponent>) {
+  }
+
+  ngAfterViewInit() {
+    hbspt.forms.create({
+      portalId: '2452262',
+      formId: 'b066428e-c41a-4dce-bbc2-5690cf084a8f',
+      target: '#hubspotForm',
+      submitButtonClass: 'hs-submit-btn btn',
+      css: '',
+      cssClass: 'hs-custom-form',
+    });
+  }
+
+  closeDialog() {
+    this.ref.close();
+  }
+}