Panel Navigator

This Angular Module (Component) allows you to have dynamic navigation with icons and status type and navigation controlloer.

Installation

npm install panel-navigation-scroller

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    PanelNavigationScrollerModule
  ],

Use

To use in your component, use the following tag for a basic setup

<wav-panel-navigator
    [title]="title"
    [description]="description"
    [data]="dataObservable"
></wav-panel-navigator>

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | title | STRING | NULL | title for navigation section | | description | STRING | NULL | description below title area for navigation | | data | Object or Observable | [] | data for items | | navigation | BOOLEAN | FALSE | navigation controller at top of navigation | | navigationTitle | STRING | NULL | navigation controller title | | navigationColor | STRING | NULL | navigation controller background color | | navigationTextColor | STRING | NULL | navigation controller text color | | navigationRedirect | STRING | NULL | back button on navigation controller will appear and redirect to this route | | bindSelectionToTitle | BOOLEAN | NULL | the selected item will be reflected in the navigation controller | | stateTypes | OBJECTS[] | NULL | states for items - appears on right of menu items | | lineAbove | BOOLEAN | FALSE | add line above navigation list | | lineBelow |BOOLEAN | FALSE | add line below navigation list | | displayIcons |BOOLEAN | FALSE | display icons from data to line items on left | | displayStates |BOOLEAN | FALSE | display state icons from data to line items on left | | enableScrolling |BOOLEAN | FALSE | add line below navigation list |

Data Structure

Object or Observable, this is the data strtucture object that defines each list item. All, Some none of the properties may be provided for eah list item. You do need at least a name property to display something in the list.

  data: MenuItem[] = [
    { name: 'Vendor Onboarding', disabled: false, icon: 'person', iconColor: 'purple', color: 'green', state: 1, ref: 'sec2'},
    { name: 'Required Information', disabled: false, state: 0 },
    { name: 'Private Details', disabled: false, state: -1 },
    { name: 'Negotiated Terms', disabled: false, state: 2 },
  ]

Inputs

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | name | STRING | NULL | list item text | | disabled | STRING | NULL | disable list item | | icon | STRING | NULL | icon to use (mat icons) | | iconColor | STRING | NULL | icon (left on list item color) color | | color | STRING | NULL | color of the text | | state | STRING | NULL | the state ID (State Types) that is assigned to this list item | | ref | STRING | NULL | this is the div reference ID for the target to be scrolled to |

Outputs

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | selectedItem | MenuItem | NULL | menu item object |

State Type Structure

This is the different state types (icon on the right of list) that is provided when a state of a menu item has changed Provided all the types that are assigned to the data structure. if no type is provided, nothing will be rendered.

stateTypes: StateType[] = [
  {name: 'testing', icon: '', value: 0, color: ''},
  {name: 'approved', icon: 'check', value: 1, color: 'purple'},
  {name: 'declined', icon: 'warning', value: -1, color: 'red'},
  {name: 'warning', icon: 'refresh', value: 2, color: 'orange'},
]

Properties

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | name | STRING | NULL | text to appear on left of state icon | | icon | STRING | NULL | mat icon anme | | value | STRING | NULL | value that corresponds to the state value of data | | color | STRING | NULL | color for icon and text |

Sample Configurations

Here is a basic setup:

<wav-panel-navigator
    [title]="title"
    [description]="description"
    [data]="dataObservable"
></wav-panel-navigator>

Here is max setup

<wav-panel-navigator
    [navigation]="true"
    [navigationRedirect]="'default'"
    [title]="title"
    [description]="description"
    [data]="dataObservable"
    [bindSelectionToTitle]="true"
    [stateTypes]="stateTypes"
    [displayIcons]="false"
    [displayStates]="true"
></wav-panel-navigator>

Scrolling (Comming Soon)

There is a scrollTo binding thats being implemented - comming soon