# ez-search ## Properties | Property | Attribute | Description | Type | Default | | ---------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- | | `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo a ser apresentado como título do campo. | `string` | `undefined` | | `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` | | `contextProperties` | `context-properties` | Propriedades de contexto da aplicação. | `any` | `undefined` | | `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` | Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente. | `boolean` | `true` | | `ignoreLimitCharsToSearch` | `ignore-limit-chars-to-search` | Define se deve ignorar o limite de caracteres mínimo para realizar uma pesquisa | `boolean` | `false` | | `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto. | `boolean` | `false` | | `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` | | `listOptionsPosition` | -- | Define um posicionamento fixo para a lista de opções do CheckBox. | `IEzCheckBoxListPosition` | `undefined` | | `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` | | `optionLoader` | -- | Carrega as opções dinamicamente. | `(argument: ISearchArgument, ctxProperties?: any) => IOption \| IOption[] \| Promise` | `undefined` | | `options` | -- | Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`. | `IOption[]` | `undefined` | | `showOptionValue` | `show-option-value` | Se false cada opção na lista deve exibir somente o `label`. | `boolean` | `true` | | `showSelectedValue` | `show-selected-value` | Se false a opção selecionada deve exibir somente o `label`. | `boolean` | `true` | | `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, ineterrompe a propagação do evento de KeyDown da tecla enter | `boolean` | `false` | | `suppressEmptyOption` | `suppress-empty-option` | Se true remove a opção vazia da lista. | `boolean` | `false` | | `suppressPreLoad` | `suppress-pre-load` | Se true, desabilita pré-load das opções ao carregar componente | `boolean` | `true` | | `suppressSearch` | `suppress-search` | Se true desabilita a digitação dentro do componente. | `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 vazio. | `CustomEvent` | ## Methods ### `clearValue() => Promise` Limpa o valor do campo de pesquisa #### Returns Type: `Promise` --- ### `getValueAsync() => Promise` #### 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](../ez-form) - [ez-form-view](../ez-form-view) - [ez-grid](../ez-grid) - [ez-multi-selection-list](../ez-multi-selection-list) ### Depends on - [ez-text-input](../ez-text-input) - [ez-icon](../ez-icon) - [ez-popover-plus](../ez-popover-plus) - [search-list](./subcomponent/search-list) ### Graph ```mermaid graph TD; ez-search --> ez-text-input ez-search --> ez-icon ez-search --> ez-popover-plus ez-search --> search-list ez-text-input --> ez-tooltip ez-text-input --> ez-icon ez-popover-plus --> ez-popover-core search-list --> ez-card-item ez-form --> ez-search ez-form-view --> ez-search ez-grid --> ez-search ez-multi-selection-list --> ez-search style ez-search 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--space--medium | Define um espaçamento mediano entre elementos do componente. | | --ez-search--space--small | Define um espaçamento pequeno entre elementos do componente. |