feat(package): individual module imports for navigation components (#393)

This allows components to be imported individually without having to install an unused, optional dependency.

Deprecations

- NavigationItemConfig: Use VerticalNavigationItem or ApplicationLauncherItem
- NavigationModule: Use ApplicationLauncherModule or VerticalNavigationModule

Author: dlabrecq

src/app/navigation/application-launcher/application-launcher-item.ts

@@ -0,0 +1,6 @@
+import { NavigationItemBase } from '../navigation-item-base';
+
+/**
+ * A config containing properties for application launcher items
+ */
+export class ApplicationLauncherItem extends NavigationItemBase {}

src/app/navigation/application-launcher/application-launcher.component.spec.ts

@@ -12,12 +12,12 @@ import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap';
 
 import { ApplicationLauncherComponent } from './application-launcher.component';
-import { NavigationItemConfig } from '../navigation-item-config';
+import { ApplicationLauncherItem } from './application-launcher-item';
 
 describe('Application Launcher componet', () => {
   let comp: ApplicationLauncherComponent;
   let fixture: ComponentFixture<ApplicationLauncherComponent>;
-  let navigationItems: NavigationItemConfig[];
+  let navigationItems: ApplicationLauncherItem[];
 
   beforeEach(() => {
     navigationItems = [{

src/app/navigation/application-launcher/application-launcher.component.ts

@@ -5,7 +5,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { NavigationItemConfig } from '../navigation-item-config';
+import { ApplicationLauncherItem } from './application-launcher-item';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -25,7 +25,7 @@ export class ApplicationLauncherComponent  implements OnInit {
   /**
    * The navigation items used to build the menu
    */
-  @Input() items: NavigationItemConfig[];
+  @Input() items: ApplicationLauncherItem[];
 
   /**
    *  Use a custom label for the launcher, default: Application Launcher

src/app/navigation/application-launcher/application-launcher.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+
+import { ApplicationLauncherComponent } from './application-launcher.component';
+
+/**
+ * A module containing objects associated with the application laucnher components
+ */
+@NgModule({
+  imports: [
+    BsDropdownModule.forRoot(),
+    CommonModule
+  ],
+  declarations: [ApplicationLauncherComponent],
+  exports: [ApplicationLauncherComponent],
+  providers: [BsDropdownConfig]
+})
+export class ApplicationLauncherModule {}

src/app/navigation/application-launcher/example/application-launcher-example.component.ts

@@ -4,7 +4,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { NavigationItemConfig } from '../../navigation-item-config';
+import { ApplicationLauncherItem } from '../application-launcher-item';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -13,7 +13,7 @@ import { NavigationItemConfig } from '../../navigation-item-config';
 })
 export class ApplicationLauncherExampleComponent  implements OnInit {
   disabled: boolean = false;
-  navigationItems: NavigationItemConfig[];
+  navigationItems: ApplicationLauncherItem[];
   showIcons: boolean = true;
 
   ngOnInit(): void {

src/app/navigation/application-launcher/example/application-launcher-example.module.ts

@@ -4,18 +4,18 @@ import { NgModule } from '@angular/core';
 
 import { TabsetConfig, TabsModule } from 'ngx-bootstrap/tabs';
 
-import { NavigationModule } from '../../navigation.module';
 import { DemoComponentsModule } from '../../../../demo/components/demo-components.module';
 import { ApplicationLauncherExampleComponent } from './application-launcher-example.component';
+import { ApplicationLauncherModule } from '../application-launcher.module';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
   imports: [
+    ApplicationLauncherModule,
     CommonModule,
     DemoComponentsModule,
     FormsModule,
     RouterModule,
-    NavigationModule,
     TabsModule.forRoot()
   ],
   declarations: [ApplicationLauncherExampleComponent],

src/app/navigation/navigation-item-base.ts

@@ -0,0 +1,29 @@
+/**
+ * A config containing properties for navigation items
+ */
+export class NavigationItemBase {
+  /**
+   * Badges to display information about the navigation item
+   */
+  badges?: any[];
+
+  /**
+   * The icon class to use for icons displayed to the left of text
+   */
+  iconStyleClass?: string;
+
+  /**
+   * Target for URL (e.g., _blank)
+   */
+  target?: string;
+
+  /**
+   * Title for the navigation item
+   */
+  title: string;
+
+  /**
+   * Link to navigate to
+   */
+  url?: string;
+}

src/app/navigation/navigation-item-config.ts

@@ -1,28 +1,11 @@
+import { NavigationItemBase } from './navigation-item-base';
+
 /**
  * A config containing properties for navigation items
+ *
+ * @deprecated Use VerticalNavigationItem, or ApplicationLauncherItem
  */
-export class NavigationItemConfig {
-
-  /**
-   * Title for the navigation item
-   */
-  title: string;
-
-  /**
-   * The icon class to use for icons displayed to the left of text
-   */
-  iconStyleClass?: string;
-
-  /**
-   * Link to navigate to
-   */
-  url?: string;
-
-  /**
-   * Badges to display information about the navigation item
-   */
-  badges?: any[];
-
+export class NavigationItemConfig extends NavigationItemBase {
   /**
    * Navigation children (used for secondary and tertiary navigation)
    */
@@ -67,4 +50,10 @@ export class NavigationItemConfig {
    * Internal variable used for blur timeout
    */
   blurTimeout?: any;
+
+  constructor() {
+    super();
+    console.log('patternfly-ng: NavigationItemConfig is deprecated; use VerticalNavigationItem ' +
+      'or ApplicationLauncherItem');
+  }
 }

src/app/navigation/navigation.module.ts

@@ -1,29 +1,37 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { TooltipConfig, TooltipModule } from 'ngx-bootstrap/tooltip';
-
+import { ApplicationLauncherComponent } from './application-launcher/application-launcher.component';
+import { ApplicationLauncherModule } from './application-launcher/application-launcher.module';
 import { NavigationItemConfig } from './navigation-item-config';
 import { VerticalNavigationComponent } from './vertical-navigation/vertical-navigation.component';
-import { WindowReference } from '../utilities/window.reference';
-import { ApplicationLauncherComponent } from './application-launcher/application-launcher.component';
+import { VerticalNavigationModule } from './vertical-navigation/vertical-navigation.module';
 
 export {
   NavigationItemConfig
 };
 
 /**
  * A module containing objects associated with the navigation components
+ *
+ * @deprecated Use individual module imports
+ *
+ * import {
+ *   ApplicationLauncherModule,
+ *   VerticalNavigationModule
+ * } from 'patternfly-ng/navigation';
  */
 @NgModule({
   imports: [
-    BsDropdownModule.forRoot(),
+    ApplicationLauncherModule,
     CommonModule,
-    TooltipModule.forRoot()
+    VerticalNavigationModule
   ],
-  declarations: [ ApplicationLauncherComponent, VerticalNavigationComponent],
-  exports: [ ApplicationLauncherComponent, VerticalNavigationComponent],
-  providers: [BsDropdownConfig, TooltipConfig, WindowReference]
+  exports: [ ApplicationLauncherComponent, VerticalNavigationComponent]
 })
-export class NavigationModule {}
+export class NavigationModule {
+  constructor() {
+    console.log('patternfly-ng: NavigationModule is deprecated; use ApplicationLauncherModule ' +
+      'or VerticalNavigationModule');
+  }
+}

src/app/navigation/vertical-navigation/example/vertical-navigation-example.component.ts

@@ -1,10 +1,12 @@
 import {
   ChangeDetectorRef,
   Component,
-  OnInit, ViewEncapsulation
+  OnInit,
+  ViewEncapsulation
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { NavigationItemConfig } from '../../navigation-item-config';
+
+import { VerticalNavigationItem } from '../vertical-navigation-item';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -44,7 +46,7 @@ import { NavigationItemConfig } from '../../navigation-item-config';
 export class VerticalNavigationExampleComponent implements OnInit {
 
   showExample: boolean = false;
-  navigationItems: NavigationItemConfig[];
+  navigationItems: VerticalNavigationItem[];
   actionText: string = '';
 
   constructor(private chRef: ChangeDetectorRef, private router: Router) {
@@ -276,11 +278,11 @@ export class VerticalNavigationExampleComponent implements OnInit {
     this.chRef.detectChanges();
   }
 
-  onItemClicked($event: NavigationItemConfig): void {
+  onItemClicked($event: VerticalNavigationItem): void {
     this.actionText += 'Item Clicked: ' + $event.title + '\n';
   }
 
-  onNavigation($event: NavigationItemConfig): void {
+  onNavigation($event: VerticalNavigationItem): void {
     this.actionText += 'Navigation event fired: ' + $event.title + '\n';
   }
 }

src/app/navigation/vertical-navigation/example/vertical-navigation-example.module.ts

@@ -5,20 +5,20 @@ import { NgModule } from '@angular/core';
 import { TabsetConfig, TabsModule } from 'ngx-bootstrap/tabs';
 import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
-import { NavigationModule } from '../../navigation.module';
 import { DemoComponentsModule } from '../../../../demo/components/demo-components.module';
 import { VerticalNavigationExampleComponent } from './vertical-navigation-example.component';
+import { VerticalNavigationModule } from '../vertical-navigation.module';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
   imports: [
+    BsDropdownModule.forRoot(),
     CommonModule,
     DemoComponentsModule,
     FormsModule,
     RouterModule,
-    NavigationModule,
     TabsModule.forRoot(),
-    BsDropdownModule.forRoot()
+    VerticalNavigationModule
   ],
   declarations: [VerticalNavigationExampleComponent],
   exports: [VerticalNavigationExampleComponent],

src/app/navigation/vertical-navigation/vertical-navigation-item.ts

@@ -0,0 +1,51 @@
+import { NavigationItemBase } from '../navigation-item-base';
+
+/**
+ * A config containing properties for vertical navigation items
+ */
+export class VerticalNavigationItem extends NavigationItemBase {
+  /**
+   * Navigation children (used for secondary and tertiary navigation)
+   */
+  children?: VerticalNavigationItem[];
+
+  /**
+   * Indicate if the item should be active on load
+   */
+  activeOnLoad?: boolean;
+
+  /**
+   * Track the active state of the navigation item
+   */
+  trackActiveState?: boolean;
+
+  /**
+   * Track the hover state of the navigation item
+   */
+  trackHoverState?: boolean;
+
+  /**
+   * Indicates if the child secondary menu is opened
+   */
+  secondaryCollapsed?: boolean;
+
+  /**
+   * Indicates if the child tertiary menu is opened
+   */
+  tertiaryCollapsed?: boolean;
+
+  /**
+   * Indicates if this is a mobile item
+   */
+  mobileItem?: boolean;
+
+  /**
+   * Internal variable used for hovering timeout
+   */
+  hoverTimeout?: any;
+
+  /**
+   * Internal variable used for blur timeout
+   */
+  blurTimeout?: any;
+}

src/app/navigation/vertical-navigation/vertical-navigation.component.spec.ts

@@ -6,16 +6,16 @@ import {
 import { By } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
-import { NavigationItemConfig } from '../navigation-item-config';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TooltipModule } from 'ngx-bootstrap';
 import { VerticalNavigationComponent } from './vertical-navigation.component';
+import { VerticalNavigationItem } from './vertical-navigation-item';
 import { WindowReference } from '../../utilities/window.reference';
 
 describe('Vertical Navigation component - ', () => {
   let comp: VerticalNavigationComponent;
   let fixture: ComponentFixture<VerticalNavigationComponent>;
-  let navigationItems: NavigationItemConfig[];
+  let navigationItems: VerticalNavigationItem[];
   let navigateItem, clickItem;
 
   beforeEach(() => {