npm package: @starley/ion-directives
Description: Directivas internas para ionic
Author: Starley Cazorla
Latest version: 1.4.2

# Ion-directives

São directivas para uso em ionic, para mascramento de inputs, pressHold, tap, doubleTap, connector sqlite pwa, gerenciamento de datas e remover algo do input!

![Badge em Desenvolvimento](http://img.shields.io/static/v1?label=STATUS&message=EM%20DESENVOLVIMENTO&color=GREEN&style=for-the-badge)

## Authors

- [@starleydev](https://www.github.com/starleyDev)

## Installation

```bash
  npm i @starley/ion-directives
```

## Usage/Examples

Importe dentro do modulo que ira utilizar

my-component.module.ts

```typescript
import { DirectivesModule } from '@starley/ion-directives';


@NgModule({
    ...
    imports: [
        ...,
        DirectivesModule
    ],
    ...
})
export class MyComponent {}
```

### Para usar a FormChangeDetector

* Importe a service FormChangeDetector no componente que desejar utilizar.

* Injete a service no construtor do componente:

```typescript
constructor(private formChangeDetector: FormChangeDetector) {}
```

Crie o formulario usando o FormGroup, e chame o método `prepareFormChangeDetection` passando o formulário como parâmetro.

Ex: this.myForm = this.formChangeDetector.prepareFormChangeDetection(this.myForm);

É necessário retornar o formulário para a própria variável, pois quando o formulário é atualizado, as mudanças precisam ser refletidas na variável para que o sistema de detecção de mudanças do Angular funcione corretamente.

Agora temos a variavel booleana `isDirty` que indica se o formulário foi modificado e pode ser usada para habilitar/desabilitar botões de salvar com base nas alterações.

Ex: if(this.formChangeDetector.isDirty) { ... }

Agora você pode usar o formulário com detecção de mudanças automaticamente.

### Para usar a mascara 'appMask'

Adicione dentro do input a chamada passando após o simbolo de '=' a formatação desejada!

* Agora e possivel criar mascaras customizadas para serem alteradas

Ex: [appMask]="isCpf ? '***.***.***-**' : '**.***.***/****-**'"

my-component.html

```html
<ion-content>
  ...
  <ion-item>
    <ion-label>CPF</ion-label>
    <ion-input
      class="ion-text-right"
      [(ngModel)]="cpf"
      maxlength="14"
      type="number"
      placeholder="000.000.000-00"
      appMask="***.***.***-**"
    ></ion-input>
  </ion-item>
  ...
</ion-content>
```

Resultado --> 123.456.789-00

### Para usar a pressHold 'appPressHold'

O tempo minimo e de 450 milisegundos!

Caso queria alterar o tempo minimo basta adicionar o tempo desejado

Adicione a chamada de 'appPressHold' juntamente com o '(press)' pois ele será o responsavel pela ação!

my-component.html

```html
<ion-content>
    ...
    <ion-item appPressHold (press)="doSomething()>
      <ion-label>PressHold</ion-label>
    </ion-item>
    ...

     ... Caso queria usar com tempo definido
    <ion-item appPressHold="250" (press)="doSomething()>
      <ion-label>PressHold</ion-label>
    </ion-item>
    ...
</ion-content>
```

### Para usar 'appTap'

Adicione dentro de um elemento qualquer! Ao adicionar você tera duas opções!

_O (tap) tera ação de intervalo de 250 milisegundos_

_O (doubleTap) terá ação de intervalo de 300 milisegundos_

my-component.html

```html
<ion-content>
  ...
  <ion-content>
    ...
    <ion-item appTap (tap)="doSomething()" (doubleTap)="doSomething()">
      <ion-label>tap</ion-label>
    </ion-item>
    ...
  </ion-content>
  ...
</ion-content>
```

### Para usar 'appTap'

Adicione dentro de um elemento qualquer! Ao adicionar você tera duas opções!

_O (tap) tera ação de intervalo de 250 milisegundos_

_O (doubleTap) terá ação de intervalo de 300 milisegundos_

my-component.html

```html
<ion-content>
  ...
  <ion-content>
    ...
    <ion-item appTap (tap)="doSomething()" (doubleTap)="doSomething()">
      <ion-label>tap</ion-label>
    </ion-item>
    ...
  </ion-content>
  ...
</ion-content>
```

### Para usar 'appRemoveFromInput'

Agora você poderá remover letras, numeros, caracteres especiais ou um texto qualquer de um input!

- -> "letter" : Remove qualquer caracteres que sejam do alfabeto;
- -> "number" Remove tudo que for digito;
- -> "special" : Remove tudo que for caractreres especiais;
- -> "punctuation" : Remove tudo que for pontuação (.,!?'"():;\_-)
- Caso queria remover uma determinada sequencia basta colocar o texto que quiser que ele ira remover o que foi definido!

my-component.html

```html
<ion-content>
  ...
  <ion-content>
    ...
    <ion-input appRemoveFromInput="letter"> </ion-input>
    ...
  </ion-content>
  ...
</ion-content>
```

### Para usar 'appBlockCopyPaste'

Agora ele ira bloquear o copia e colar do input!

```html
<ion-content>
  ...
  <ion-content>
    ...
    <ion-input appBlockCopyPaste> </ion-input>
    ...
  </ion-content>
  ...
</ion-content>
```

## License

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)