@next-level-integration/nli-input-lib
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.4 • Public • Published

    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:

    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:

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

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

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

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

    1. 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);
        
    1. 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);

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    96

    Version

    2.3.4

    License

    MIT

    Unpacked Size

    49.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar