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 NavigationBaseConfig, VerticalNavigationConfig, or ApplicationLauncherConfig
- NavigationModule: Use ApplicationLauncherModule or VerticalNavigationModule

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

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

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 { ApplicationLauncherConfig } from './application-launcher-config';
 
 describe('Application Launcher componet', () => {
   let comp: ApplicationLauncherComponent;
   let fixture: ComponentFixture<ApplicationLauncherComponent>;
-  let navigationItems: NavigationItemConfig[];
+  let navigationItems: ApplicationLauncherConfig[];
 
   beforeEach(() => {
     navigationItems = [{

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

@@ -5,17 +5,16 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { NavigationItemConfig } from '../navigation-item-config';
+import { ApplicationLauncherConfig } from './application-launcher-config';
 
+/**
+ * Application launcher component
+ */
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'pfng-application-launcher',
   templateUrl: './application-launcher.component.html'
 })
-
-/**
- * Application launcher component
- */
 export class ApplicationLauncherComponent  implements OnInit {
   /**
    * Disable the application launcher button, default: false
@@ -25,7 +24,7 @@ export class ApplicationLauncherComponent  implements OnInit {
   /**
    * The navigation items used to build the menu
    */
-  @Input() items: NavigationItemConfig[];
+  @Input() items: ApplicationLauncherConfig[];
 
   /**
    *  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 navigation 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 { ApplicationLauncherConfig } from '../application-launcher-config';
 
 @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: ApplicationLauncherConfig[];
   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 { ApplicationLauncherModule } from '../application-launcher.module';
 import { DemoComponentsModule } from '../../../../demo/components/demo-components.module';
 import { ApplicationLauncherExampleComponent } from './application-launcher-example.component';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
   imports: [
+    ApplicationLauncherModule,
     CommonModule,
     DemoComponentsModule,
     FormsModule,
     RouterModule,
-    NavigationModule,
     TabsModule.forRoot()
   ],
   declarations: [ApplicationLauncherExampleComponent],

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

@@ -0,0 +1,3 @@
+export { ApplicationLauncherComponent } from './application-launcher.component';
+export { ApplicationLauncherConfig } from './application-launcher-config';
+export { ApplicationLauncherModule } from './application-launcher.module';

src/app/navigation/index.ts

@@ -1,4 +1,6 @@
-export { NavigationItemConfig } from './navigation-item-config';
-export { NavigationModule } from './navigation.module';
-export { VerticalNavigationComponent } from './vertical-navigation/vertical-navigation.component';
-export { ApplicationLauncherComponent } from './application-launcher/application-launcher.component';
+export { NavigationConfigBase } from './navigation-config-base';
+export { NavigationItemConfig } from './navigation-item-config'; // @deprecated
+export { NavigationModule } from './navigation.module'; // @deprecated
+
+export * from './application-launcher/index';
+export * from './vertical-navigation/index';

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

@@ -0,0 +1,69 @@
+/**
+ * A config containing properties for navigation items
+ */
+export class NavigationConfigBase {
+  /**
+   * 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[];
+
+  /**
+   * Navigation children (used for secondary and tertiary navigation)
+   */
+  children?: NavigationConfigBase[];
+
+  /**
+   * 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/navigation-item-config.ts

@@ -1,70 +1,15 @@
+import { NavigationConfigBase } from './navigation-config-base';
+import {VerticalNavigationConfig} from './vertical-navigation/vertical-navigation-config';
+
 /**
  * A config containing properties for navigation items
+ *
+ * @deprecated Use NavigationConfigBase
  */
-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[];
-
-  /**
-   * Navigation children (used for secondary and tertiary navigation)
-   */
-  children?: NavigationItemConfig[];
-
-  /**
-   * 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;
+export class NavigationItemConfig extends NavigationConfigBase {
+  constructor() {
+    super();
+    console.log('patternfly-ng: NavigationItemConfig is deprecated; use NavigationConfigBase, ' +
+      'ApplicationLauncherConfig, or VerticalNavigationConfig');
+  }
 }

src/app/navigation/navigation.module.ts

@@ -4,26 +4,41 @@ 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 { VerticalNavigationModule } from './vertical-navigation/vertical-navigation.module';
 import { WindowReference } from '../utilities/window.reference';
-import { ApplicationLauncherComponent } from './application-launcher/application-launcher.component';
 
 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: [
+    ApplicationLauncherModule,
     BsDropdownModule.forRoot(),
     CommonModule,
-    TooltipModule.forRoot()
+    TooltipModule.forRoot(),
+    VerticalNavigationModule
   ],
-  declarations: [ ApplicationLauncherComponent, VerticalNavigationComponent],
-  exports: [ ApplicationLauncherComponent, VerticalNavigationComponent],
+  exports: [ApplicationLauncherComponent, VerticalNavigationComponent],
   providers: [BsDropdownConfig, TooltipConfig, WindowReference]
 })
-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

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

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

@@ -1,24 +1,24 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 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 { RouterModule } from '@angular/router';
+import { VerticalNavigationModule } from '../vertical-navigation.module';
 
 @NgModule({
   imports: [
+    BsDropdownModule.forRoot(),
     CommonModule,
     DemoComponentsModule,
     FormsModule,
     RouterModule,
-    NavigationModule,
     TabsModule.forRoot(),
-    BsDropdownModule.forRoot()
+    VerticalNavigationModule
   ],
   declarations: [VerticalNavigationExampleComponent],
   exports: [VerticalNavigationExampleComponent],

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

@@ -0,0 +1,3 @@
+export { VerticalNavigationComponent } from './vertical-navigation.component';
+export { VerticalNavigationConfig } from './vertical-navigation-config';
+export { VerticalNavigationModule } from './vertical-navigation.module';

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

@@ -0,0 +1,6 @@
+import { NavigationConfigBase } from '../navigation-config-base';
+
+/**
+ * A config containing properties for vertical navigation items
+ */
+export class VerticalNavigationConfig extends NavigationConfigBase {}