<input-cpf-cnpj/>

A simple web component that wraps a <input/> and validates its content against CPF and CNPJ Brazilian numbers.

WIP (not ready for production, yet)

It has no dependencies, except it's own compilier.

Features:

• No shadow DOM: put your own style
• It's an input type text (you can't change that): <input type="text"/>
• Validates as you type firing an event with an bolean telling if the number it's a valid CPF or CNPJ.

To Do:

• Allows only numbers
• Activate masks by setting a prop
• Tests

API

• There is only one custom event fired yb this component that's the one that indicates whether the number is CPF/CNPJ valid or not.

<input valid=yourMethod($event)/>

$event it's a boolean.

All other events are from the native input with text type, such as change and input. You can check here the events and attributes supported by this component. The only exception, it's the list attribute from <input>, cuz it makes no sense that kind of attribute in a field that does a single text validation.

To style this component using your own classes or from a CSS framework, use classes prop. Something like bellow, using input class from Bulma:

<input-cpf-cnpj classes="input"></input-cpf-cnpj>

Using this component

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/input-cpf-cnpj.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install input-cpf-cnpj --save
• Put a script tag similar to this <script src='node_modules/input-cpf-cnpj/dist/input-cpf-cnpj.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Em pt-br:

Um "web component" simples que encapsulta o <input/> e valida se seu conteúdo é um número válido de CPF ou CNPJ

Status: em progresso (ainda não é para usar em produção)

Não tem dependências, exceto seu próprio compilador para gerar esse componente.

Características:

• Sem shadow DOM: use seu próprio CSS para estilizar o componente
• É um input do tipo "text": <input type="text"/>

Tarefas a serem feitas:

• Permitir somente números
• Ativar ou não máscara para o input ativando através de uma propriedade do componente.
• Testes

API

Há apenas um evento personalizado acionado por esse componente que indica se o número é válido ou não pelo CPF / CNPJ.

<input valid=yourMethod($event)/>

$event é do tipo boolean.

Todos os outros eventos são do input nativo do tipo text, como change e input. Você pode verificar aqui os eventos e atributos suportados por este componente. A única exceção, é o atributo list de<input>, porque não faz sentido esse tipo de atributo em um campo que faz uma única validação de texto.