# CARD-CLIENT

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

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

@NgModule({
    imports: [
        CardClientModule,
    ]
})
```
Parâmetros suportados pelo componente.

```ts
dropTitle!: string;
cardTitle!: string;
type: string = TYPE_CARD_CLIENT.SLIM;
size: string = SIZE_CARD_CLIENT.PEQUENO;
textListTitlecase: boolean = true;
enableRowIcons = false;
enableActionButton = false;
actionButtonLabel = string;
actionButtonFunction?: () => any;
fnTransformSelectedItem!: (value: any) => Observable<Array<Data>>;
mostraSubValue = true;
pushFirstItemRow = true;
defaultValueEvent: EventEmitter<Array<ClientData>> = new EventEmitter<Array<ClientData>>();
```

Exemplo de chamada do componente.

```html
<soft-card-client
    dropTitle="Selecionar Cliente"
    cardTitle="Cliente Medium"
    size="medium"
    type="full"
    [serviceConfig]="serviceConfig"
    [enableActionButton]="true"
    [enableCloseButton]="true"
    actionButtonLabel="Resumo do perfil"
    [actionButtonFunction]="testeActionButton"
    [fnTransformSelectedItem]="selecionaItem.bind(this)">
</soft-card-client>
```

```ts
// Service para o DropDown
serviceConfig = {
    functionLoad: this.clienteService.pesquisaClientePorCpfCnpj.bind(this.clienteService),
    type: 'sql',
    map: {
        id: 'id',
        value: 'nome',
        subValue: 'cpf_cnpj',
    }
} as DropdownServiceConfig;

// Função para tratar as informações das linhas
selecionaItem(value: any): Observable<Array<ClientData>> {
    return this.clienteService
        .carregarClientePorID(value)
        .pipe(
            map(response => {
                const temp = new Array<ClientData>();
                // temp.push({ rowIcon: 'users-account-1-outline', rowInfo: response.nome });
                temp.push({ icon: 'users-account-1-outline', content: Utils.getCpfCnpjMascarado(response.cpf_cnpj) });

                const dataNascimento = response.data_nascimento ? response.data_nascimento : null;
                let dataNascimentoFormatada;

                if (dataNascimento) {
                    dataNascimentoFormatada = `${CredilabUtils.datePipe.transform(dataNascimento, 'dd/MM/yyyy')} -
                            ${((new Date()).getFullYear()) - (new Date(dataNascimento)).getFullYear()} anos`;
                }

                temp.push({ icon: 'users-account-1-outline', content: dataNascimentoFormatada || `Não informado` });
                temp.push({ icon: 'users-account-1-outline', content: response.sexo_pessoa || 'Não informado' });

                return temp;
            })
        );
}

```