# general-input-components > This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6. Latest version **0.0.3** (published 2021-05-27) · 0 weekly downloads ## Install ```sh npm install general-input-components pnpm add general-input-components yarn add general-input-components bun add general-input-components ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.3 | | Published | 2021-05-27 | | First published | 2021-05-27 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 701 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | vitobuonsanto | ## Links - npm: https://www.npmjs.com/package/general-input-components - npm.io page: https://npm.io/package/general-input-components ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.0.0 ## Recent versions - 0.0.3 (latest) — 2021-05-27 - 0.0.1 — 2021-05-27 ## README # GeneralInputComponents This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6. ## Installazione npm i general-input-components in app.module.ts: import { InputBootstrapComponentsModule } from 'general-input-components'; imports:[ InputBootstrapComponentsModule ] ## Esempio di uso ## Running unit tests Run `ng test general-input-components` to execute the unit tests via [Karma](https://karma-runner.github.io). ## Author Il componente è stato sviluppato da @Vito Buonsanto email contatto: buonsantovito@gmail.com ## Versione V.0.0.2 Il componente gestisce i casi di input-text di tipo string e numerici. Il componente gestisce le textarea. Il componente gestisce i datePicker Il componente è compatibile con la validazione Bootstrap che usa il Template driven Validation. ## Desrizone dei componenti ************************************************** INPUT-TEXT ************************************************** ****************** INPUT ******************** @Input() inputData: string; -> input del dato @Input() name: string; -> nome del componente @Input() label: string; -> ciò che viene mostrato nella label @Input() isDisabled: boolean; -> disabilitato @Input() isRequired: boolean; -> controllo required del campo @Input() maxLength: number; -> lunghezza massima del campo @Input() minLength: number; -> lunghezza minima del campo @Input() placeholder: string; -> placeholder da mostrare @Input() autocomplete: any; -> disabilita autocomplete con [autocomplete]="'off'" @Input() blockCopyPaste: boolean; -> disabilita copy paste cut @Input() upperCase: boolean; -> true/false caratteri maiuscoli @Input() lowerCase: boolean; -> true/false caratteri minuscoli @Input() onlyNumber: boolean; -> true/false solo numeri non decimali @Input() decimals: number; -> true/false solo numeri specificando i decimali @Input() optionsNumberBetween: -> { min: number, max: number, errore: string }; min: numero minimo(numero/null) max: numero massimo (numero/null) errore: errore da mostare (opzionale) @Input() regexControl: -> { regex: string, errore: string }; regex: stringa per formare la regex (obbligatoria) errore: errore da mostare (opzionale) @Input() codiceFiscale: -> { cf: boolean, personaFisica: boolean, checkUltimoCarattere: boolean } / boolean; -> leggi sezione cf @Input() errori: Array -> possibilità di inserire una serie di errori esterni che renderanno invalido il componente. Le stringhe verranno mostrate a video all'utente segnalando l'errore ****************** OUTPUT ******************** @Output() dateOut = new EventEmitter(); -> output di NgModel per aggiungerlo ai controlli del tuo form @Output() modelOut = new EventEmitter(); -> output del valore del campo Nella cartella esempio vi sono diversi esempi di utilizzi e combinazioni del componente. ************************************************************************************************************************************************************ CF: regexCF: ([0-9]{11}|[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]) 1)Passando l'attributo [codiceFiscale] = "true" verrà controllato che il codice fiscale rispetti la seguente regola: 11 caratteri numerici 16 caratteri alfanumerici che rispettano la regex regexCF 2)Passando l'attributo [codiceFiscale] = [codiceFiscale]="{ cf:true , personaFisica: true}" verrà controllato che il codice fiscale rispetti la seguente regola: 16 caratteri alfanumerici che rispettano la regex regexCF 3)Passando l'attributo [codiceFiscale]="{ cf:true , personaFisica: true, checkUltimoCarattere: true }" verrà controllato che il codice fiscale rispetti la seguente regola: 16 caratteri alfanumerici che rispettano la regex regexCF e controlla che l'ultimo carattere del cf sia corretto rispetto ai precedenti ************************************************************************************************************************************************************* ************************************************** TEXTAREA ************************************************** ****************** INPUT ******************** @Input() inputData: string; -> input del dato @Input() name: string; -> nome del componente @Input() label: string; -> ciò che viene mostrato nella label @Input() isDisabled: boolean; -> disabilitato @Input() isRequired: boolean; -> controllo required del campo @Input() maxLength: number; -> lunghezza massima del campo (se c'è appare un contatore) @Input() minLength: number; -> lunghezza minima del campo @Input() placeholder: string; -> placeholder da mostrare @Input() blockCopyPaste: boolean; -> disabilita copy paste cut @Input() upperCase: boolean; -> true/false caratteri maiuscoli @Input() lowerCase: boolean; -> true/false caratteri minuscoli @Input() regexControl: -> { regex: string, errore: string }; regex: stringa per formare la regex (obbligatoria) errore: errore da mostare (opzionale) @Input() rows: numbers -> numbero di rows ****************** OUTPUT ******************** @Output() dateOut = new EventEmitter(); -> output di NgModel per aggiungerlo ai controlli del tuo form @Output() modelOut = new EventEmitter(); -> output del valore del campo Nella cartella esempio vi sono diversi esempi di utilizzi e combinazioni del componente. ************************************************** CHECKBOX ************************************************** ****************** INPUT ******************** @Input() textLabel; -> label da mostrare @Input() model; -> dato da passare in input @Input() id; -> identificativo checkbox @Input() isRequired: boolean; -> con isRequired true si intende che la checkbox per essere valida deve avere valore true ****************** OUTPUT ******************** @Output() isCheckedOut = new EventEmitter(); -> output di NgModel per aggiungerlo ai controlli del tuo form @Output() value = new EventEmitter(); -> output del valore del campo ************************************************** DATEPICKER ************************************************** ****************** INPUT ******************** @Input() isRequired: boolean; -> controllo required del campo @Input() isDisabled: boolean; -> controllo disabilitazione del campo @Input() dateIn: string; -> dato da passare in input @Input() label: string; -> label da mostrare @Input() options: OptionsDatePicker; -> @Input() name: string; -> identificativo checkbox @Input() errori: []; Array -> possibilità di inserire una serie di errori esterni che renderanno invalido il componente. Le stringhe verranno mostrate a video all'utente segnalando l'errore ****************** OUTPUT ******************** @Output() dateOut = new EventEmitter(); @ViewChild('myControl') myControl: NgModel; @Output() modelOut = new EventEmitter(); --- _Source: https://npm.io/package/general-input-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._