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