# DROPDOWN-MODULE
Importe o módulo Dropdown Module no módulo que você deseja:

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

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



## Parâmetros do componente:
Deve receber um parâmetro do tipo DropdownConfig:
```ts
export class DropdownConfig {
    options: DropdownOption[] = [];
    defaultOptions: DropdownOption[] = [];
    selectedOptions!: number[];
    serviceConfig!: DropdownServiceConfig;
    leftIcon!: string;
    rightIcon = 'user-interface-research-outline';
    type = DROPDOWN_TYPE.CHECKBOX;
    size = COMPONENT_SIZE.MEDIUM;
    badgeColor = 'support-gray';
    badgeType = 'soft';
    placeholder = 'Selecione uma opção';
    hint!: string;
    link!: string;
    textLink!: string;
    isCollapsed: boolean;
    focus: boolean;
    textTitleCase: boolean;
    optionSubvalue: boolean;
}
```

### Especificação dos atributos: 

* **options: DropdownOption[]**  (opcional) - lista de opções que será exibida no Dropdown. No caso de utilizar um service para gerar a lista de opções, não é necessário.
```ts
  options: DropdownOption[] = [
    {
      id: 1,
      value: 'Option 1',
      visible: true,
    },
    {
      id: 2,
      value: 'Option 2',
      visible: true,
    },
    {
      id: 3,
      value: 'Option 3',
      visible: true,
    }
  ];
```

* **defaultOptions: DropdownOption[]**  (opcional) - Caso estiver utilizando o metodo de service é possivel adicionar valores que sempre serão adicionados a listagem, mesmo que o serviço não os retorne
```ts
  options: DropdownOption[] = [
    {
      id: 1,
      value: 'Option 1',
      visible: true,
    },
    {
      id: 2,
      value: 'Option 2',
      visible: true,
    },
    {
      id: 3,
      value: 'Option 3',
      visible: true,
    }
  ];
```

* **selectedOptions** (opcional) - ids das opções que devem vir pré-selecionadas, caso seja necessário. NO caso do radio ou select, se houver mais de uma, usará a primeira.

* **serviceConfig: DropdownServiceFilterConfig** (opcional) - configurações para quando for utilizar o Dropdown com um service. O type deve ser 'sql' ou 'graphql'.
```ts
  serviceConfig: DropdownServiceConfig = {
    model: OptionModel,
    functionLoad: this.optionsService.list.bind(this.optionsService),
    type: 'sql',
    findNullValue: false,
    map: {
      id: 'id',
      value: 'value',
      subValue: 'subValue',
    },
    initServiceOnComponentRender: false
  };
```

* **leftIcon: string** (opcional)

* **rightIcon: string** (opcional) - quando não informado, usará por padrão o ícone 'user-interface-research-outline'.

* **type: string** (opcional) - DROPDOWN_TYPE.CHECKBOX, DROPDOWN_TYPE.RADIO OU DROPDOWN_TYPE.SELECT. Se não informado, por padrão será CHECKBOX.

* **size: string** (opcional) - COMPONENT_SIZE.SMALL, COMPONENT_SIZE.MEDIUM ou COMPONENT_SIZE.LARGE. Se não informado usará o padrão MEDIUM.

* **badgeColor** (opcional) - cor das badges. Se não informado será support-gray.

* **badgeType** (opcional) - soft ou solid. Se não informado será soft.
 
* **placeholder: string** (opcional) - quando não informado mostrará a mensagem padrão 'Selecione uma opção'.

* **hint: string** (opcional)

* **link: string** (opcional) - link para redirecionamento.

* **textLink: string** (opcional) - descricão do link. Se não informado mostrará o próprio link.

* **focus: boolean** (opcional) - aplicar outline no dropdown selecionado. Se não informado, não será aplicado.

## Exemplo de chamada do componente.

No ts:

```ts
    this.dropdownConfigCheckbox = new DropdownConfig()
    this.dropdownConfigCheckbox.options = this.dropdownCheckboxOptions;
    this.dropdownConfigCheckbox.type = DROPDOWN_TYPE.CHECKBOX;
    this.dropdownConfigCheckbox.placeholder = 'Selecione abaixo ou pesquise aqui';
    this.dropdownConfigCheckbox.leftIcon = 'multimedia-image-3-outline';
    this.dropdownConfigCheckbox.size = COMPONENT_SIZE.LARGE;
    this.dropdownConfigCheckbox.style = 'support-red';
    this.dropdownConfigCheckbox.hint = 'Dropdown com sytle support-red';
    this.dropdownConfigCheckbox.textTitleCase = true;
    this.dropdownConfigCheckbox.optionSubvalue = true;
```

No html:

```html
    <soft-dropdown 
        [dropdownConfig]="dropdownConfigCheckbox"
    ></soft-dropdown>
```