voa-ds-core 1.0.3

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

@@ -0,0 +1,449 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente Select principal do Voa Design System, baseado no design do Figma.
+ *
+ * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,
+ * adicionando funcionalidades de label, info, ícone e mensagem de erro.
+ *
+ * @part base - O elemento raiz do componente
+ * @part header - Container do header (label + info)
+ * @part label - Texto do label
+ * @part info - Container de informação
+ * @part input-wrapper - Wrapper do input field
+ * @part input - Container do input (com borda)
+ * @part error-message - Mensagem de erro
+ */
+export class VoaSelect {
+    constructor() {
+        /**
+         * Tipo de seleção: 'simple' para seleção única
+         * NOTA: 'multi' está temporariamente desabilitado até implementação correta
+         */
+        this.type = 'simple';
+        /**
+         * Se verdadeiro, o label será exibido
+         */
+        this.showLabel = true;
+        /**
+         * Se verdadeiro, a informação adicional será exibida
+         */
+        this.info = false;
+        /**
+         * Se verdadeiro, o select terá estado de erro
+         */
+        this.error = false;
+        /**
+         * Texto de placeholder
+         */
+        this.placeholder = 'Placeholder';
+        /**
+         * Lista de opções para seleção
+         */
+        this.options = [];
+        /**
+         * Se verdadeiro, o select estará desabilitado
+         */
+        this.disabled = false;
+        /**
+         * Estado interno para controlar o foco
+         */
+        this.isFocused = false;
+        /**
+         * Estado interno calculado (default, selected, focused, filled, disabled)
+         */
+        this.currentState = 'default';
+        /**
+         * Manipula mudança de valor no select-base
+         */
+        this.handleChange = (event) => {
+            this.innerValue = event.detail;
+            this.voaSelectChange.emit(event.detail);
+        };
+    }
+    componentWillLoad() {
+        this.innerValue = this.value;
+        this.updateState();
+    }
+    syncValue(val) {
+        this.innerValue = val;
+        this.updateState();
+    }
+    /**
+     * Atualiza o estado interno baseado nas props
+     */
+    updateState() {
+        if (this.disabled) {
+            this.currentState = 'disabled';
+        }
+        else if (this.isFocused) {
+            this.currentState = 'focused';
+        }
+        else if (this.hasValue()) {
+            // Se há valor selecionado, é "filled" ou "selected"
+            this.currentState = 'filled';
+            if (this.hasSelectedValue()) {
+                this.currentState = 'selected';
+            }
+        }
+        else {
+            this.currentState = 'default';
+        }
+    }
+    /**
+     * Verifica se há valor selecionado
+     */
+    hasValue() {
+        return !!this.innerValue && this.innerValue !== '';
+    }
+    /**
+     * Verifica se há valor selecionado (para estado selected)
+     */
+    hasSelectedValue() {
+        return this.hasValue();
+    }
+    /**
+     * Listen to focus event on the internal button
+     */
+    handleFocus() {
+        this.isFocused = true;
+        this.updateState();
+    }
+    /**
+     * Listen to blur event on the internal button
+     */
+    handleBlur() {
+        this.isFocused = false;
+        this.updateState();
+    }
+    /**
+     * Método para delegar foco ao elemento interno do select.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    async setFocus() {
+        var _a;
+        const selectBase = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('voa-select-base');
+        if (selectBase && typeof selectBase.setFocus === 'function') {
+            await selectBase.setFocus();
+        }
+    }
+    render() {
+        // Verificar se há slot de ícone (apenas para renderização condicional)
+        const iconSlot = this.host.querySelector('[slot="icon"]') || this.host.querySelector('[slot="prefix"]');
+        return (h(Host, { key: 'c6b2e0886e9116e0194a52dea22fd36dc8e973a9', role: "group", "aria-disabled": this.disabled ? 'true' : undefined, "data-state": this.currentState }, h("div", { key: '6ce5e54fea992399bec2ec5827d3b28803fc26c1', part: "base", class: "voa-select" }, this.showLabel && (h("div", { key: 'f236c0419c555b3e3931ecd2aa8efcc46a883777', part: "header", class: "voa-select__header" }, this.label && (h("label", { key: 'b9f963448f922bd18ab152c29aea8f98e723a8b2', part: "label", class: "voa-select__label" }, this.label)), this.info && (h("div", { key: 'fab440ec4d2edc8f710dc6b0bbb28f54f244cdd0', part: "info", class: "voa-select__info" }, this.infoMessage && (h("span", { key: '78afb157e2fef08b26c7dd544e498f6982c4a20c', class: "voa-select__info-message" }, this.infoMessage)), h("slot", { key: '609d452bb0f9f8c79833744bfce72801ca7cb353', name: "info-icon" }, h("svg", { key: '15264e9fc111165da6cb06cb0873bc1605deb4b4', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8fb3c6a63d7c0c82b8ef76ebf179ef14ce0c2398', d: "M8 12V8M8 4H8.01", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))), h("div", { key: 'f888d96ab1db44636c100a924da725f26da8ec2d', part: "input", class: {
+                'voa-select__input': true,
+                [`voa-select__input--${this.currentState}`]: true,
+                'voa-select__input--error': this.error,
+                'voa-select__input--disabled': this.disabled
+            } }, h("div", { key: 'aeb54d401288d8c413fb5bf8d28856e4d1d12239', part: "input-wrapper", class: "voa-select__input-wrapper" }, iconSlot && (h("div", { key: '10470d8b5478233e11433763441a0de2183420b3', part: "icon", class: "voa-select__icon" }, h("slot", { key: '5fe39af041f7bcc27fba60034c7b3254ca22a97b', name: "icon" }), h("slot", { key: '5344b7e33db324f2783453a07f6d57441c9c4944', name: "prefix" }))), h("div", { key: 'f7110b718fc52fa5ea697d9cac534ada1b44b7b9', part: "select-content", class: "voa-select__content" }, h("voa-select-base", { key: 'd80516375edaf1c7620a0a693610f1e7a5d7ca54', options: this.options, value: this.innerValue, placeholder: this.placeholder, disabled: this.disabled, error: this.error, "on-voa-change": this.handleChange })))), this.error && this.errorMessage && (h("div", { key: 'cd40fbd67848f85776fd85b59f0013fc9b5e32e8', part: "error-message", class: "voa-select__error" }, this.errorMessage)))));
+    }
+    static get is() { return "voa-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'simple'",
+                    "resolved": "\"simple\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de sele\u00E7\u00E3o: 'simple' para sele\u00E7\u00E3o \u00FAnica\r\nNOTA: 'multi' est\u00E1 temporariamente desabilitado at\u00E9 implementa\u00E7\u00E3o correta"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'simple'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do label exibido acima do input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o label ser\u00E1 exibido"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "info": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, a informa\u00E7\u00E3o adicional ser\u00E1 exibida"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "false"
+            },
+            "infoMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensagem de informa\u00E7\u00E3o adicional"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info-message"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o select ter\u00E1 estado de erro"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensagem de erro exibida abaixo do input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Placeholder'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "THE TRUTH. Read-only from parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{value: string, label: string, disabled?: boolean}>",
+                    "resolved": "{ value: string; label: string; disabled?: boolean; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de op\u00E7\u00F5es para sele\u00E7\u00E3o"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o select estar\u00E1 desabilitado"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "innerValue": {},
+            "isFocused": {},
+            "currentState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaSelectChange",
+                "name": "voaSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o valor \u00E9 alterado"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    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 delegar foco ao elemento interno do select.\r\nRequerido para acessibilidade WCAG 2.2 AA.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncValue"
+            }, {
+                "propName": "disabled",
+                "methodName": "updateState"
+            }, {
+                "propName": "isFocused",
+                "methodName": "updateState"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "handleFocus",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "handleBlur",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=voa-select.js.map

package/dist/collection/components/voa-select/voa-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-select.js","sourceRoot":"","sources":["../../../src/components/voa-select/voa-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Method, Watch, Listen } from '@stencil/core';\r\n\r\n/**\r\n * Componente Select principal do Voa Design System, baseado no design do Figma.\r\n * \r\n * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,\r\n * adicionando funcionalidades de label, info, ícone e mensagem de erro.\r\n * \r\n * @part base - O elemento raiz do componente\r\n * @part header - Container do header (label + info)\r\n * @part label - Texto do label\r\n * @part info - Container de informação\r\n * @part input-wrapper - Wrapper do input field\r\n * @part input - Container do input (com borda)\r\n * @part error-message - Mensagem de erro\r\n */\r\n@Component({\r\n  tag: 'voa-select',\r\n  styleUrl: 'voa-select.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaSelect {\r\n  @Element() host: HTMLVoaSelectElement;\r\n\r\n  /**\r\n   * Tipo de seleção: 'simple' para seleção única\r\n   * NOTA: 'multi' está temporariamente desabilitado até implementação correta\r\n   */\r\n  @Prop({ reflect: true }) type: 'simple' = 'simple';\r\n\r\n  /**\r\n   * Texto do label exibido acima do input\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Se verdadeiro, o label será exibido\r\n   */\r\n  @Prop() showLabel: boolean = true;\r\n\r\n  /**\r\n   * Se verdadeiro, a informação adicional será exibida\r\n   */\r\n  @Prop() info: boolean = false;\r\n\r\n  /**\r\n   * Mensagem de informação adicional\r\n   */\r\n  @Prop() infoMessage?: string;\r\n\r\n  /**\r\n   * Se verdadeiro, o select terá estado de erro\r\n   */\r\n  @Prop() error: boolean = false;\r\n\r\n  /**\r\n   * Mensagem de erro exibida abaixo do input\r\n   */\r\n  @Prop() errorMessage?: string;\r\n\r\n  /**\r\n   * Texto de placeholder\r\n   */\r\n  @Prop() placeholder: string = 'Placeholder';\r\n\r\n  /**\r\n   * THE TRUTH. Read-only from parent.\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * Internal Reality.\r\n   */\r\n  @State() innerValue?: string;\r\n\r\n  /**\r\n   * Lista de opções para seleção\r\n   */\r\n  @Prop() options: Array<{value: string, label: string, disabled?: boolean}> = [];\r\n\r\n  /**\r\n   * Se verdadeiro, o select estará desabilitado\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Estado interno para controlar o foco\r\n   */\r\n  @State() isFocused: boolean = false;\r\n\r\n  /**\r\n   * Estado interno calculado (default, selected, focused, filled, disabled)\r\n   */\r\n  @State() private currentState: 'default' | 'selected' | 'focused' | 'filled' | 'disabled' = 'default';\r\n\r\n  /**\r\n   * Evento emitido quando o valor é alterado\r\n   */\r\n  @Event() voaSelectChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    this.innerValue = this.value;\r\n    this.updateState();\r\n  }\r\n\r\n  @Watch('value')\r\n  syncValue(val: string) {\r\n    this.innerValue = val;\r\n    this.updateState();\r\n  }\r\n\r\n  /**\r\n   * Atualiza o estado interno baseado nas props\r\n   */\r\n  @Watch('disabled')\r\n  @Watch('isFocused')\r\n  updateState() {\r\n    if (this.disabled) {\r\n      this.currentState = 'disabled';\r\n    } else if (this.isFocused) {\r\n      this.currentState = 'focused';\r\n    } else if (this.hasValue()) {\r\n      // Se há valor selecionado, é \"filled\" ou \"selected\"\r\n      this.currentState = 'filled';\r\n      if (this.hasSelectedValue()) {\r\n        this.currentState = 'selected';\r\n      }\r\n    } else {\r\n      this.currentState = 'default';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Verifica se há valor selecionado\r\n   */\r\n  private hasValue(): boolean {\r\n    return !!this.innerValue && this.innerValue !== '';\r\n  }\r\n\r\n  /**\r\n   * Verifica se há valor selecionado (para estado selected)\r\n   */\r\n  private hasSelectedValue(): boolean {\r\n    return this.hasValue();\r\n  }\r\n\r\n  /**\r\n   * Manipula mudança de valor no select-base\r\n   */\r\n  private handleChange = (event: CustomEvent<string>) => {\r\n    this.innerValue = event.detail;\r\n    this.voaSelectChange.emit(event.detail);\r\n  };\r\n\r\n  /**\r\n   * Listen to focus event on the internal button\r\n   */\r\n  @Listen('focus', { capture: true })\r\n  handleFocus() {\r\n    this.isFocused = true;\r\n    this.updateState();\r\n  }\r\n\r\n  /**\r\n   * Listen to blur event on the internal button\r\n   */\r\n  @Listen('blur', { capture: true })\r\n  handleBlur() {\r\n    this.isFocused = false;\r\n    this.updateState();\r\n  }\r\n\r\n  /**\r\n   * Método para delegar foco ao elemento interno do select.\r\n   * Requerido para acessibilidade WCAG 2.2 AA.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const selectBase = this.host.shadowRoot?.querySelector('voa-select-base') as any;\r\n    if (selectBase && typeof selectBase.setFocus === 'function') {\r\n      await selectBase.setFocus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    // Verificar se há slot de ícone (apenas para renderização condicional)\r\n    const iconSlot = this.host.querySelector('[slot=\"icon\"]') || this.host.querySelector('[slot=\"prefix\"]');\r\n\r\n    return (\r\n      <Host\r\n        role=\"group\"\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        data-state={this.currentState}\r\n      >\r\n        <div part=\"base\" class=\"voa-select\">\r\n          {/* Header */}\r\n          {this.showLabel && (\r\n            <div part=\"header\" class=\"voa-select__header\">\r\n              {this.label && (\r\n                <label part=\"label\" class=\"voa-select__label\">\r\n                  {this.label}\r\n                </label>\r\n              )}\r\n              {this.info && (\r\n                <div part=\"info\" class=\"voa-select__info\">\r\n                  {this.infoMessage && (\r\n                    <span class=\"voa-select__info-message\">{this.infoMessage}</span>\r\n                  )}\r\n                  <slot name=\"info-icon\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path d=\"M8 12V8M8 4H8.01\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg>\r\n                  </slot>\r\n                </div>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          {/* Input Wrapper */}\r\n          <div \r\n            part=\"input\" \r\n            class={{\r\n              'voa-select__input': true,\r\n              [`voa-select__input--${this.currentState}`]: true,\r\n              'voa-select__input--error': this.error,\r\n              'voa-select__input--disabled': this.disabled\r\n            }}\r\n          >\r\n            <div part=\"input-wrapper\" class=\"voa-select__input-wrapper\">\r\n              {/* Icon Slot */}\r\n              {iconSlot && (\r\n                <div part=\"icon\" class=\"voa-select__icon\">\r\n                  <slot name=\"icon\"></slot>\r\n                  <slot name=\"prefix\"></slot>\r\n                </div>\r\n              )}\r\n\r\n              {/* Select Base */}\r\n              <div part=\"select-content\" class=\"voa-select__content\">\r\n                <voa-select-base\r\n                  options={this.options}\r\n                  value={this.innerValue}\r\n                  placeholder={this.placeholder}\r\n                  disabled={this.disabled}\r\n                  error={this.error}\r\n                  on-voa-change={this.handleChange}\r\n                />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Error Message */}\r\n          {this.error && this.errorMessage && (\r\n            <div part=\"error-message\" class=\"voa-select__error\">\r\n              {this.errorMessage}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\n"]}