@next-level-integration/nli-input-lib

v2.3.4

Published

2 years ago

This module consist of 2 components. nli-text and nli-password components.

Downloads

0High
0Medium
0Low

ykh

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:

<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:

<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:

Add dependency in package.json under dependencies object: "nli-input-lib": "2.3.4"

Add CSS dependencies to main html file which by default is index.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.

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"
  ],

The sample app-theme.scss exists at the end of this file.

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
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:
```
 import { LibModule as NliInputModule} from 'nli-input-lib';
...
@NgModule({
  ...
  imports: [
    ...
    NliInputModule
   ]
   ...
});
```

Usage example:

<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:

<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.

"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 :

<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.

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:

"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:

{
    "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:

{
    "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:

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.

<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:

Sample app-theme.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);

Sample app-theme.scss for select

@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);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

NliInputLib

nli-text

nli-password

Setup Steps:

Usage example:

nli-select

Setup Steps:

Usage example:

Appendix: