voa-ds-core 1.0.4

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

@@ -0,0 +1,640 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente de input para entrada de dados do Voa Design System.
+ *
+ * Baseado no design do Figma, seguindo o padrão "unstyled" (headless).
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do componente
+ * @part title-row - Container do titulo (label + info)
+ * @part label - O elemento de label
+ * @part info - Container da informacao adicional
+ * @part info-icon - O ícone de informação
+ * @part container - O wrapper do input (border, background)
+ * @part input - O elemento input nativo
+ * @part prefix - O wrapper do slot prefix
+ * @part suffix - O wrapper do slot suffix
+ * @part helper-text - O elemento de texto auxiliar/erro
+ */
+export class VoaInput {
+    constructor() {
+        /**
+         * Tipo do input (text, password, email, search, tel, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Valor do input
+         */
+        this.value = '';
+        /**
+         * Indica se o campo está em estado de erro
+         */
+        this.error = false;
+        /**
+         * Indica se o campo está em estado de sucesso
+         */
+        this.valid = false;
+        /**
+         * Indica se o campo está em estado de aviso
+         */
+        this.warning = false;
+        /**
+         * Indica se o campo está desabilitado
+         */
+        this.disabled = false;
+        /**
+         * Indica se o campo é somente leitura
+         */
+        this.readonly = false;
+        /**
+         * Indica se o campo é obrigatório
+         */
+        this.required = false;
+        /**
+         * Variante de preenchimento (filled vs unfilled)
+         */
+        this.fill = true;
+        /**
+         * Tamanho do input
+         */
+        this.size = 'md';
+        /**
+         * Mostrar ícone de informação na área de info
+         */
+        this.showInfoIcon = true;
+        /**
+         * Estado interno que controla se o campo está em foco
+         */
+        this.isFocused = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        this.hasInfo = false;
+        /**
+         * Valor interno do input
+         */
+        this.internalValue = '';
+        /**
+         * ID do input gerado ou fornecido
+         */
+        this.inputIdValue = '';
+        this.checkSlots = () => {
+            this.hasPrefix = !!this.host.querySelector('[slot="prefix"]');
+            this.hasSuffix = !!this.host.querySelector('[slot="suffix"]');
+            this.hasInfo = !!this.host.querySelector('[slot="info"]');
+        };
+        /**
+         * Gerenciador de evento de input
+         */
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.internalValue = input.value;
+            this.dsInput.emit(this.internalValue);
+        };
+        /**
+         * Gerenciador de evento de change
+         */
+        this.handleChange = (event) => {
+            const input = event.target;
+            this.internalValue = input.value;
+            this.dsChange.emit(this.internalValue);
+        };
+        /**
+         * Gerenciador de evento de focus
+         */
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.dsFocus.emit(event);
+        };
+        /**
+         * Gerenciador de evento de blur
+         */
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.dsBlur.emit(event);
+        };
+        /**
+         * Handler para navegação por teclado (WCAG 2.2 AA).
+         */
+        this.handleKeyDown = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            // Permitir navegação normal por teclado
+            // Enter e Space já são tratados pelo input nativo
+            switch (event.key) {
+                case 'Escape':
+                    // Se o input tiver valor, limpar pode ser útil
+                    // Mas não implementamos isso por padrão para não quebrar UX
+                    break;
+            }
+        };
+    }
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    /**
+     * Gera um ID único se não fornecido
+     */
+    generateId() {
+        if (this.inputId) {
+            return this.inputId;
+        }
+        return `voa-input-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    componentWillLoad() {
+        this.inputIdValue = this.generateId();
+        this.internalValue = this.value || '';
+        this.checkSlots();
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    async setFocus() {
+        if (this.inputRef) {
+            this.inputRef.focus();
+        }
+    }
+    render() {
+        const helperTextId = `${this.inputIdValue}-helper`;
+        const hasTitleRow = !!this.label || this.hasInfo;
+        return (h(Host, { key: '9baf318083bca98f0da435ecfd1ae2284e5e6ec5', part: "base", class: {
+                'voa-input': true,
+                [`voa-input--${this.size}`]: true,
+                'voa-input--filled': this.fill,
+                'voa-input--unfilled': !this.fill,
+                'voa-input--focused': this.isFocused,
+                'voa-input--error': this.error,
+                'voa-input--valid': this.valid,
+                'voa-input--warning': this.warning,
+                'voa-input--disabled': this.disabled,
+                'voa-input--readonly': this.readonly,
+                'voa-input--has-prefix': this.hasPrefix,
+                'voa-input--has-suffix': this.hasSuffix,
+            }, "data-has-prefix": this.hasPrefix ? 'true' : undefined, "data-has-suffix": this.hasSuffix ? 'true' : undefined }, hasTitleRow && (h("div", { key: '464788fe314df4dfdaf00385915f86b6439d1de8', part: "title-row", class: "voa-input__title-row" }, h("label", { key: '779aea355460f4f7828ade111c129b960c445680', part: "label", htmlFor: this.inputIdValue, class: "voa-input__label" }, h("slot", { key: '835ccf1cabaf17671400ddb0264d8e19eb4131a5', name: "label" }, this.label), this.required && h("span", { key: '94a68589aad1480e4aa060e501cefe9370170d98', class: "voa-input__required-indicator", "aria-label": "obrigat\u00F3rio" }, "*")), h("div", { key: 'faa2e24898dc2e01693dcea85f9df9059816ff28', part: "info", class: {
+                'voa-input__info': true,
+                'is-hidden': !this.hasInfo
+            } }, h("slot", { key: 'b1591a22479125de649bc740c2ac5b7b53302ec6', name: "info", onSlotchange: this.checkSlots }), this.showInfoIcon && this.hasInfo && (h("span", { key: '00efcdb5b762dc7f23545c64bdcb3f94e73c77d8', part: "info-icon", class: "voa-input__info-icon" }, h("svg", { key: '5c637b161ce4576b4ae8b2ea9f0a77afb7501a1b', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ab1df7fb0a53d636f28c599a613c9ca542ecea01', d: "M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dae6a2d122a2aa9183903f42a55edd4558991f16', d: "M8 8V11", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '5ea08a64c5bf2533b4da0cf52c8349c5fa5ee286', d: "M8 5H8.008", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), h("div", { key: 'ab1fa968a8a531454d15366ded3c8861e3582aa0', part: "container", class: {
+                'voa-input__container': true,
+                'is-focused': this.isFocused,
+                'has-error': this.error,
+                'has-valid': this.valid,
+                'has-warning': this.warning,
+                'is-disabled': this.disabled,
+                'is-readonly': this.readonly,
+            } }, h("div", { key: '1b2372a896de8ccdf5545181884fac5f0d7706e3', part: "prefix", class: {
+                'voa-input__prefix': true,
+                'is-hidden': !this.hasPrefix
+            } }, h("slot", { key: '5f006c160425511074e5533a2b090803c30784d5', name: "prefix", onSlotchange: this.checkSlots })), h("input", { key: '25e5d1c7b598c328e9789214dc054d56529eb743', part: "input", ref: (el) => (this.inputRef = el), id: this.inputIdValue, type: this.type, name: this.name, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperText ? helperTextId : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: "voa-input__input" }), h("div", { key: '03ffaeafb850bd1e76838cfc23327594671b8cfe', part: "suffix", class: {
+                'voa-input__suffix': true,
+                'is-hidden': !this.hasSuffix
+            } }, h("slot", { key: 'c6f7bcbac1aeaaaf2e2fb7f3a519ffbb8670e334', name: "suffix", onSlotchange: this.checkSlots }))), this.helperText && (h("div", { key: 'e9cb578c42a6d736bb296959099b1bdf92e8bed5', part: "helper-text", id: helperTextId, class: {
+                'voa-input__helper-text': true,
+                'voa-input__helper-text--error': this.error,
+                'voa-input__helper-text--valid': this.valid,
+                'voa-input__helper-text--warning': this.warning,
+            }, role: this.error ? 'alert' : undefined }, h("slot", { key: 'e643e7660af9e03ed3756e93c840e4e1798e72ba', name: "helper-text" }, this.helperText)))));
+    }
+    static get is() { return "voa-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID do elemento input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo do input (text, password, email, search, tel, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do elemento input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor do input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto auxiliar ou mensagem de erro"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o campo est\u00E1 em estado de erro"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o campo est\u00E1 em estado de sucesso"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "valid",
+                "defaultValue": "false"
+            },
+            "warning": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o campo est\u00E1 em estado de aviso"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "warning",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o campo est\u00E1 desabilitado"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o campo \u00E9 somente leitura"
+                },
+                "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": "Indica se o campo \u00E9 obrigat\u00F3rio"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "fill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante de preenchimento (filled vs unfilled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fill",
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "showInfoIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mostrar \u00EDcone de informa\u00E7\u00E3o na \u00E1rea de info"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-info-icon",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "hasPrefix": {},
+            "hasSuffix": {},
+            "hasInfo": {},
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o valor \u00E9 alterado"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsInput",
+                "name": "dsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido durante a digita\u00E7\u00E3o"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o campo ganha foco"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o campo perde foco"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo para acessibilidade WCAG 2.2 AA.\r\nDelega foco ao elemento interno nativo.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=voa-input.js.map