+ 
+
+
+
+
+-
+
- More from Akveo +
- Homepage +
- Eva Icons +
- React Native UI Kitten +
- ngx-admin +
+
+-
+
- Follow Us + +
-
+ © 2015-2018 Akveo LLC
+ Documentation licensed under CC BY 4.0. +
+
+
diff --git a/docs/app/@theme/components/docs-footer/footer.component.scss b/docs/app/@theme/components/docs-footer/footer.component.scss
new file mode 100644
index 00000000..dd64d179
--- /dev/null
+++ b/docs/app/@theme/components/docs-footer/footer.component.scss
@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+
+ $text-fg: nb-theme(footer-fg);
+ $social-fg: nb-theme(color-fg-icon);
+ $title-fg: nb-theme(color-fg-heading);
+
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ padding-top: 1.25rem;
+ justify-content: space-around;
+
+ > div {
+ display: flex;
+ margin-right: 0;
+ justify-content: center;
+ width: 100%;
+ &:last-child {
+ margin-right: 0;
+ }
+
+ a {
+ color: $text-fg;
+ }
+
+ ul {
+ list-style: none;
+ padding-left: 0;
+ }
+
+ li {
+ display: flex;
+ margin-bottom: 1rem;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ }
+
+ &.logo {
+ display: none;
+ }
+
+ .title {
+ color: $title-fg;
+ font-size: 1.125rem;
+ font-weight: bold;
+ line-height: 1.375rem;
+ }
+
+ .copy {
+ color: $text-fg;
+ display: list-item;
+ font-size: 0.75rem;
+ }
+
+ .social {
+ display: flex;
+ flex-direction: row;
+ a {
+ font-size: 3rem;
+ text-decoration: none;
+ color: $social-fg;
+ margin-right: 1rem;
+ }
+ }
+ }
+
+ > div.logo {
+ display: none;
+ }
+
+ @include media-breakpoint-up(md) {
+ > div {
+ justify-content: flex-start;
+ margin-right: 2rem;
+ width: auto;
+
+ li {
+ justify-content: flex-start;
+ align-items: flex-start;
+ text-align: left;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ > div.logo {
+ display: flex;
+ flex-direction: column;
+ margin-top: -2.5rem;
+ text-align: center;
+ justify-content: center;
+
+ img {
+ max-width: 9rem;
+ }
+ }
+ }
+}
diff --git a/docs/app/@theme/components/docs-footer/footer.component.ts b/docs/app/@theme/components/docs-footer/footer.component.ts
new file mode 100644
index 00000000..28b2a2d9
--- /dev/null
+++ b/docs/app/@theme/components/docs-footer/footer.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-docs-footer',
+ styleUrls: ['./footer.component.scss'],
+ templateUrl: './footer.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxDocsFooterComponent {
+}
diff --git a/docs/app/@theme/components/footer/footer.component.html b/docs/app/@theme/components/footer/footer.component.html
new file mode 100644
index 00000000..e077880f
--- /dev/null
+++ b/docs/app/@theme/components/footer/footer.component.html
@@ -0,0 +1,49 @@
+-
+
- Contact Us +
- contact@akveo.com +
+
+
+
+
+
+
+-
+
- More from Akveo +
- Homepage +
- Nebular +
- Eva Icons +
- React Native UI Kitten +
+
diff --git a/docs/app/@theme/components/footer/footer.component.scss b/docs/app/@theme/components/footer/footer.component.scss
new file mode 100644
index 00000000..ddddea0f
--- /dev/null
+++ b/docs/app/@theme/components/footer/footer.component.scss
@@ -0,0 +1,188 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ $text-fg: nb-theme(footer-fg);
+ $social-fg: nb-theme(color-fg-icon);
+ $title-fg: nb-theme(footer-title-fg);
+
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ padding-top: 2.75rem;
+ justify-content: flex-start;
+ margin: 0.375rem 10.25rem 0;
+
+ > div {
+ display: flex;
+ margin-right: 0;
+ margin-bottom: 2rem;
+ margin-top: 0.375rem;
+ justify-content: center;
+ width: 100%;
+
+ &:last-child {
+ margin-right: 0;
+ margin-bottom: 0;
+ }
+
+ a {
+ font-size: nb-theme(font-size);
+ color: $text-fg;
+ }
+
+ ul {
+ list-style: none;
+ padding-left: 0;
+ }
+
+ li {
+ font-family: nb-theme(font-secondary), sans-serif;
+ font-weight: normal;
+ display: flex;
+ margin-bottom: 1.5rem;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+
+ &:first-child {
+ margin-bottom: 1.75rem;
+ }
+ }
+
+ .title {
+ color: $title-fg;
+ font-size: nb-theme(font-size-lg);
+ }
+
+ .copy {
+ $copy-color: #535b6c;
+
+ color: $copy-color;
+ display: list-item;
+ font-size: 0.66rem;
+ line-height: 1.75;
+
+ a {
+ font-size: 0.65rem;
+ color: $copy-color;
+ }
+ }
+
+ .social {
+ display: flex;
+ flex-direction: row;
+
+ a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ background-color: $social-fg;
+ border-radius: 0.375rem;
+ text-decoration: none;
+ margin-right: 1.5rem;
+ line-height: 0.5;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ > div.logo {
+ margin-bottom: 3.125rem;
+
+ a {
+ width: 10rem;
+ height: 10rem;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ justify-content: space-around;
+ margin-right: 0;
+ margin-left: 0;
+
+ > div.logo {
+ display: none;
+ }
+
+ > div {
+ justify-content: flex-start;
+ margin-right: 0;
+ margin-bottom: 0;
+ width: auto;
+
+ li {
+ justify-content: flex-start;
+ align-items: flex-start;
+ text-align: left;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ margin-right: 2rem;
+ margin-left: 2rem;
+
+ > div.logo {
+ display: flex;
+ flex-direction: column;
+ margin-top: 0;
+ margin-bottom: 0;
+ text-align: center;
+ }
+ }
+
+ @include media-breakpoint-up(xxl) {
+ justify-content: flex-start;
+ margin: 0.375rem 10.25rem 0;
+
+ > div.logo {
+ margin-right: 7.875rem;
+ }
+
+ > div {
+ margin-right: 8.375rem;
+ }
+
+ .company-info {
+ margin-right: 12.25rem;
+ }
+
+ .social-container {
+ margin-right: 6.75rem;
+ }
+ }
+
+ @include media-breakpoint-down(md) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+
+ > div {
+ margin-right: 0;
+
+ &.logo {
+ margin-right: 0;
+ }
+ }
+
+ .social-container {
+ margin-right: 0;
+ }
+ }
+}
diff --git a/docs/app/@theme/components/footer/footer.component.ts b/docs/app/@theme/components/footer/footer.component.ts
new file mode 100644
index 00000000..54985d21
--- /dev/null
+++ b/docs/app/@theme/components/footer/footer.component.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-landing-footer',
+ styleUrls: ['./footer.component.scss'],
+ templateUrl: './footer.component.html',
+})
+export class NgxLandingFooterComponent {
+}
diff --git a/docs/app/@theme/components/fragment-target/fragment-target.directive.ts b/docs/app/@theme/components/fragment-target/fragment-target.directive.ts
new file mode 100644
index 00000000..10b36d0e
--- /dev/null
+++ b/docs/app/@theme/components/fragment-target/fragment-target.directive.ts
@@ -0,0 +1,73 @@
+import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NB_WINDOW } from '@nebular/theme';
+import { takeWhile, publish, refCount } from 'rxjs/operators';
+import { NgxTocElement, NgxTocStateService } from '../../services/toc-state.service';
+import { delay } from 'rxjs/internal/operators';
+
+@Directive({
+ // tslint:disable-next-line
+ selector: '[ngxFragment]',
+})
+export class NgxFragmentTargetDirective implements OnInit, OnDestroy, NgxTocElement {
+ @Input() ngxFragment: string;
+ @Input() ngxFragmentClass: string;
+ @Input() ngxFragmentSync: boolean = true;
+
+ private inView = false;
+ private alive = true;
+ private readonly marginFromTop = 120;
+
+ get fragment(): string {
+ return this.ngxFragment;
+ }
+
+ get element(): any {
+ return this.el.nativeElement;
+ }
+
+ get y(): number {
+ return this.element.getBoundingClientRect().y;
+ }
+
+ constructor(
+ private activatedRoute: ActivatedRoute,
+ @Inject(NB_WINDOW) private window,
+ private tocState: NgxTocStateService,
+ private el: ElementRef,
+ private renderer: Renderer2,
+ ) {}
+
+ ngOnInit() {
+ this.ngxFragmentSync && this.tocState.add(this);
+
+ this.activatedRoute.fragment
+ .pipe(publish(null), refCount(), takeWhile(() => this.alive), delay(10))
+ .subscribe((fragment: string) => {
+ if (fragment && this.fragment === fragment && !this.inView) {
+ this.selectFragment();
+ } else {
+ this.deselectFragment();
+ }
+ });
+ }
+
+ selectFragment() {
+ this.ngxFragmentClass && this.renderer.addClass(this.el.nativeElement, this.ngxFragmentClass);
+ this.setInView(true);
+ this.window.scrollTo(0, this.el.nativeElement.offsetTop - this.marginFromTop);
+ }
+
+ deselectFragment() {
+ this.renderer.removeClass(this.el.nativeElement, this.ngxFragmentClass);
+ }
+
+ setInView(val: boolean) {
+ this.inView = val;
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ this.ngxFragmentSync && this.tocState.remove(this);
+ }
+}
diff --git a/docs/app/@theme/components/header/header.component.html b/docs/app/@theme/components/header/header.component.html
new file mode 100644
index 00000000..a6618ad5
--- /dev/null
+++ b/docs/app/@theme/components/header/header.component.html
@@ -0,0 +1,25 @@
+-
+
- Contact Us +
- contact@akveo.com +
+
+
+
+ ngx-admin
+ v{{ currentVersion }}
+
+
+
+
+
+
+ Need some help? Let us know! contact@akveo.com
+
+
+
+
diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
new file mode 100644
index 00000000..3ba86344
--- /dev/null
+++ b/docs/app/@theme/components/header/header.component.scss
@@ -0,0 +1,286 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ $left-section-width: nb-theme(sidebar-width);
+ $right-section-width: nb-theme(settings-col-width);
+ $logo-fg: nb-theme(header-fg);
+ $version-fg: nb-theme(color-fg-heading-light);
+ $menu-item-fg: nb-theme(color-fg-heading-light);
+ $menu-item-fg-active: nb-theme(header-menu-fg-active);
+ $contacts-fg: nb-theme(color-fg-heading-light);
+ $contacts-active-fg: nb-theme(header-menu-fg-active);
+
+ display: flex;
+ flex: 1 0 auto;
+ flex-direction: row;
+ align-items: center;
+
+ .section {
+ display: flex;
+ padding: 0.875rem 0.5rem;
+
+ &.left {
+ width: $left-section-width;
+ }
+
+ &.middle {
+ flex: 1;
+ }
+ }
+
+ .logo {
+ display: flex;
+ flex: 1 0 auto;
+ flex-direction: row;
+
+ a {
+ font-family: nb-theme(font-main), sans-serif;
+ font-size: 1.275rem;
+ color: $logo-fg;
+ text-decoration: none !important;
+ font-weight: bold;
+ }
+
+ .version {
+ font-size: 0.75rem;
+ font-weight: bold;
+ color: $version-fg;
+ }
+ }
+
+ /deep/ nb-menu {
+ flex: 1;
+
+ .menu-items {
+ display: flex;
+ justify-content: flex-start;
+
+ .menu-item {
+ border: none;
+ width: 5.375rem;
+
+ a {
+ padding: 0.675rem 1.375rem;
+ color: $menu-item-fg;
+ display: block;
+
+ &:hover, &.active, &:focus {
+ font-weight: normal;
+ color: $menu-item-fg-active;
+ outline: none !important;
+ }
+ }
+ }
+
+ li:first-child {
+ display: none;
+ }
+ }
+ }
+
+ .section.right {
+ color: $contacts-fg;
+
+ a {
+ font-family: nb-theme(font-main), sans-serif;
+ color: $contacts-active-fg;
+ margin-left: 0.375rem;
+ }
+ }
+
+ @include media-breakpoint-up(is) {
+ .section {
+ padding: 0.875rem 0;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
+ .logo {
+ align-items: baseline;
+ flex: 1 0 auto;
+
+ a {
+ color: #000000;
+ margin-right: 0.5rem;
+ }
+
+ .version {
+ display: inline;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ .logo {
+ flex: 1 0 auto;
+ flex-direction: column;
+ align-items: flex-start;
+
+ .version {
+ margin-left: 0;
+ }
+ }
+
+ /deep/ nb-menu .menu-items li:nth-child(2) {
+ display: list-item;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ /deep/ nb-menu .menu-items {
+ justify-content: flex-start;
+
+ li:not(:first-child) {
+ display: list-item;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(xl) {
+ .sidebar-toggle {
+ display: none;
+ }
+ }
+
+
+ @include media-breakpoint-down(sm) {
+ /deep/ nb-menu {
+ .menu-items {
+ justify-content: flex-end;
+ }
+ }
+
+ .section {
+ &.right {
+ display: none;
+ }
+ }
+ }
+
+ @include media-breakpoint-down(is) {
+ padding: 0 0 0 1rem;
+
+ .section {
+ &.left {
+ width: auto;
+ }
+ }
+
+ .logo {
+ flex: 1 0 auto;
+ flex-direction: column;
+ align-items: flex-start;
+
+ a {
+ color: #000000;
+ }
+
+ .version {
+ margin-left: 0;
+ }
+ }
+ }
+
+ &.docs-page {
+ .section {
+ &.left {
+ align-items: center;
+ padding-left: 0;
+ width: auto;
+ }
+
+ &.middle {
+ justify-content: flex-end;
+ }
+
+ &.right {
+ display: none;
+ margin-left: 0;
+ width: auto;
+ }
+ }
+
+ .sidebar-toggle {
+ border: none;
+ background-color: transparent;
+ font-size: 2.5rem;
+ line-height: 1rem;
+ flex: 1 0 auto;
+ padding: 0 0.5rem;
+
+ .nb-menu {
+ vertical-align: middle;
+ }
+ }
+
+ /deep/ nb-menu {
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ }
+
+ @include media-breakpoint-up(is) {
+ /deep/ nb-menu .menu-items li:first-child {
+ display: list-item;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
+ .section.middle {
+ justify-content: space-between;
+ }
+
+ .section.right {
+ display: block;
+ }
+
+ .stars {
+ width: 7.5rem;
+ height: 1.25rem;
+ margin-left: auto;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .section.middle {
+ justify-content: space-around;
+ }
+ /deep/ nb-menu {
+ min-width: 28rem;
+
+ .menu-items li {
+ display: list-item;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(xl) {
+ .section.left {
+ padding-left: 1.125rem;
+ width: nb-theme(sidebar-width);
+ }
+
+ .sidebar-toggle {
+ display: none;
+ }
+
+ /deep/ nb-menu {
+ flex: 1;
+ }
+ }
+
+ @include media-breakpoint-up(macpro) {
+ .section.right {
+ margin-left: 1.875rem;
+ width: $right-section-width;
+ }
+ }
+ }
+}
diff --git a/docs/app/@theme/components/header/header.component.ts b/docs/app/@theme/components/header/header.component.ts
new file mode 100644
index 00000000..f5e09d2f
--- /dev/null
+++ b/docs/app/@theme/components/header/header.component.ts
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
+import { takeWhile } from 'rxjs/operators';
+import { NbSidebarService } from '@nebular/theme';
+
+/*import { NgxAnalytics } from '../../services/analytics.service';*/
+import { NgxVersionService } from '../../services/version.service';
+import { HeaderMenuService } from '../../../@core/data/service/header-menu.service';
+
+@Component({
+ selector: 'ngx-landing-header',
+ styleUrls: ['./header.component.scss'],
+ templateUrl: './header.component.html',
+})
+export class NgxLandingHeaderComponent implements OnDestroy {
+
+ private alive = true;
+
+ @HostBinding('class.docs-page') @Input() isDocs = false;
+
+ @Input() sidebarTag: string = '';
+
+ currentVersion: string;
+ headerMenu = [];
+
+ constructor(/*private analytics: NgxAnalytics,*/
+ private sidebarService: NbSidebarService,
+ private versionService: NgxVersionService,
+ private headerMenuService: HeaderMenuService) {
+ this.currentVersion = this.versionService.getNgxVersion();
+
+ this.headerMenuService.getHeaderMenu()
+ .pipe(takeWhile(() => this.alive ))
+ .subscribe((headerMenu) => this.headerMenu = headerMenu);
+ }
+
+ trackEmailClick() {
+ }
+
+ toggleSidebar() {
+ this.sidebarService.toggle(false, this.sidebarTag);
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ }
+}
diff --git a/docs/app/@theme/components/index.ts b/docs/app/@theme/components/index.ts
new file mode 100644
index 00000000..84ecd52d
--- /dev/null
+++ b/docs/app/@theme/components/index.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgxLandingFooterComponent } from './footer/footer.component';
+import { NgxLandingHeaderComponent } from './header/header.component';
+import { NgxSectionTitleComponent } from './section-title/section-title.component';
+import { NgxPageTabsComponent } from './page-tabs/page-tabs.component';
+import { NgxPageTocComponent } from './page-toc/page-toc.component';
+import { NgxFragmentTargetDirective } from './fragment-target/fragment-target.directive';
+import { NgxDocsFooterComponent } from './docs-footer/footer.component';
+
+export {
+ NgxLandingHeaderComponent,
+ NgxLandingFooterComponent,
+ NgxSectionTitleComponent,
+ NgxPageTabsComponent,
+ NgxPageTocComponent,
+ NgxFragmentTargetDirective,
+ NgxDocsFooterComponent,
+};
diff --git a/docs/app/@theme/components/page-tabs/page-tabs.component.scss b/docs/app/@theme/components/page-tabs/page-tabs.component.scss
new file mode 100644
index 00000000..071b33f3
--- /dev/null
+++ b/docs/app/@theme/components/page-tabs/page-tabs.component.scss
@@ -0,0 +1,101 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+ display: flex;
+ flex-wrap: wrap;
+
+ $tabs-fg: nb-theme(color-fg-heading-light);
+ $tabs-fg-active: nb-theme(color-fg-heading);
+ $tabs-bg-active: nb-theme(color-white);
+ $tabs-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6);
+ $tabs-accent-line: nb-theme(color-fg-highlight);
+
+ a {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 1rem;
+ width: 50%;
+ height: 7.5rem;
+ font-size: 0.875rem;
+ text-decoration: none;
+ color: $tabs-fg;
+ margin-bottom: 1rem;
+
+ .title {
+ padding-bottom: 0.75rem;
+ font-weight: 500;
+ }
+
+ .icon {
+ font-size: 1.5rem;
+ padding-bottom: 1rem;
+ }
+
+ &.selected {
+ background: white;
+ color: $tabs-fg-active;
+ box-shadow: $tabs-shadow;
+
+ .line {
+ height: 0.1875rem;
+ width: 60%;
+ background: $tabs-accent-line;
+ border-radius: 1.5px;
+ }
+ }
+ }
+
+ .icon,
+ .title {
+ display: block;
+ text-align: center;
+ }
+}
+
+:host(.horizontal) {
+ a {
+ flex: 0 0 50%;
+ height: auto;
+ margin-bottom: 0;
+ padding: 0 1rem;
+
+ .title,
+ .icon {
+ display: inline;
+ padding-bottom: 0;
+ vertical-align: middle;
+ }
+
+ .icon {
+ margin-right: 0.5rem;
+ }
+ }
+
+ .text-container {
+ padding-bottom: 1.3rem;
+ }
+
+ .line {
+ order: -1;
+ margin-bottom: 1.3rem;
+ }
+
+ @media screen and (min-width: 40em) {
+ flex: 1 1 0;
+
+ a {
+ flex: 1 1 0;
+
+ &.selected::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ border-left: 1rem solid transparent;
+ border-right: 1rem solid transparent;
+ border-top: 1rem solid #fff;
+ }
+ }
+ }
+}
diff --git a/docs/app/@theme/components/page-tabs/page-tabs.component.ts b/docs/app/@theme/components/page-tabs/page-tabs.component.ts
new file mode 100644
index 00000000..a96f9160
--- /dev/null
+++ b/docs/app/@theme/components/page-tabs/page-tabs.component.ts
@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, HostBinding } from '@angular/core';
+import { takeWhile, map, publishReplay, refCount } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of as observableOf, combineLatest } from 'rxjs';
+
+@Component({
+ selector: 'ngx-page-tabs',
+ styleUrls: ['./page-tabs.component.scss'],
+ template: `
+
+
+
+ {{ item.title }}
+
+
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxPageTabsComponent implements OnDestroy {
+
+ items$: ObservableOverview
+-
+
- + {{ item.title }} + +
+
diff --git a/docs/app/@theme/components/section-title/section-title.component.scss b/docs/app/@theme/components/section-title/section-title.component.scss
new file mode 100644
index 00000000..6a1bde58
--- /dev/null
+++ b/docs/app/@theme/components/section-title/section-title.component.scss
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ h2 {
+ font-family: 'Helvetica Neue Bold', sans-serif;
+ font-size: 2rem;
+ color: #000000;
+ text-align: center;
+ }
+
+
+ @include media-breakpoint-down(is) {
+ h2 {
+ font-size: 1.5rem;
+ }
+ }
+}
diff --git a/docs/app/@theme/components/section-title/section-title.component.ts b/docs/app/@theme/components/section-title/section-title.component.ts
new file mode 100644
index 00000000..4eb03037
--- /dev/null
+++ b/docs/app/@theme/components/section-title/section-title.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-landing-section-title',
+ templateUrl: './section-title.component.html',
+ styleUrls: ['./section-title.component.scss'],
+})
+export class NgxSectionTitleComponent {
+
+}
diff --git a/docs/app/@theme/pipes/eva-icons.pipe.ts b/docs/app/@theme/pipes/eva-icons.pipe.ts
new file mode 100644
index 00000000..91d3de04
--- /dev/null
+++ b/docs/app/@theme/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,
+ }));
+ }
+}
diff --git a/docs/app/@theme/services/analytics.service.ts b/docs/app/@theme/services/analytics.service.ts
new file mode 100644
index 00000000..2c9f66f9
--- /dev/null
+++ b/docs/app/@theme/services/analytics.service.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable, Inject } from '@angular/core';
+import { NB_WINDOW } from '@nebular/theme';
+
+@Injectable()
+export class NgxAnalytics {
+ private enabled: boolean;
+
+ constructor(@Inject(NB_WINDOW) private window) {
+ this.enabled = this.window.location.href.indexOf('akveo.github.io') >= 0;
+ }
+
+ trackEvent(eventName: string, eventVal: string = '') {
+ if (this.enabled) {
+ this.gtmPushToDataLayer({ event: eventName, eventValue: eventVal });
+ }
+ }
+
+ // Push to 'dataLayer' Google Tag Manager array
+ private gtmPushToDataLayer(params) {
+ this.window.dataLayer.push(params);
+ }
+}
diff --git a/docs/app/@theme/services/code-loader.service.ts b/docs/app/@theme/services/code-loader.service.ts
new file mode 100644
index 00000000..638273bb
--- /dev/null
+++ b/docs/app/@theme/services/code-loader.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { publishReplay , refCount } from 'rxjs/operators';
+
+@Injectable()
+export class NgxCodeLoaderService {
+
+ /**
+ * Contains cached files by url.
+ * */
+ private cache: Map'; + private readonly TITLE_MASK = '^#{1,6}[^#]?(.+)\n'; + private readonly STRIP_HTML = '<\\/?[^>]+(>|$)'; + + constructor(private highlight: NgxHighlightService, private location: Location) { + } + + mdToSectionsHTML(markdown: string) { + return this.splitIntoSections(markdown) + .map((section) => { + const html = this.mdToHTML(section); + const title = this.extractTitle(section) || this.extractFirstTwoWords(html); + const fragment = this.createSlag(title); + return { + source: section, + title: title, + fragment: fragment, + html: html, + }; + }); + } + + mdToHTML(markdown: string) { + return marked + .setOptions({ + baseUrl: this.location.prepareExternalUrl(''), + langPrefix: 'hljs ', + highlight: (code) => this.highlight.highlight(code), + } as any) + .parse(markdown.trim()); + } + + splitIntoSections(markdown: string) { + return markdown.split(new RegExp(this.SECTION_SPLIT, 'g')) + .filter(section => section.trim()); + } + + extractTitle(section: string) { + const titleMatch = section.trim().match(new RegExp(this.TITLE_MASK, 'i')); + return titleMatch ? titleMatch[1] : ''; + } + + extractFirstTwoWords(section: string) { + return section + .replace(new RegExp(this.STRIP_HTML, 'g'), '') + .trim() + .split(/\s+/g) + .slice(0, 2) + .join(' '); + } + + createSlag(name: string) { + return name + .replace(/[^a-zA-Z0-9\s]+/g, '') + .replace(/\s/g, '-') + .toLowerCase(); + } +} diff --git a/docs/app/@theme/services/toc-state.service.ts b/docs/app/@theme/services/toc-state.service.ts new file mode 100644 index 00000000..331e9061 --- /dev/null +++ b/docs/app/@theme/services/toc-state.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; + +export interface NgxTocElement { + fragment: string; + element: any; + y: number; + setInView(val: boolean); +} + +@Injectable() +export class NgxTocStateService { + state: NgxTocElement[] = []; + + add(el: NgxTocElement) { + this.state.push(el); + } + + remove(el: NgxTocElement) { + this.state = this.state.filter(e => e !== el); + } + + list(): NgxTocElement[] { + return this.state; + } + + clear() { + this.state = []; + } +} diff --git a/docs/app/@theme/services/version.service.ts b/docs/app/@theme/services/version.service.ts new file mode 100644 index 00000000..999bd55e --- /dev/null +++ b/docs/app/@theme/services/version.service.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Injectable } from '@angular/core'; + +@Injectable() +export class NgxVersionService { + + getNgxVersion() { + return require('../../../../package.json').version; + } +} diff --git a/docs/app/@theme/styles/_helvetica-neue.scss b/docs/app/@theme/styles/_helvetica-neue.scss new file mode 100644 index 00000000..5a54a12c --- /dev/null +++ b/docs/app/@theme/styles/_helvetica-neue.scss @@ -0,0 +1,19 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +$helvetica-neue-font-path: 'assets/fonts/helvetica-neue' !default; + +@font-face { + font-family: 'Helvetica Neue Bold'; + font-display: swap; + src: url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.eot'); + src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), + url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'), + url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.woff') format('woff'), + url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; +} diff --git a/docs/app/@theme/styles/_small-social.scss b/docs/app/@theme/styles/_small-social.scss new file mode 100644 index 00000000..bfaf7798 --- /dev/null +++ b/docs/app/@theme/styles/_small-social.scss @@ -0,0 +1,36 @@ +$small-social-font-path: '/assets/fonts/small-social' !default; +@font-face { + font-family: 'small-social'; + font-display: auto; + src: url('#{$small-social-font-path}/small-social.eot?skntni'); + src: url('#{$small-social-font-path}/small-social.eot?skntni#iefix') format('embedded-opentype'), + url('#{$small-social-font-path}/small-social.ttf?skntni') format('truetype'), + url('#{$small-social-font-path}/small-social.woff?skntni') format('woff'), + url('#{$small-social-font-path}/small-social.svg?skntni#small-social') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^='small-social-'], [class*=' small-social-'] { + font-family: 'small-social' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.small-social-facebook::before { + content: '\e900'; +} +.small-social-github::before { + content: '\e901'; +} +.small-social-twitter::before { + content: '\e902'; +} diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss new file mode 100644 index 00000000..02d4dd3f --- /dev/null +++ b/docs/app/@theme/styles/styles.scss @@ -0,0 +1,17 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import 'small-social'; +@import 'helvetica-neue'; +@import 'themes'; + +@import '~@nebular/theme/styles/globals'; +@import '~@nebular/bootstrap/styles/globals'; + +@include nb-install() { + @include nb-theme-global(); + @include nb-bootstrap-global(); +}; diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss new file mode 100644 index 00000000..a1b828a2 --- /dev/null +++ b/docs/app/@theme/styles/themes.scss @@ -0,0 +1,189 @@ +/** + * @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/theming'; +@import '~@nebular/theme/styles/themes/corporate'; +@import '~@nebular/theme/styles/themes/default'; +@import '~@nebular/theme/styles/global/breakpoints'; + +/* +We have to overwrite breakpoints because we need to add *macpro* breakpoint. +But if we add it using *map-merge* function we'll get the warning and *media-breakpoint-down* will stop working. +*/ +$grid-breakpoints: ( + xs: 0, + is: 400px, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + macpro: 1280px, + xxl: 1400px, + xxxl: 1600px +); + +$nb-enabled-themes: (ngx-landing, docs-page); + +/* stylelint-disable */ +$nb-themes: nb-register-theme(( + font-main: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'), + + content-width: 1440px, + settings-col-width: 16rem, + settings-col-margin: 1.875rem, + + color-primary: #3366ff, + + separator: transparent, + color-success: #18cb90, + color-bg: transparent, + color-fg: #405571, + color-fg-heading: #546d8d, + color-fg-text: #919fb1, + color-fg-icon: #c4c8d1, + color-gray-bg: #edf0f5, + color-fg-heading-light: #405571, + color-active-fg: color-success, + color-active-bg: color-success, + + shadow: none, + + layout-bg: transparent, + layout-padding: 0, + layout-medium-padding: 0, + layout-small-padding: 0, + + header-bg: color-bg, + header-padding: 0 0, + header-height: 4.25rem, + header-fg: color-fg, + header-menu-fg-active: color-active-fg, + header-section-border-color: #f5f5f5, + + header-button-border: #dce4f2, + + sidebar-width: 11.25rem, + + menu-bg: transparent, + menu-item-padding: 0.675rem 1rem, + menu-item-fg: #8992a3, + menu-active-fg: color-primary, + menu-font-size: 0.95rem, + menu-font-weight: font-weight-normal, + + menu-active-bg: transparent, + + footer-height: 18.75rem, + footer-padding: 1.25rem 0, + footer-fg: #8992a3, + footer-fg-highlight: footer-fg, + footer-separator: transparent, + footer-title-fg: #0d1c2e, + + + list-icon-item-bg: #ebf1fa, + list-icon-item-fg: #0d1c2e, + + switcher-view-bg: #d8e1f0, + + checkbox-size: 1.5rem, + checkbox-border-color: form-control-border-color, + checkbox-checkmark: transparent, + + checkbox-checked-bg: color-active-fg, + checkbox-checked-size: 1.5rem, + checkbox-checked-border-color: checkbox-checked-bg, + checkbox-checked-checkmark: color-white, + + format-name-fg: #6a7385, + + popover-bg: #0d1c2e, + popover-fg: #ffffff, + popover-border: #0d1c2e, + popover-border-radius: 0.75rem, + popover-arrow-size: 6px, + + info-bg: #fff2f2, + info-fg: #ff3d71, + + custiom-radius: 0.625rem, + + gray-section-bg: #fafafa, + + shadow-default: 0 0.5rem 1.25rem 0 rgba(218, 224, 235, 0.6), + shadow-btn: 0 0.375rem 2.125rem 0 rgba(184, 255, 231, 0.5), + shadow-hover-btn: 0 0.5rem 2rem 0 #dae0eb, + shadow-active-btn: 0 0.5rem 1.25rem 0 rgba(218, 224, 235, 0.6), + shadow-hover-green-btn: 0 0.5rem 2rem 0 rgba(0, 219, 146, 0.25), + shadow-active-green-btn: 0 0.375rem 2.125rem 0 rgba(0, 219, 146, 0.32), +), ngx-landing, corporate); + +/* stylelint-enable foo */ +$nb-themes: nb-register-theme(( + // custom + font-main: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'), + + content-width: 1440px, + settings-col-width: 16rem, + settings-col-margin: 1.875rem, + color-gray-light: #ced5dd, + color-fg-heading-light: #405571, + code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%), + color-info: #5699f0, + color-warning: #f09301, + header-menu-fg-active: color-fg-highlight, + + radius: 0.25rem, + separator: transparent, + color-bg: transparent, + color-fg: #494949, + color-fg-text: #494949, + color-fg-heading: rgba(0, 0, 0, 0.88), + color-fg-icon: #cdd6e3, + + shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6), + + layout-bg: #fafafa, + layout-padding: 3.25rem 1.25rem 3.25rem 1rem, + layout-medium-padding: 0, + layout-small-padding: 0, + + header-bg: white, + sidebar-padding: 2rem, + sidebar-shadow: none, + color-fg-highlight: #00db92, + link-color: color-fg-highlight, + link-color-hover: color-fg-highlight, + link-color-visited: color-fg-highlight, + + header-height: 4.25rem, + header-padding: 0, + header-fg: black, + + menu-fg: black, + menu-font-size: 0.95rem, + menu-font-weight: font-weight-normal, + menu-submenu-fg: color-fg-heading-light, + menu-active-fg: menu-fg, + menu-submenu-padding: 0, + menu-submenu-item-container-padding: 0 1rem, + menu-submenu-active-border-color: transparent, + menu-submenu-active-fg: color-fg-highlight, + menu-active-font-weight: bold, + + card-bg: white, + card-header-font-size: 2rem, + card-header-font-weight: bold, + card-header-fg-heading: black, + card-margin: 2.5rem, + + footer-height: 18.75rem, + footer-padding: 1.25rem 0, + footer-shadow: none, + footer-fg: color-fg-heading-light, + footer-menu-fg: color-fg-text, + +), docs-page, default); diff --git a/docs/app/@theme/theme.module.ts b/docs/app/@theme/theme.module.ts new file mode 100644 index 00000000..63f0f689 --- /dev/null +++ b/docs/app/@theme/theme.module.ts @@ -0,0 +1,113 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { RouterModule } from '@angular/router'; +import { ModuleWithProviders, NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { LazyLoadImageModule } from 'ng-lazyload-image'; + +// components +import { + NgxLandingFooterComponent, + NgxSectionTitleComponent, + NgxFragmentTargetDirective, + NgxPageTocComponent, + NgxPageTabsComponent, + NgxLandingHeaderComponent, + NgxDocsFooterComponent, +} from './components'; +// components + +// services +import { ngxLandingServices } from './services'; +// services + +// pipes +import { EvaIconsPipe } from './pipes/eva-icons.pipe'; +// pipes + +import { + NbLayoutModule, + NbThemeModule, + NbMenuModule, + NbCheckboxModule, + NbCardModule, + NbSidebarModule, + NbTabsetModule, +} from '@nebular/theme'; + +const BASE_MODULES = [ + CommonModule, + FormsModule, + ReactiveFormsModule, + LazyLoadImageModule, +]; + +const NB_MODULES = [ + NbLayoutModule, + NbCheckboxModule, + NbMenuModule, + NbCardModule, + NbSidebarModule, + NbTabsetModule, +]; + +const COMPONENTS = [ + NgxLandingFooterComponent, + NgxSectionTitleComponent, + NgxFragmentTargetDirective, + NgxPageTocComponent, + NgxPageTabsComponent, + NgxLandingHeaderComponent, + NgxDocsFooterComponent, +]; + +const PIPES = [ + EvaIconsPipe, +]; + +@NgModule({ + imports: [ + RouterModule, + + ...BASE_MODULES, + + ...NB_MODULES, + ], + declarations: [ + ...COMPONENTS, + + ...PIPES, + ], + exports: [ + RouterModule, + + ...BASE_MODULES, + + ...NB_MODULES, + + ...COMPONENTS, + + ...PIPES, + ], + entryComponents: [ + ], +}) +export class NgxLandingThemeModule { + static forRoot(): ModuleWithProviders { + return
{{ source.name }}
+
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxCodeBlockComponent {
+
+ @Input() path = '';
+ @Input() firstLine: number;
+ @Input() lastLine: number;
+
+ @Input('code')
+ set rawCode(value) {
+ const highlighted = this.highlightService.highlight(value);
+ this.code = this.getVisible(highlighted);
+ this.lines = this.createLines(this.code);
+ }
+
+ code: SafeHtml;
+ lines: number[] = [];
+
+ constructor(private highlightService: NgxHighlightService) {
+ }
+
+ getVisible(code): string {
+ return code
+ .split('\n')
+ .slice(this.firstLine - 1, this.lastLine)
+ .join('\n');
+ }
+
+ createLines(code): number[] {
+ const length = code.split('\n').length;
+ return Array(length).fill(0).map((_, i) => i + (this.firstLine || 1));
+ }
+}
diff --git a/docs/app/blocks/components/component-block/component-block.component.ts b/docs/app/blocks/components/component-block/component-block.component.ts
new file mode 100644
index 00000000..ffbe11ce
--- /dev/null
+++ b/docs/app/blocks/components/component-block/component-block.component.ts
@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgxTabbedService } from '../../../@theme/services/tabbed.service';
+
+@Component({
+ selector: 'ngx-component-block',
+ template: `
+
+ {{ line }}
+
+ Theme
+
+
+
+
diff --git a/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss b/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss
new file mode 100644
index 00000000..dff79246
--- /dev/null
+++ b/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss
@@ -0,0 +1,81 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+
+ .components-list {
+ display: flex;
+ flex-wrap: wrap;
+
+ h2 {
+ flex: 1 1 100%;
+ color: nb-theme(color-fg-heading-light);
+ margin: 1rem 0 2rem;
+ text-align: center;
+ }
+
+ .component-card-wrapper {
+ width: 100%;
+ }
+
+ .component-icon {
+ margin-bottom: 1rem;
+ }
+
+ .component-name {
+ color: nb-theme(color-fg-heading-light);
+ font-weight: nb-theme(font-weight-bolder);
+ }
+
+ .component-navigate-link {
+ text-decoration: none;
+ }
+
+
+ nb-card {
+ box-shadow: 0 4px 27px 0 rgba(230, 234, 240, 0.2);
+ transition: transform 0.25s ease;
+
+ > nb-card-body {
+ height: 12.5rem;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &:hover {
+ box-shadow: 0 15px 37px 0 #dbe2eb;
+ transform: translateY(-1rem);
+ .component-name {
+ color: nb-theme(color-fg);
+ }
+ }
+ }
+ }
+
+ @include media-breakpoint-up(is) {
+ .components-list {
+
+ .component-card-wrapper {
+ flex: 1 0 auto;
+ width: 50%;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ .components-list {
+
+ .component-card-wrapper {
+ flex: 1 0 auto;
+ max-width: 33.3%;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+ }
+ }
+}
diff --git a/docs/app/blocks/components/components-overview-block/components-overview-block.component.ts b/docs/app/blocks/components/components-overview-block/components-overview-block.component.ts
new file mode 100644
index 00000000..8b9f8b08
--- /dev/null
+++ b/docs/app/blocks/components/components-overview-block/components-overview-block.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+
+import { NgxMenuService } from '../../../@theme/services/menu.service';
+
+@Component({
+ selector: 'ngx-components-overview-block',
+ styleUrls: ['./components-overview-block.component.scss'],
+ templateUrl: './components-overview-block.component.html',
+})
+export class NgxComponentsOverviewBlockComponent implements OnInit {
+ components: { name: string; icon: string; link: string }[];
+
+ constructor(private menu: NgxMenuService) {}
+
+ ngOnInit() {
+ this.components = this.menu
+ .getPreparedMenu('/docs')
+ .find(({ title }) => title === 'Components')
+ .children
+ .slice(1)
+ .map(({ data: { name, icon, type }, link }) => ({ name, icon, link, group: type === 'group' }));
+ }
+}
diff --git a/docs/app/blocks/components/example-block/example-block.component.ts b/docs/app/blocks/components/example-block/example-block.component.ts
new file mode 100644
index 00000000..114f7a17
--- /dev/null
+++ b/docs/app/blocks/components/example-block/example-block.component.ts
@@ -0,0 +1,43 @@
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ Input,
+} from '@angular/core';
+import { NgxCodeLoaderService } from '../../../@theme/services/code-loader.service';
+
+@Component({
+ selector: 'ngx-example-block',
+ template: `
+ {{ component.name }}
+
+
+
+
+ 
+
+
+
+
+
+
+
+ {{ source.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
new file mode 100644
index 00000000..21821948
--- /dev/null
+++ b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
@@ -0,0 +1,170 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+ // TODO: move some variables in Nebular themes
+ // colors
+ $action-bg: white;
+ $action-fg: nb-theme(color-fg-heading-light);
+ $block-bg-default: #ebeff5;
+ $block-bg-cosmic: #2f296b;
+ $block-fg-cosmic: #7d838b;
+ $block-bg-corporate: #f1f5f8;
+
+ display: flex;
+ flex-direction: column;
+ padding: 0.5rem 1rem 2.5rem 1.5rem;
+ border-radius: 0.5rem;
+ position: relative;
+
+ .header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1.875rem;
+ }
+
+ .title,
+ .actions {
+ margin-top: 0.5rem;
+ }
+
+ .title {
+ margin-right: 1rem;
+ font-weight: bold;
+ text-transform: capitalize;
+ }
+
+ .actions {
+ display: flex;
+ width: 100%;
+
+ .icon {
+ font-size: 0.95rem;
+ }
+ }
+
+ .action-item {
+ background-color: $action-bg;
+ border-radius: 0.375rem;
+ height: 100%;
+ line-height: 1;
+ border: none;
+ color: $action-fg;
+ padding: 0.5rem 1rem;
+ margin-left: 0.625rem;
+ cursor: pointer;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:hover, &:focus {
+ text-decoration: none;
+ }
+ }
+
+ .action-selector {
+ position: relative;
+
+ .action-item {
+ padding: 0;
+ color: transparent;
+ }
+
+ .icon {
+ color: $action-fg;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ /* Target IE9 - IE11 */
+ select::-ms-expand {
+ display: none;
+ }
+
+ select {
+ font-size: 0.875rem;
+ appearance: none;
+ }
+ }
+
+ &.theme-default {
+ background-color: $block-bg-default;
+ }
+
+ &.theme-cosmic {
+ background-color: $block-bg-cosmic;
+
+ .title {
+ color: white;
+ }
+ .action-item {
+ color: $block-fg-cosmic;
+ }
+ }
+
+ &.theme-corporate {
+ background-color: $block-bg-corporate;
+ }
+
+ .iframe-container {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ iframe {
+ width: 100%;
+ border: none;
+ transform: translateZ(0);
+
+ &.loading {
+ visibility: hidden;
+ }
+ }
+
+ .icon-loading {
+ animation: rotation 2s infinite linear;
+ color: $action-fg;
+ font-size: 1.5rem;
+ font-weight: normal;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ @-webkit-keyframes rotation {
+ from {
+ -webkit-transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(359deg);
+ }
+ }
+
+ @media screen and (min-width: 23em) {
+ .action-selector {
+ .action-item {
+ padding: 0.5rem 1rem;
+ color: $action-fg;
+ }
+ select.action-item {
+ padding: 0 2.5rem;
+ }
+
+ .icon {
+ left: 1.25rem;
+ transform: translate(0, -50%);
+ }
+ }
+
+ .actions {
+ width: auto;
+ }
+ }
+}
+
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/app/blocks/components/live-example-block/live-example-block.component.ts
new file mode 100644
index 00000000..a5962b39
--- /dev/null
+++ b/docs/app/blocks/components/live-example-block/live-example-block.component.ts
@@ -0,0 +1,105 @@
+import {
+ Component,
+ ElementRef,
+ Input,
+ OnInit,
+ OnDestroy,
+ ViewChild,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ HostBinding,
+ Output,
+ EventEmitter,
+ AfterViewInit,
+} from '@angular/core';
+import { Location } from '@angular/common';
+import { takeWhile } from 'rxjs/operators';
+import { NgxExampleView } from '../../enum.example-view';
+import { NgxIframeCommunicatorService } from '../../../@theme/services/iframe-communicator.service';
+
+@Component({
+ selector: 'ngx-live-example-block',
+ styleUrls: ['./live-example-block.component.scss'],
+ templateUrl: './live-example-block.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDestroy {
+
+ @ViewChild('iframe') iframe: ElementRef;
+ @Input() content: any;
+ @Input() hasViewSwitch: boolean = false;
+ @Output() changeView = new EventEmitterMethods
+| Name | +Description | +
| {{ method.name }}() static method |
+
+
+
+
+ parameters:
+
+ {{ param.name }}:
+ returns:
+ {{ param.type }},
+
+ {{ method.type.join(",\\n") }}
+
+ {{ method.shortDescription }}
+ {{ method.description }} + |
+
+
+ {{ paginationItem.prev.title }}
+
+ Previous page
+
+
+ {{ paginationItem.next.title }}
+
+
+ Next page
+
+ {{ name }}
+| Name | +Type | +Description | +
| {{ prop.name }} | +{{ prop.type }} |
+
+ {{ prop.shortDescription }}
+ {{ prop.description }}
+ |
+
+
+
+
+
+
+
+ `,
+ animations: [
+ trigger('exampleState', [
+ transition('live => code', [
+ useAnimation(pulse),
+ ]),
+ transition('code => live', [
+ useAnimation(pulse),
+ ]),
+ ]),
+ ],
+})
+export class NgxStackedExampleComponent {
+
+ @Input() content: any;
+ isLive = true;
+
+ constructor() {
+ }
+
+ changeView(view: NgxExampleView) {
+ this.isLive = view === NgxExampleView.LIVE;
+ }
+}
diff --git a/docs/app/blocks/components/styles-block/styles-block.component.ts b/docs/app/blocks/components/styles-block/styles-block.component.ts
new file mode 100644
index 00000000..15610ccf
--- /dev/null
+++ b/docs/app/blocks/components/styles-block/styles-block.component.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ngx-styles-block',
+ template: `
+ {{ source.name }}
+| Name | +{{ themedValue.theme }} | +Description | +
| {{ item.name }} | +{{ themedValue.value }} | +
+ {{ item.shortDescription}} +{{ item.description }} + |
+
{{ vm.themeTitle }} Theme
+inherited from {{ vm.parentTheme }} theme
+ +
+
+
+
+ | Name | +Value | +Parent | +
| + {{ prop.name }} + | + +{{ prop.value }} | + ++ + + {{ parent.prop }} + ({{ parent.theme }}) + + | +
+
+
+
+ Need some help or found an issue?
+Contact us at contact@akveo.com
+
+
+
+
+ {{ currentItem?.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+Page does not exist.
+ +
+
diff --git a/docs/app/pages/docs/page/ngx-admin-landing-page.component.scss b/docs/app/pages/docs/page/ngx-admin-landing-page.component.scss
new file mode 100644
index 00000000..36d76a74
--- /dev/null
+++ b/docs/app/pages/docs/page/ngx-admin-landing-page.component.scss
@@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+ display: flex;
+
+ $note-fg-info: nb-theme(color-info);
+ $note-bg-info: #f0f6ff;
+ $note-fg-warning: nb-theme(color-warning);
+ $note-bg-warning: #fffae4;
+ $settings-width: nb-theme(settings-col-width);
+ $settings-margin: nb-theme(settings-col-margin);
+ $heading-light: nb-theme(color-fg-heading-light);
+ $code-bg: #f1f2f3;
+ $code-fg: nb-theme(color-info);
+ $code-block-bg: nb-theme(code-block-bg);
+ $table-head-fg: #8994a3;
+ $table-border: 1px solid #f1f2f3;
+ $table-stripe-bg: #f5f6f7;
+
+ .not-found {
+ color: $heading-light;
+ font-size: 1.25rem;
+ }
+
+ .middle-column {
+ flex: 3;
+ min-width: 0;
+
+ /deep/ nb-card {
+
+ nb-card-body {
+ padding: 2rem 1rem;
+
+ > *:last-child {
+ margin-bottom: 0!important;
+
+ *:last-child {
+ margin-bottom: 0 !important;
+ }
+ }
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ line-height: 1.25;
+ margin-bottom: 1.25rem;
+ font-weight: bold;
+ }
+
+ h3 {
+ color: $heading-light;
+ }
+
+ p {
+ font-size: 0.9375rem;
+ line-height: 1.5;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ pre {
+ margin-bottom: 2rem;
+ }
+
+ code {
+ background: $code-bg;
+ color: $code-fg;
+ padding: 0.125rem 0.5rem;
+ border-radius: 0.25rem;
+ }
+
+ code.hljs {
+ color: #f8f8f2;
+ padding: 2rem 2.5rem;
+ border-radius: 0.5rem;
+ background: $code-block-bg;
+ font-size: 0.875rem;
+ }
+
+ /deep/ {
+ .widget-block {
+ display: block;
+ margin-bottom: 2rem;
+ }
+
+ ngx-styles-table-block table {
+ margin-bottom: 0;
+ }
+ }
+
+ table {
+ font-size: 0.9375rem;
+ width: 100%;
+ margin-bottom: 3rem;
+ thead {
+ color: $table-head-fg;
+ border-bottom: $table-border;
+
+ td {
+ padding: 1rem 0.5rem;
+ }
+ }
+
+ tr {
+ border-bottom: $table-border;
+
+ &:last-child {
+ border: none;
+ }
+ p {
+ margin-bottom: 0;
+ }
+ }
+
+ td {
+ padding: 1rem 0.5rem;
+
+ &:first-child {
+ font-weight: 500;
+ }
+ }
+
+ &.striped {
+ tbody tr:nth-child(odd) {
+ background: $table-stripe-bg;
+ }
+
+ td {
+ padding: 1rem 0.5rem;
+ }
+ }
+ }
+
+ ul {
+ margin-bottom: 1.5rem;
+ ul {
+ padding-left: 2.5rem;
+ list-style-type: none;
+ & > li {
+ list-style: circle;
+ position: relative;
+ margin-bottom: 0;
+ }
+ }
+ li {
+ font-size: 0.9375rem;
+ line-height: 1.5;
+ margin-bottom: 1.5rem;
+ }
+ }
+
+ .note {
+ padding: 1.25rem 3rem 1.5rem 1.25rem;
+ border-radius: 0.25rem;
+ margin-bottom: 3rem;
+
+ .note-title {
+ font-weight: 500;
+ text-transform: uppercase;
+ margin-bottom: 1.5rem;
+ }
+
+ .note-body {
+ font-size: 0.875rem;
+ line-height: 1.5;
+ }
+
+ &.note-info {
+ color: $note-fg-info;
+ background-color: $note-bg-info;
+ }
+
+ &.note-warning {
+ color: $note-fg-warning;
+ background-color: $note-bg-warning;
+ }
+ }
+
+ .color-swatch {
+ display: inline-block;
+ border: 1px solid black;
+ width: 0.875rem;
+ height: 0.875rem;
+ margin-left: 7px;
+ margin-bottom: -2px;
+ border-radius: 2px;
+ }
+ }
+ }
+
+ .horizontal-nav {
+ margin-top: 1rem;
+
+ nb-card-body {
+ background-color: nb-theme(layout-bg);
+ padding: 0;
+ overflow: visible;
+ }
+ }
+ .settings-column {
+ display: none;
+ }
+
+ @include media-breakpoint-up(md) {
+ .middle-column /deep/ nb-card nb-card-body {
+ padding: 2rem 3rem 2rem 2rem;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .horizontal-nav {
+ margin-top: 0;
+ }
+ }
+
+ @include media-breakpoint-up(macpro) {
+ .horizontal-nav nb-card-body {
+ display: none;
+ }
+
+ .settings-column {
+ display: block;
+ margin-left: $settings-margin;
+ width: $settings-width;
+
+ ngx-page-tabs {
+ margin-bottom: 1.5rem;
+ }
+ }
+
+ .fixed-panel {
+ position: fixed;
+ width: inherit;
+ }
+ }
+}
diff --git a/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts b/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
new file mode 100644
index 00000000..6a993338
--- /dev/null
+++ b/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Inject, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import {
+ filter,
+ map,
+ publishBehavior,
+ publishReplay,
+ refCount,
+ tap,
+ takeWhile,
+} from 'rxjs/operators';
+import { NB_WINDOW } from '@nebular/theme';
+import { fromEvent } from 'rxjs';
+
+import { NgxStructureService } from '../../../@theme/services/structure.service';
+import { NgxTocStateService } from '../../../@theme/services/toc-state.service';
+
+@Component({
+ selector: 'ngx-admin-landing-page',
+ templateUrl: './ngx-admin-landing-page.component.html',
+ styleUrls: ['./ngx-admin-landing-page.component.scss'],
+})
+export class NgxAdminLandingPageComponent implements OnDestroy, OnInit {
+
+ currentItem;
+ private alive = true;
+
+ constructor(@Inject(NB_WINDOW) private window,
+ private ngZone: NgZone,
+ private router: Router,
+ private activatedRoute: ActivatedRoute,
+ private structureService: NgxStructureService,
+ private tocState: NgxTocStateService,
+ private titleService: Title) {
+ }
+
+ get showSettings() {
+ return this.currentItem && this.currentItem.children
+ .some((item) => ['markdown', 'component', 'tabbed'].includes(item.block));
+ }
+
+ ngOnInit() {
+ this.handlePageNavigation();
+ this.handleTocScroll();
+ this.window.history.scrollRestoration = 'manual';
+ }
+
+ handlePageNavigation() {
+ this.activatedRoute.params
+ .pipe(
+ takeWhile(() => this.alive),
+ filter((params: any) => params.subPage),
+ map((params: any) => {
+ const slag = `${params.page}_${params.subPage}`;
+ return this.structureService.findPageBySlag(this.structureService.getPreparedStructure(), slag);
+ }),
+ filter(item => item),
+ tap((item: any) => {
+ this.titleService.setTitle(`Nebular - ${item.name}`);
+ }),
+ publishReplay(),
+ refCount(),
+ )
+ .subscribe((item) => {
+ this.currentItem = item;
+ });
+ }
+
+ handleTocScroll() {
+ this.ngZone.runOutsideAngular(() => {
+ fromEvent(this.window, 'scroll')
+ .pipe(
+ publishBehavior(null),
+ refCount(),
+ takeWhile(() => this.alive),
+ filter(() => this.tocState.list().length > 0),
+ )
+ .subscribe(() => {
+ this.tocState.list().map(item => item.setInView(false));
+
+ const current: any = this.tocState.list().reduce((acc, item) => {
+ return item.y > 0 && item.y < acc.y ? item : acc;
+ }, { y: Number.POSITIVE_INFINITY, fake: true });
+
+ if (current && !current.fake) {
+ current.setInView(true);
+ this.router.navigate([], { fragment: current.fragment, replaceUrl: true });
+ }
+ });
+ });
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ }
+}
diff --git a/docs/app/pages/home/contact-section/contact-section.component.html b/docs/app/pages/home/contact-section/contact-section.component.html
new file mode 100644
index 00000000..ed683785
--- /dev/null
+++ b/docs/app/pages/home/contact-section/contact-section.component.html
@@ -0,0 +1,50 @@
+
+
++ Subscribe to get notified about new versions of ngx-admin and other cool projects that we are working on +
+ +
+
+
diff --git a/docs/app/pages/home/contact-section/contact-section.component.scss b/docs/app/pages/home/contact-section/contact-section.component.scss
new file mode 100644
index 00000000..ec1c61d6
--- /dev/null
+++ b/docs/app/pages/home/contact-section/contact-section.component.scss
@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ display: block;
+ padding-top: 5.625rem;
+ padding-bottom: 7.5rem;
+
+ .description {
+ font-family: nb-theme(font-secondary), sans-serif;
+ font-size: nb-theme(font-size-lg);
+ width: 40%;
+ margin: 1.375rem auto 0;
+ text-align: center;
+ }
+
+ .sending-block {
+ max-width: 33.5rem;
+ margin: 3rem auto 0;
+ }
+
+ .email-form {
+ label {
+ display: block;
+ margin-bottom: 0.75rem;
+ }
+
+ .email {
+ width: 75%;
+ font-size: nb-theme(font-size-sm);
+ padding: 1.125rem 0 1rem 1rem;
+ border: none;
+ box-shadow: nb-theme(shadow-default);
+ border-radius: 0.25rem 0 0 0.25rem;
+
+ &.invalid {
+ box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
+ }
+
+ &::placeholder {
+ color: #434a59;
+ opacity: 0.24;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .submit-input {
+ width: 25%;
+ padding: 1rem 0;
+ border: none;
+ color: #ffffff;
+ text-transform: uppercase;
+ background-color: nb-theme(color-active-bg);
+ border-radius: 0 0.25rem 0.25rem 0;
+ box-shadow: nb-theme(shadow-btn);
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-green-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-green-btn);
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+
+ &:hover {
+ box-shadow: nb-theme(shadow-btn);
+ }
+
+ }
+ }
+ }
+
+ .agreement-block {
+ display: flex;
+ margin-top: 1.25rem;
+
+ /deep/ nb-checkbox {
+ .customised-control {
+ padding: 0.125rem 0.125rem 0 0;
+ }
+
+ .customised-control-indicator {
+ }
+ }
+ }
+
+ .agreement {
+ font-family: nb-theme(font-secondary), sans-serif;
+ font-size: nb-theme(font-size-sm);
+
+ .highlight {
+ font-family: nb-theme(font-main), sans-serif;
+ }
+
+ .active {
+ text-decoration: none;
+ font-family: nb-theme(font-main), sans-serif;
+ color: nb-theme(color-active-fg);
+ }
+ }
+
+ .separator {
+ margin-top: 2.875rem;
+ border-top: 0.125rem solid #dde1eb;
+ color: #8994a3;
+ text-transform: uppercase;
+ position: relative;
+ opacity: 0.5;
+
+ div {
+ $width: 1.375rem;
+ $block-or-padding: 1.375rem;
+
+ font-size: nb-theme(font-size-sm);
+ padding: 0 $block-or-padding;
+ position: absolute;
+ left: calc(50% - #{$block-or-padding} - #{$width} / 2);
+ top: -0.625rem;
+ background-color: #ffffff;
+ }
+ }
+
+ .contact-us-container {
+ text-align: center;
+ }
+
+ .contact-us {
+ display: inline-block;
+ font-family: nb-theme(font-main), sans-serif;
+ font-weight: nb-theme(font-weight-bold);
+ margin-top: 3.625rem;
+ color: nb-theme(color-active-bg);
+ cursor: pointer;
+ text-transform: uppercase;
+ text-decoration: none;
+ }
+
+ @include media-breakpoint-down(md) {
+ .description {
+ width: 80%;
+ }
+ }
+
+ @include media-breakpoint-down(is) {
+ padding: 2.125rem 1rem;
+
+ .description {
+ width: 100%;
+ font-size: nb-theme(font-size);
+ }
+
+ .sending-block {
+ margin-top: 2.375rem;
+ }
+
+ .email-form {
+ .email {
+ width: 100%;
+ }
+
+ .submit-input {
+ width: 100%;
+ border-radius: 0.25rem;
+ margin-top: 1.5rem;
+ }
+ }
+
+ .agreement-block {
+ margin-top: 1.25rem;
+ }
+
+ .separator {
+ margin-top: 2rem;
+ }
+
+ .contact-us {
+ margin-top: 2rem;
+ }
+ }
+}
diff --git a/docs/app/pages/home/contact-section/contact-section.component.ts b/docs/app/pages/home/contact-section/contact-section.component.ts
new file mode 100644
index 00000000..d52e76ac
--- /dev/null
+++ b/docs/app/pages/home/contact-section/contact-section.component.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'ngx-landing-contact-section',
+ templateUrl: './contact-section.component.html',
+ styleUrls: ['./contact-section.component.scss'],
+})
+export class ContactSectionComponent {
+
+ @ViewChild('contactForm') contactForm: HTMLFormElement;
+ @ViewChild('emailInput') emailInput: ElementRef;
+
+ isAgree = false;
+ invalid = false;
+
+ constructor() {
+ }
+
+ submitForm() {
+ if (!this.emailInput.nativeElement.value) {
+ this.invalid = true;
+
+ return;
+ }
+
+ this.contactForm.nativeElement.submit();
+ this.invalid = false;
+ this.emailInput.nativeElement.value = '';
+ }
+
+ get disabledControl() {
+ return this.isAgree ? null : 'disabled';
+ }
+}
diff --git a/docs/app/pages/home/description-section/description-section.component.html b/docs/app/pages/home/description-section/description-section.component.html
new file mode 100644
index 00000000..44850d73
--- /dev/null
+++ b/docs/app/pages/home/description-section/description-section.component.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+ I agree to get news on what’s going on around Akveo products and community.
+ The administrator processes data following the Privacy Policy. I understand that I can opt out at any time
+
+
+
+ or
+
+ Contact Us
+
+
+
diff --git a/docs/app/pages/home/description-section/description-section.component.scss b/docs/app/pages/home/description-section/description-section.component.scss
new file mode 100644
index 00000000..f0551d1f
--- /dev/null
+++ b/docs/app/pages/home/description-section/description-section.component.scss
@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ $content-width: nb-theme(content-width);
+ $left-right-offset: 8.125rem;
+
+ width: calc(#{$content-width} - #{$left-right-offset} * 2);
+ display: flex;
+ margin: 0 auto;
+ position: relative;
+ top: -3.25rem;
+
+ .descriptions {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-left: 1.375rem;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+
+ .icons-block {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 6.25rem;
+ height: 6.25rem;
+ border-radius: 50%;
+ background-color: #ffffff;
+ box-shadow: nb-theme(shadow-default);
+ }
+
+ .title {
+ color: #000000;
+ font-size: 1.5rem;
+ margin-top: 2.75rem;
+
+ }
+
+ .description {
+ color: nb-theme(color-fg);
+ font-family: nb-theme(font-secondary), sans-serif;
+ margin-top: 1.25rem;
+ text-align: center;
+ line-height: 1.8;
+ }
+
+ @include media-breakpoint-down(lg) {
+ flex-wrap: wrap;
+ width: 100%;
+
+ .descriptions {
+ margin-left: 0;
+ padding: 0 1rem;
+ flex: auto;
+ width: 50%;
+ margin-bottom: 1rem;
+ }
+ }
+
+ @include media-breakpoint-down(is) {
+ flex-direction: column;
+ top: 0;
+ padding-top: 4.125rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+
+ .descriptions {
+ width: 100%;
+ flex: 1;
+ padding: 0;
+ margin: 1.5rem 0 0;
+
+ &:first-child {
+ margin: 0;
+ }
+ }
+
+ .title {
+ margin-top: 1.5rem;
+ }
+
+ .description {
+ margin-bottom: 0;
+ }
+
+ .icons-block {
+ width: 4rem;
+ height: 4rem;
+ }
+
+ /deep/ svg {
+ width: 1.875rem;
+ height: 1.875rem;
+ }
+ }
+}
diff --git a/docs/app/pages/home/description-section/description-section.component.ts b/docs/app/pages/home/description-section/description-section.component.ts
new file mode 100644
index 00000000..5fbf39ad
--- /dev/null
+++ b/docs/app/pages/home/description-section/description-section.component.ts
@@ -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 { Component, OnDestroy } from '@angular/core';
+import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+ selector: 'ngx-landing-description-section',
+ templateUrl: './description-section.component.html',
+ styleUrls: ['./description-section.component.scss'],
+})
+export class DescriptionSectionComponent implements OnDestroy {
+
+ private alive = true;
+
+ descriptions: Descriptions[];
+
+ constructor(private descriptionsService: DescriptionsService) {
+ this.descriptionsService.getDescriptions()
+ .pipe(takeWhile(() => this.alive))
+ .subscribe((descriptions) => this.descriptions = descriptions);
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ }
+}
diff --git a/docs/app/pages/home/landing-home-routing.module.ts b/docs/app/pages/home/landing-home-routing.module.ts
new file mode 100644
index 00000000..23d00318
--- /dev/null
+++ b/docs/app/pages/home/landing-home-routing.module.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LandingHomeComponent } from './landing-home.component';
+
+
+export const routes: Routes = [
+ {
+ path: '',
+ component: LandingHomeComponent,
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class LandingHomeRoutingModule {
+}
diff --git a/docs/app/pages/home/landing-home.component.html b/docs/app/pages/home/landing-home.component.html
new file mode 100644
index 00000000..64cb1186
--- /dev/null
+++ b/docs/app/pages/home/landing-home.component.html
@@ -0,0 +1,14 @@
+
+
+
+
+ {{ item.title }}
+
+ + {{ item.description }} +
+
+
+ ![]()
+
+
+
+
diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.scss b/docs/app/pages/home/main-info-section/main-info-section.component.scss
new file mode 100644
index 00000000..9f74211d
--- /dev/null
+++ b/docs/app/pages/home/main-info-section/main-info-section.component.scss
@@ -0,0 +1,237 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ $color-active: nb-theme(color-active-fg);
+
+ display: flex;
+ padding: 3.375rem 0 0;
+
+ .main-img-container {
+ min-width: 60.625rem;
+ min-height: 47.875rem;
+
+ .main-img {
+ width: 100%;
+ height: 100%;
+ transition: opacity 1s;
+ opacity: 0;
+
+ &.ng-lazyloaded {
+ opacity: 1;
+ }
+ }
+ }
+
+ .main-inf {
+ width: 44%;
+ margin: 4.625rem 9% 0 6%;
+ }
+
+ h1 {
+ font-family: 'Helvetica Neue Bold', sans-serif;
+ font-size: 4rem;
+ color: $color-active;
+ margin: 0;
+ }
+
+ p {
+ font-family: nb-theme(font-secondary), sans-serif;
+ font-size: nb-theme(font-size-lg);
+ line-height: 1.5;
+ margin-top: 2.25rem;
+ margin-bottom: 0;
+
+ a {
+ text-decoration: none;
+ font-family: nb-theme(font-main), sans-serif;
+ color: nb-theme(color-active-fg);;
+ }
+ }
+
+ .badges {
+ display: flex;
+ margin-top: 2.75rem;
+ flex-direction: row;
+ align-items: center;
+
+ .stars {
+ width: 6.25rem;
+ height: 1.25rem;
+ margin-right: 1rem;
+ }
+ }
+
+ .buttons {
+ margin-top: 1.875rem;
+ }
+
+ .btn {
+ font-family: nb-theme(font-main), sans-serif;
+ border-radius: 3px;
+ border: none;
+ background: #ffffff;
+ color: #000000;
+ padding: 1.125rem 1em;
+ box-shadow: nb-theme(shadow-default);
+ cursor: pointer;
+ text-transform: uppercase;
+
+ &.btn-demo {
+ margin-left: 1em;
+ padding-left: 4rem;
+ padding-right: 4rem;
+ color: #ffffff;
+ background-color: nb-theme(color-active-fg);
+ box-shadow: nb-theme(shadow-btn);
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-green-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-green-btn);
+ }
+ }
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-btn);
+ }
+ }
+
+ @include media-breakpoint-down(xxl) {
+ .main-img-container {
+ min-width: 50.625rem;
+ min-height: 47.875rem;
+ }
+
+ .main-inf {
+ width: 100%;
+ margin: 4.625rem 5.875rem 0 2.625rem;
+ }
+ }
+
+ @include media-breakpoint-down(xl) {
+ .main-img-container {
+ min-width: 39rem;
+ min-height: 36.25rem;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ padding-bottom: 6.25rem;
+
+ .main-img-container {
+ min-height: 28.75rem;
+ min-width: 31rem;
+ }
+
+ .main-inf {
+ margin-right: 0.75rem;
+ margin-left: 1rem;
+ }
+
+ .btn {
+ &.btn-demo {
+ padding-left: 3.25rem;
+ padding-right: 3.25rem;
+ }
+ }
+ }
+
+ @include media-breakpoint-down(md) {
+ .main-img-container {
+ min-height: 21.875rem;
+ min-width: 23rem;
+ width: 75rem;
+ }
+
+ .main-inf {
+ margin-top: 1.25rem;
+ }
+
+ h1 {
+ font-size: 3rem;
+ }
+
+ p {
+ font-size: 1rem;
+ margin-top: 1.25rem;
+ }
+
+ .btn {
+ font-size: 0.7rem;
+ padding-bottom: 1rem;
+ padding-top: 1rem;
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ padding-top: 1.75rem;
+ flex-direction: column;
+
+ .main-inf {
+ margin: 0;
+ }
+
+ .mobile-main-img-container {
+ width: 100%;
+ height: 100%;
+
+ img {
+ width: 100%;
+ height: 100%;
+ transition: opacity 1s;
+ opacity: 0;
+
+ &.ng-lazyloaded {
+ opacity: 1;
+ }
+ }
+ }
+
+ h1 {
+ font-size: 3rem;
+ text-align: center;
+ }
+
+ p {
+ font-size: nb-theme(font-size);
+ text-align: justify;
+ margin: 1.75rem 1rem 0;
+ }
+
+ .main-img-container {
+ margin: 1.375rem 0 0;
+ min-width: 0;
+ min-height: 0;
+ width: 0;
+ }
+
+ .badges {
+ margin-top: 2.375rem;
+ justify-content: center;
+ }
+
+ .buttons {
+ a {
+ display: block;
+ margin: 0 1rem;
+
+ &.btn-demo {
+ margin-top: 1rem;
+ }
+ }
+ }
+ }
+}
diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.ts b/docs/app/pages/home/main-info-section/main-info-section.component.ts
new file mode 100644
index 00000000..a6084785
--- /dev/null
+++ b/docs/app/pages/home/main-info-section/main-info-section.component.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnDestroy } from '@angular/core';
+import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+ selector: 'ngx-landing-main-info',
+ templateUrl: './main-info-section.component.html',
+ styleUrls: ['./main-info-section.component.scss'],
+})
+export class MainInfoSectionComponent implements OnDestroy {
+
+ private alive = true;
+
+ breakpoint: NbMediaBreakpoint;
+ breakpoints: any;
+
+ constructor(private themeService: NbThemeService,
+ private breakpointService: NbMediaBreakpointsService) {
+
+ this.breakpoints = this.breakpointService.getBreakpointsMap();
+ this.themeService.onMediaQueryChange()
+ .pipe(takeWhile(() => this.alive))
+ .subscribe(([oldValue, newValue]) => {
+ this.breakpoint = newValue;
+ });
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ }
+}
diff --git a/docs/app/pages/home/our-projects-section/our-projects-section.component.html b/docs/app/pages/home/our-projects-section/our-projects-section.component.html
new file mode 100644
index 00000000..0cc263e0
--- /dev/null
+++ b/docs/app/pages/home/our-projects-section/our-projects-section.component.html
@@ -0,0 +1,36 @@
+ngx-admin
++ The most popular admin dashboard based on Angular 7+, Bootstrap 4+ and + Nebular. + Free and Open Source for personal and commercial purposes. +
+
+ ![Light theme Dashboard]()
+
+
+
+
+
+-
+
-
+ ++
+
++Nebular++ Nebular is a great toolkit if you build Rich UI web applications based on Angular. Complete with a set of native Angular components, themeable components, authentication and security layers that are easily configurable to your API. Nebular offers a world of possibilities ++ Learn more +
+ -
+ ++
+
++Eva Icons++ Eva Icons is a pack of more than 480 beautifully crafted Open Source icons. Download for desktop and use them in your creations for Web, iOS, and Android. The icons are available in several formats: PNG, SVG, font, Sketch ++ Learn more +
+
-
+
-
+ 1++ Save more than $33,000 using ngx-admin. + According to our research ngx-admin optimizes 480 hours of development time. Taking the average hourly rate of a front-end engineer in the US – $70 ++
+
-
+ 2++ Create a custom experience by working with one of 3 themes or edit just a few custom variables. Need help? Check out our article, where we describe how you can create a different look in just 2 minutes ++
+
-
+ 3++ It’s completely FREE and MIT licensed. + You don’t have to worry about the legal stuff, ngx-admin is free for personal and commercial purposes, so you can use it to build any product ++
+
-
+ 4++ Do you need more? We can customize!+
+ Visit our homepage or simply leave us a note at contact@akveo.com. We’re available for hire and can create custom solutions just for you +
+
+
diff --git a/docs/app/pages/home/reviews-section/reviews-section.component.scss b/docs/app/pages/home/reviews-section/reviews-section.component.scss
new file mode 100644
index 00000000..124d7032
--- /dev/null
+++ b/docs/app/pages/home/reviews-section/reviews-section.component.scss
@@ -0,0 +1,184 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ display: block;
+ padding-top: 6rem;
+ padding-bottom: 7.875rem;
+
+ .carousel-container {
+ position: relative;
+ }
+
+ .reviews {
+ max-width: 55.125rem;
+ display: flex;
+ margin: 0 auto;
+ margin-top: 4.625rem;
+ }
+
+ .review-card {
+ background-color: #ffffff;
+ box-shadow: nb-theme(shadow-default);
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ .header-card {
+ display: flex;
+ position: relative;
+ padding-top: 1rem;
+ padding-left: 1rem;
+ padding-right: 3.125rem;
+ overflow: hidden;
+ }
+
+ .social-icon {
+ position: absolute;
+ right: 1.375rem;
+ top: 1.875rem;
+ }
+
+ .avatar {
+ max-width: 3.375rem;
+ height: 3.375rem;
+ border-radius: 50%;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .personal-info {
+ font-family: nb-theme(font-main), sans-serif;
+ margin-left: 1.25rem;
+ margin-top: 0.5rem;
+ color: #000000;
+ word-break: break-all;
+ }
+
+ .body-card {
+ font-family: nb-theme(font-secondary), sans-serif;
+ color: #000000;
+ padding: 0 1rem;
+ margin-top: 1.75rem;
+ line-height: 1.8;
+ height: 10.375rem;
+ }
+
+ .footer-card {
+ border-top: 1px solid #eaeaea;
+ }
+ }
+
+ .go-to-button {
+ display: block;
+ font-family: nb-theme(font-main), sans-serif;
+ color: nb-theme(color-active-fg);
+ padding: 1rem;
+ cursor: pointer;
+ position: relative;
+ text-decoration: none;
+
+ i {
+ position: absolute;
+ right: 1.375rem;
+ top: 1rem;
+ }
+ }
+
+ .swiper-container {
+ position: static;
+ }
+
+ .swiper-button-prev, .swiper-button-next {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: none;
+ height: 5rem;
+ width: 5rem;
+ border-radius: 50%;
+ background-color: #ffffff;
+ box-shadow: nb-theme(shadow-default);
+ top: 9rem;
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-btn);
+ }
+ }
+
+ .swiper-button-prev {
+ left: 8.125rem;
+ }
+
+ .swiper-button-next {
+ right: 8.125rem;
+ }
+
+ .swiper-pagination {
+ top: 110%;
+
+ /deep/ span {
+ height: 0.75rem;
+ width: 0.75rem;
+ opacity: 0.08;
+ background-color: #000000;
+
+ &.swiper-pagination-bullet-active {
+ opacity: 1;
+ background: nb-theme(color-active-bg);
+ }
+ }
+ }
+
+ @include media-breakpoint-down(xl) {
+ .swiper-button-prev {
+ left: 5%;
+ }
+
+ .swiper-button-next {
+ right: 5%;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ .swiper-button-prev, .swiper-button-next {
+ display: none;
+ }
+ }
+
+ @include media-breakpoint-down(is) {
+ padding-top: 4rem;
+ padding-bottom: 4.375rem;
+
+ .reviews {
+ margin-top: 2.25rem;
+ }
+
+ .swiper-pagination {
+ top: 108%;
+ }
+
+ .swiper-button-prev, .swiper-button-next {
+ display: none;
+ }
+
+ .swiper-slide {
+ width: 80%;
+ }
+ }
+}
diff --git a/docs/app/pages/home/reviews-section/reviews-section.component.ts b/docs/app/pages/home/reviews-section/reviews-section.component.ts
new file mode 100644
index 00000000..970b9c29
--- /dev/null
+++ b/docs/app/pages/home/reviews-section/reviews-section.component.ts
@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnDestroy } from '@angular/core';
+import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
+import { NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+import { Review, ReviewsService } from '../../../@core/data/service/reviews.service';
+
+@Component({
+ selector: 'ngx-landing-reviews-section',
+ templateUrl: './reviews-section.component.html',
+ styleUrls: ['./reviews-section.component.scss'],
+})
+export class ReviewsSectionComponent implements OnDestroy {
+
+ private alive = true;
+
+ private desktopSwiperConfig: SwiperConfigInterface = {
+ slidesPerView: 3,
+ keyboard: true,
+ navigation: true,
+ };
+
+ private tabletSwiperConfig: SwiperConfigInterface = {
+ ...this.desktopSwiperConfig,
+ slidesPerView: 2,
+ };
+
+ private mobileSwiperConfig: SwiperConfigInterface = {
+ slidesPerView: 'auto',
+ centeredSlides: true,
+ keyboard: false,
+ navigation: false,
+ };
+
+ swiperConfig: SwiperConfigInterface = {
+ direction: 'horizontal',
+ spaceBetween: 24,
+ mousewheel: false,
+ lazy: true,
+ loop: true,
+ autoplay: true,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true,
+ hideOnClick: false,
+ },
+ };
+
+ breakpoints: any;
+ reviews: Review[];
+
+ constructor(private themeService: NbThemeService,
+ private breakpointService: NbMediaBreakpointsService,
+ private reviewsService: ReviewsService) {
+ this.breakpoints = this.breakpointService.getBreakpointsMap();
+ this.themeService.onMediaQueryChange()
+ .pipe(takeWhile(() => this.alive))
+ .subscribe(([oldValue, newValue]) => {
+ this.changeSwiperConfig(newValue.width);
+ });
+
+ this.reviewsService.getReviews()
+ .pipe(takeWhile(() => this.alive))
+ .subscribe((reviews) => this.reviews = reviews);
+ }
+
+ changeSwiperConfig(currentWidth: number): void {
+ if (this.isMobile(currentWidth)) {
+ this.swiperConfig = {
+ ...this.swiperConfig,
+ ...this.mobileSwiperConfig,
+ };
+ } else {
+ const desktopOrTabletConfig = this.isTablet(currentWidth) ? this.tabletSwiperConfig : this.desktopSwiperConfig;
+
+ this.swiperConfig = {
+ ...this.swiperConfig,
+ ...desktopOrTabletConfig,
+ };
+ }
+ }
+
+ private isMobile(currentWidth: number): boolean {
+ return currentWidth <= this.breakpoints.is;
+ }
+
+ private isTablet(currentWidth: number): boolean {
+ return currentWidth <= this.breakpoints.sm;
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ }
+}
diff --git a/docs/app/pages/home/ribbon/ribbon.component.html b/docs/app/pages/home/ribbon/ribbon.component.html
new file mode 100644
index 00000000..ab14ed03
--- /dev/null
+++ b/docs/app/pages/home/ribbon/ribbon.component.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Reviewer Avatar]()
+
+
+
+ {{ review.firstName }}
+ {{ review.lastName }}
+
+ {{ review.review }}
+
+
+
+ Please, don't hunt me!
+
diff --git a/docs/app/pages/home/ribbon/ribbon.component.scss b/docs/app/pages/home/ribbon/ribbon.component.scss
new file mode 100644
index 00000000..c0510406
--- /dev/null
+++ b/docs/app/pages/home/ribbon/ribbon.component.scss
@@ -0,0 +1,19 @@
+.ribbon-dont-hunt {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 700;
+ font-size: 11px;
+ text-transform: uppercase;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+ width: 300px;
+ color: rgb(218, 85, 47);
+ background: rgb(255, 255, 255);
+ position: fixed;
+ text-align: center;
+ line-height: 40px;
+ transform: rotate(40deg);
+ box-shadow: rgba(50, 69, 93, 0.15) 0px 4px 7px 0px, rgba(0, 0, 0, 0.08) 0px -1px 4px 0px;
+ top: 55px;
+ right: -60px;
+}
diff --git a/docs/app/pages/home/ribbon/ribbon.component.ts b/docs/app/pages/home/ribbon/ribbon.component.ts
new file mode 100644
index 00000000..9dd0c51d
--- /dev/null
+++ b/docs/app/pages/home/ribbon/ribbon.component.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-landing-ribbon',
+ templateUrl: './ribbon.component.html',
+ styleUrls: ['./ribbon.component.scss'],
+})
+export class RibbonComponent {
+}
diff --git a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
new file mode 100644
index 00000000..b0423650
--- /dev/null
+++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
++ You can support us by creating pull requests, submitting bugs, and suggesting awesome new features you’d like to see +
+ + + +
+
+
+
+Star our repo
+ GitHub
+
+ Here's what else you can do:
+
+
+
diff --git a/docs/app/pages/home/social-section/social-section.component.scss b/docs/app/pages/home/social-section/social-section.component.scss
new file mode 100644
index 00000000..a06ef10f
--- /dev/null
+++ b/docs/app/pages/home/social-section/social-section.component.scss
@@ -0,0 +1,166 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ display: block;
+ text-align: center;
+ padding-top: 4.75rem;
+ padding-bottom: 5.125rem;
+
+ .social-button {
+ display: inline-flex;
+ align-items: center;
+ box-shadow: nb-theme(shadow-default);
+ background-color: nb-theme(color-white);
+ padding-left: 2rem;
+ border-radius: 0.25rem;
+ color: #000000;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-btn);
+ }
+
+ .info {
+ margin-left: 2rem;
+ text-align: left;
+ }
+
+ .appeal {
+ font-family: nb-theme(font-secondary), sans-serif;
+ }
+
+ .title {
+ font-size: 1.5rem;
+ }
+ }
+
+ p {
+ font-family: nb-theme(font-secondary), sans-serif;
+ font-size: nb-theme(font-size-lg);
+ width: 36%;
+ margin: 1.25rem auto 0;
+ line-height: 1.5;
+ }
+
+ .github {
+ margin-top: 2rem;
+ margin-left: 1.25rem;
+ padding-right: 6.5rem;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+
+ .sub-title {
+ color: #000000;
+ margin-top: 2.5rem;
+ font-size: 1.5rem;
+ }
+
+ .buttons-group {
+ display: flex;
+ justify-content: center;
+ margin-top: 2.5rem;
+
+ .social-button {
+ margin-left: 1.5rem;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+ }
+
+ .facebook {
+ padding: 1.5rem 6.625rem 1.25rem 1.375rem;
+
+ .info {
+ margin-left: 1.125rem;
+ }
+
+ .title {
+ margin-top: 0.25rem;
+ }
+ }
+
+ .linkedin {
+ padding: 1.5rem 7rem 1.25rem 1.625rem;
+
+ .info {
+ margin-left: 1.75rem;
+ }
+ }
+
+ .twitter {
+ padding: 1.5rem 8rem 1.25rem 1.625rem;
+
+ .info {
+ margin-left: 1.75rem;
+ }
+ }
+
+ @include media-breakpoint-down(md) {
+ p {
+ width: 80%;
+ }
+
+ .facebook {
+ padding-right: 1.5rem;
+ }
+
+ .linkedin {
+ padding-right: 1.5rem;
+ }
+
+ .twitter {
+ padding-right: 3rem;
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ padding: 4.25rem 1rem 2.125rem;
+
+ p {
+ width: 100%;
+ font-size: nb-theme(font-size);
+ }
+
+ .github {
+ margin-top: 2rem;
+ margin-left: 0;
+ padding-right: 0;
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+ width: 100%;
+ }
+
+ .sub-title {
+ margin-top: 2.25rem;
+ }
+
+ .buttons-group {
+ margin-top: 1.875rem;
+ flex-direction: column;
+
+ .social-button {
+ margin-top: 1rem;
+ margin-left: 0;
+
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/docs/app/pages/home/social-section/social-section.component.ts b/docs/app/pages/home/social-section/social-section.component.ts
new file mode 100644
index 00000000..d819e677
--- /dev/null
+++ b/docs/app/pages/home/social-section/social-section.component.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-landing-social-section',
+ templateUrl: './social-section.component.html',
+ styleUrls: ['./social-section.component.scss'],
+})
+export class SocialSectionComponent {
+
+}
diff --git a/docs/app/pages/home/theme-section/theme-section.component.html b/docs/app/pages/home/theme-section/theme-section.component.html
new file mode 100644
index 00000000..0a8013d2
--- /dev/null
+++ b/docs/app/pages/home/theme-section/theme-section.component.html
@@ -0,0 +1,55 @@
+
+
+
+View demo
diff --git a/docs/app/pages/home/theme-section/theme-section.component.scss b/docs/app/pages/home/theme-section/theme-section.component.scss
new file mode 100644
index 00000000..e46f5c79
--- /dev/null
+++ b/docs/app/pages/home/theme-section/theme-section.component.scss
@@ -0,0 +1,229 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+
+ display: block;
+ padding-top: 6.25rem;
+ padding-bottom: 5.125rem;
+ text-align: center;
+
+ .image-container {
+ width: 75.875rem;
+ height: 46.625rem;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+
+ .carousel-container {
+ margin-top: 4rem;
+ }
+
+ .swiper-container {
+ position: static;
+ }
+
+ .swiper-wrapper {
+ padding-top: 4.125rem;
+ }
+
+ .swiper-button-prev, .swiper-button-next {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: none;
+ height: 5rem;
+ width: 5rem;
+ border-radius: 50%;
+ background-color: #ffffff;
+ box-shadow: nb-theme(shadow-default);
+ top: 22.625rem;
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-btn);
+ }
+ }
+
+ .swiper-button-prev {
+ left: 18%;
+ }
+
+ .swiper-button-next {
+ right: 18%;
+ }
+
+ .swiper-pagination {
+ display: inline-flex;
+ justify-content: center;
+ left: 1.5rem;
+ top: 0;
+
+ /deep/ .swiper-pagination-bullet {
+ height: 0.25rem;
+ width: auto;
+ border-radius: 0;
+ font-family: nb-theme(font-main), sans-serif;
+ font-size: nb-theme(font-size-lg);
+ color: nb-theme(color-fg);
+ background: transparent;
+ margin: 0;
+ opacity: 0.56;
+
+ &::after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: #eff1f3;
+ }
+
+ span {
+ display: inline-block;
+ padding: 0.75rem 3.5rem;
+ width: 100%;
+ }
+
+ &.swiper-pagination-bullet-active {
+ opacity: 1;
+ color: nb-theme(color-active-fg);
+
+ &::after {
+ border-radius: 0.375rem;
+ background: nb-theme(color-active-bg);
+ }
+ }
+ }
+ }
+
+ .btn {
+ font-family: nb-theme(font-main), sans-serif;
+ border-radius: 3px;
+ border: none;
+ background: #ffffff;
+ color: #000000;
+ box-shadow: nb-theme(shadow-default);
+ cursor: pointer;
+ text-transform: uppercase;
+
+ &.btn-demo {
+ margin-top: 0.375rem;
+ padding: 1.125rem 6.25rem;
+ color: #ffffff;
+ background-color: nb-theme(color-active-fg);
+ box-shadow: nb-theme(shadow-btn);
+ }
+
+ &:hover {
+ box-shadow: nb-theme(shadow-hover-green-btn);
+ }
+
+ &:active {
+ box-shadow: nb-theme(shadow-active-green-btn);
+ }
+ }
+
+ @include media-breakpoint-down(xl) {
+ .swiper-button-prev {
+ left: 10%;
+ }
+
+ .swiper-button-next {
+ right: 10%;
+ }
+ }
+
+ @include media-breakpoint-down(xxl) {
+ .image-container {
+ width: 64.875rem;
+ height: 39.625rem;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ padding-top: 0;
+
+ .image-container {
+ width: 46.875rem;
+ height: 100%;
+ }
+
+ .swiper-button-prev, .swiper-button-next {
+ display: none;
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ img {
+ transition: opacity 1s;
+ opacity: 0;
+
+ &.ng-lazyloaded {
+ opacity: 1;
+ }
+ }
+ }
+
+ @include media-breakpoint-down(is) {
+ padding-top: 2.375rem;
+ padding-bottom: 1.875rem;
+
+ .carousel-container {
+ margin-top: 2.25rem;
+ }
+
+ .swiper-container {
+ margin: 0 1rem;
+ }
+
+ .image-container {
+ max-width: 19.75rem;
+ max-height: 12rem;
+ }
+
+ .swiper-pagination {
+ left: 0;
+ margin: 0;
+ width: 100%;
+
+ /deep/ .swiper-pagination-bullet {
+ flex: 1;
+ font-size: nb-theme(font-size-sm);
+
+ span {
+ padding: 0.75rem 0;
+ }
+
+ &.swiper-pagination-bullet-active {
+ opacity: 1;
+ color: nb-theme(color-active-fg);
+
+ &::after {
+ border-radius: 0.375rem;
+ background: nb-theme(color-active-bg);
+ }
+ }
+ }
+ }
+
+ .swiper-button-prev, .swiper-button-next {
+ display: none;
+ }
+
+ .btn-demo {
+ display: none;
+ }
+ }
+}
diff --git a/docs/app/pages/home/theme-section/theme-section.component.ts b/docs/app/pages/home/theme-section/theme-section.component.ts
new file mode 100644
index 00000000..19853fc8
--- /dev/null
+++ b/docs/app/pages/home/theme-section/theme-section.component.ts
@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnDestroy } from '@angular/core';
+import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
+import { takeWhile } from 'rxjs/operators';
+import {
+ NbMediaBreakpoint,
+ NbMediaBreakpointsService,
+ NbThemeService,
+} from '@nebular/theme';
+
+@Component({
+ selector: 'ngx-landing-theme-section',
+ templateUrl: './theme-section.component.html',
+ styleUrls: ['./theme-section.component.scss'],
+})
+export class ThemeSectionComponent implements OnDestroy {
+
+ private alive = true;
+ private themes: string[] = [
+ 'Light',
+ 'Cosmic',
+ 'Corporate',
+ ];
+
+ breakpoint: NbMediaBreakpoint;
+ breakpoints: any;
+ sliderIndex: number = 1;
+ initialSwiperConfig: SwiperConfigInterface = {
+ direction: 'horizontal',
+ spaceBetween: 200,
+ slidesPerView: 'auto',
+ centeredSlides: true,
+ keyboard: true,
+ navigation: true,
+
+ effect: 'coverflow',
+ grabCursor: true,
+ coverflowEffect: {
+ rotate: 0,
+ stretch: 0,
+ depth: 500,
+ modifier: 1,
+ slideShadows : false,
+ },
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true,
+ hideOnClick: false,
+ renderBullet: (index, className) => {
+ return `
+
+
+ ${this.themes[index]}
+
+ `;
+ },
+ },
+ };
+ swiperConfig: SwiperConfigInterface = {
+ ...this.initialSwiperConfig,
+ };
+
+ constructor(private themeService: NbThemeService,
+ private breakpointService: NbMediaBreakpointsService) {
+ this.breakpoints = this.breakpointService.getBreakpointsMap();
+ this.themeService.onMediaQueryChange()
+ .pipe(takeWhile(() => this.alive))
+ .subscribe(([oldValue, newValue]) => {
+ this.breakpoint = newValue;
+
+ this.changeSwiperConfig();
+ });
+ }
+
+ changeSwiperConfig(): void {
+ if (this.isMobile) {
+ this.swiperConfig = {
+ ...this.swiperConfig,
+ preloadImages: false,
+ lazy: true,
+ };
+ } else {
+ this.swiperConfig = this.initialSwiperConfig;
+ }
+ }
+
+ get isMobile(): boolean {
+ return this.breakpoint.width <= this.breakpoints.sm;
+ }
+
+ ngOnDestroy() {
+ this.alive = false;
+ }
+}
diff --git a/docs/app/pages/pages-routing.module.ts b/docs/app/pages/pages-routing.module.ts
new file mode 100644
index 00000000..ec82e066
--- /dev/null
+++ b/docs/app/pages/pages-routing.module.ts
@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { PagesComponent } from './pages.component';
+
+const routes: Routes = [{
+ path: '',
+ component: PagesComponent,
+ children: [
+ {
+ path: '',
+ loadChildren: './home/landing-home.module#LandingHomeModule',
+ },
+ {
+ path: 'docs',
+ loadChildren: './docs/landing-docs.module#LandingDocsModule',
+ },
+ {
+ path: '**',
+ redirectTo: '',
+ },
+ ],
+}];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class PagesRoutingModule {
+}
diff --git a/docs/app/pages/pages.component.ts b/docs/app/pages/pages.component.ts
new file mode 100644
index 00000000..2cb58cdd
--- /dev/null
+++ b/docs/app/pages/pages.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngx-landing-pages',
+ template: `
+
+
+
+
+
+
+
+
+
+ ![Light Theme]()
+ ![Light Theme]()
+
+ 
+
+ ![Cosmic Theme]()
+ ![Cosmic Theme]()
+
+ 
+
+ ![Corporate Theme]()
+ ![Corporate Theme]()
+
+ 
+ + +## Integration with JSON REST server + +Despite there's an option to do CORS requests to API server directly, we don't advise to do so. This way has disadvantages in terms of security and performance. In terms of security when you do CORS request you basically expose your API server URL to everybody. Your API server should take additional measures to make sure some URLs are not accessible, because it is exposed to the web. As for performance, CORS requests require to send preflight OPTIONS request before each HTTP request. This adds additional HTTP overhead. + +The solution we suggest is to use proxy for your API server. In this case you can make your app accessible through some sub-url. For example, if your application's hosted under url `website.com` and your index file is located at `website.com/index.html`, you can make your API root accessible on `website.com/api`. This is well supported by angular-cli/webpack-dev-server for development setup and by web servers for production setup. Let's review these setups: +
+ +## angular-cli/webpack-dev-server setup + +There's not so much needs to be done to proxy your api using angular-cli. You can read detailed documentation in their docs. +But the most important topics are: + +You should create `proxy.conf.json` file in your application root. The file should contain something like below: +```json +{ + "/api": { + "target": "http://localhost:3000", + "secure": false + } +} +``` + +In this case you should put URL of your API server instead of `http://localhost:3000`. + +After that you need to run your angular-cli application using following command +```bash +ng serve --proxy-config proxy.conf.json +``` +That's it. Now you can access `/api` URL from your ngx-admin application and your requests will be forwarded to your API server. +
+ +## Production setup + +Production setup is not much different from development setup. The only difference is that usually you don't use there angular-cli or webpack-dev-server to host your HTML/CSS/JS. Usually we all use some web server for that. At Akveo we mostly use [nginx](https://nginx.org/en/) for this use case. Below there is a sample configuration for this particular web server. For others it is not that much different. + +Usually you create new virtual host with some similar configuration: + +```nginx +server { + listen 80; + server_name website.com; + + root /yourAngularAppDistPath; + index index.html index.htm; + etag on; + + location / { + index index.html; + try_files $uri /index.html; + } +} +``` + +The only thing you need to add is proxy-pass to `/api` URL like below: + +```nginx +server { + listen 80; + server_name website.com; + + root /yourAngularAppDistPath; + index index.html index.htm; + etag on; + + location / { + index index.html; + try_files $uri /index.html; + } + + location /api { + proxy_pass http://localhost:3000/; + proxy_set_header Host $host; + } +} +``` + +That's it. Now your API server works on production as well. diff --git a/docs/articles/concept-theme-system.md b/docs/articles/concept-theme-system.md new file mode 100644 index 00000000..b2d8cf7a --- /dev/null +++ b/docs/articles/concept-theme-system.md @@ -0,0 +1,124 @@ +# Theme System + +Nebular Theme System is a set of rules we put into how SCSS files and variables are organized to achieve the following goals: + +- ability to flexibly change looks & feel of the application by managing variables, without changing SCSS itself; +- ability to switch between visual themes in a runtime without reloading the page; +- support of CSS-variables (implemented partially). +
+ +## Theme Map + +Each theme is represented as an SCSS map with a list of key-value pairs: + +```scss +$theme: ( + font-main: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'), + font-secondary: font-main, + + font-weight-thin: 200, + font-weight-light: 300, + font-weight-normal: 400, + font-weight-bolder: 500, + font-weight-bold: 600, + font-weight-ultra-bold: 800, + + base-font-size: 16px, + + font-size-xlg: 1.25rem, + font-size-lg: 1.125rem, + font-size: 1rem, + font-size-sm: 0.875rem, + font-size-xs: 0.75rem, + + radius: 0.375rem, + padding: 1.25rem, + margin: 1.5rem, + line-height: 1.25, + + ... +``` +Where _key_ - is a variable name, and _value_ - is a raw SCSS value (color, string, etc) or **parent variable name**, so that you can inherit values from different variables: + +```scss +$theme: ( + font-main: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'), + font-secondary: font-main, +``` +Here `font-secondary` inherits its value from `font-main`. +
+ +## Component Variables + +Then, for each component of the Nebular Components, there is a list of variables you can change. +For example - header component variables: + +```scss + ... + + header-font-family: font-secondary, + header-font-size: font-size, + header-line-height: line-height, + header-fg: color-fg-heading, + header-bg: color-bg, + header-height: 4.75rem, + header-padding: 1.25rem, + header-shadow: shadow, + + ... +``` +As you can see, you have 8 variables for a pretty simple component and from the other side, 6 of them are inherited from the default values. +It means that if you want to create a new theme with a united look & feel of the components - in most cases you would need to change around 10 generic variables, such as `color-bg`, `shadow`, etc. +to change the UI completely. + +List of component style variables is specified in the component documentation, for example [styles for header component](docs/components/layout/theme#nblayoutheadercomponent). +
+ +## Variables Usage + +Now, if you want to use the variables in your custom style files, all you need to do (of course, after the [successful setup of the Theme System](docs/guides/enable-theme-system) is to call `nb-theme(var-name)` function: + +```scss +@import '../../../@theme/styles/themes'; + +:host { + + background: nb-theme(card-bg); // and use it +} +``` +Depending on the currently enabled theme and the way `card-bg` inherited in your theme, you will get the right color. +
+ +## Built-in themes + +Currently, there are 3 built-in themes: +- `default` - clean white theme +- `cosmic` - dark theme +- `corporate` - firm business theme + +Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `default` theme. +
+ +## Magic of multiple themes with hot-reload + +As you can see from the [ngx-admin demo](http://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=doc_page), you can switch themes in the runtime without reloading the page. +It is useful when you have multiple visual themes per user role or want to provide your user with such a configuration so that he can decide which theme works best for him. +The only requirement for the feature to work is to wrap all of your component styles into special mixin `nb-install-component` and use `nb-theme` to get the right value: + +```scss +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + background: nb-theme(card-bg); // now, for each theme registered the corresponding value will be inserted + + .container { + background: nb-theme(color-bg); + font-weight: nb-theme(font-weight-bold); + } +} +``` +
+ +## Related Articles + +- [Change Theme](docs/guides/change-theme) diff --git a/docs/articles/index.md b/docs/articles/index.md new file mode 100644 index 00000000..862d15fc --- /dev/null +++ b/docs/articles/index.md @@ -0,0 +1,50 @@ +# What is ngx-admin? + +ngx-admin is a front-end admin dashboard template based on Angular 7+, Bootstrap 4+ and Nebular. That means all the data you can see on graphs, charts and tables is mocked in Javascript so you can use the backend of your choice with no limitations. +
+ +## How can it help me? + +We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it’s not that obvious, but a lot of web applications have dashboards with panels, charts analytics, etc. + + +ngx-admin aims to bootstrap the development of your product and provide an ecosystem for building production-ready application or prototypes. + +Frameworks like Bootstrap provide a number of components, but usually it’s not enough to build a real-world app. This template comes with lots of popular UI components with a unified color scheme, plus it is based on a modern Angular framework and has a flexible component based structure. + +You can also use ngx-admin for the purpose of learning Angular. +
+ +## List of features + +- Angular 7+ & Typescript +- Bootstrap 4+ & SCSS +- Responsive layout +- RTL support +- High resolution +- Flexibly configurable themes with **hot-reload** (3 themes included) +- Authentication module with multiple providers +- Lots of awesome features: + - Buttons + - Modals + - Popovers + - Icons + - Typography + - Animated searches + - Forms + - Tabs + - Notifications + - Tables + - Maps + - Charts + - Editors + +And many more! +
+ +## Assumptions + +This documentation assumes that you are already familiar with JavaScript/TypeScript, Angular, CSS and Bootstrap. + +## Have questions? +Didn't find something here? Look through the issues or simply drop us a line at contact@akveo.com. diff --git a/docs/articles/install-starter-kit.md b/docs/articles/install-starter-kit.md new file mode 100644 index 00000000..66e9ddef --- /dev/null +++ b/docs/articles/install-starter-kit.md @@ -0,0 +1,63 @@ +# Install ngx-admin + +Please note, that **ngx-admin** is just a frontend application. Backend integration can be done relatively simple, but you should be aware that all the data is mocked using JavaScript objects. +If you want the data to be dynamic, you should consider developing a backend integration by your own. +The Nebular team doesn't consider providing generic integration layer as a part of this project because every backend API has a different structure in terms of data format and URLs. +
+ +## Install tools + +To install ngx-admin on your machine you need to have the following tools installed: +- Git - https://git-scm.com +- Node.js - https://nodejs.org. Please note the **version** should be **>=8** +- Npm - Node.js package manager, comes with Node.js. Please make sure npm **version** is **>=5** +- You might also need some specific native packages depending on your operating system like `build-essential` on Ubuntu + +
+
+Warning!
+
+ Please note that **it is not possible** to build ngx-admin **without these tools** and it will not be possible because of the way how Angular is built.
+
++ +## Download the code + +When you completed tools setup, you need to download the code of ngx-admin application. The easiest way to do that is to clone GitHub repository: +```bash +git clone https://github.com/akveo/ngx-admin.git +``` + +After clone is completed, you need to install npm modules: +```bash +cd ngx-admin && npm i +``` +
+
+Warning!
+
+ Please make sure that installation process successfully completed without errors.
+
++ +## Run local copy + +To run a local copy in development mode, execute: + +```bash +npm start +``` + +Go to http://0.0.0.0:4200 or http://localhost:4200 in your browser. +
+ +## Production bundle + +To create a bundle in production mode, execute: + +```bash +npm run build:prod +``` + +This will clear up your `dist` folder (where release files are located) and generate a release build. +Now you can copy the sources from the `dist` folder and use it with any backend framework or simply [put it under a web server](docs/getting-started/server-deployment). diff --git a/docs/articles/server-deployment.md b/docs/articles/server-deployment.md new file mode 100644 index 00000000..097cde0c --- /dev/null +++ b/docs/articles/server-deployment.md @@ -0,0 +1,11 @@ +# Server Deployment + +Though in the development Nebular app consists of a number of TypeScript, SASS, etc files, the built package is just a bunch HTML/JavaScript/CSS files. +No other processing is needed to get them running in a browser. +So to deploy the app you basically need two simple steps: + +- Build your app with `npm run build:prod` +- Copy the output from the `dist` folder under a web-server of your choice. + +More details on how to setup your web-server to better serve the application can be found on Angular Documentation website, under Server Configuration section. +
diff --git a/docs/articles/start.md b/docs/articles/start.md new file mode 100644 index 00000000..a65f29f8 --- /dev/null +++ b/docs/articles/start.md @@ -0,0 +1,17 @@ +# Where to start? + +Nebular is a set of modules for Angular. Despite it is not required to know Angular framework to set up your first Nebular project, it is highly recommended to go through the Angular tutorial beforehand and be familiar with basic Angular concepts. +
+ +## Quickstart tutorials + +Based on a current setup of your project and your goals, there are two starting points: + +- **[Starting based on our Nebular Admin starter kit](docs/guides/install-based-on-starter-kit)** Consider this tutorial if you are building admin or any other back-office application and you need a template as a good starting kit. +- **[Adding into existing Angular Project](docs/guides/add-into-existing-project)** This tutorial explains how to use Nebular if you already have some Angular code as starting app from scratch. + +Please consider creating an issue on GitHub if your use case is not described above. But we kindly ask to always look through the documentation and the list of existing issues first. + +## I'm new to Angular or web development in general + +Quite often we receive emails and messages from people who ask us for the advice we can give them if they are completely new to software engineering and/or Angular in particular. Well, we can't say that there's some general way, unfortunately. Each advice should be aimed at a particular person, his current skills set and goals. That's why we believe that each person knows better for himself. But in any case, there are multiple resources like https://www.coursera.org/ or https://egghead.io/ which focus on providing online education. diff --git a/docs/articles/theme-change.md b/docs/articles/theme-change.md new file mode 100644 index 00000000..8beee83f --- /dev/null +++ b/docs/articles/theme-change.md @@ -0,0 +1,54 @@ +# Change Current Theme + +Nebular Theme System provides 3 color schemes out of the box - `default`, `corporate` and `cosmic`. It is both possible to change the theme statically and dynamically during the runtime. + + +## Switch from Cosmic to Default +It is extremely simple to replace a theme from one to another. +All you need to do is to find your `NbThemeModule.forRoot` declaration and change a value of the `name` setting: + +```ts + @NgModule({ + imports: [ + // ... + NbThemeModule.forRoot({ name: 'default' }), + ], + } +``` +
+ +## Runtime Theme Switch +In case you want to have a better control when a theme is changed, or for instance need to change it based on a user role, +it is possible to dynamically tell Nebular which theme should be enabled. +`NbThemeService` is our friend in this case and particularly the `changeTheme` method: + +```ts + + // ... + constructor(private themeService: NbThemeService) { + this.themeService.changeTheme('corporate'); + } + +``` +
+ +## Listen to Theme Change +And of course it is possible to subscribe to an event when the current theme gets changed so that you can adjust something in your code accordingly: + +```ts + + // ... + constructor(private themeService: NbThemeService) { + + this.themeService.onThemeChange() + .subscribe((theme: any) => { + console.log(`Theme changed to ${theme.name}`); + }); + } + +``` +
+ +## Related Articles + +- [Theme System](docs/guides/theme-system) diff --git a/docs/assets/.gitkeep b/docs/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/docs/assets/fonts/feather/feather.eot b/docs/assets/fonts/feather/feather.eot new file mode 100644 index 0000000000000000000000000000000000000000..58371d908585297e19aae091f772f66c9d9d590d GIT binary patch literal 62084 zcmd4431A!5wKsn6j26q