import { EventEmitter } from '../../stencil-public-runtime'; type InputType = 'color' | 'email' | 'hidden' | 'password' | 'range' | 'search' | 'number' | 'tel' | 'text' | 'file' | 'url'; type InputToggle = 'on' | 'off'; type InputDensity = 'large' | 'medium' | 'small'; type InputState = 'info' | 'warning' | 'danger' | 'success'; /** * ## Design System * * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/input?tab=designer). * * @slot action - Botão à direita do input. * @slot icon - Ícone à esquerda do input. * @slot help-text - Personalização do texto de ajuda. * @slot feedback - Mensagem de feedback como resposta específica a uma interação do usuário com o input. Pode ser feedback de erro, aviso, sucesso ou informação. */ export declare class Input { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrInputElement; elementInternals?: ElementInternals; /** * Especifica o tipo de entrada do campo. */ readonly type: InputType; /** * Controla o comportamento de preenchimento automático do navegador para o input. */ readonly autocomplete?: InputToggle; /** * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido. */ readonly density: InputDensity; /** * Desativa o input, tornando-o não interativo. */ readonly disabled: boolean; /** * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline). */ readonly isInline: boolean; /** * Se verdadeiro, o input terá destaque visual. */ readonly isHighlight: boolean; /** * Define o estado do input * @remarks * O estado é propagado para o slot de feedback, mas também pode ser controlado diretamente pelo conteúdo do slot. */ readonly state?: InputState; /** * Texto exibido como rótulo do input. */ readonly label?: string; /** * Identificador único. * Caso não seja fornecido, um ID gerado automaticamente será usado. */ readonly customId: string; /** * Nome do input, utilizado para identificação em formulários. */ readonly name?: string; /** * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário. */ readonly placeholder?: string; /** * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário. */ readonly readonly: boolean; /** * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado. */ readonly required: boolean; /** * Valor exibido no input. * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa. */ value?: string; /** * Largura do campo de entrada (por exemplo, '88px'). * Quando definido, sobrescreve a largura padrão de 100%. */ readonly controlWidth?: string; /** * Remove a borda do input quando não está em foco. * Útil para composições contextuais (ex.: paginação). */ readonly borderless: boolean; /** * Texto adicional que fornece ajuda ou informações sobre o input. */ readonly helpText?: string; /** * Controla a correção automática do texto. */ readonly autocorrect: InputToggle; /** * Define o valor mínimo para campos de entrada numéricos. */ readonly min?: number; /** * Define o valor máximo para campos de entrada numéricos. */ readonly max?: number; /** * Define o comprimento mínimo do valor do campo de entrada. */ readonly minlength?: number; /** * Define o comprimento máximo do valor do campo de entrada. */ readonly maxlength?: number; /** * Se verdadeiro, permite a seleção de múltiplos arquivos. */ readonly multiple: boolean; /** * Define o padrão de entrada para validação. */ readonly pattern?: string; /** * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas). */ readonly mask?: string; /** * Define o valor do passo para campos de entrada numéricos. */ readonly step?: number; /** * Texto exibido no botão de ação à direita do input. */ readonly actionLabel?: string; /** * Define o tabindex do botão de ação. * Útil para remover o botão da sequência de tabulação quando o foco é gerenciado externamente (ex.: br-select). */ readonly actionTabIndex?: number; isPasswordVisible: boolean; internalState?: InputState; hasIconSlot: boolean; hasActionSlot: boolean; hasFeedbackSlot: boolean; private normalizeState; componentWillLoad(): void; componentDidLoad(): void; /** * Inicializa o estado interno do input com base no estado do elemento de mensagem de feedback, se presente. */ private initializeStateWithFeedback; /** * Propaga o estado interno do input para os elementos de mensagem de feedback. * @returns void */ private propagateStateToFeedback; /** * Retorna um mapa de classes CSS para o input, baseado no estado interno e nas propriedades do componente. * @returns Um objeto representando as classes CSS a serem aplicadas ao input. */ private getInputCssClassMap; /** * Valor atualizado do input */ valueChange: EventEmitter; protected handleValueChange(newValue: string): void; protected handleMaskChange(): void; protected handleStateChange(newState: InputState | undefined): void; /** * Manipula o evento de input, aplicando máscara se necessário e emitindo o valor atualizado. * @param event Evento de input do elemento HTMLInputElement */ private readonly handleInput; /** * Renderiza o rótulo do input, considerando se está em modo inline ou não. * @returns JSX.Element representando o rótulo do input. */ private readonly renderLabel; /** * Verifica se um slot específico possui conteúdo. * @param slotName Nome do slot a ser verificado * @returns true se o slot possui conteúdo, false caso contrário */ private hasSlotContent; /** * Renderiza o input do componente, aplicando as propriedades e eventos necessários. * @returns JSX.Element representando o input. */ private readonly renderInput; /** * Renderiza o texto de ajuda do input, considerando se está definido como string ou slot. * @returns JSX.Element representando o texto de ajuda. */ private readonly renderHelpText; /** * Renderiza o ícone de visibilidade da senha, alternando entre mostrar e esconder. * @returns JSX.Element representando o ícone de visibilidade da senha. */ private readonly renderIconPassword; /** * Alterna a visibilidade da senha, mudando o tipo do input entre 'text' e 'password'. * @returns void */ private readonly togglePasswordVisibility; /** * Renderiza o slot de ícone, caso exista. * @returns JSX.Element representando o slot de ícone. */ private renderIconSlot; /** * Renderiza o botão de ação do input, considerando o tipo de input e slots disponíveis. * @returns JSX.Element representando o botão de ação. */ private renderButton; /** * Renderiza o conteúdo do input quando está em linha, considerando se há ícone ou não. * @returns JSX.Element representando o conteúdo do input em linha. */ private readonly renderInlineInputContent; /** * Renderiza o conteúdo do input, considerando se há ícone ou não. * @returns JSX.Element representando o conteúdo do input. */ private readonly renderInputContent; /** * Renderiza o conteúdo do input com ícone, organizando os elementos em um grupo e aplicando estilos de largura quando necessário. */ private readonly renderInputWithIcon; /** * Renderiza o conteúdo do input sem ícone, organizando os elementos em um grupo. * @returns JSX.Element representando o conteúdo do input sem ícone. */ private readonly renderInputWithoutIcon; /** * Renderiza o slot de feedback, caso exista, permitindo que mensagens de feedback sejam exibidas em resposta a interações do usuário com o input. * @returns JSX.Element representando o slot de feedback. */ private renderFeedback; /** * Aplica a máscara configurada ao valor do input, se houver. * @returns void */ private applyMaskToValue; /** * Aplica a máscara configurada a um valor específico. * @param value O valor a ser mascarado. * @returns O valor mascarado. */ private applyMask; /** * Verifica se uma máscara está configurada. * @returns boolean indicando se uma máscara está configurada. */ private hasMaskConfigured; /** * Renderiza o componente de input. * @returns JSX.Element representando o componente de input. */ render(): any; } export {};