@govbr-ds/webcomponents/dist/types/components/input/input.d.ts

Biblioteca de Web Components baseado no GovBR-DS

import { EventEmitter } from '../../stencil-public-runtime';
/**
 *
 * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](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. Pode ser um dos seguintes:
     * - 'color': Seletor de cor
     * - 'email': Campo para e-mail
     * - 'hidden': Campo oculto
     * - 'password': Campo para senha
     * - 'range': Controle deslizante
     * - 'search': Campo de pesquisa
     * - 'number': Campo para números
     * - 'tel': Campo para números de telefone
     * - 'text': Campo de texto padrão
     * - 'url': Campo para URLs
     */
    readonly type: 'color' | 'email' | 'hidden' | 'password' | 'range' | 'search' | 'number' | 'tel' | 'text' | 'file' | 'url';
    /**
     * Controla o comportamento de preenchimento automático do navegador para o input.
     */
    readonly autocomplete: 'on' | 'off';
    /**
     * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
     */
    readonly density: 'large' | 'medium' | 'small';
    /**
     * 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
     * Os possíveis valores são:
     * - 'info': Mensagem informativa.
     * - 'warning': Mensagem de aviso.
     * - 'danger': Mensagem de erro ou alerta.
     * - 'success': Mensagem de sucesso.
     * O valor padrão é 'info'.
     */
    readonly state: 'info' | 'warning' | 'danger' | 'success';
    /**
     * 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;
    /**
     * Texto adicional que fornece ajuda ou informações sobre o input.
     */
    readonly helpText: string;
    /**
     * Controla a correção automática do texto.
     */
    readonly autocorrect: 'off' | 'on';
    /**
     * 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;
    /**
     * 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;
    isPasswordVisible: boolean;
    internalState: 'info' | 'warning' | 'danger' | 'success';
    hasIconSlot: boolean;
    hasActionSlot: boolean;
    hasFeedbackSlot: boolean;
    componentWillLoad(): void;
    componentDidLoad(): void;
    private initializeStateWithFeedback;
    private setupSlotFeedbackListener;
    private syncStateWithSlotFeedback;
    private getInputCssClassMap;
    /**
     * Valor atualizado do input
     */
    valueChange: EventEmitter<string>;
    private readonly handleInput;
    private readonly renderLabel;
    private hasSlotContent;
    private readonly renderInput;
    private readonly renderHelpText;
    private readonly renderIconPassword;
    private readonly togglePasswordVisibility;
    private renderIconSlot;
    private renderButton;
    private readonly renderInlineInputContent;
    private readonly renderInputContent;
    private readonly renderInputWithIcon;
    private readonly renderInputWithoutIcon;
    private renderFeedback;
    render(): any;
}