# ez-search-plus ## Properties | Property | Attribute | Description | Type | Default | | ---------------------------- | -------------------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` | | `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` | | `codLabel` | `cod-label` | Texto a ser apresentado no input de código. | `string` | `undefined` | | `contextProperties` | `context-properties` | Propriedades de contexto da aplicação. | `any` | `undefined` | | `disableCodeInput` | `disable-code-input` | Se true o campo de código ficara desabilitado. | `boolean` | `false` | | `disableDescriptionInput` | `disable-description-input` | Se true o campo de de apresentação ficara desabilitado. | `boolean` | `false` | | `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` | | `ensureClearButtonVisible` | `ensure-clear-button-visible` | Garante que o botão de limpar pesquisa está sempre visível | `boolean` | `false` | | `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` | | `hideDescriptionInput` | `hide-description-input` | Se true o campo de de apresentação não será exibido. | `boolean` | `false` | | `hideErrorOnFocusOut` | `hide-error-on-focus-out` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `true` | | `ignoreLimitCharsToSearch` | `ignore-limit-chars-to-search` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` | | `isTextSearch` | `is-text-search` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` | | `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` | | `listOptionsPosition` | -- | Propriedade depreciada na nova versão do componente de pesquisa. | `IEzCheckBoxListPosition` | `undefined` | | `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` | | `optionLoader` | -- | Carrega as opções dinamicamente. | `(argument: ISearchArgument, ctxProperties?: any) => ISearchOption \| IOption \| (ISearchOption \| IOption)[] \| Promise` | `undefined` | | `showOptionValue` | `show-option-value` | Se false cada opção na lista deve exibir somente o `label`. | `boolean` | `true` | | `showSelectedValue` | `show-selected-value` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `true` | | `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, interrompe a propagação do evento de KeyDown da tecla enter | `boolean` | `false` | | `suppressEmptyOption` | `suppress-empty-option` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` | | `suppressPreLoad` | `suppress-pre-load` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `true` | | `suppressSearch` | `suppress-search` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` | | `value` | `value` | Define o valor do campo. | `IOption \| string` | `undefined` | ## Events | Event | Description | Type | | --------------- | -------------------------------------------------------- | ---------------------- | | `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent` | | `ezEmptySearch` | Emitido quando a pesquisa retorna um resultado inválido. | `CustomEvent` | ## Methods ### `clearValue() => Promise` Limpa o valor do campo de pesquisa #### Returns Type: `Promise` --- ### `getValueAsync() => Promise` Obtém o valor do componente só após a compo de apresentação ter sido resolvido pelo option loader quando necessário #### Returns Type: `Promise` --- ### `isInvalid() => Promise` Retorna se o conteúdo é inválido. #### Returns Type: `Promise` --- ### `setBlur() => Promise` Remove o foco do campo. #### Returns Type: `Promise` --- ### `setFocus(options?: TFocusOptions) => Promise` Aplica o foco no campo. #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-form-view](../ez-form-view) ### Depends on - [ez-icon](../ez-icon) - [ez-text-input](../ez-text-input) - [ez-popover-plus](../ez-popover-plus) - [ez-search-result-list](./subcomponent/ez-search-result-list) ### Graph ```mermaid graph TD; ez-search-plus --> ez-icon ez-search-plus --> ez-text-input ez-search-plus --> ez-popover-plus ez-search-plus --> ez-search-result-list ez-text-input --> ez-tooltip ez-text-input --> ez-icon ez-popover-plus --> ez-popover-core ez-search-result-list --> ez-card-item ez-search-result-list --> ez-skeleton ez-form-view --> ez-search-plus style ez-search-plus fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-search--height | Define altura do input. | | --ez-search--width | Define largura do input. | | --ez-search\_\_icon--width | Define largura do slot do ícone do input. | | --ez-search--border-radius | Define o raio da borda do input. | | --ez-search--border-radius-small | Define o raio da borda do input quando pequeno. | | --ez-search--font-size | Define o tamanho da fonte dentro do input. | | --ez-search--font-family | Define a família da fonte dentro do input. | | --ez-search--font-weight--large | Define o peso da fonte dentro do input quando pesada. | | --ez-search--font-weight--medium | Define o peso da fonte dentro do input quando média. | | --ez-search--background-color--xlight | Define a cor de fundo da lista de opções. | | --ez-search--background-medium | Define a cor de fundo dos itens da lista de opções. | | --ez-search--line-height | Define a altura da linha do texto dentro do input. | | --ez-search\_\_input--background-color | Define a cor de fundo do input. | | --ez-search\_\_input--border | Define o estilo da borda do input. | | --ez-search\_\_input--border-color | Define a cor da borda do input. | | --ez-search\_\_input--focus--border-color | Define a cor da borda do input quando focado. | | --ez-search\_\_input--disabled--background-color | Define a cor de fundo do input quando desabilitado. | | --ez-search\_\_input--disabled--color | Define a cor do texto dentro do input quando desabilitado. | | --ez-search\_\_input--error--border-color | Define a cor da borda do input quando com erro. | | --ez-search\_\_btn--color | Define a cor do botão de pesquisa do componente. | | --ez-search\_\_btn-disabled--color | Define a cor do botão de pesquisa do componente quando desabilitado. | | --ez-search\_\_btn-hover--color | Define a cor do botão de pesquisa do componente quando o mouse está sobre ele. | | --ez-search\_\_label--color | Define a cor do label. | | --ez-search\_\_list-title--primary | Define a cor do texto da lista de opções. | | --ez-search\_\_list-text--primary | Define a cor do texto do value da lista de opções. | | --ez-search\_\_list-height | Define a altura do box da lista de opções. | | --ez-search\_\_list-min-width | Define a largura mínima da lista de opções. | | --ez-search--space--medium | Define um espaçamento mediano entre elementos do componente. | | --ez-search--space--small | Define um espaçamento pequeno entre elementos do componente. | | --ez-search\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. | | --ez-search\_\_scrollbar--color-background | Define a cor de fundo da barra de rolagem do componente. | | --ez-search\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. | | --ez-search\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. | | --ez-search\_\_scrollbar--border-radius | Define o raio da borda da barra de rolagem do componente. | | --ez-search\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |