# INPUT-MODULE
Importe o módulo InputModule no módulo que você deseja:

```ts
import { InputModule } from 'ngx-softfocus';

@NgModule({
    imports: [
        InputModule,
    ]
})
```

Parâmetros suportados pelo componente.

```ts
    type!: string;
    size!: string;
    style!: string;
    disabled?: boolean = false;
    placeholder!: string;
    required?: boolean = false;
    leftIcon?: string = '';
    rightIcon?: string = '';
    onError?: boolean = false;
    maxLength = 200;
    onlyLetters = false;
    titleCase = false;
    useMaskMoneyConfig = false;
    maskMoneyConfig = { prefix: 'R$ ', thousands: '.', decimal: ',', allowNegative: false, align: 'left'};
```
Caso queira o input com datepicker passar parametro isDateField = true os parametros suportados serão:
```ts
    isDateField: boolean
    type!: string;
    size!: string;
    style!: string;
    disabled?: boolean = false;
    placeholder!: string;
    required?: boolean = false;
    leftIcon?: string = '';
    rightIcon?: string = '';
    minimumDate?: new Date(2021,1,1);
    maximumDate?: new Date(2023,1,1);
    dateTheme: string;
    positionModal: string;
```
Import que deverá ser feito no  module do projeto que consumir o soft-input com datepicker:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
```
imports: [
BrowserAnimationsModule
]
```
Documentação datepicker:
https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts

Exemplo de chamada do componente com datepicker.
```html
    <soft-input
    [isDateField]="true"
    [style]="'primary'"
    [size]="small"
    [required]="true"
    [placeholder]="'DD/MM/YYYY'"
    [minimumDate]="minimumDate"
    [maximumDate]="maximumDate"
    [rightIcon]="'user-interface-date-outline'"
    [dateTheme]="'theme-default'"
    [modalPosition]= "'bottom'">
</soft-input>
```

Exemplo de chamada do componente.
```html
    <soft-input type="text" size="large" [required]="true" 
                placeholder="000.000.000-00" [style]="'primary'" 
                leftIcon="communication-message-1-outline" [disabled]="true">
    </soft-input>
```

Uma combinação para o uso do input é utilizar os componentes label e hint como no exemplo a baixo, da mesma forma para outros elementos HTML:
```html
        <soft-label>Small Input</soft-label>
        <soft-input type="email" size="small" [required]="true" 
                    placeholder="email@email.com.br" 
                    [style]="'primary'" 
                    leftIcon="communication-message-1-outline" 
                    rightIcon="communication-message-1-outline"
                    [maxLength]="200" 
                    [titleCase]="false" 
                    [justLetters]="false">
        </soft-input>
        <soft-hint>Text under input</soft-hint>
```

OBS: Caso queira que tenha máscara monetária no input basta colocar o **type** como **text** e passar a variavel **useMaskMoneyConfig** como **true**. Onde também é possível
colocar um filtro específico caso o padrão na variável **useMaskMoneyConfig** não atenda tais requisitos. 
```html
        <soft-label>Small Input</soft-label>
        <soft-input type="text" size="small" [required]="true" 
                    placeholder="Digite" 
                    [style]="'primary'" 
                    leftIcon="communication-message-1-outline" 
                    rightIcon="communication-message-1-outline"
                    [maxLength]="200" 
                    [titleCase]="false" 
                    [justLetters]="false"
                    [useMaskMoneyConfig]="true"
                    [maskMoneyConfig]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false, align: 'left'}">
        </soft-input>
        <soft-hint>Text under input</soft-hint>
```