# BOX-MESSAGE
Importe primeiramente o BoxMessageComponent e ModalButton no component a ser utilizado:

```ts
import { BoxMessageComponent, ModalButton } from 'ngx-softfocus';
```

Parâmetros suportados pelo componente.

```ts
    title!: string;
    subtitle!: string;
    message!: string;
    iconColor = 'red';
    buttonListModal!: Array<ModalButton>;
    useOkButton?: false;
    onExit!: () => any;
    width = '544px';
    maxHeight = '216px';
    disabled = false;
```

Exemplo de chamada do componente. 

Esta componente será utilizado quando for necessário apresentar alguma mensagem de alerta para os usuarios. Para isso deve ser
criado primeiramente um Array<ModalButton> com a quantidade de botões de 1 á 3 conforme o exemplo abaixo:

```typescript
botoesModal: Array<ModalButton> = [
    {
        text: 'OK',
        functionModal: () => {
            console.log('Realizando testes box Message: OK');
        }, 
        colorTextButton: '#FFFFFF',
        widthButton: '106px', 
        heightButton: '42px', 
        variation: 'solid'
    },
    {
        text: 'Cancelar',
        functionModal: () => {
            console.log('Realizando testes box Message: Cancelar');
        },
        colorTextButton: '#F58220',
        widthButton: '106px',
        heightButton: '42px', 
        variation: 'outline'
    },
    {
        text: 'Cancelar',
        functionModal: () => {
            console.log('Realizando testes box Message: Cancelar');
        }, 
        colorTextButton: '#F58220',
        widthButton: '106px',
        heightButton: '42px',
        variation: 'empty'
    }
];
```
Por fim, bastar realizar a chamada do componente no arquivo TypeScript com base na validação necessária. Exemplo criado é 
se vem um Exception do back-end:

```typescript
this.modalRef = this.bsModalService.show(BoxMessageComponent, {
    initialState: {
        title: 'Não é possível seguir com a cotação!',
        subtitle: 'A cotação ficará salva na listagem e poderá ser alterada futuramente!',
        message: httpResponseError.error.mensagem,
        iconColor: '#EF5944',
        buttonListModal: this.botoesModal,
        onExit: () => {
            this.modalRef.hide();
        }
    },
});
```

No html onde é chamado o `<soft-button>`, tem a possibilidade de deixar desabilidado o botão ao passar um 
`ModalButton` com a propiedade `disabled = true`