@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/components/input/input.js

@@ -0,0 +1,1642 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { redispatchNativeFormEvent } from "../../shared/utils/event";
+import { getFormValidationState, isFormControlDisabled, safeSetFormValue, syncNativeFormValidity, } from "../../shared/utils/form";
+import { setPartAttributes } from "../../shared/utils/parts";
+import { normalizePropValue } from "../../shared/utils/props";
+import { hasAssignedSlotContent, hasNamedLightDomSlot } from "../../shared/utils/slot";
+import { resolveFormValidator } from "../../shared/utils/validator";
+const INPUT_STATES = ['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).
+ *
+ * ### Validação e Acessibilidade
+ * - **Validação:** Utilize a propriedade `state="danger"` para indicar um campo inválido e forneça o motivo no slot `feedback` utilizando o `<br-message>`. O gerenciamento da regra de validação é de responsabilidade da aplicação ou framework consumidor.
+ * - **Acessibilidade:** Este componente respeita a navegação por teclado e automaticamente sinaliza erros para leitores de tela quando `state="danger"` é ativado. Se o campo não possuir rótulo visual (label), use a propriedade `aria-label`.
+ *
+ * @category Formulários
+ * @status stable
+ * @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.
+ * @slot validation-loading - Indicador exibido enquanto o validator assíncrono está pendente.
+ *
+ * @part container - Contêiner visual principal do input.
+ * @part label - Rótulo do input.
+ * @part input - Elemento input nativo.
+ * @part group - Grupo que contém ícone, input, botão e ajuda.
+ * @part icon - Contêiner do slot de ícone.
+ * @part action - Botão de ação lateral.
+ * @part action-button - Botão interno reexportado do br-button da ação.
+ * @part help-text - Texto de ajuda ou slot de ajuda.
+ * @part feedback - Slot de feedback.
+ */
+export class Input {
+    constructor() {
+        this.formDisabled = false;
+        this.hasActionSlot = false;
+        this.hasFeedbackSlot = false;
+        this.hasValidationLoadingSlot = false;
+        this.hasIconSlot = false;
+        this.isValidating = false;
+        this.validatorMessage = null;
+        this.isPasswordVisible = false;
+        /**
+         * Especifica o tipo de entrada do campo.
+         */
+        this.type = 'text';
+        /**
+         * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
+         */
+        this.density = 'medium';
+        /**
+         * Desativa o input, tornando-o não interativo.
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).
+         * @deprecated Use `inline`.
+         */
+        this.isInline = false;
+        /**
+         * Se verdadeiro, o input terá destaque visual.
+         * @deprecated Use `highlight`.
+         */
+        this.isHighlight = false;
+        /** Nome acessível usado quando não há um rótulo visual. */
+        this.ariaLabel = null;
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = `br-input-${inputId++}`;
+        /**
+         * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.
+         */
+        this.readonly = false;
+        /**
+         * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.
+         */
+        this.required = false;
+        /**
+         * Valor exibido no input.
+         * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.
+         */
+        this.value = '';
+        /**
+         * Remove a borda do input quando não está em foco.
+         * Útil para composições contextuais (ex.: paginação).
+         */
+        this.borderless = false;
+        /**
+         * Controla a correção automática do texto.
+         */
+        this.autocorrect = 'off';
+        /**
+         * Se verdadeiro, permite a entrada de múltiplos e-mails (quando type="email").
+         */
+        this.multiple = false;
+        this.initialValue = '';
+        this.manualValidationMessage = '';
+        this.validationRunId = 0;
+        /**
+         * Manipula o evento de input, aplicando máscara se necessário e emitindo o valor atualizado.
+         * @param event Evento de input do elemento HTMLInputElement
+         */
+        this.handleInput = (event) => {
+            const inputElement = event.target;
+            let nextValue = inputElement.value ?? '';
+            if (this.hasMaskConfigured()) {
+                const maskedValue = this.applyMask(nextValue);
+                if (maskedValue !== nextValue) {
+                    inputElement.value = maskedValue;
+                }
+                nextValue = maskedValue;
+            }
+            this.nativeValueUpdate = true;
+            try {
+                this.value = nextValue;
+            }
+            finally {
+                this.nativeValueUpdate = false;
+            }
+            this.valueChange.emit(this.value);
+            redispatchNativeFormEvent(this.el, event, 'input');
+        };
+        this.handleChange = (event) => {
+            redispatchNativeFormEvent(this.el, event, 'change');
+            void this.validate();
+        };
+        /**
+         * Renderiza o rótulo do input, considerando se está em modo inline ou não.
+         * @returns JSX.Element representando o rótulo do input.
+         */
+        this.renderLabel = () => {
+            if (typeof this.label === 'string' && this.label.length > 0) {
+                if (this.inline ?? this.isInline) {
+                    return (h("div", { class: "input-label" }, h("label", { part: "label", class: "text-nowrap", htmlFor: this.customId }, this.label)));
+                }
+                else {
+                    return (h("label", { part: "label", htmlFor: this.customId }, this.label));
+                }
+            }
+        };
+        this.validityPending = false;
+        this.nativeValueUpdate = false;
+        this.renderInput = () => {
+            return (h("input", { part: "input", "aria-label": this.ariaLabel || null, "aria-describedby": [
+                    this.helpText ? `${this.customId}-help` : '',
+                    this.hasFeedbackSlot || this.validatorMessage ? `${this.customId}-feedback` : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ') || null, "aria-errormessage": (this.hasFeedbackSlot || this.validatorMessage) && this.internalState === 'danger'
+                    ? `${this.customId}-feedback`
+                    : null, "aria-busy": this.isValidating ? 'true' : null, ref: (el) => (this.nativeInput = el), class: (this.highlight ?? this.isHighlight) ? 'input-highlight' : null, id: this.customId, style: this.controlWidth != null ? { width: this.controlWidth } : undefined, autocomplete: this.autocomplete, disabled: this.isDisabled(), autoCorrect: this.autocorrect, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, step: this.step, onInput: this.handleInput, onChange: this.handleChange, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }));
+        };
+        /**
+         * Renderiza o texto de ajuda do input, considerando se está definido como string ou slot.
+         * @returns JSX.Element representando o texto de ajuda.
+         */
+        this.renderHelpText = () => {
+            return typeof this.helpText === 'string' && this.helpText.length > 0 ? (h("p", { id: `${this.customId}-help`, part: "help-text" }, this.helpText)) : (h("span", { part: "help-text" }, h("slot", { name: "help-text" })));
+        };
+        /**
+         * Renderiza o ícone de visibilidade da senha, alternando entre mostrar e esconder.
+         * @returns JSX.Element representando o ícone de visibilidade da senha.
+         */
+        this.renderIconPassword = () => {
+            const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';
+            return h("br-icon", { iconName: iconName, width: "16", height: "16" });
+        };
+        /**
+         * Alterna a visibilidade da senha, mudando o tipo do input entre 'text' e 'password'.
+         * @returns void
+         */
+        this.togglePasswordVisibility = () => {
+            const input = this.el.shadowRoot?.querySelector('input');
+            if (input === null || input === undefined) {
+                return;
+            }
+            this.isPasswordVisible = !this.isPasswordVisible;
+            input.type = this.isPasswordVisible ? 'text' : 'password';
+        };
+        /**
+         * 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.
+         */
+        this.renderInlineInputContent = () => {
+            if (this.hasIconSlot) {
+                return h("div", { class: "input-content" }, this.renderInputWithIcon());
+            }
+            else {
+                return h("div", { class: "input-content" }, this.renderInputWithoutIcon());
+            }
+        };
+        /**
+         * Renderiza o conteúdo do input, considerando se há ícone ou não.
+         * @returns JSX.Element representando o conteúdo do input.
+         */
+        this.renderInputContent = () => {
+            return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon();
+        };
+        /**
+         * Renderiza o conteúdo do input com ícone, organizando os elementos em um grupo e aplicando estilos de largura quando necessário.
+         */
+        this.renderInputWithIcon = () => {
+            return (h("div", { class: "input-group", part: "group", style: this.controlWidth !== undefined && this.controlWidth !== null ? { width: this.controlWidth } : undefined }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
+        };
+        /**
+         * 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.
+         */
+        this.renderInputWithoutIcon = () => {
+            return [this.renderInput(), this.renderButton(), this.renderHelpText()];
+        };
+    }
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    formResetCallback() {
+        this.validationRunId++;
+        this.validatorMessage = null;
+        this.isValidating = false;
+        this.manualValidationMessage = '';
+        this.value = this.initialValue;
+        if (this.nativeInput) {
+            this.nativeInput.value = this.initialValue;
+            this.nativeInput.setCustomValidity('');
+        }
+        this.syncFormState(this.initialValue);
+    }
+    formStateRestoreCallback(state) {
+        const restoredValue = typeof state === 'string' ? state : '';
+        this.value = restoredValue;
+        if (this.nativeInput) {
+            this.nativeInput.value = restoredValue;
+        }
+        this.syncFormState(restoredValue);
+    }
+    handleValueChange(newValue) {
+        this.validityPending = true;
+        this.validationRunId++;
+        this.validatorMessage = null;
+        if (this.state === undefined && this.feedbackState === undefined)
+            this.internalState = undefined;
+        this.syncFormState(newValue ?? '');
+        if (this.nativeValueUpdate) {
+            this.validityPending = false;
+            this.updateValidity();
+        }
+        if (!this.hasMaskConfigured()) {
+            return;
+        }
+        const maskedValue = this.applyMask(newValue ?? '');
+        if (maskedValue !== newValue) {
+            this.value = maskedValue;
+        }
+    }
+    handleMaskChange() {
+        this.applyMaskToValue();
+    }
+    handleStateChange(newState) {
+        if (this.feedbackState === undefined)
+            this.updateInternalState(newState);
+    }
+    handleFeedbackStateChange(newState) {
+        this.updateInternalState(newState ?? this.state);
+    }
+    updateInternalState(newState) {
+        this.internalState = this.normalizeState(newState);
+        // 🔥 novo comportamento centralizado
+        this.propagateStateToFeedback();
+    }
+    componentWillLoad() {
+        this.hasIconSlot = this.hasSlotContent('icon');
+        this.hasActionSlot = this.hasSlotContent('action');
+        this.hasFeedbackSlot = this.hasSlotContent('feedback');
+        this.hasValidationLoadingSlot = this.hasSlotContent('validation-loading');
+        this.initialValue = this.value ?? '';
+        this.internalState = this.normalizeState(this.feedbackState ?? this.state);
+        this.applyMaskToValue();
+        this.syncFormState();
+    }
+    componentDidLoad() {
+        this.updateValidity();
+        if (this.el.hasAttribute('autofocus'))
+            this.el.focus();
+        if (this.hasFeedbackSlot) {
+            const slot = this.el.shadowRoot?.querySelector('slot[name="feedback"]');
+            if (slot !== null && slot !== undefined) {
+                slot.addEventListener('slotchange', () => {
+                    this.propagateStateToFeedback();
+                });
+            }
+            this.propagateStateToFeedback();
+        }
+    }
+    componentDidUpdate() {
+        if (!this.validityPending)
+            return;
+        this.validityPending = false;
+        this.updateValidity();
+    }
+    componentShouldUpdate(_newValue, _oldValue, propName) {
+        return propName !== 'value' || !this.nativeValueUpdate;
+    }
+    componentDidRender() {
+        this.syncCssPartAttributes();
+    }
+    /**
+     * Retorna `true` se o valor do input for válido, caso contrário `false`.
+     * Se o input for inválido, exibe uma mensagem de erro padrão do navegador.
+     */
+    async reportValidity() {
+        return this.elementInternals?.reportValidity?.() ?? true;
+    }
+    /**
+     * Define uma mensagem de validação customizada para o input.
+     * Se a mensagem for uma string vazia, o erro customizado é limpo.
+     *
+     * @param message - Mensagem de erro customizada ou string vazia para limpar
+     * @example
+     * ```typescript
+     * const input = document.querySelector('br-input');
+     *
+     * // Define erro customizado
+     * await input.setCustomValidity('CPF inválido');
+     *
+     * // Limpa o erro
+     * await input.setCustomValidity('');
+     * ```
+     */
+    async setCustomValidity(message) {
+        this.manualValidationMessage = message;
+        this.updateValidity();
+    }
+    resolveValidator() {
+        return resolveFormValidator(this.validator);
+    }
+    async runValidator(validatorFn) {
+        try {
+            return (await validatorFn(this.value ?? '')) || null;
+        }
+        catch {
+            return 'Não foi possível validar o campo.';
+        }
+    }
+    /**
+     * Executa a regra customizada e retorna se o campo está válido.
+     * Se o validator for assíncrono, aguarda a resposta e ignora resultados
+     * antigos quando uma execução posterior já começou.
+     */
+    async validate() {
+        const validatorFn = this.resolveValidator();
+        if (validatorFn == null || this.isDisabled())
+            return this.checkValidity();
+        const runId = ++this.validationRunId;
+        this.isValidating = true;
+        this.validatorMessage = null;
+        if (this.state === undefined && this.feedbackState === undefined)
+            this.internalState = undefined;
+        this.updateValidity();
+        this.brInputValidationChange.emit({ validating: true, valid: null, message: null });
+        await Promise.resolve();
+        const message = await this.runValidator(validatorFn);
+        if (runId !== this.validationRunId)
+            return false;
+        this.validatorMessage = message;
+        this.isValidating = false;
+        if (this.state === undefined && this.feedbackState === undefined) {
+            this.internalState = message ? 'danger' : undefined;
+        }
+        if (message) {
+            const feedbackMessage = this.el.shadowRoot?.querySelector('br-message');
+            if (feedbackMessage)
+                feedbackMessage.message = message;
+        }
+        this.updateValidity();
+        const valid = message === null && (await this.checkValidity());
+        this.brInputValidationChange.emit({ validating: false, valid, message });
+        return valid;
+    }
+    /**
+     * Retorna `true` se o valor do input for válido, caso contrário `false`.
+     * Se o input for inválido, dispara um evento 'invalid'.
+     */
+    async checkValidity() {
+        return this.elementInternals?.checkValidity?.() ?? true;
+    }
+    /** Retorna um snapshot serializável da Constraint Validation API. */
+    async getValidationState() {
+        return getFormValidationState(this.elementInternals);
+    }
+    /** Seleciona todo o texto do controle nativo, conforme HTMLInputElement.select(). */
+    async select() {
+        this.nativeInput?.select();
+    }
+    /** Substitui um intervalo de texto usando a API nativa do input. */
+    async setRangeText(replacement, start, end, selectionMode) {
+        if (!this.nativeInput)
+            return;
+        if (start === undefined || end === undefined) {
+            this.nativeInput.setRangeText(replacement);
+            this.syncProgrammaticValue();
+            return;
+        }
+        this.nativeInput.setRangeText(replacement, start, end, selectionMode);
+        this.syncProgrammaticValue();
+    }
+    /** Define o intervalo selecionado no controle nativo. */
+    async setSelectionRange(start, end, direction) {
+        this.nativeInput?.setSelectionRange(start, end, direction);
+    }
+    /** Incrementa o valor numérico pelo step nativo. */
+    async stepUp(n) {
+        this.nativeInput?.stepUp(n);
+        this.syncProgrammaticValue();
+    }
+    /** Decrementa o valor numérico pelo step nativo. */
+    async stepDown(n) {
+        this.nativeInput?.stepDown(n);
+        this.syncProgrammaticValue();
+    }
+    /** Abre o picker nativo quando o navegador e o tipo do input oferecem essa API. */
+    async showPicker() {
+        this.nativeInput?.showPicker?.();
+    }
+    syncProgrammaticValue() {
+        if (!this.nativeInput || this.value === this.nativeInput.value)
+            return;
+        this.value = this.nativeInput.value;
+        this.syncFormState(this.value);
+        this.updateValidity();
+    }
+    updateValidity() {
+        if (this.nativeInput) {
+            this.nativeInput.setCustomValidity(this.manualValidationMessage || this.validatorMessage || '');
+        }
+        syncNativeFormValidity(this.elementInternals, this.nativeInput);
+    }
+    normalizeState(value) {
+        return normalizePropValue(value, INPUT_STATES, undefined);
+    }
+    syncCssPartAttributes() {
+        if (!this.hasActionSlot)
+            return;
+        this.el.shadowRoot?.querySelectorAll('br-button.button-transform').forEach((button) => {
+            setPartAttributes(button, 'action', 'button: action-button');
+        });
+    }
+    propagateStateToFeedback() {
+        const messageElements = this.el.querySelectorAll('br-message');
+        messageElements.forEach((message) => {
+            const messageState = this.normalizeState(message.getAttribute('state'));
+            if (this.internalState !== undefined && messageState === this.internalState) {
+                message.removeAttribute('hidden');
+            }
+            else {
+                message.setAttribute('hidden', 'true');
+            }
+        });
+    }
+    /**
+     * 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.
+     */
+    getInputCssClassMap() {
+        return {
+            'br-input': true,
+            'input-button': this.hasActionSlot,
+            small: this.density === 'small',
+            large: this.density === 'large',
+            medium: this.density === 'medium',
+            'input-inline': this.inline ?? this.isInline,
+            'input-highlight': this.highlight ?? this.isHighlight,
+            success: this.internalState === 'success',
+            danger: this.internalState === 'danger',
+            info: this.internalState === 'info',
+            warning: this.internalState === 'warning',
+        };
+    }
+    isDisabled() {
+        return isFormControlDisabled(this.disabled, this.formDisabled);
+    }
+    /**
+     * 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
+     */
+    hasSlotContent(slotName) {
+        return hasNamedLightDomSlot(this.el, slotName);
+    }
+    syncFormState(value = this.value ?? '') {
+        safeSetFormValue(this.elementInternals, value);
+    }
+    /**
+     * Renderiza o slot de ícone, caso exista.
+     * @returns JSX.Element representando o slot de ícone.
+     */
+    renderIconSlot() {
+        if (this.hasSlotContent('icon')) {
+            return (h("div", { class: "input-icon", part: "icon" }, h("slot", { name: "icon" })));
+        }
+    }
+    /**
+     * 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.
+     */
+    renderButton() {
+        if (this.type === 'password') {
+            return (h("br-button", { class: "button-transform", shape: "circle", density: "small", "aria-label": this.isPasswordVisible ? 'Esconder senha' : 'Mostrar senha', onClick: this.togglePasswordVisibility, part: "action" }, this.renderIconPassword()));
+        }
+        else if (this.hasSlotContent('action')) {
+            return (h("br-button", { class: "button-transform", shape: "circle", density: "small", "aria-label": this.actionLabel, customTabIndex: this.actionTabIndex, part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    /**
+     * 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.
+     */
+    renderFeedback() {
+        return (h("span", { id: `${this.customId}-feedback`, part: "feedback", hidden: this.internalState === undefined && !this.validatorMessage && !this.hasFeedbackSlot }, h("slot", { name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && this.validatorMessage ? (h("br-message", { state: "danger", message: this.validatorMessage })) : null));
+    }
+    renderValidationLoading() {
+        if (!this.isValidating)
+            return null;
+        return this.hasValidationLoadingSlot ? (h("span", { class: "validation-loading", "aria-live": "polite" }, h("slot", { name: "validation-loading" }))) : (h("span", { class: "validation-loading", "aria-live": "polite" }, h("br-loading", { size: "small", label: "Validando" })));
+    }
+    /**
+     * Aplica a máscara configurada ao valor do input, se houver.
+     * @returns void
+     */
+    applyMaskToValue() {
+        if (!this.hasMaskConfigured() || this.value == null) {
+            return;
+        }
+        const maskedValue = this.applyMask(this.value);
+        if (this.value !== maskedValue) {
+            this.value = maskedValue;
+        }
+    }
+    /**
+     * Aplica a máscara configurada a um valor específico.
+     * @param value O valor a ser mascarado.
+     * @returns O valor mascarado.
+     */
+    applyMask(value) {
+        if (!this.hasMaskConfigured()) {
+            return value ?? '';
+        }
+        const mask = this.mask || '';
+        const digits = (value ?? '').replace(/\D/g, '');
+        if (digits.length === 0) {
+            return '';
+        }
+        let maskedValue = '';
+        let digitIndex = 0;
+        for (let i = 0; i < mask.length && digitIndex < digits.length; i++) {
+            const maskChar = mask[i];
+            if (maskChar === '#') {
+                maskedValue += digits[digitIndex];
+                digitIndex++;
+            }
+            else {
+                maskedValue += maskChar;
+            }
+        }
+        return maskedValue;
+    }
+    /**
+     * Verifica se uma máscara está configurada.
+     * @returns boolean indicando se uma máscara está configurada.
+     */
+    hasMaskConfigured() {
+        return typeof this.mask === 'string' && this.mask.length > 0;
+    }
+    /**
+     * Renderiza o componente de input.
+     * @returns JSX.Element representando o componente de input.
+     */
+    render() {
+        return (h(Host, { key: '423f7616bc181604f6b824b6a3b0a3b27e1f279a' }, h("div", { key: '716e7c445a7b33a229b3a7b44eefd9bf3709fa12', class: this.getInputCssClassMap(), part: "container" }, this.renderLabel(), (this.inline ?? this.isInline) ? this.renderInlineInputContent() : this.renderInputContent(), this.renderFeedback(), this.renderValidationLoading())));
+    }
+    static get is() { return "br-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"color\" | \"email\" | \"hidden\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputType": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputType",
+                            "referenceLocation": "InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Especifica o tipo de entrada do campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputToggle",
+                    "resolved": "\"off\" | \"on\"",
+                    "references": {
+                        "InputToggle": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputToggle",
+                            "referenceLocation": "InputToggle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla o comportamento de preenchimento autom\u00E1tico do navegador para o input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "autocomplete"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "InputDensity": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputDensity",
+                            "referenceLocation": "InputDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ajusta a densidade, alterando o espa\u00E7amento interno para um visual mais compacto ou mais expandido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o input, tornando-o n\u00E3o interativo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "isInline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `inline`."
+                        }],
+                    "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-inline",
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe r\u00F3tulo e controle em linha. Quando informada, tem preced\u00EAncia sobre `isInline`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inline"
+            },
+            "isHighlight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `highlight`."
+                        }],
+                    "text": "Se verdadeiro, o input ter\u00E1 destaque visual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-highlight",
+                "defaultValue": "false"
+            },
+            "highlight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita destaque visual. Quando informada, tem preced\u00EAncia sobre `isHighlight`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "highlight"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputState",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputState": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputState",
+                            "referenceLocation": "InputState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "remarks",
+                            "text": "O estado \u00E9 propagado para o slot de feedback, mas tamb\u00E9m pode ser controlado diretamente pelo conte\u00FAdo do slot."
+                        }],
+                    "text": "Define o estado do input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state"
+            },
+            "feedbackState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputState",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputState": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputState",
+                            "referenceLocation": "InputState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de feedback can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `state`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "feedback-state"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido como r\u00F3tulo do input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome acess\u00EDvel usado quando n\u00E3o h\u00E1 um r\u00F3tulo visual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "`br-input-${inputId++}`"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do input, utilizado para identifica\u00E7\u00E3o em formul\u00E1rios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido dentro do input quando est\u00E1 vazio, fornecendo uma dica ou sugest\u00E3o ao usu\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o valor do input \u00E9 exibido, mas n\u00E3o pode ser editado pelo usu\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o input \u00E9 obrigat\u00F3rio e deve ser preenchido antes que o formul\u00E1rio possa ser enviado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor exibido no input.\nPode ser alterado pelo usu\u00E1rio se a propriedade `readonly` n\u00E3o estiver ativa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "controlWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura do campo de entrada (por exemplo, '88px').\nQuando definido, sobrescreve a largura padr\u00E3o de 100%."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "control-width"
+            },
+            "borderless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Remove a borda do input quando n\u00E3o est\u00E1 em foco.\n\u00DAtil para composi\u00E7\u00F5es contextuais (ex.: pagina\u00E7\u00E3o)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "borderless",
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto adicional que fornece ajuda ou informa\u00E7\u00F5es sobre o input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "help-text"
+            },
+            "autocorrect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla a corre\u00E7\u00E3o autom\u00E1tica do texto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "autocorrect",
+                "defaultValue": "'off'"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor m\u00EDnimo para campos de entrada num\u00E9ricos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor m\u00E1ximo para campos de entrada num\u00E9ricos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max"
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o comprimento m\u00EDnimo do valor do campo de entrada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "minlength"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o comprimento m\u00E1ximo do valor do campo de entrada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "maxlength"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, permite a entrada de m\u00FAltiplos e-mails (quando type=\"email\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o padr\u00E3o de entrada para valida\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pattern"
+            },
+            "mask": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "M\u00E1scara aplicada ao valor digitado (use `#` para marcar posi\u00E7\u00F5es num\u00E9ricas)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mask"
+            },
+            "validator": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "InputValidator | string",
+                    "resolved": "((value: string) => string | Promise<string>) | string",
+                    "references": {
+                        "InputValidator": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputValidator",
+                            "referenceLocation": "InputValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "```ts\ninput.validator = async (value) => {\n  if (!value) return 'Campo obrigat\u00F3rio';\n  const disponivel = await checarDisponibilidade(value);\n  return disponivel ? null : 'Este valor j\u00E1 est\u00E1 em uso';\n};\n```"
+                        }],
+                    "text": "Fun\u00E7\u00E3o ou regra de valida\u00E7\u00E3o customizada para o campo.\n\nA fun\u00E7\u00E3o pode ser s\u00EDncrona ou ass\u00EDncrona. Retorne uma mensagem para invalidar o\ncampo e `null` ou `''` para valid\u00E1-lo. A regra \u00E9 executada no `change` ou pelo\nm\u00E9todo `validate()`, nunca a cada tecla.\n\nEm frameworks, passe a fun\u00E7\u00E3o como property binding, por exemplo:\n`validator={validate}` no React, `[validator]=\"validate\"` no Angular ou\n`:validator=\"validate\"` no Vue.\n\nComo alternativa para HTML sem binding de propriedades, uma string pode\nreferenciar uma fun\u00E7\u00E3o global em `window`. A forma inline legada aceita apenas\ncompara\u00E7\u00E3o simples; JavaScript arbitr\u00E1rio \u00E9 rejeitado para manter CSP segura.\nPrefira sempre a fun\u00E7\u00E3o por binding.\n\nDurante valida\u00E7\u00F5es ass\u00EDncronas, o campo sinaliza `aria-busy=\"true\"`, exibe o\nindicador de carregamento e emite `brInputValidationChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validator"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor do passo para campos de entrada num\u00E9ricos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "step"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido no bot\u00E3o de a\u00E7\u00E3o \u00E0 direita do input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "action-label"
+            },
+            "actionTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o tabindex do bot\u00E3o de a\u00E7\u00E3o.\n\u00DAtil para remover o bot\u00E3o da sequ\u00EAncia de tabula\u00E7\u00E3o quando o foco \u00E9 gerenciado externamente (ex.: br-select)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "action-tab-index"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formDisabled": {},
+            "hasActionSlot": {},
+            "hasFeedbackSlot": {},
+            "hasValidationLoadingSlot": {},
+            "hasIconSlot": {},
+            "internalState": {},
+            "isValidating": {},
+            "validatorMessage": {},
+            "isPasswordVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use o evento nativo `input` e leia `event.target.value`."
+                        }],
+                    "text": "Valor atualizado do input"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "brClear",
+                "name": "brClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input clear button action is triggered."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brInputValidationChange",
+                "name": "brInputValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informa o in\u00EDcio e o resultado do validator, inclusive quando ele consulta\num servi\u00E7o remoto. O `detail` cont\u00E9m `validating`, `valid` e `message`;\nescrita program\u00E1tica e reset n\u00E3o representam intera\u00E7\u00E3o do usu\u00E1rio."
+                },
+                "complexType": {
+                    "original": "InputValidationChangeDetail",
+                    "resolved": "InputValidationChangeDetail",
+                    "references": {
+                        "InputValidationChangeDetail": {
+                            "location": "import",
+                            "path": "./input.types",
+                            "id": "src/components/input/input.types.ts::InputValidationChangeDetail",
+                            "referenceLocation": "InputValidationChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna `true` se o valor do input for v\u00E1lido, caso contr\u00E1rio `false`.\nSe o input for inv\u00E1lido, exibe uma mensagem de erro padr\u00E3o do navegador.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": "- Mensagem de erro customizada ou string vazia para limpar"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define uma mensagem de valida\u00E7\u00E3o customizada para o input.\nSe a mensagem for uma string vazia, o erro customizado \u00E9 limpo.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "message - Mensagem de erro customizada ou string vazia para limpar"
+                        }, {
+                            "name": "example",
+                            "text": "```typescript\nconst input = document.querySelector('br-input');\n\n// Define erro customizado\nawait input.setCustomValidity('CPF inv\u00E1lido');\n\n// Limpa o erro\nawait input.setCustomValidity('');\n```"
+                        }]
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLBrMessageElement": {
+                            "location": "global",
+                            "id": "global::HTMLBrMessageElement"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Executa a regra customizada e retorna se o campo est\u00E1 v\u00E1lido.\nSe o validator for ass\u00EDncrono, aguarda a resposta e ignora resultados\nantigos quando uma execu\u00E7\u00E3o posterior j\u00E1 come\u00E7ou.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Retorna `true` se o valor do input for v\u00E1lido, caso contr\u00E1rio `false`.\nSe o input for inv\u00E1lido, dispara um evento 'invalid'.",
+                    "tags": []
+                }
+            },
+            "getValidationState": {
+                "complexType": {
+                    "signature": "() => Promise<FormValidationState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormValidationState": {
+                            "location": "import",
+                            "path": "../../shared/utils/form",
+                            "id": "src/shared/utils/form.ts::FormValidationState",
+                            "referenceLocation": "FormValidationState"
+                        }
+                    },
+                    "return": "Promise<FormValidationState>"
+                },
+                "docs": {
+                    "text": "Retorna um snapshot serializ\u00E1vel da Constraint Validation API.",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Seleciona todo o texto do controle nativo, conforme HTMLInputElement.select().",
+                    "tags": []
+                }
+            },
+            "setRangeText": {
+                "complexType": {
+                    "signature": "(replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => Promise<void>",
+                    "parameters": [{
+                            "name": "replacement",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "selectionMode",
+                            "type": "\"start\" | \"end\" | \"select\" | \"preserve\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SelectionMode": {
+                            "location": "global",
+                            "id": "global::SelectionMode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Substitui um intervalo de texto usando a API nativa do input.",
+                    "tags": []
+                }
+            },
+            "setSelectionRange": {
+                "complexType": {
+                    "signature": "(start: number, end: number, direction?: \"forward\" | \"backward\" | \"none\") => Promise<void>",
+                    "parameters": [{
+                            "name": "start",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "end",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "direction",
+                            "type": "\"none\" | \"forward\" | \"backward\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o intervalo selecionado no controle nativo.",
+                    "tags": []
+                }
+            },
+            "stepUp": {
+                "complexType": {
+                    "signature": "(n?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "n",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Incrementa o valor num\u00E9rico pelo step nativo.",
+                    "tags": []
+                }
+            },
+            "stepDown": {
+                "complexType": {
+                    "signature": "(n?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "n",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Decrementa o valor num\u00E9rico pelo step nativo.",
+                    "tags": []
+                }
+            },
+            "showPicker": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre o picker nativo quando o navegador e o tipo do input oferecem essa API.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "mask",
+                "methodName": "handleMaskChange"
+            }, {
+                "propName": "state",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "feedbackState",
+                "methodName": "handleFeedbackStateChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+let inputId = 0;