# BOX-MODULE

Importe o módulo BoxModule no módulo que você deseja:

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

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

Parâmetros suportados pelo componente.

```ts
    label!: string;
    size: string = SIZE_BOX.MEDIO;
    leftIcon?: string;
    hideIconInfo = false;
    hideBody = false;
    valueToggle  = false;
    hideToggle = false;
    sizeToggle: string = SIZE_TOGGLE.GRANDE;
    disableToggle = false;
    styleToggle: string = STYLE_TOGGLE.PRIMARIO;
    tooltipText?: string;
    verticalPadding: number = 24;
    horizontalPadding: number = 24;
    fontSize: number = 16;
    useShadow = true;
    bgColor = '#F7F8F9';
    showHeader = true;
    marginBox = '';
    typeBorderRadius = TYPE_BORDER_RADIUS.FULL_BORDER_RADIUS;
    
    changeValueToggle = new EventEmitter<boolean>();
```

Exemplo de chamada do componente.

```html
    <soft-box label="text" [leftIcon]="'design-tools-eye-outline'" [hideIconInfo]="false" [hideToggle]="false"
              [hideBody]="false" [valueToggle]="false" [tooltipText]="'Texto do tooltip'" (changeValueToggle)="onClickCheckbox($event)">
        <h1>Box Component</h1>
    </soft-box>
```

O atributo typeBorderRadius, será utilizado nos casos em que o usuário tiver a necessidade de definir se a borda será redonda ou não e quais
seriam os lados a serem customizados, existindo 4 tipos, sendo eles: full-border-radius, partial-border-radius-bottom, partial-border-radius-top, none-border-radius.
full-border-radius: Todos os lados do componente serão aplicado border-radius.
partial-border-radius-bottom: Apenas o bottom do componente será aplicado border radius.
partial-border-radius-top: Apenas o top do componente será aplicado border radius.
none-border-radius: Nem um dos lados do componente será aplicado border-radius.
Por padrão, caso não seja passado esse atributo, será aplicado por padrão o full-border-radius, sendo que em todos os casos será de 8 px.
Exemplo de aplicação com o seguinte código: 

```html
<soft-box [label]=questao.descricao
          [hideIconInfo]=true
          [valueToggle]=questao.resposta_inicial
          [hideBody]=true
          [useShadow]=false
          [bgColor]="'#FFFFFF'"
          [typeBorderRadius]="TYPE_BORDER_RADIUS.FULL_BORDER_RADIUS"
          (changeValueToggle)="selecionarResposta($event, questao, i)">
</soft-box>
```