npm package: @next-level-integration/inputs
Description: Input angular components collection
Author: Albert Szekely
Latest version: 10.0.8-beta

# @next-level-integration/inputs
#### Install:
    npm install @next-level-integration/inputs
#### Peer Requirements:
    npm install angular2-text-mask --save
##### Importing:
    import { NliInputsModule } from '@next-level-integration/inputs';
##### Add this to the styles:
    .nli-primary {
    color: mat-color($primary-color) !important;
    }
    .nli-accent {
    color: mat-color($accent-color) !important;
    }
    .nli-warn {
    color: mat-color($warn-color) !important;
    }
    .nli-primary-bg {
    background-color: mat-color($primary-color) !important;
    }
    .nli-accent-bg {
    background-color: mat-color($accent-color) !important;
    }
    .nli-warn-bg {
    background-color: mat-color($warn-color) !important;
    }
    .nli-primary-border {
    border-color: mat-color($primary-color) !important;
    border-top-color: mat-color($primary-color) !important;
    border-bottom-color: mat-color($primary-color) !important;
    border-left-color: mat-color($primary-color) !important;
    border-right-color: mat-color($primary-color) !important;
    }
    .nli-accent-border {
    border-color: mat-color($accent-color) !important;
    border-top-color: mat-color($accent-color) !important;
    border-bottom-color: mat-color($accent-color) !important;
    border-left-color: mat-color($accent-color) !important;
    border-right-color: mat-color($accent-color) !important;
    }
    .nli-warn-border {
    border-color: mat-color($warn-color) !important;
    border-top-color: mat-color($warn-color) !important;
    border-bottom-color: mat-color($warn-color) !important;
    border-left-color: mat-color($warn-color) !important;
    border-right-color: mat-color($warn-color) !important;
    }

### Usage (text)

###### HTML
    <nli-text name="username"
    [formControl]="loginForm.controls['username']"
    inputLabel="Username"
    inputClass="sample-input"
    errorMsg="This field is mandatory.">
    </nli-text>

###### TS
    public loginForm!: FormGroup;

    constructor(private fb: FormBuilder) {
      this.loginForm = fb.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
    });

### Usage (password)

###### HTML
    <nli-password  name="password"
    [formControl]="loginForm.controls['password']"
    inputLabel="Password"
    inputClass="sample-input"
    errorMsg="This field is mandatory.">
    </nli-password>

###### TS
    public loginForm!: FormGroup;

    constructor(private fb: FormBuilder) {
      this.loginForm = fb.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
    });

### Usage (select)

###### HTML

    <nli-select name="selectCity"
        staticText="Please select a city"
        inputLabel="City"  [dataList]="citiesList"
        inputClass="white-combo" [formControl]="testForm.controls['cities']">
    </nli-select>

###### TS
    public citiesList = [{
        label: 'Cologne',
        value: 'cologne'
        },
        {
        label: 'Brasov',
        value: 'brasov'
    }];
    public testForm!: FormGroup;

    constructor(private fb: FormBuilder) {
        this.testForm = fb.group({
            cities: ['', Validators.required]
    });

### Usage (long text)

###### HTML
    <nli-longText name="desc"
        [formControl]="testForm.controls['desc']"
        inputLabel="Description"
        inputClass="sample-longText"
        rows="5"
        errorMsg="This field is mandatory">
    </nli-longText>

###### TS
    public testForm!: FormGroup;

    constructor(private fb: FormBuilder) {
        this.testForm = fb.group({
            desc: ['', Validators.required]
    });

### Usage (file upload)

###### HTML
    <nli-file-upload name="uploadPhoto"
        inputLabel="Upload Photo"
        [formControl]="testForm.controls['photo']"
        (onFileUpload)="uploaded($event)">
    </nli-file-upload>

###### TS
    public testForm!: FormGroup;
        
    constructor(private fb: FormBuilder) {
        this.testForm = fb.group({
            cities: ['', Validators.required]
        });
    }

    uploaded(files: FileList) {
        alert(`You have selected ${files[0].name}`);
    }

### Usage (time date picker)

###### HTML
    <nli-timedatepicker name="timestamp" (change)="changeDate($event)"></nli-timedatepicker>

###### TS
    public testForm!: FormGroup;
        
    changeDate($event) {
    console.log($event);
    this.timestamp = $event;
    }


# Changelog:
* 1.0.0 Initial version
* 2.0.0 Moved from BrowserModule and BrowserAnimationsModule to CommonModule
* 2.1.0 Added autocomplete option to text ( expects array of strings )
* 3.0.0 Added nli-timedatepicker component ( testing phase )
* 3.0.1 timepicker bugfixes
* 3.0.2 timepicker bugfixes
* 3.1.0 timepicker uses 2 digits now
* 3.1.1 minor fix for 2 digits init
* 3.1.2 error css class fix