@govbr-ds/webcomponents 2.0.0-next.29 → 2.0.0-next.30

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

@@ -1,762 +0,0 @@
-/*!
- * Construído com @govbr-ds/webcomponents
- */
-import { h, Host } from "@stencil/core";
-/**
- *
- * 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 class Input {
-    /**
-     * Referência ao elemento host do componente.
-     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
-     */
-    el;
-    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
-     */
-    type = 'text';
-    /**
-     * Controla o comportamento de preenchimento automático do navegador para o input.
-     */
-    autocomplete;
-    /**
-     * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
-     */
-    density = 'medium';
-    /**
-     * Desativa o input, tornando-o não interativo.
-     */
-    disabled = false;
-    /**
-     * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).
-     */
-    isInline = false;
-    /**
-     * Se verdadeiro, o input terá destaque visual.
-     */
-    isHighlight = false;
-    /**
-     * 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'.
-     */
-    state;
-    /**
-     * Texto exibido como rótulo do input.
-     */
-    label;
-    /**
-     * Identificador único.
-     * Caso não seja fornecido, um ID gerado automaticamente será usado.
-     */
-    customId = `br-input-${inputId++}`;
-    /**
-     * Nome do input, utilizado para identificação em formulários.
-     */
-    name;
-    /**
-     * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.
-     */
-    placeholder;
-    /**
-     * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.
-     */
-    readonly = false;
-    /**
-     * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.
-     */
-    required = false;
-    /**
-     * Valor exibido no input.
-     * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.
-     */
-    value;
-    /**
-     * Texto adicional que fornece ajuda ou informações sobre o input.
-     */
-    helpText;
-    /**
-     * Controla a correção automática do texto.
-     */
-    autocorrect = 'off';
-    /**
-     * Define o valor mínimo para campos de entrada numéricos.
-     */
-    min;
-    /**
-     * Define o valor máximo para campos de entrada numéricos.
-     */
-    max;
-    /**
-     * Define o comprimento mínimo do valor do campo de entrada.
-     */
-    minlength;
-    /**
-     * Define o comprimento máximo do valor do campo de entrada.
-     */
-    maxlength;
-    /**
-     * Se verdadeiro, permite a seleção de múltiplos arquivos.
-     */
-    multiple = false;
-    /**
-     * Define o padrão de entrada para validação.
-     */
-    pattern;
-    /**
-     * Define o valor do passo para campos de entrada numéricos.
-     */
-    step;
-    isPasswordVisible = false;
-    internalState = 'info';
-    hasIconSlot = false;
-    hasActionSlot = false;
-    hasFeedbackSlot = false;
-    componentWillLoad() {
-        this.hasIconSlot = this.hasSlotContent('icon');
-        this.hasActionSlot = this.hasSlotContent('action');
-        this.hasFeedbackSlot = this.hasSlotContent('feedback');
-        this.internalState = this.state;
-        if (this.hasFeedbackSlot) {
-            this.initializeStateWithFeedback();
-        }
-    }
-    componentDidLoad() {
-        if (this.hasFeedbackSlot) {
-            this.setupSlotFeedbackListener();
-        }
-    }
-    initializeStateWithFeedback() {
-        const initialMessageElement = this.el.querySelector('br-message');
-        if (initialMessageElement) {
-            const messageState = initialMessageElement.getAttribute('state');
-            this.internalState = messageState || this.state;
-        }
-        else {
-            this.internalState = this.state;
-        }
-    }
-    setupSlotFeedbackListener() {
-        const slot = this.el.shadowRoot?.querySelector('slot[name="feedback"]');
-        if (slot) {
-            slot.addEventListener('slotchange', () => {
-                this.syncStateWithSlotFeedback();
-            });
-        }
-    }
-    syncStateWithSlotFeedback() {
-        const messageElement = this.el.querySelector('br-message');
-        if (messageElement) {
-            this.internalState = messageElement.getAttribute('state');
-        }
-        else {
-            this.internalState = this.state;
-        }
-    }
-    getInputCssClassMap() {
-        return {
-            'br-input': true,
-            'input-button': this.hasActionSlot,
-            small: this.density === 'small',
-            large: this.density === 'large',
-            medium: this.density === 'medium',
-            'input-inline': this.isInline,
-            'input-highlight': this.isHighlight,
-            success: this.internalState === 'success',
-            danger: this.internalState === 'danger',
-            info: this.internalState === 'info',
-            warning: this.internalState === 'warning',
-        };
-    }
-    /**
-     * Valor atualizado do input
-     */
-    valueChange;
-    handleInput = (event) => {
-        this.value = event.target.value;
-        this.valueChange.emit(this.value);
-    };
-    renderLabel = () => {
-        if (this.label?.length > 0) {
-            if (this.isInline) {
-                return (h("div", { class: "input-label" }, h("label", { class: "text-nowrap", htmlFor: this.customId }, this.label)));
-            }
-            else {
-                return h("label", { htmlFor: this.customId }, this.label);
-            }
-        }
-    };
-    hasSlotContent(slotName) {
-        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
-    }
-    renderInput = () => {
-        return (h("input", { class: this.isHighlight ? 'input-highlight' : null, id: this.customId, autocomplete: this.autocomplete, disabled: this.disabled, 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, placeholder: this.placeholder, readonly: this.readonly, required: this.required, title: this.el.title, type: this.type, value: this.value }));
-    };
-    renderHelpText = () => {
-        return this.helpText?.length > 0 ? h("p", null, this.helpText) : h("slot", { name: "help-text" });
-    };
-    renderIconPassword = () => {
-        const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye';
-        return h("br-icon", { "icon-name": iconName });
-    };
-    togglePasswordVisibility = () => {
-        const input = this.el.shadowRoot.querySelector('input');
-        this.isPasswordVisible = !this.isPasswordVisible;
-        input.type = this.isPasswordVisible ? 'text' : 'password';
-    };
-    renderIconSlot() {
-        if (this.hasSlotContent('icon')) {
-            return (h("div", { class: "input-icon" }, h("slot", { name: "icon" })));
-        }
-    }
-    renderButton() {
-        if (this.type === 'password') {
-            return (h("br-button", { class: "button-transform", shape: "circle", density: "small", "aria-label": "bot\u00E3o de a\u00E7\u00E3o do \u00EDcone", onClick: this.togglePasswordVisibility }, this.renderIconPassword()));
-        }
-        else if (this.hasSlotContent('action')) {
-            return (h("br-button", { class: "button-transform", shape: "circle", density: "small", "aria-label": "bot\u00E3o de a\u00E7\u00E3o do \u00EDcone" }, h("slot", { name: "action" })));
-        }
-        return null;
-    }
-    renderInlineInputContent = () => {
-        if (this.hasIconSlot) {
-            return h("div", { class: "input-content" }, this.renderInputWithIcon());
-        }
-        else {
-            return h("div", { class: "input-content" }, this.renderInputWithoutIcon());
-        }
-    };
-    renderInputContent = () => {
-        return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon();
-    };
-    renderInputWithIcon = () => {
-        return (h("div", { class: "input-group" }, this.renderIconSlot(), this.renderInput(), this.renderButton(), this.renderHelpText()));
-    };
-    renderInputWithoutIcon = () => {
-        return [this.renderInput(), this.renderButton(), this.renderHelpText()];
-    };
-    renderFeedback() {
-        if (this.hasFeedbackSlot) {
-            return h("slot", { name: "feedback" });
-        }
-    }
-    render() {
-        return (h(Host, { key: 'f173945b18d58d627c64ab3ebd62c5f00a98c49d' }, h("div", { key: 'e3e0f137af6c68c7b0ed030088cd52605d913cf1', class: this.getInputCssClassMap() }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent(), this.renderFeedback())));
-    }
-    static get is() { return "br-input"; }
-    static get encapsulation() { return "shadow"; }
-    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": "| 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'file'\n    | 'url'",
-                    "resolved": "\"color\" | \"email\" | \"file\" | \"hidden\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n- 'color': Seletor de cor\n- 'email': Campo para e-mail\n- 'hidden': Campo oculto\n- 'password': Campo para senha\n- 'range': Controle deslizante\n- 'search': Campo de pesquisa\n- 'number': Campo para n\u00FAmeros\n- 'tel': Campo para n\u00FAmeros de telefone\n- 'text': Campo de texto padr\u00E3o\n- 'url': Campo para URLs"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "type",
-                "reflect": true,
-                "defaultValue": "'text'"
-            },
-            "autocomplete": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'on' | 'off'",
-                    "resolved": "\"off\" | \"on\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Controla o comportamento de preenchimento autom\u00E1tico do navegador para o input."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "autocomplete",
-                "reflect": true
-            },
-            "density": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'large' | 'medium' | 'small'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "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,
-                "attribute": "density",
-                "reflect": true,
-                "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,
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "isInline": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se verdadeiro, o r\u00F3tulo e o input estar\u00E3o na mesma linha (layout inline)."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "is-inline",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "isHighlight": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se verdadeiro, o input ter\u00E1 destaque visual."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "is-highlight",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "state": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'info' | 'warning' | 'danger' | 'success'",
-                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o estado do input\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "state",
-                "reflect": true
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Texto exibido como r\u00F3tulo do input."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "label",
-                "reflect": true
-            },
-            "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,
-                "attribute": "custom-id",
-                "reflect": true,
-                "defaultValue": "`br-input-${inputId++}`"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Nome do input, utilizado para identifica\u00E7\u00E3o em formul\u00E1rios."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "name",
-                "reflect": true
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "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,
-                "attribute": "placeholder",
-                "reflect": true
-            },
-            "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,
-                "attribute": "readonly",
-                "reflect": true,
-                "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,
-                "attribute": "required",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "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,
-                "attribute": "value",
-                "reflect": true
-            },
-            "helpText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Texto adicional que fornece ajuda ou informa\u00E7\u00F5es sobre o input."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "help-text",
-                "reflect": true
-            },
-            "autocorrect": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'off' | 'on'",
-                    "resolved": "\"off\" | \"on\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Controla a corre\u00E7\u00E3o autom\u00E1tica do texto."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "autocorrect",
-                "reflect": true,
-                "defaultValue": "'off'"
-            },
-            "min": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o valor m\u00EDnimo para campos de entrada num\u00E9ricos."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "min",
-                "reflect": true
-            },
-            "max": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o valor m\u00E1ximo para campos de entrada num\u00E9ricos."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "max",
-                "reflect": true
-            },
-            "minlength": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o comprimento m\u00EDnimo do valor do campo de entrada."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "minlength",
-                "reflect": true
-            },
-            "maxlength": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o comprimento m\u00E1ximo do valor do campo de entrada."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "maxlength",
-                "reflect": true
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se verdadeiro, permite a sele\u00E7\u00E3o de m\u00FAltiplos arquivos."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "multiple",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "pattern": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o padr\u00E3o de entrada para valida\u00E7\u00E3o."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "pattern",
-                "reflect": true
-            },
-            "step": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define o valor do passo para campos de entrada num\u00E9ricos."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "step",
-                "reflect": true
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isPasswordVisible": {},
-            "internalState": {},
-            "hasIconSlot": {},
-            "hasActionSlot": {},
-            "hasFeedbackSlot": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "valueChange",
-                "name": "valueChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Valor atualizado do input"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get attachInternalsMemberName() { return "elementInternals"; }
-}
-let inputId = 0;
-//# sourceMappingURL=input.js.map