voa-ds-core 1.0.4

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

@@ -0,0 +1,357 @@
+import { h } from "@stencil/core";
+/**
+ * Componente Base para Select do Voa Design System, baseado no design do Figma.
+ *
+ * @part base - The root select element
+ * @part control - The select control button
+ * @part value - The displayed value text
+ * @part indicator - The dropdown indicator icon
+ * @part dropdown - The dropdown menu container
+ * @part option - Individual option element
+ */
+export class VoaSelectBase {
+    constructor() {
+        /**
+         * Lista de opções para seleção
+         */
+        this.options = [];
+        /**
+         * Texto de placeholder quando não há item selecionado
+         */
+        this.placeholder = 'Select an option';
+        /**
+         * Se verdadeiro, o select estará desabilitado.
+         */
+        this.disabled = false;
+        /**
+         * Se verdadeiro, o select terá estado de erro.
+         */
+        this.error = false;
+        /**
+         * Se verdadeiro, o select mostrará as opções.
+         */
+        this.isOpen = false;
+        /**
+         * Track which option is currently "highlighted" by the keyboard
+         * (Not necessarily selected yet).
+         */
+        this.activeIndex = -1;
+        this.listboxId = `voa-listbox-${Math.random().toString(36).substr(2, 9)}`;
+        this.toggleDropdown = () => {
+            if (this.disabled)
+                return;
+            if (this.isOpen) {
+                this.closeDropdown();
+            }
+            else {
+                this.openDropdown();
+            }
+        };
+        this.handleSelect = (val) => {
+            if (this.disabled)
+                return;
+            this.innerValue = val;
+            this.voaChange.emit(val);
+            this.closeDropdown();
+        };
+        /**
+         * THE KEYBOARD BRAIN
+         * This is what makes a Select a Select.
+         */
+        this.handleKeyDown = (ev) => {
+            if (this.disabled)
+                return;
+            switch (ev.key) {
+                case 'Enter':
+                case ' ':
+                    ev.preventDefault();
+                    if (this.isOpen) {
+                        if (this.activeIndex >= 0 && this.options[this.activeIndex]) {
+                            this.handleSelect(this.options[this.activeIndex].value);
+                        }
+                    }
+                    else {
+                        this.openDropdown();
+                    }
+                    break;
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    if (!this.isOpen) {
+                        this.openDropdown();
+                    }
+                    else {
+                        this.activeIndex = Math.min(this.activeIndex + 1, this.options.length - 1);
+                        this.scrollToActive();
+                    }
+                    break;
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    if (this.isOpen) {
+                        this.activeIndex = Math.max(this.activeIndex - 1, 0);
+                        this.scrollToActive();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.isOpen) {
+                        ev.preventDefault();
+                        this.closeDropdown();
+                    }
+                    break;
+                case 'Tab':
+                    // If user tabs away, close it.
+                    if (this.isOpen) {
+                        this.closeDropdown();
+                    }
+                    break;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.innerValue = this.value;
+    }
+    syncValue(val) {
+        this.innerValue = val;
+    }
+    handleOutsideClick(ev) {
+        const path = ev.composedPath();
+        if (this.isOpen && !path.includes(this.host)) {
+            this.closeDropdown();
+        }
+    }
+    openDropdown() {
+        this.isOpen = true;
+        // Find the index of the currently selected value to highlight it
+        const index = this.options.findIndex(o => o.value === this.innerValue);
+        this.activeIndex = index >= 0 ? index : 0;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.activeIndex = -1;
+    }
+    scrollToActive() {
+        // Logic to scroll the dropdown container to keep the active item in view
+        // Implementation omitted for brevity, but vital for production
+    }
+    getDisplayText() {
+        const selected = this.options.find(o => o.value === this.innerValue);
+        return selected ? selected.label : this.placeholder;
+    }
+    /**
+     * Método para delegar foco ao elemento interno do select.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    async setFocus() {
+        var _a;
+        const control = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="control"]');
+        if (control) {
+            control.focus();
+        }
+    }
+    render() {
+        const activeId = this.activeIndex >= 0 ? `${this.listboxId}-opt-${this.activeIndex}` : undefined;
+        return (h("div", { key: 'bfc22f9fc559870dab16294a325a5bc55060f99e', part: "base", class: {
+                'voa-select': true,
+                'voa-select--open': this.isOpen,
+                'voa-select--disabled': this.disabled,
+            },
+            // The container handles keydown
+            onKeyDown: this.handleKeyDown }, h("button", { key: 'dc192bef1f52d80e74a1365d683b17aacda46699', part: "control", type: "button", class: "voa-select__control", onClick: this.toggleDropdown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": this.listboxId, "aria-activedescendant": this.isOpen ? activeId : undefined, disabled: this.disabled }, h("span", { key: 'ae5e57687de6b46dc423139e77637555632972f6', part: "value", class: "voa-select__value" }, this.getDisplayText()), h("span", { key: '56f46e6aa3a087421ec8b4d059cea3afe5a8df55', part: "indicator", class: "voa-select__indicator" }, h("slot", { key: 'ac55becc8c000d90d55995e98489d4902fbeacdb', name: "indicator" }, h("svg", { key: '26b2d68fd9da3af50dcb5cb8a7dbed3cdbb38d76', width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", stroke: "currentColor" }, h("path", { key: 'b2c38a6bdd672f49bb615ed29c3303f9dbbcf53f', d: "M1 1L5 5L9 1", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '59589921d080699e294838fbfb68f88a9a826a15', id: this.listboxId, part: "dropdown", class: {
+                'voa-select__dropdown': true,
+                'voa-select__dropdown--hidden': !this.isOpen,
+            }, role: "listbox", tabindex: "-1", "aria-hidden": !this.isOpen ? 'true' : undefined }, this.options.map((option, index) => {
+            const isSelected = option.value === this.innerValue;
+            const isActive = index === this.activeIndex;
+            return (h("div", { id: `${this.listboxId}-opt-${index}`, part: "option", class: {
+                    'voa-select__option': true,
+                    'voa-select__option--selected': isSelected,
+                    'voa-select__option--active': isActive, // Highlighted by keyboard
+                    'voa-select__option--disabled': !!option.disabled,
+                }, role: "option", "aria-selected": isSelected ? 'true' : 'false', onClick: () => !option.disabled && this.handleSelect(option.value), onMouseEnter: () => (this.activeIndex = index) }, option.label));
+        }))));
+    }
+    static get is() { return "voa-select-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-select-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-select-base.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de placeholder quando n\u00E3o h\u00E1 item selecionado"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select an option'"
+            },
+            "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": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "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": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "innerValue": {},
+            "isOpen": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaChange",
+                "name": "voaChange",
+                "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"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "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"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=voa-select-base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-select-base.js","sourceRoot":"","sources":["../../../src/components/voa-select/voa-select-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, Method, Element, h, State, Watch, Listen } from '@stencil/core';\r\n\r\n/**\r\n * Componente Base para Select do Voa Design System, baseado no design do Figma.\r\n * \r\n * @part base - The root select element\r\n * @part control - The select control button\r\n * @part value - The displayed value text\r\n * @part indicator - The dropdown indicator icon\r\n * @part dropdown - The dropdown menu container\r\n * @part option - Individual option element\r\n */\r\n@Component({\r\n  tag: 'voa-select-base',\r\n  styleUrl: 'voa-select-base.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaSelectBase {\r\n  @Element() host: HTMLElement;\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   * Texto de placeholder quando não há item selecionado\r\n   */\r\n  @Prop() placeholder: string = 'Select an option';\r\n\r\n  /**\r\n   * Se verdadeiro, o select estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o select terá estado de erro.\r\n   */\r\n  @Prop({ reflect: true }) error: boolean = false;\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   * Se verdadeiro, o select mostrará as opções.\r\n   */\r\n  @State() isOpen: boolean = false;\r\n\r\n  /**\r\n   * Track which option is currently \"highlighted\" by the keyboard\r\n   * (Not necessarily selected yet).\r\n   */\r\n  @State() activeIndex: number = -1;\r\n\r\n  /**\r\n   * Evento emitido quando o valor é alterado\r\n   */\r\n  @Event() voaChange: EventEmitter<string>;\r\n\r\n  private listboxId = `voa-listbox-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n  componentWillLoad() {\r\n    this.innerValue = this.value;\r\n  }\r\n\r\n  @Watch('value')\r\n  syncValue(val: string) {\r\n    this.innerValue = val;\r\n  }\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(ev: MouseEvent) {\r\n    const path = ev.composedPath();\r\n    if (this.isOpen && !path.includes(this.host)) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  private toggleDropdown = () => {\r\n    if (this.disabled) return;\r\n    if (this.isOpen) {\r\n      this.closeDropdown();\r\n    } else {\r\n      this.openDropdown();\r\n    }\r\n  };\r\n\r\n  private openDropdown() {\r\n    this.isOpen = true;\r\n    // Find the index of the currently selected value to highlight it\r\n    const index = this.options.findIndex(o => o.value === this.innerValue);\r\n    this.activeIndex = index >= 0 ? index : 0;\r\n  }\r\n\r\n  private closeDropdown() {\r\n    this.isOpen = false;\r\n    this.activeIndex = -1;\r\n  }\r\n\r\n  private handleSelect = (val: string) => {\r\n    if (this.disabled) return;\r\n    this.innerValue = val;\r\n    this.voaChange.emit(val);\r\n    this.closeDropdown();\r\n  };\r\n\r\n  /**\r\n   * THE KEYBOARD BRAIN\r\n   * This is what makes a Select a Select.\r\n   */\r\n  private handleKeyDown = (ev: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    switch (ev.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          if (this.activeIndex >= 0 && this.options[this.activeIndex]) {\r\n            this.handleSelect(this.options[this.activeIndex].value);\r\n          }\r\n        } else {\r\n          this.openDropdown();\r\n        }\r\n        break;\r\n      case 'ArrowDown':\r\n        ev.preventDefault();\r\n        if (!this.isOpen) {\r\n          this.openDropdown();\r\n        } else {\r\n          this.activeIndex = Math.min(this.activeIndex + 1, this.options.length - 1);\r\n          this.scrollToActive();\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        ev.preventDefault();\r\n        if (this.isOpen) {\r\n          this.activeIndex = Math.max(this.activeIndex - 1, 0);\r\n          this.scrollToActive();\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        if (this.isOpen) {\r\n          ev.preventDefault();\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n      case 'Tab':\r\n        // If user tabs away, close it.\r\n        if (this.isOpen) {\r\n          this.closeDropdown();\r\n        }\r\n        break;\r\n    }\r\n  };\r\n\r\n  private scrollToActive() {\r\n    // Logic to scroll the dropdown container to keep the active item in view\r\n    // Implementation omitted for brevity, but vital for production\r\n  }\r\n\r\n  private getDisplayText(): string {\r\n    const selected = this.options.find(o => o.value === this.innerValue);\r\n    return selected ? selected.label : this.placeholder;\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 control = this.host.shadowRoot?.querySelector('[part=\"control\"]') as HTMLElement;\r\n    if (control) {\r\n      control.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const activeId = this.activeIndex >= 0 ? `${this.listboxId}-opt-${this.activeIndex}` : undefined;\r\n\r\n    return (\r\n      <div\r\n        part=\"base\"\r\n        class={{\r\n          'voa-select': true,\r\n          'voa-select--open': this.isOpen,\r\n          'voa-select--disabled': this.disabled,\r\n        }}\r\n        // The container handles keydown\r\n        onKeyDown={this.handleKeyDown}\r\n      >\r\n        {/* CONTROL (The Trigger) */}\r\n        <button\r\n          part=\"control\"\r\n          type=\"button\"\r\n          class=\"voa-select__control\"\r\n          onClick={this.toggleDropdown}\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded={this.isOpen ? 'true' : 'false'}\r\n          aria-controls={this.listboxId}\r\n          aria-activedescendant={this.isOpen ? activeId : undefined}\r\n          disabled={this.disabled}\r\n        >\r\n          <span part=\"value\" class=\"voa-select__value\">\r\n            {this.getDisplayText()}\r\n          </span>\r\n          <span part=\"indicator\" class=\"voa-select__indicator\">\r\n            <slot name=\"indicator\">\r\n              {/* Default Chevron */}\r\n              <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" stroke=\"currentColor\">\r\n                <path d=\"M1 1L5 5L9 1\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </slot>\r\n          </span>\r\n        </button>\r\n\r\n        {/* DROPDOWN (The Listbox) */}\r\n        <div\r\n          id={this.listboxId}\r\n          part=\"dropdown\"\r\n          class={{\r\n            'voa-select__dropdown': true,\r\n            'voa-select__dropdown--hidden': !this.isOpen,\r\n          }}\r\n          role=\"listbox\"\r\n          tabindex=\"-1\"\r\n          aria-hidden={!this.isOpen ? 'true' : undefined}\r\n        >\r\n          {this.options.map((option, index) => {\r\n            const isSelected = option.value === this.innerValue;\r\n            const isActive = index === this.activeIndex;\r\n\r\n            return (\r\n              <div\r\n                id={`${this.listboxId}-opt-${index}`}\r\n                part=\"option\"\r\n                class={{\r\n                  'voa-select__option': true,\r\n                  'voa-select__option--selected': isSelected,\r\n                  'voa-select__option--active': isActive, // Highlighted by keyboard\r\n                  'voa-select__option--disabled': !!option.disabled,\r\n                }}\r\n                role=\"option\"\r\n                aria-selected={isSelected ? 'true' : 'false'}\r\n                onClick={() => !option.disabled && this.handleSelect(option.value)}\r\n                onMouseEnter={() => (this.activeIndex = index)} // Mouse syncs with keyboard\r\n              >\r\n                {option.label}\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -0,0 +1,109 @@
+/* 
+ * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).
+ * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally
+ * via CSS Parts API (::part() selectors) using design tokens.
+ */
+
+:host {
+  display: block;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.voa-select {
+  /* Structural styles only */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  /* Garantir que dropdowns filhos possam aparecer acima */
+  overflow: visible;
+}
+
+/* Header */
+.voa-select__header {
+  /* Structural styles only */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.voa-select__label {
+  /* Structural styles only */
+  flex: 1 0 0;
+  box-sizing: border-box;
+}
+
+.voa-select__info {
+  /* Structural styles only */
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+}
+
+.voa-select__info-message {
+  /* Structural styles only */
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+.voa-select__icon {
+  /* Structural styles only */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* Input Container */
+.voa-select__input {
+  /* Structural styles only */
+  display: flex;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  /* Garantir que o dropdown possa ser posicionado relativamente a este container */
+  overflow: visible;
+}
+
+.voa-select__input-wrapper {
+  /* Structural styles only */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.voa-select__content {
+  /* Structural styles only */
+  flex: 1 0 0;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  /* Garantir que o dropdown dentro do voa-select-base possa ser posicionado */
+  position: relative;
+  overflow: visible;
+}
+
+/* Error Message */
+.voa-select__error {
+  /* Structural styles only */
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Estados estruturais */
+.voa-select__input--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}