VR COMPONENTS

 [

vr components é uma biblioteca Angular (>=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

$3

`bash

$ npm install vr-design-guide@* --save

`

Uso

$3

Adicione VrcDatepickerModule no imports do App.

`typescript

import { NgModule } from '@angular/core';

import { VrcDatepickerModule} from 'vrc-components';


@NgModule({

imports: [ VrcDatepickerModule ]

})

export class AppModule {}

`

$3

#### 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

$3

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*

$3

`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:

{{ estado }}


})
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

$3

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*

$3

`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:

{{frameworks[i] }}


})
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'

$3

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*

$3

`typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'vr-my',
template:

label="Data"
formControlName="data"
[control]="getField('data')">


})
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

$3

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*

$3

`typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'vr-my',
template:

id="cpfcnpjId"
label="CPF/CNPJ"
formControlName="cnpjcpf"
[control]="getField('cnpjcpf')">


})
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

$3

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 casa
No trabalho
Viajando

`
Vinculando o valor.
`typescript
import { Component } from '@angular/core';

@Component({
selector: 'vr-my',
template: '
Em casa
No trabalho
Viajando
'
})
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'.

$3

`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:

{{ gender?.description }}


})
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

$3

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_

$3

`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:

formArrayName="frameworks"
*ngFor="let item of formFrameworks.controls; let i = index"
>
{{
frameworks[i]
}}

,
})
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

$3

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 |

$3

`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

$3

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.

$3

`typescript
import { Component, OnInit } from "@angular/core";

import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
selector: "vr-my",

template:

label="Descrição"
formControlName="descricao"
[control]="getField('descricao')"
>

,
})
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);
}
}
``