Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@next-level-integration/nli-input-lib
Advanced tools
@next-level-integration/nli-input-lib - npm Package Compare versions
Comparing version 0.2.2 to 0.2.3
| export * from './lib.module'; |
@@ -0,0 +0,0 @@ import { BrowserModule } from '@angular/platform-browser'; |
@@ -0,0 +0,0 @@ import {Input, HostListener, Component, forwardRef} from "@angular/core"; |
| { | ||
| "name": "@next-level-integration/nli-input-lib", | ||
| "version": "0.2.2", | ||
| "version": "0.2.3", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "main": "lib", |
145
README.md
| # NliInputLib | ||
| This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0. | ||
| This module consist of 2 components. nli-text and nli-password components. | ||
| ## Development server | ||
| ## nli-text | ||
| Standard component for user input. This component is based on material input component. | ||
| The general structure of this component: | ||
| Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. | ||
| <nli-text [(ngModel)]="" | ||
| [fc]="" | ||
| [readonly]="" | ||
| [icon]="" | ||
| [nliMaxLength]="" | ||
| [inputLabel]="" | ||
| [inputClass]="" | ||
| [hintMsg]="" | ||
| [errorMsg]=""> | ||
| </nli-text> | ||
| ## Code scaffolding | ||
| ngModel: bind field value to model. | ||
| fc: form control for defining validation | ||
| 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. | ||
| Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`. | ||
| ## Build | ||
| ## nli-password | ||
| Standard component for user password. This component is based on material input component. | ||
| The general structure of this component: | ||
| Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. | ||
| <nli-password name="" | ||
| [(ngModel)]="" | ||
| [formControl]="" | ||
| [fc]="" | ||
| inputLabel="" | ||
| inputClass="" | ||
| errorMsg=""> | ||
| </nli-password> | ||
| ## Running unit tests | ||
| ngModel: bind field value to model. | ||
| fc: form control for defining validation | ||
| 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. | ||
| Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
| ## Running end-to-end tests | ||
| ### Setup Steps: | ||
| 1. Add dependency in package.json under dependencies object: | ||
| `"nli-input-lib": "0.2.2"` | ||
| Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). | ||
| Before running the tests make sure you are serving the app via `ng serve`. | ||
| ## Further help | ||
| 2. Add CSS dependencies to main html file which by default is index.html: | ||
| To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). | ||
| ```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: | ||
| "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: | ||
| 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']" | ||
| [fc]="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']" | ||
| [fc]="loginForm.controls['password']" | ||
| inputLabel="Passwort" | ||
| inputClass="my-input wizard-fields-common" | ||
| errorMsg="Dieses Feld darf nicht leer sein"> | ||
| </nli-password> | ||
| </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); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by28.5%
20255
- Number of lines in readme file
- increased by403.45%
146
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes