[]([https://github.com/angular/angular-cli) [](https://www.typescriptlang.org)
**vr components é uma biblioteca [Angular](https://angular.io) (>=9) com componentes reutilizáveis.**
___
## Install
```bash
$ npm install vr-components --save
```
E instale "peer dependencies":
* `@angular/common@9.0.7`
* `@angular/core@9.0.7`
* `tslib@1.10.0`
* `moment@^2.24.0`
* `lodash@^4.17.15`
```bash
$ npm install @angular/common @angular/core @angular/platform-browser --save
$ npm install tslib --save
$ npm install moment lodash --save
```
## Pré Requisitos
### Vr Design Guide
```bash
$ npm install vr-design-guide@* --save
```
## Uso
### No módulo importa-se o componente necessário, por exemplo o `VrcDatepickerModule` no seu app.
Adicione `VrcDatepickerModule` no `imports` do App.
```typescript
import { NgModule } from '@angular/core';
import { VrcDatepickerModule} from 'vrc-components';
@NgModule({
imports: [ VrcDatepickerModule ]
})
export class AppModule {}
```
### Como usar um componente como `VrcDatepickerComponent` no templete:
#### Vinculando('Binding') para propriedade `data`
Vincule o valor de remarcação à propriedade de `value` do componente de apresentação.
```html
```
Vinculando o valor com *tow way data binding*.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'vr-root',
template: ''
})
export class AppComponent{
data = '01/01/2020';
// ...
}
```
# VR Autocomplete
### Como usar o componente `VrcAutocompleteComponent` :
Para usar o vr autocomplete precisa importar os modulos VrcAutocompleteModule e VrcOptionModule.
```typescript
import { NgModule } from '@angular/core';
import { VrcAutocompleteModule, VrcOptionModule } from 'vrc-components';
@NgModule({
imports: [ VrcAutocompleteModule, VrcOptionModule ]
})
export class MyModule {}
```
templete:
```html
1 - Primeiro 2 - Segundo 3 - Terceiro
```
Vinculando o valor.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: `
1 - Primeiro 2 - Segundo 3 - Terceiro`
})
export class MyComponent{
valor!: string;
}
```
## Propriedades
Propriedades *@Input()*
| | |
|-----------------|----------------------------------------------------------------------------------------|
|id | define um id para o elemento *input* |
|classeCss | seta classe css para todo o componente |
|name | define um *name* para o elemento *input* |
|label | define um *label* para o elemento *input* |
|control | utilizando em formulários reativos |
|placeholder | define o *placeholder* para o elemento input |
|isReadOnly | define o *input* como apenas leitura (*readonly*) |
|isDisabled | define o *input* como desabilitado (*disabled*) |
|isRequired* | define o *input* como obrigatório (*required*) |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do *FormGroup*
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
@Component({
selector: 'vr-my',
template: `
`
})
export class MyComponent implements OnInit {
filteredOptions!: Observable;
estados = [{
id: 1,
sigla: 'SP',
nome: 'São Paulo'
},
{
id: 2,
sigla: 'BA',
nome: 'Bahia'
},
{
id: 3,
sigla: 'PR',
nome: 'Paraná'
},
{
id: 4,
sigla: 'AM',
nome: 'Amazonas'
}];
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
estado: [null, Validators.required]
});
}
private filterEstados(): void {
this.filteredOptions = this.getField('estado')?.valueChanges
.pipe(
startWith(''),
map((v: string) => this.filter(v))
);
}
private filter(value: string): string[] {
const filterValue = value?.toLowerCase();
return this.estados.map(estado => estado?.nome ?? '').filter(option => option.toLowerCase().includes(filterValue));
}
}
```
# VR Checkbox
### Como usar o componente `VrcCheckboxComponent` :
Para usar o vr checkbox precisa importar o seu modulo e então poderá usa-lo como um componente.
```typescript
import { NgModule } from '@angular/core';
import { VrcCheckboxModule } from 'vrc-components';
@NgModule({
imports: [VrcCheckboxModule]
})
export class MyModule {}
```
templete:
```html
Ok?
```
Vinculando o valor.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: 'Ok?'
})
export class MyComponent{
isChecked = false;
}
```
## Propriedades
Propriedades *@Input()*
| | |
|-----------|--------------------------------------------------------------------------------|
|id | define um id para o elemento *input* |
|classeCss | seta classe css para todo o componente |
|name | define um *name* para o elemento *input* |
|control | utilizando em formulários reativos |
|isReadOnly | define o *input* como apenas leitura (*readonly*) |
|isDisabled | define o *input* como desabilitado (*disabled*) |
|isRequired*| define o *input* como obrigatório (*required*) |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do *FormGroup*
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { VrcFormValidations } from 'vrc-components';
@Component({
selector: 'vr-my',
template: ``
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
frameworks = ['Angular', 'React', 'Vue'];
constructor(private formBuilder: FormBuilder) { }
get formFrameworks(): FormArray {
return this.formGroup.get('frameworks') as FormArray;
}
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
frameworks: this.buildFrameworks()
});
}
private buildFrameworks(): FormArray {
const values = this.frameworks.map(v => new FormControl(false));
return this.formBuilder.array(values, VrcFormValidations.requiredMinChebox());
}
}
```
# VR Datepicker
O datepicker utiliza o valor no formato de *text* como por exemplo '20/02/2019'
### Como usar o componente `VrcDatepickerComponent` :
Para usar o vr datepicker precisa importar o seu modulo e então poderá usa-lo como um componente.
```typescript
import { NgModule } from '@angular/core';
import { VrcDatepickerModule } from 'vrc-components';
@NgModule({
imports: [ VrcDatepickerModule ]
})
export class MyModule {}
```
templete:
```html
```
Vinculando o valor.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: ''
})
export class MyComponent{
data= '05/01/2020';
}
```
## Propriedades
Propriedades *@Input()*
| | |
|-----------------|----------------------------------------------------------------------------------------|
|id | define um id para o elemento *input* |
|classeCss | seta classe css para todo o componente |
|name | define um *name* para o elemento *input* |
|label | define um *label* para o elemento *input* |
|control | utilizando em formulários reativos |
|placeholder | define o *placeholder* para o elemento input |
|isReadOnly | define o *input* como apenas leitura (*readonly*) |
|isDisabled | define o *input* como desabilitado (*disabled*) |
|isRequired* | define o *input* como obrigatório (*required*) |
|useNonWorkingDays| utilizando quando precisa informar os dias não uteis providos de uma API externa |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do *FormGroup*
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'vr-my',
template: `
`
})
export class MyComponent implements OnInit{
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
data: [null, Validators.required]
});
}
getField(field: string): any {
return this.formGroup.get(field);
}
}
```
# VR Input
### Como usar o componente `VrcInputComponent` :
Para usar o vr input precisa importar o seu modulo e então poderá usa-lo como um componente.
```typescript
import { NgModule } from '@angular/core';
import { VrcInputModule } from 'vrc-components';
@NgModule({
imports: [ VrcImputModule ]
})
export class MyModule {}
```
templete:
```html
```
Vinculando o valor.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: ''
})
export class MyComponent{
valor = '';
}
```
## Propriedades
Propriedades *@Input()*
| | |
|-----------|--------------------------------------------------------------------------------|
|id | define um id para o elemento *input* |
|classeCss | seta classe css para todo o componente |
|name | define um *name* para o elemento *input* |
|label | define um *label* para o elemento *input* |
|type | define um *type* para o elemento *input*, por padrão se inicializa como *text* |
|control | utilizando em formulários reativos |
|placeholder| define o *placeholder* para o elemento input |
|isReadOnly | define o *input* como apenas leitura (*readonly*) |
|isDisabled | define o *input* como desabilitado (*disabled*) |
|isRequired*| define o *input* como obrigatório (*required*) |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do *FormGroup*
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'vr-my',
template: `
`
})
export class MyComponent implements OnInit{
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
cnpjcpf: [null, Validators.required]
});
}
getField(field: string): any {
return this.formGroup.get(field);
}
}
```
# VR Radio
### Como usar os componentes `VrcRadioGroupComponent e VrcRadioButtonComponent` :
O radio e composto por dois componentes o grupo de radio e os botões de radio.
```typescript
import { NgModule } from '@angular/core';
import { VrcRadioModule } from 'vrc-components';
@NgModule({
imports: [VrcRadioModule]
})
export class MyModule {}
```
templete:
```html
Em casaNo trabalhoViajando
```
Vinculando o valor.
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: 'Em casaNo trabalhoViajando'
})
export class MyComponent{
place!: string;
}
```
## Propriedades
Propriedades *@Input()*
| | |
|-----------|--------------------------------------------------------------------------------|
|id | define um id para o elemento *input* |
|classeCss | seta classe css para todo o componente |
|name | define um *name* para o elemento *input* |
|control | utilizando em formulários reativos |
|isReadOnly | define o *input* como apenas leitura (*readonly*) |
|isDisabled | define o *input* como desabilitado (*disabled*) |
|isRequired*| define o *input* como obrigatório (*required*) |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do *FormGroup*
Obs: Para alinha os botões verticalmente se usa a propriedade 'classeCss', passando a classe 'vertical-align'.
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { VrcFormValidations } from 'vrc-components';
@Component({
selector: 'vr-my',
template: ``
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
genders: Gender[] = [
{ value: 'M', description: 'Masculino' },
{ value: 'F', description: 'Feminino' },
{ value: 'O', description: 'Outro' }
];
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
gender: [null, Validators.required]
});
}
}
```
# VR Slide Toggle
### Como usar o componente `VrcSlideToggleComponent` :
Para usar o vr slide toggle precisa importar o seu modulo e então poderá usa-lo como um componente.
```typescript
import { NgModule } from "@angular/core";
import { VrcSlideToggleModule } from "vrc-components";
@NgModule({
imports: [VrcSlideToggleModule],
})
export class MyModule {}
```
templete:
```html
Ok?
```
Vinculando o valor.
```typescript
import { Component } from "@angular/core";
@Component({
selector: "vr-my",
template: 'Ok?',
})
export class MyComponent {
isChecked = false;
}
```
## Propriedades
Propriedades _@Input()_
| | |
| ------------ | ------------------------------------------------- |
| id | define um id para o elemento _input_ |
| classeCss | seta classe css para todo o componente |
| name | define um _name_ para o elemento _input_ |
| control | utilizando em formulários reativos |
| isReadOnly | define o _input_ como apenas leitura (_readonly_) |
| isDisabled | define o _input_ como desabilitado (_disabled_) |
| isRequired\* | define o _input_ como obrigatório (_required_) |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do _FormGroup_
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, FormArray, FormControl } from "@angular/forms";
import { VrcFormValidations } from "vrc-components";
@Component({
selector: "vr-my",
template: ``,
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
frameworks = ["Angular", "React", "Vue"];
constructor(private formBuilder: FormBuilder) {}
get formFrameworks(): FormArray {
return this.formGroup.get("frameworks") as FormArray;
}
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
frameworks: this.buildFrameworks(),
});
}
private buildFrameworks(): FormArray {
const values = this.frameworks.map((v) => new FormControl(false));
return this.formBuilder.array(
values,
VrcFormValidations.requiredMinChebox()
);
}
}
```
# VR Tabs
### Como usar o componente `VrcTabsComponent` :
Para usar o vr tabs precisa importar o seu modulo e então poderá usa-lo como um componente.
```typescript
import { NgModule } from "@angular/core";
import { VrcTabsModule } from "vrc-components";
@NgModule({
imports: [VrcTabsModule],
})
export class MyModule {}
```
templete:
```html
Tab 01
Tab 02
Tab 03
```
## Propriedades
Propriedade _@Output()_
| | |
| ----------- | ---------------------------------- |
| selected | obtém o valor selecionado no click |
| styleButton | altera stilo do botão de seleção |
### Exemplo
```typescript
import { Component } from "@angular/core";
("@angular/forms");
@Component({
selector: "vr-my",
template: `
Tab 01
Tab 02
Tab 03
`,
})
export class MyComponent {
selected!: string;
onSelected(selected: string): void {
this.selected = selected;
}
}
```
# VR Textarea
### Como usar o componente `VrcTextareaComponent` :
Para usar o vr textarea precisa importar o seu modulo e então poderá usa-lo como um componente.
```typescript
import { NgModule } from "@angular/core";
import { VrcTextareaModule } from "vrc-components";
@NgModule({
imports: [VrcTextareaModule],
})
export class MyModule {}
```
templete:
```html
```
Vinculando o valor.
```typescript
import { Component } from "@angular/core";
@Component({
selector: "vr-my",
template:
'',
})
export class MyComponent {
valor = "";
}
```
## Propriedades
Propriedades _@Input()_
| | |
| ------------ | ------------------------------------------------------------------------------------------------ |
| id | define um id para o elemento _input_ |
| classeCss | seta classe css para todo o componente |
| name | define um _name_ para o elemento _input_ |
| label | define um _label_ para o elemento _input_ |
| type | define um _type_ para o elemento _input_, por padrão se inicializa como _text_ |
| control | utilizando em formulários reativos |
| placeholder | define o _placeholder_ para o elemento input |
| isReadOnly | define o _input_ como apenas leitura (_readonly_) |
| isDisabled | define o _input_ como desabilitado (_disabled_) |
| isRequired\* | define o _input_ como obrigatório (_required_) |
| maxlength | especifica um número máximo de caracteres que o 'textarea' tem permissão para conter. |
| minlength | especifica um número mínimo de caracteres que o 'textarea' tem permissão para conter. |
| row | O número de linhas de texto visíveis para o controle. |
| spellcheck | Especifica se o 'textarea' está sujeito a verificação ortográfica pelo navegador / SO subjacente |
| wrap | Indica como o controle quebra o texto. |
\* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do _FormGroup_
Para mais informações acesse [aqui](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/textarea).
### Exemplo Formulário Reativo
```typescript
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "vr-my",
template: ` `,
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
descricao: [null, Validators.required],
});
}
getField(field: string): any {
return this.formGroup.get(field);
}
}
```