npm package: @next-level-integration/nli-input-lib
Description: This module consist of 2 components. nli-text and nli-password components.
Latest version: 2.3.4

# NliInputLib

This module consist of 2 components. nli-text and nli-password components.

## nli-text
Standard component for user input. This component is based on material input component.
The general structure of this component:
```html
<nli-text [(ngModel)]=""
        readonly=""
        [icon]=""
        [nliMaxLength]=""
        [inputLabel]=""
        [inputClass]=""
        [hintMsg]=""
        [errorMsg]="">
</nli-text>
```
ngModel: bind field value to model.
readonly: boolean field
icon: optional filed for icon font or vector based icon.
nliMaxLength: integer value for specifying maximum character.
inputLabel: title for input field
inputClass: for styling input element of field
hintMsg: hint message which is displayed under input with material primarty color
errorMsg: error message which is displayed when field is invalid with red color.


## nli-password
Standard component for user password. This component is based on material input component.
The general structure of this component:
```html
<nli-password name=""
            [(ngModel)]=""
            [formControl]=""
            inputLabel=""
            inputClass=""
            errorMsg="">
</nli-password>
```
ngModel: bind field value to model.
inputLabel: title for input field
inputClass: for styling input element of field
errorMsg: error message which is displayed when field is invalid with red color.


### Setup Steps:
1. Add dependency in package.json under dependencies object:
	    `"nli-input-lib": "2.3.4"`


2. Add CSS dependencies to main html file which by default is 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">
    	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	        ...
	</head>
	```
 This component uses material fonts and icons and bootstrap CSS for responsive behavior.

3. Apply material theme. create `app-theme.scss` file and apply material theme. You should also add style
	dependency in `.angular-cli.json` file:
```json	
  "styles": [
      	...
    	"app-theme.scss"
  ],
```      
The sample app-theme.scss exists at the end of this file.

4. Run npm install in project folder (The home folder that `package.json` exists):
  		`npm install`
   This command downloads all dependencies including nli-input-lib. You can also download just this module with:
  	    `npm install nli-input-lib`
   
5. Import input module to your project. In your main module (or module that you want use this component) that its default name is `app.module.ts`, import it:
    ```javascript
     import { LibModule as NliInputModule} from 'nli-input-lib';
    ...
    @NgModule({
      ...
      imports: [
        ...
        NliInputModule
       ]
       ...
    });
    ```

### Usage example:



```html
<div >
  <nli-text name="username"
                [(ngModel)]="loginModel.username"
                [formControl]="loginForm.controls['username']"
                inputLabel="Benutzername"
                inputClass="my-input wizard-fields-common"
                errorMsg="Dieses Feld darf nicht leer sein">
  </nli-text>
</div>
<div >
  <nli-password name="password"
                [(ngModel)]="loginModel.password"
                [formControl]="loginForm.controls['password']"
                inputLabel="Passwort"
                inputClass="my-input wizard-fields-common"
                errorMsg="Dieses Feld darf nicht leer sein">
  </nli-password>
</div>
```        
# nli-select

This component is a drop down menu that has static text as a hint message, label at the top and popup menu for selecting one item.
The general structure of this component is:
```html
<nli-select  hasDefault="true" name="selectClient"
	staticText="-- hint message --" [(ngModel)]="selectItem" 
	inputLabel="component lable"  [dataList]="selectItems"
    inputClass="white-combo" [formControl]="formControl" >
</nli-select>
```

### Setup Steps:

1-At package.json insert this line for dependency. Notice that this version number is not fixed and will be changed after every module building. 
```javascript
"dependencies": {
		"@next-level-integration/nli-input-lib": "2.0.11",
    },
 ```   
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 nli-select component to your project insert this lines to app.module.ts:
nli-select is one of several input component such as nli-text, nli-password and nli-longText that collect in "@next-level-integration/nli-input-lib" module.

```javascript
import {LibModule  as  NliInputLib} from  '@next-level-integration/nli-input-lib';
@NgModule({
  declarations: [
        ...
  ],
  imports: [
    ...
	NliInputLib,
    ...
   ],
  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:
    
```javascript
"styles": [
...
"app-theme.scss"
],
```
Don't forget to include nli-select theme.
The sample `app-theme.scss` exists at the end of this file.

5-Config tsconfig.json file and include nli-input-lib module:
```javascript
{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ]
    },
    "include": [
        "node_modules/@next-level-integration/nli-input-lib/**/*.ts",
        "src/**/*.ts"
    ]
}
```

6-Config tsconfig.spec.json file:

```javascript
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/spec",
        "module": "commonjs",
        "target": "es5",
        "baseUrl": "",
        "types": [
            "jasmine",
            "node"
        ]
    },
    "files": [
        "test.ts"
    ],
    "include": [
        "**/*.spec.ts",
        "**/*.d.ts",
        "../node_modules/@next-level-integration/nli-input-lib/**/*.ts",
    ]
}
```

7-Execute `npm install` to install nli-input-lib module;

### Usage example:


This is a sample in .ts file for creating nli-select model:
```java
import {OptionModel} from  "@next-level-integration/nli-input-lib/lib/nli-select/option.model";
selectItem:String=' ';
selectItems:OptionModel[]=[];
constructor() {
for(var  i=0;i<5;i++){
	this.selectItems.push(new  OptionModel('value'+i,'item'+i));
}
}
```

In HTML file:
[(ngModel)] must bind to string variable. this variable save selected value of dropdown menu item.the data model of this component save at [dataList] input field that is a list of Option object. each Option object contains two string variable for saving label and value of menu items.
```html
<div  class="menudiv">
	<nli-select  hasDefault="false"  name="selectClient"
		staticText="-- please select one item --" [(ngModel)]="selectItem" 
		inputLabel="please select one item:"
		[dataList]="selectItems"
		inputClass="white-combo">
	</nli-select>
</div>
``` 

### Appendix:

1. Sample `app-theme.scss` 

```scss
@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);
	
```
	
2. Sample `app-theme.scss` for select

```scss
@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);

// Include theme styles for nli-select component
@import  '~@next-level-integration/nli-input-lib/lib/nli-select/nli-select.component.scss';
@include  nli-material-theme($app-theme);
```