@next-level-integration/inputs

@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