Nebular 11

.vscode/settings.json

@@ -20,7 +20,7 @@
     },
     "**/*.js.map": true,
 
-    // exclude @nebular build folders
+    // exclude @commudle build folders
     "**/dist": true
   }
 }

CONTRIBUTING.md

@@ -114,9 +114,9 @@ That's it! Thank you for your contribution!
   - playground - independent module with runnable examples for each feature
   - backend - Small backend example
   - framework - Framework itself, divided into npm packages
-    - theme - `@nebular/theme` npm package, main framework package
-    - auth - `@nebular/auth` npm package, auth package (login, register, etc)
-    - security - `@nebular/security` npm package, security framework package
+    - theme - `@commudle/theme` npm package, main framework package
+    - auth - `@commudle/auth` npm package, auth package (login, register, etc)
+    - security - `@commudle/security` npm package, security framework package
 
 ## <a name="rules"></a> Coding Rules
 

README.md

@@ -1,8 +1,8 @@
-# Nebular [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design?utm_campaign=eva_design%20-%20home%20-%20nebular%20github%20readme&utm_source=nebular&utm_medium=referral&utm_content=github_readme_hero_pic) [![npm](https://img.shields.io/npm/l/@nebular/theme.svg)]() [![npm](https://img.shields.io/npm/dt/@nebular/theme.svg)](https://www.npmjs.com/package/@nebular/theme) [![Codecov](https://img.shields.io/codecov/c/github/akveo/nebular/master.svg?style=flat-square)](https://codecov.io/gh/akveo/nebular/branch/master)
+# Nebular [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design?utm_campaign=eva_design%20-%20home%20-%20nebular%20github%20readme&utm_source=nebular&utm_medium=referral&utm_content=github_readme_hero_pic) [![npm](https://img.shields.io/npm/l/@commudle/theme.svg)]() [![npm](https://img.shields.io/npm/dt/@commudle/theme.svg)](https://www.npmjs.com/package/@commudle/theme) [![Codecov](https://img.shields.io/codecov/c/github/akveo/nebular/master.svg?style=flat-square)](https://codecov.io/gh/akveo/nebular/branch/master)
 
 [Documentation](https://akveo.github.io/nebular/docs/getting-started/what-is-nebular?utm_campaign=nebular%20-%20home%20-%20nebular%20github%20readme&utm_source=nebular&utm_medium=referral&utm_content=documentation) | [Stackblitz Template](https://stackblitz.com/github/akveo/nebular-seed) | [UI Bakery](https://uibakery.io?utm_campaign=ui_bakery%20-%20home%20-%20nebular%20readme&utm_source=nebular&utm_medium=referral&utm_content=angular_ui_builder) - Angular UI Builder | [Angular templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=nebular&utm_medium=referral&utm_content=github%20readme%20top%20angular%20templates%20link)
 
-Nebular is a customizable Angular 10 UI Library with a focus on beautiful design and ability to adapt it to your brand easily. It comes with 4 stunning visual themes, a powerful theming engine with runtime theme switching and support of custom css properties mode. Nebular is based on Eva Design System specifications.
+Nebular is a customizable Angular UI Library with a focus on beautiful design and ability to adapt it to your brand easily. It comes with 4 stunning visual themes, a powerful theming engine with runtime theme switching and support of custom css properties mode. Nebular is based on Eva Design System specifications.
 
 <a href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20nebular%20github%20readme&utm_source=nebular&utm_medium=referral&utm_content=nebular_readme_pic"><img src="https://i.imgur.com/vu5Ro3A.jpg"></a>
 
@@ -20,7 +20,7 @@ Nebular is a customizable Angular 10 UI Library with a focus on beautiful design
 You can install Nebular with Angular CLI:
 
 ```bash
-ng add @nebular/theme
+ng add @commudle/theme
 ```
 
 Configuration will be done automatically.

angular.json

@@ -208,7 +208,6 @@
             ],
             "styles": [
               "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
-              "node_modules/bootstrap/dist/css/bootstrap.css",
               {
                 "inject": true,
                 "bundleName": "algolia",
@@ -221,7 +220,9 @@
               "node_modules/pace-js/pace.min.js",
               "node_modules/docsearch.js/dist/cdn/docsearch.min.js"
             ],
-            "allowedCommonJsDependencies": ["highlight.js"]
+            "allowedCommonJsDependencies": [
+              "highlight.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -613,6 +614,12 @@
     },
     "@schematics/angular:application": {
       "strict": true
+    },
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
     }
   },
   "cli": {

docs/app/@theme/components/for-business/for-business.component.ts

@@ -5,7 +5,7 @@
  */
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NbDialogService } from '@nebular/theme';
+import { NbDialogService } from '@commudle/theme';
 
 import { NgdHubspotFormDialogComponent } from '../hubspot-form-dialog/hubspot-form-dialog.component';
 
@@ -42,8 +42,7 @@ export class NgdForBusinessComponent {
     'The review of your project.',
   ];
 
-  constructor(private dialogService: NbDialogService) {
-  }
+  constructor(private dialogService: NbDialogService) {}
 
   openDialog(): void {
     const context = {

docs/app/@theme/components/fragment-target/fragment-target.directive.ts

@@ -2,7 +2,7 @@ import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, PLATFORM_ID, R
 import { ActivatedRoute, Router } from '@angular/router';
 import { timer, Subject } from 'rxjs';
 import { takeUntil, publish, refCount, filter, tap, debounce } from 'rxjs/operators';
-import { NB_WINDOW, NbLayoutScrollService } from '@nebular/theme';
+import { NB_WINDOW, NbLayoutScrollService } from '@commudle/theme';
 import { NgdVisibilityService } from '../../../@theme/services';
 
 const OBSERVER_OPTIONS = { rootMargin: '-100px 0px 0px' };
@@ -11,7 +11,6 @@ const OBSERVER_OPTIONS = { rootMargin: '-100px 0px 0px' };
   selector: '[ngdFragment]',
 })
 export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
-
   private readonly marginFromTop = 120;
   private isCurrentlyViewed: boolean = false;
   private isScrolling: boolean = false;
@@ -48,7 +47,8 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
         }
       });
 
-    this.visibilityService.isTopmostVisible(this.el.nativeElement, OBSERVER_OPTIONS)
+    this.visibilityService
+      .isTopmostVisible(this.el.nativeElement, OBSERVER_OPTIONS)
       .pipe(takeUntil(this.destroy$))
       .subscribe((isTopmost: boolean) => {
         this.isCurrentlyViewed = isTopmost;
@@ -57,13 +57,14 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
         }
       });
 
-    this.scrollService.onScroll()
+    this.scrollService
+      .onScroll()
       .pipe(
-        tap(() => this.isScrolling = true),
+        tap(() => (this.isScrolling = true)),
         debounce(() => timer(100)),
         takeUntil(this.destroy$),
       )
-      .subscribe(() => this.isScrolling = false);
+      .subscribe(() => (this.isScrolling = false));
   }
 
   selectFragment() {

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, OnInit } from '@angular/core';
-import { NB_WINDOW, NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { NB_WINDOW, NbMenuItem, NbSidebarService } from '@commudle/theme';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
@@ -15,35 +15,36 @@ import { NgdVersionService, Version } from '../../services';
       </button>
       <div class="logo">
         <a routerLink="/">Nebular</a>
-        <span class="version" *ngIf="currentVersionName$ | async">
-          v{{ currentVersionName$ | async }}
-        </span>
+        <span class="version" *ngIf="currentVersionName$ | async"> v{{ currentVersionName$ | async }} </span>
       </div>
     </div>
     <div class="section middle">
       <nb-menu [items]="mainMenu"></nb-menu>
       <ngd-search *ngIf="showSearch"></ngd-search>
-      <nb-select class="version-select"
-                 *ngIf="(showVersionSelect$ | async)"
-                 [selected]="currentVersion$ | async"
-                 (selectedChange)="redirectToVersion($event)">
+      <nb-select
+        class="version-select"
+        *ngIf="showVersionSelect$ | async"
+        [selected]="currentVersion$ | async"
+        (selectedChange)="redirectToVersion($event)"
+      >
         <nb-option *ngFor="let version of supportedVersions$ | async" [value]="version">
           {{ version.name }}
         </nb-option>
       </nb-select>
     </div>
     <div class="section right">
-      <iframe class="stars"
-              src="https://ghbtns.com/github-btn.html?user=akveo&repo=nebular&type=star&count=true"
-              frameborder="0"
-              scrolling="0">
+      <iframe
+        class="stars"
+        src="https://ghbtns.com/github-btn.html?user=akveo&repo=nebular&type=star&count=true"
+        frameborder="0"
+        scrolling="0"
+      >
       </iframe>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgdHeaderComponent implements OnInit {
-
   @Input() showSearch = true;
   @HostBinding('class.docs-page') @Input() isDocs = false;
 
@@ -91,11 +92,10 @@ export class NgdHeaderComponent implements OnInit {
     this.currentVersionName$ = this.currentVersion$.pipe(map((version: Version) => version.name));
     this.supportedVersions$ = this.versionService.getSupportedVersions();
 
-    this.showVersionSelect$ = this.supportedVersions$
-      .pipe(
-        map((versions: Version[]) => versions.length > 0),
-        startWith(false),
-      );
+    this.showVersionSelect$ = this.supportedVersions$.pipe(
+      map((versions: Version[]) => versions.length > 0),
+      startWith(false),
+    );
 
     if (!this.isDocs) {
       this.mainMenu.push({

docs/app/@theme/components/hero/hero.component.ts

@@ -5,7 +5,7 @@
  */
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NbDialogService } from '@nebular/theme';
+import { NbDialogService } from '@commudle/theme';
 
 import { NgdHubspotFormDialogComponent } from '../hubspot-form-dialog/hubspot-form-dialog.component';
 
@@ -16,63 +16,49 @@ import { NgdHubspotFormDialogComponent } from '../hubspot-form-dialog/hubspot-fo
     <div class="block">
       <h1>Nebular: Customizable Angular UI Kit</h1>
       <p class="hero-promo">
-        Nebular is a customizable Angular UI library that contains 40+ UI components, four visual themes, and Auth and Security modules.
-        Recognized at the prestigious AngularConnect 2018, this Angular framework allows focusing on beautiful designs to adapt them to your brand.
-        Nebular is free of charge and open-source.
+        Nebular is a customizable Angular UI library that contains 40+ UI components, four visual themes, and Auth and
+        Security modules. Recognized at the prestigious AngularConnect 2018, this Angular framework allows focusing on
+        beautiful designs to adapt them to your brand. Nebular is free of charge and open-source.
       </p>
       <div class="btns-wrapper">
         <a class="btn get-started" routerLink="docs">Get Started</a>
-        <a class="btn" href="https://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20website%20-%20nebular%20landing%20-%20traffic&utm_source=nebular&utm_medium=referral&utm_content=nebular_docs_home_hero"
-           target="_blank">Demo</a>
+        <a
+          class="btn"
+          href="https://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20website%20-%20nebular%20landing%20-%20traffic&utm_source=nebular&utm_medium=referral&utm_content=nebular_docs_home_hero"
+          target="_blank"
+          >Demo</a
+        >
         <button (click)="showDownloadDialog()" class="btn download">Download</button>
       </div>
       <div class="hero-features">
         <div class="hero-feature">
-          <div class="feature-key">
-            40+
-          </div>
-          <h3 class="feature-title">
-            Angular Components
-          </h3>
+          <div class="feature-key">40+</div>
+          <h3 class="feature-title">Angular Components</h3>
         </div>
         <div class="hero-feature">
-          <div class="feature-key">
-            4
-          </div>
-          <h3 class="feature-title">
-            Visual themes
-          </h3>
+          <div class="feature-key">4</div>
+          <h3 class="feature-title">Visual themes</h3>
         </div>
         <div class="hero-feature">
-          <div class="feature-key">
-            3
-          </div>
-          <h3 class="feature-title">
-            Auth strategies
-          </h3>
+          <div class="feature-key">3</div>
+          <h3 class="feature-title">Auth strategies</h3>
         </div>
         <div class="hero-feature">
           <div class="feature-key">
             <nb-icon icon="lock"></nb-icon>
           </div>
-          <h3 class="feature-title">
-            Security
-          </h3>
+          <h3 class="feature-title">Security</h3>
         </div>
       </div>
     </div>
     <div class="right-block">
-      <div class="hero-components">
-      </div>
+      <div class="hero-components"></div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgdHeroComponent {
-
-  constructor(
-    private dialogService: NbDialogService,
-  ) {}
+  constructor(private dialogService: NbDialogService) {}
 
   showDownloadDialog(): void {
     const context = {

docs/app/@theme/components/hubspot-cta/akveo-services-banner.component.ts

@@ -1,25 +1,26 @@
 import { Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core';
-import { NB_DOCUMENT, NB_WINDOW } from '@nebular/theme';
+import { NB_DOCUMENT, NB_WINDOW } from '@commudle/theme';
 
 @Component({
   selector: 'ngd-akveo-services-banner',
   template: `
-    <span #wrapper class="hs-cta-wrapper" id="hs-cta-wrapper-{{ctaId}}">
-      <span class="hs-cta-node hs-cta-{{ctaId}}" id="hs-cta-{{ctaId}}">
-        <a href="https://cta-redirect.hubspot.com/cta/redirect/2452262/{{ctaId}}" target="_blank">
-          <img class="hs-cta-img"
-               id="hs-cta-img-{{ctaId}}"
-               [height]="height"
-               [width]="width"
-               src="https://no-cache.hubspot.com/cta/default/2452262/{{ctaId}}.png"
-               alt="Services on Angular"/>
+    <span #wrapper class="hs-cta-wrapper" id="hs-cta-wrapper-{{ ctaId }}">
+      <span class="hs-cta-node hs-cta-{{ ctaId }}" id="hs-cta-{{ ctaId }}">
+        <a href="https://cta-redirect.hubspot.com/cta/redirect/2452262/{{ ctaId }}" target="_blank">
+          <img
+            class="hs-cta-img"
+            id="hs-cta-img-{{ ctaId }}"
+            [height]="height"
+            [width]="width"
+            src="https://no-cache.hubspot.com/cta/default/2452262/{{ ctaId }}.png"
+            alt="Services on Angular"
+          />
         </a>
       </span>
     </span>
   `,
   styleUrls: ['akveo-services-banner.component.scss'],
 })
-
 export class AkveoServicesBanner implements OnInit {
   @Input() ctaId: string;
 
@@ -29,10 +30,7 @@ export class AkveoServicesBanner implements OnInit {
 
   @ViewChild('wrapper', { static: true }) wrapper: ElementRef;
 
-  constructor(private host: ElementRef,
-              @Inject(NB_DOCUMENT) private document,
-              @Inject(NB_WINDOW) private window) {
-  }
+  constructor(private host: ElementRef, @Inject(NB_DOCUMENT) private document, @Inject(NB_WINDOW) private window) {}
 
   ngOnInit() {
     if (this.window?.hbspt?.cta?.load) {
@@ -48,9 +46,9 @@ export class AkveoServicesBanner implements OnInit {
 
   private loadHubSpotCtaScript() {
     this.wrapper.nativeElement.appendChild(
-      this.document.createRange().createContextualFragment(
-        `<script type="text/javascript" src="https://js.hscta.net/cta/current.js"></script>`
-      )
+      this.document
+        .createRange()
+        .createContextualFragment(`<script type="text/javascript" src="https://js.hscta.net/cta/current.js"></script>`),
     );
     this.wrapper.nativeElement.querySelector('script').onload = this.loadCta.bind(this);
   }