npm package: @next-level-integration/nli-timeline-lib
Description: The general structure of component: ```html 	<nli-timeline [showDatePicker]="" [visibleSteps]="" (onSelect)=""> 		<nli-timelineitem [model]=""></nli-timelineitem> 		<nli-timelineitem [model]=""></nli-timelineitem> 		... 	</nli-timeline> ```
Latest version: 1.2.0

# NliTimelineLib

The general structure of component:
```html
	<nli-timeline [showDatePicker]="" [visibleSteps]="" (onSelect)="">
		<nli-timelineitem [model]=""></nli-timelineitem>
		<nli-timelineitem [model]=""></nli-timelineitem>
		...
	</nli-timeline>
```

### Setup Steps:

1-at packege.json insert this line for dependency:Notice that this version number is not fixed and will be changed after every mudule bulding. 

	"dependencies": {
        "nli-timeline-lib": "1.2.0",
    },
   
2-for importing material icons and fonts add this line to your main html file for example:index.html :
```html
	<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?					    family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic"
          type="text/css" rel="stylesheet">
  </head>  
```
3-to import TimeLine component to your project insert this lines to app.module.ts:

    import { LibModule as TimelineModule} from 'nli-timeline-lib';
    @NgModule({
      declarations: [
            ...
      ],
      imports: [
        ...
        TimelineModule,
        ...
       ],
      providers: [
        ...	
                 ],
      bootstrap: [AppComponent]
    });

4- Apply material theme. create app-theme.scss file and apply material theme. You should also add style
	dependency in `.angular-cli.json` file:
    
    "styles": [
    ...
    "app-theme.scss"
    ],

Do not forget to include timeline theme.
The sample `app-theme.scss` exists at the end of this file.


5-Execute `npm install` to install nli-time-line module;

### Usage example:


in .ts file you can write this code for creating timeline model:
```java
import { TimeLineStepModel } from 'nli-timeline-lib/lib/timeline/timelineitem/timelineitem-model';
import { TimeLineModel } from 'nli-timeline-lib/lib/timeline/timeline-model';

timelineModel: TimeLineModel = new TimeLineModel(5, [
                                                           new TimeLineStepModel('17','Zählerwechsel17', new Date('2014-04-03')),
                                                           new TimeLineStepModel('18','Zählerwechsel18', new Date('2015-04-03')),
                                                           new TimeLineStepModel('1','Zählerwechsel1', new Date('2016-04-03')),
                                                           new TimeLineStepModel('2','Zählerwechsel2', new Date('2017-04-03')),
                                                           new TimeLineStepModel('3','Zählerwechsel3', new Date('2018-04-03')),
                                                           new TimeLineStepModel('4','Zählerwechsel4', new Date('2019-04-03')),
                                                           new TimeLineStepModel('5','Zählerwechsel5', new Date('2020-04-03')),
                                                           new TimeLineStepModel('6','Zählerwechsel6', new Date('2013-04-03')),
                                                           new TimeLineStepModel('7','Zählerwechsel7', new Date('2012-04-03')),
                                                           new TimeLineStepModel('8','Zählerwechsel8', new Date('2011-04-03')),
                                                           new TimeLineStepModel('9','Zählerwechsel9', new Date('2010-04-03')),
                                                           new TimeLineStepModel('10','Zählerwechsel10', new Date('2009-04-03')),
                                                           new TimeLineStepModel('11','Zählerwechsel11', new Date('2008-04-03')),
                                                           new TimeLineStepModel('12','Zählerwechsel12', new Date('2007-04-03')),
                                                           new TimeLineStepModel('13','Zählerwechsel13', new Date('2006-04-03')),
                                                           new TimeLineStepModel('14','Zählerwechsel14', new Date('2003-04-03')),
                                                           new TimeLineStepModel('15','Zählerwechsel15', new Date('2002-04-03')),
                                                           new TimeLineStepModel('16','Zählerwechsel16', new Date('2000-11-11'))
                                                         ]);
```

in .html file:
```html
    <div style="width:100%;">
        <nli-timeline [showDatePicker]="true" [visibleSteps]="14" > <nli-timelineitem
            *ngFor="let timeLineStepModel of timelineModel.steps let i=index "
            [model]="timeLineStepModel">
         </nli-timelineitem> </nli-timeline>
    </div>
``` 


## Appendix:

1. Sample app-theme.scss 

```css

    @import '~@angular/material/theming';
    // Plus imports for other components in your app.

    // Include the base styles for Angular Material core. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    @include mat-core();

    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue.
    $app-primary: mat-palette($mat-blue);
    $app-secondary: mat-palette($mat-blue);
    $app-accent:  mat-palette($mat-orange, A200, A100, A400);

    // The warn palette is optional (defaults to red).
    $app-warn:    mat-palette($mat-red);

    // Create the theme object (a Sass map containing all of the palettes).
    $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    @include angular-material-theme($app-theme);

    @import '~nli-timeline-lib/lib/timeline/timeline.component.scss';
    @include nli-material-theme($app-theme);
```