Merge branch 'feat/ngx-premium-modal' of https://github.com/SFilinsky/ngx-admin into feat/ngx-premium-modal

docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html

@@ -2,8 +2,8 @@
   <h1>ngx-admin</h1>
   <p class="description">
     The most popular admin dashboard based on <strong>Angular 9+</strong> and
-    <a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info" target="_blank">Nebular</a> with
+    <a href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_main_info&utm_medium=referral&utm_source=ngx_admin" target="_blank">Nebular</a> with
-    <a href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">Eva Design System</a> support.
+    <a href="https://eva.design/?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">Eva Design System</a> support.
     Free and Open Source for personal and commercial purposes.
     <br>
     <span class="bundles">

docs/app/pages/home/main-info-section/main-info-section.component.html

@@ -35,7 +35,7 @@
         Installation Docs
       </a>
       <a class="btn btn-demo"
-         href="https://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
+         href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
          target="_blank">
         Demo
       </a>

docs/app/pages/home/our-projects-section/our-projects-section.component.html

@@ -15,7 +15,7 @@
       <div class="description">
         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
       </div>
-      <a class="btn" href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_our_projects_link" target="_blank">Learn more</a>
+      <a class="btn" href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_our_projects_link&utm_medium=referral&utm_source=ngx_admin" target="_blank">Learn more</a>
     </div>
   </li>
   <li class="project">
@@ -30,7 +30,7 @@
       <div class="description">
         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
       </div>
-      <a class="btn" href="https://akveo.github.io/eva-icons?utm_campaign=eva_icons%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=more_from_akveo_link" target="_blank">Learn more</a>
+      <a class="btn" href="https://akveo.github.io/eva-icons/#/" target="_blank">Learn more</a>
     </div>
   </li>
 </ul>

docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html

@@ -2,6 +2,8 @@
   <ngx-landing-main-info></ngx-landing-main-info>
 </div>
 
+<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
+
 <ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async" ></ngx-landing-description-section>
 
 <ngx-landing-theme-section></ngx-landing-theme-section>
@@ -16,8 +18,6 @@
                          bundleUrl="https://store.akveo.com/products/net-ngx-admin-angular-starter-bundle?utm_campaign=akveo_store%20-%20specific%20bundle%20-%20ngx_admin%20landing&utm_source=ngx_admin&utm_medium=referral&utm_content=.net_free_dashboard_banner">
 </ngx-free-banner-section>
 
-<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
-
 <ngx-landing-our-projects-section></ngx-landing-our-projects-section>
 
 <div class="gray-section">

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

@@ -35,7 +35,7 @@
     </div>
   </a>
   <a class="social-button linkedin"
-     href="https://www.linkedin.com/company/akveo"
+     href="https://www.linkedin.com/company/akveo/"
      target="_blank">
     <i [innerHTML]="'linkedin' | eva: { width: 42, height: 42, fill: '#0077b5' }"></i>
     <div class="info">

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

@@ -81,5 +81,5 @@
 </div>
 
 <a class="btn btn-demo"
-   href="http://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_view_demo"
+   href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_view_demo"
    target="_blank">View demo</a>

package-lock.json

@@ -16530,6 +16530,11 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ng-inline-svg": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ng-inline-svg/-/ng-inline-svg-11.0.0.tgz",
+      "integrity": "sha512-D4dXt379cveaYJobu7JnYixZzw/+AqRkMGDqOrNhGDEiBgDaxb8DZ57mSg8V9ekTl3fK+H98p9SevhLSakzRkA=="
+    },
     "ng-lazyload-image": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz",

package.json

@@ -61,8 +61,8 @@
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.1",
     "colors.js": "1.2.4",
+    "core-js": "2.5.1",
     "echarts": "^4.0.2",
     "eva-icons": "^1.1.3",
     "gulp-bump": "2.7.0",
@@ -72,12 +72,13 @@
     "leaflet": "1.2.0",
     "marked": "^0.5.2",
     "nebular-icons": "1.1.0",
+    "ng-inline-svg": "^11.0.0",
     "ng-lazyload-image": "^7.1.0",
     "ng2-ckeditor": "^1.2.9",
     "ng2-smart-table": "^1.6.0",
     "ngx-echarts": "^4.2.2",
-    "node-sass": "^4.12.0",
     "ngx-swiper-wrapper": "^9.0.1",
+    "node-sass": "^4.12.0",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {
   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
+import {InlineSVGModule} from 'ng-inline-svg';
 
 @NgModule({
   declarations: [AppComponent],
@@ -39,6 +40,7 @@ import {
     }),
     CoreModule.forRoot(),
     ThemeModule.forRoot(),
+    InlineSVGModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/backend-integration/backend-integration.component.scss

@@ -1,4 +1,5 @@
 @import '../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
 
 :host {
   display: flex !important;
@@ -15,39 +16,43 @@
 .diagram-container {
   flex: 2 1 auto;
   align-items: center;
-  min-width: 35rem;
+  min-width: 30rem;
+  width: 70%;
 }
 
 .description-container {
-  flex: 1 1 auto;
+  flex: 1 2 auto;
   max-width: 45rem;
   align-items: stretch;
   height: 100%;
-
+  
-  & > *:not(router-outlet) {
+  ::ng-deep :last-child {
-    height: 100%;
     width: 100%;
   }
 }
 
-@media (max-width : 991px) {
+@include media-breakpoint-down(lg) {
   :host {
     flex-direction: column;
     justify-content: flex-start;
-    height: fit-content;
+    align-items: center;
 
-    .diagram-container {
+    .diagram-container, .description-container {
       width: 100%;
       max-width: none;
-      height: fit-content;
+    }
-      margin: 0 auto;
 
-      ngx-backend-integration-diagram {
+    .description-container {
-        font-size: 2vw;
+      padding-bottom: 1.5rem;
-        height: 60vw;
+
-        padding-top: 0;
+      ::ng-deep ngx-integration-description .subheader {
+        margin-bottom: 1.5rem;
       }
     }
+
+    .diagram-container {
+      min-width: 0;
+    }
   }
 }
 

src/app/pages/backend-integration/backend-integration.module.ts

@@ -14,6 +14,7 @@ import { JavaIntegrationDescriptionComponent } from './descriptions/java-integra
 import { PythonIntegrationDescriptionComponent } from './descriptions/python-integration-description.component';
 import { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component';
 import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component';
+import {InlineSVGModule} from 'ng-inline-svg';
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { IotIntegrationDescriptionComponent } from './descriptions/iot-integrati
     BackendIntegrationRoutingModule,
     NbIconModule,
     NbButtonModule,
+    InlineSVGModule,
   ],
   declarations: [
     BackendIntegrationComponent,

src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class DotNetCoreIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/net-core-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnetcore';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class DotNetIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/net-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnet';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class EcommerceIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/e-commerce-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_e-commerce';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class IotIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/iot-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_iot';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/java-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class JavaIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/java-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_java';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class NodeJsIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/nodejs-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_nodejs';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/php-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class PhpIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/products/material-php-starter-bundle?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin%20&utm_medium=referral%20&utm_content=sidebar_link_php';
 
   features: string[] = [

src/app/pages/backend-integration/descriptions/python-integration-description.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 export class PythonIntegrationDescriptionComponent {
 
-  buttonText: string = 'Get Backend From 49$';
+  buttonText = 'Get Backend From 49$';
   url = 'https://store.akveo.com/collections/python-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_python';
 
   features: string[] = [

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html

@@ -1,81 +1,2 @@
-<div class='flex-column justify-content-center'>
+<div inlineSVG="assets/images/backend-integration-diagram.svg">
-  <div class='flex-row justify-content-center header mt-auto mb-1'> What is admin dashboard with backend</div>
-  <div class='flex-row justify-content-center subheader'> You pay for backend connection (UI) + backend</div>
-  <div class='flex-row align-items-start justify-content-around mt-4 mb-auto'>
-    <div class='dashboard-container h-100 flex-column ml-3 mr-3'>
-      <div class='headers-container flex-column'>
-        <div class='header'> NGX-admin dashboard</div>
-        <div class='subheader'> Open source part + backend connection</div>
-      </div>
-      <div class='dashboard-content border-dashed pad1 flex-column justify-content-center'>
-        <div class='item mb-3'>
-          <div class='header'> REST Data Access</div>
-        </div>
-        <div class='flex-column border-dashed mb-3 p-3'>
-          <div class='item mb-3'>
-            <div class='header'> Nebular Components</div>
-          </div>
-          <div class='flex-row w-100'>
-            <div class='item flex-grow-1 mr-2'>
-              <div class='header'> Auth</div>
-            </div>
-            <div class='item flex-grow-1'>
-              <div class='header'> Security</div>
-            </div>
-          </div>
-        </div>
-        <div class='item mb-3'>
-          <div class='header'> Angular</div>
-        </div>
-      </div>
-    </div>
-    <div class='json-container mt-auto mb-auto header2 align-items-center'>
-      <nb-icon icon='arrow-back-outline'></nb-icon>
-      <div>JSON</div>
-      <nb-icon icon='arrow-forward-outline'></nb-icon>
-    </div>
-    <div class='backend-container h-100 flex-column ml-3 mr-3'>
-      <div class='headers-container flex-column'>
-        <div class='header justify-content-center'> Backend</div>
-      </div>
-      <div class='backend-content border-dashed pad1 flex-column justify-content-center'>
-        <div class='flex-column border-dashed mb-3 p-3'>
-          <div class='item mb-3'>
-            <div class='header'> Web API</div>
-            <div class='subheader'> Backend Interface</div>
-          </div>
-          <div class='item mb-3'>
-            <div class='header'> Service</div>
-            <div class='subheader'> Data organization Business logic</div>
-          </div>
-          <div class='item'>
-            <div class='header'> Security</div>
-            <div class='subheader'> Authentication, Authorization</div>
-          </div>
-        </div>
-        <div class='flex-row w-100'>
-          <div class='flex-column flex-grow-1 mr-3'>
-            <div class='item mb-3'>
-              <div class='header'> Repository</div>
-              <div class='subheader'> Data access</div>
-            </div>
-            <div class='item'>
-              <div class='header'> Entity Framework</div>
-              <div class='subheader'> Data transformation</div>
-            </div>
-          </div>
-          <div class='item h-100 flex-grow-1 mr-3'>
-            <div class='item'>
-              <div class='header'> Data Base</div>
-              <div class='subheader'>
-                <div>Data of product</div>
-                <div>+</div>
-                <div>Backend data (examples)</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss

@@ -2,107 +2,28 @@
 
 @include nb-install-component() {
   width: 100%;
-  height: 0;
-  position: relative;
-  padding-top: 80%; /* Aspect Ratio */
-  //background-color: transparentize(red, 0.8);
-  font-size: 0.9vw;
 
-  $subheader-color: nb-theme(text-hint-color);
+  ::ng-deep svg {
-
+    path.card-header, path.subcard-header, path.diagram-header {
-  .header, .subheader {
+      fill: nb-theme(text-basic-color);
-    justify-content: center;
-  }
-
-  & > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin-bottom: 0;
-
-    & > .header {
-      font-size: 1.25em;
-      font-weight: bold;
     }
 
-    & > .subheader {
+    path.card-subheader, path.subcard-subheader, path.diagram-subheader {
-      font-size: 0.9em;
+      fill: nb-theme(text-hint-color);
-      color: $subheader-color;
     }
-  }
 
-  div {
+    rect.card-background {
-    display: flex;
+      fill: nb-theme(background-basic-color-2);
-    text-align: center;
+      stroke: nb-theme(border-basic-color-5);
-  }
-
-  .json-container {
-    font-weight: bold;
-    div {
-      margin: 0 1em;
     }
-  }
 
-  .headers-container {
+    rect.subcard-background {
-    height: 2.5rem;
+      fill: nb-theme(background-basic-color-1);
-
-    & > .header {
-      font-size: 0.9em;
-      height: 0.9rem;
-      font-weight: bold;
     }
-    & > .subheader {
-      font-size: 0.7em;
-      height: 0.7rem;
-      color: $subheader-color;
-    }
-  }
 
-  .dashboard-container {
+    path.subcard-border {
-    width: 40%;
+      fill: nb-theme(background-basic-color-2);
-  }
+      stroke: nb-theme(border-basic-color-5);
-
-  .json-container {
-    width: fit-content;
-
-    nb-icon {
-      width: 0.75em;
-      height: 0.75em;
-    }
-  }
-
-  .backend-container {
-    width: 40%;
-  }
-
-  .border-dashed {
-    border: 2px dashed nb-theme(border-basic-color-4);
-  }
-
-  .pad1 {
-    background-color: transparentize(nb-theme(background-basic-color-2), 0.5);
-    padding: 1em;
-    height: 100%;
-  }
-
-  .item {
-    background-color: nb-theme(background-basic-color-1);
-    justify-content: center;
-    padding: 0.5em 0;
-    flex-direction: column;
-    & > .header {
-      font-size: 0.7em;
-      font-weight: bold;
-      line-height: 1.1em;
-    }
-    & > .subheader {
-      font-size: 0.6em;
-      color: $subheader-color;
-      line-height: 1em;
-      flex-direction: column;
-      align-items: center;
     }
   }
 }

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts

@@ -1,15 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-backend-integration-diagram',
   templateUrl: './backend-integration-diagram.component.html',
   styleUrls: ['./backend-integration-diagram.component.scss'],
 })
-export class BackendIntegrationDiagramComponent implements OnInit {
+export class BackendIntegrationDiagramComponent {}
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/pages/backend-integration/integration-description/integration-description.component.scss

@@ -8,27 +8,23 @@
   padding: 1rem 2rem;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
 
-  .header, .header2 {
+  .h6 {
-    font-weight: bold;
-    font-size: 1.25rem;
     margin-bottom: 1rem;
   }
 
-  .subheader {
+  .subtitle {
-    font-size: 1rem;
+    margin-bottom: 3rem;
-    line-height: 1.5rem;
-    margin-bottom: 5rem;
   }
 
   .features-list {
-    list-style-type: none;
+    list-style-type: '- ';
     padding-left: 0;
   }
 
   a {
-    width: fit-content;
+    width: auto;
+    align-self: flex-start;
     margin-top: 2rem;
   }
 }

src/app/pages/backend-integration/integration-description/integration-description.component.ts

@@ -1,20 +1,20 @@
 import {Component, Input} from '@angular/core';
 
 @Component({
-  selector: 'ngx-integration-description[features][url][buttonText]',
+  selector: 'ngx-integration-description',
   template: `
-    <div class='header'> For why do you need a backend admin dashboard?</div>
+    <div class="h6"> For why do you need a backend admin dashboard?</div>
-    <div class='subheader'> To save up to 300 hours on development. To use backend as ready to use examples. </div>
+    <div class="subtitle"> To save up to 300 hours on development. To use backend as ready to use examples. </div>
-    <div class='header2'> Features </div>
+    <div class="h6"> Features </div>
-    <ul class='features-list'>
+    <ul class="features-list">
-      <li *ngFor='let feature of features'
+      <li *ngFor="let feature of features"
-           class='feature'
+           class="feature"
       >
-        - {{ feature }}
+        {{ feature }}
       </li>
     </ul>
     <a nbButton
-       [href]='url'
+       [href]="url"
        status="primary"
        target="_blank"
     > {{buttonText}} </a>
@@ -26,7 +26,5 @@ export class IntegrationDescriptionComponent {
   @Input() features: string[];
   @Input() url: string;
   @Input() buttonText: string;
-
+  
-  constructor() { }
-
 }