@govbr-ds/webcomponents 2.0.0-next.4 → 2.0.0-next.41

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

@@ -0,0 +1,786 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+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;
+    /**
+     * Texto exibido no botão de ação à direita do input.
+     */
+    actionLabel;
+    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": this.isPasswordVisible ? 'Esconder senha' : 'Mostrar senha', "aria-pressed": this.isPasswordVisible ? 'true' : 'false', onClick: this.togglePasswordVisibility }, this.renderIconPassword()));
+        }
+        else if (this.hasSlotContent('action')) {
+            return (h("br-button", { class: "button-transform", shape: "circle", density: "small", "aria-label": this.actionLabel }, 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: '145ba0db2dfa33902007af70f297e06f4e510887' }, h("div", { key: '08e84189a992b361dca3d0ce57a31d90ff6efcd6', 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
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido no bot\u00E3o de a\u00E7\u00E3o \u00E0 direita do input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "action-label",
+                "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