JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q42076F
  • License MIT

Biblioteca de componentes angular VR Software

Package Exports

  • vr-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vr-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VR COMPONENTS

Angular TypeScript

vr components é uma biblioteca Angular (>=9) com componentes reutilizáveis.

Install

$ 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
$ npm install @angular/common @angular/core @angular/platform-browser --save

$ npm install  tslib --save

$ npm install moment lodash --save

Pré Requisitos

Vr Design Guide

$ 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.

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.

<vrc-datepicker  [value]="data" label="Data"></vrc-datepicker>

Vinculando o valor com tow way data binding.

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


@Component({

selector:  'vr-root',
template:  '<vrc-datepicker  [(ngModel)]="data"  [useNonWorkingDays]="false"  label="Data"></vrc-datepicker>'
})

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. 

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

import { VrcAutocompleteModule, VrcOptionModule } from  'vrc-components';

@NgModule({
imports: [ VrcAutocompleteModule, VrcOptionModule ]
})
export  class  MyModule {}

templete:

<vrc-autocomplete label="Opções"  [(ngModel)]="value">
  <vrc-option  value="Primeiro">1 - Primeiro </vrc-option>
  <vrc-option  value="Segundo">2 - Segundo </vrc-option>
  <vrc-option  value="Terceiro">3 - Terceiro</vrc-option>
</vrc-autocomplete>

Vinculando o valor.

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

@Component({
selector:  'vr-my',
template: `
<vrc-autocomplete label="Opções"  [(ngModel)]="valor">
  <vrc-option  value="Primeiro">1 - Primeiro </vrc-option>
  <vrc-option  value="Segundo">2 - Segundo </vrc-option>
  <vrc-option  value="Terceiro">3 - Terceiro</vrc-option>
</vrc-autocomplete>`
})
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

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:  `
  <form [formGroup]="formGroup">
    <vrc-autocomplete label="Estado" formControlName="estado" [control]="getField('estado')">
      <vrc-option *ngFor="let estado of filteredOptions | async" [value]="estado">
        <span>{{ estado }}</span>
      </vrc-option>
    </vrc-autocomplete>
  </form>`
})
export class MyComponent implements OnInit {
  filteredOptions!: Observable<string[]>;

  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. 

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

import { VrcCheckboxModule } from  'vrc-components';

@NgModule({
imports: [VrcCheckboxModule]
})
export  class  MyModule {}

templete:

<vrc-checkbox [(ngModel)]="isChecked">Ok?</vrc-checkbox>

Vinculando o valor.

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

@Component({
selector:  'vr-my',
template:  '<vrc-checkbox [(ngModel)]="isChecked" >Ok?</vrc-checkbox>'
})
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

import { Component, OnInit } from  '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from  '@angular/forms';
import { VrcFormValidations } from  'vrc-components';

@Component({
selector:  'vr-my',
template:  `<form  [formGroup]="formGroup">
                <div  class="row">
                     <div  class="col-sm-12">
                      <ng-container formArrayName="frameworks" *ngFor="let item of formFrameworks.controls; let i = index">
                   <vrc-checkbox  [formControlName]="i">{{frameworks[i] }}</vrc-checkbox>
                  </ng-container>
                 </div>
              </div>
            </form>`
})
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. 

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

import { VrcDatepickerModule } from  'vrc-components';

@NgModule({
imports: [ VrcDatepickerModule ]
})
export  class  MyModule {}

templete:

<vrc-datepicker id="dataId" [(ngModel)]="data"></vrc-datepicker>

Vinculando o valor.

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

@Component({
selector:  'vr-my',
template:  '<vrc-datepicker label="Exemplo"  type="text" isRequired="true"  [(ngModel)]="valor"></vrc-datepicker>'
})
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

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

@Component({
selector:  'vr-my',
template:  `
  <form [formGroup]="formGroup">
    <vrc-datepicker 
      label="Data"
      formControlName="data"
      [control]="getField('data')">
    </vrc-datepicker>
  </form>`
})
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. 

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

import { VrcInputModule } from  'vrc-components';

@NgModule({
imports: [ VrcImputModule ]
})
export  class  MyModule {}

templete:

<vrc-input  type="text"  [(ngModel)]="valor"></vrc-input>

Vinculando o valor.

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

@Component({
selector:  'vr-my',
template:  '<vrc-input label="Exemplo"  type="text" isRequired="true"  [(ngModel)]="valor"></vrc-input>'
})
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

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

@Component({
selector:  'vr-my',
template:  `
  <form [formGroup]="formGroup">
    <vrc-input 
      id="cpfcnpjId" 
      label="CPF/CNPJ"
      formControlName="cnpjcpf"
      [control]="getField('cnpjcpf')">
   </vrc-input>
  </form>`
})
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. 

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

import { VrcRadioModule } from  'vrc-components';

@NgModule({
imports: [VrcRadioModule]
})
export  class  MyModule {}

templete:

<vrc-radio-group  [(ngModel)]="place">
    <vrc-radio-button  value="Casa">Em casa</vrc-radio-button>
    <vrc-radio-button  value="Trabalho">No trabalho</vrc-radio-button>
    <vrc-radio-button  value="Viajando">Viajando</vrc-radio-button>
</vrc-radio-group>

Vinculando o valor.

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

@Component({
selector:  'vr-my',
template:  '<vrc-radio-group  [(ngModel)]="place">
 <vrc-radio-button  value="Casa">Em casa</vrc-radio-button>
 <vrc-radio-button  value="Trabalho">No trabalho</vrc-radio-button>
 <vrc-radio-button  value="Viajando">Viajando</vrc-radio-button>
</vrc-radio-group>'
})
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

import { Component, OnInit } from  '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from  '@angular/forms';
import { VrcFormValidations } from  'vrc-components';

@Component({
selector:  'vr-my',
template:  `<form  [formGroup]="formGroup">
              <div  class="row">
                <div  class="col-sm-6">
                  <vrc-radio-group  formControlName="gender"  [control]="getField('gender')">
                    <vrc-radio-button  *ngFor="let gender of genders"  [value]="gender.value">{{ gender?.description }}
                    </vrc-radio-button>
                  </vrc-radio-group>
                </div>
               </div>
            </form>`
})
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.

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

import { VrcSlideToggleModule } from "vrc-components";

@NgModule({
  imports: [VrcSlideToggleModule],
})
export class MyModule {}

templete:

<vrc-slide-toggle [(ngModel)]="isChecked">Ok?</vrc-slide-toggle>

Vinculando o valor.

import { Component } from "@angular/core";

@Component({
  selector: "vr-my",
  template: '<vrc-slide-toggle [(ngModel)]="isChecked" >Ok?</vrc-slide-toggle>',
})
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

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, FormArray, FormControl } from "@angular/forms";
import { VrcFormValidations } from "vrc-components";

@Component({
  selector: "vr-my",
  template: `<form [formGroup]="formGroup">
    <div class="row">
      <div class="col-sm-12">
        <ng-container
          formArrayName="frameworks"
          *ngFor="let item of formFrameworks.controls; let i = index"
        >
          <vrc-slide-toggle [formControlName]="i">{{
            frameworks[i]
          }}</vrc-slide-toggle>
        </ng-container>
      </div>
    </div>
  </form>`,
})
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.

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

import { VrcTabsModule } from "vrc-components";

@NgModule({
  imports: [VrcTabsModule],
})
export class MyModule {}

templete:

<vrc-tabs>
  <vrc-tab label="Primeiro"><div class="col-sm-12">Tab 01</div></vrc-tab>
  <vrc-tab label="Segundo"><div class="col-sm-12">Tab 02</div></vrc-tab>
  <vrc-tab label="Terceiro"><div class="col-sm-12">Tab 03</div></vrc-tab>
</vrc-tabs>

Propriedades

Propriedade @Output()
selected obtém o valor selecionado no click
styleButton altera stilo do botão de seleção

Exemplo

import { Component } from "@angular/core";
("@angular/forms");

@Component({
  selector: "vr-my",
  template: `
    <vrc-tabs (selected)="onSelected($event)">
      <vrc-tab label="Primeiro"><div class="col-sm-12">Tab 01</div></vrc-tab>
      <vrc-tab label="Segundo"><div class="col-sm-12">Tab 02</div></vrc-tab>
      <vrc-tab label="Terceiro"><div class="col-sm-12">Tab 03</div></vrc-tab>
    </vrc-tabs>
  `,
})
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.

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

import { VrcTextareaModule } from "vrc-components";

@NgModule({
  imports: [VrcTextareaModule],
})
export class MyModule {}

templete:

<vrc-textarea [(ngModel)]="valor"></vrc-textarea>

Vinculando o valor.

import { Component } from "@angular/core";

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

  template:
    '<vrc-textarea label="Exemplo" rows="5" isRequired="true" [(ngModel)]="valor"></vrc-textarea>',
})
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.

Exemplo Formulário Reativo

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

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

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

  template: ` <form [formGroup]="formGroup">
    <vrc-textarea
      label="Descrição"
      formControlName="descricao"
      [control]="getField('descricao')"
    >
    </vrc-textarea>
  </form>`,
})
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);
  }
}