voa-ds-core 1.0.4

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

@@ -0,0 +1,346 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Componente Input-Addon para elementos auxiliares em inputs.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do addon
+ * @part content - O conteúdo do addon
+ * @part icon - O ícone (quando aplicável)
+ * @part text - O texto do addon
+ * @part dropdown-icon - O ícone de dropdown (quando aplicável)
+ */
+export class VoaInputAddon {
+    constructor() {
+        /**
+         * Variante do addon
+         */
+        this.variant = 'label';
+        /**
+         * Texto do label/prepend (para variantes label, select)
+         */
+        this.prependContent = 'http://';
+        /**
+         * Código do país (para variante flags)
+         */
+        this.countryCode = 'BR +55';
+        /**
+         * Texto do botão (para variante button)
+         */
+        this.buttonLabel = 'Procurar...';
+        /**
+         * Símbolo da moeda (para variante currency-pre)
+         */
+        this.currency = 'R$';
+        /**
+         * Nome da moeda (para variante currency-post)
+         */
+        this.currencyName = 'Real';
+        /**
+         * Tecla do atalho (para variante shortcut)
+         */
+        this.shortcut = 'S';
+        /**
+         * Plataforma do atalho (para variante shortcut)
+         */
+        this.platform = 'mac';
+        /**
+         * Handler para clique no addon
+         */
+        this.handleClick = () => {
+            this.dsClick.emit();
+        };
+        /**
+         * Handler para navegação por teclado (WCAG 2.2 AA).
+         */
+        this.handleKeyDown = (event) => {
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.handleClick();
+                    break;
+            }
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    async setFocus() {
+        var _a;
+        const focusable = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[tabindex]');
+        if (focusable) {
+            focusable.focus();
+        }
+    }
+    render() {
+        const isInteractive = ['button', 'select', 'flags', 'currency-post', 'clear'].includes(this.variant);
+        return (h(Host, { key: '7ac67c80a1076b42cc106a7ecfc1c7f707f1ac37', class: {
+                'voa-input-addon': true,
+                [`voa-input-addon--${this.variant}`]: true,
+                'voa-input-addon--interactive': isInteractive,
+            } }, h("div", { key: 'dfe1edba1e90c017b5cc6f0eac6880f714fb4c55', part: "base", class: "voa-input-addon__base", onClick: isInteractive ? this.handleClick : undefined, onKeyDown: isInteractive ? this.handleKeyDown : undefined, role: isInteractive ? 'button' : undefined, tabindex: isInteractive ? 0 : undefined, "aria-label": this.getAriaLabel() }, this.renderContent())));
+    }
+    getAriaLabel() {
+        switch (this.variant) {
+            case 'button':
+                return this.buttonLabel || 'Botão';
+            case 'clear':
+                return 'Limpar campo';
+            case 'select':
+                return `Selecionar ${this.prependContent || 'opção'}`;
+            case 'flags':
+                return `Selecionar país ${this.countryCode || ''}`;
+            case 'currency-post':
+                return `Selecionar moeda ${this.currencyName || ''}`;
+            default:
+                return undefined;
+        }
+    }
+    renderContent() {
+        switch (this.variant) {
+            case 'currency-pre':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "text", class: "voa-input-addon__text" }, this.currency)));
+            case 'select':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "text", class: "voa-input-addon__text" }, this.prependContent), h("span", { part: "dropdown-icon", class: "voa-input-addon__dropdown-icon" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7 10L12 15L17 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+            case 'clear':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "icon", class: "voa-input-addon__icon" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+            case 'flags':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "icon", class: "voa-input-addon__flag-icon" }), h("span", { part: "text", class: "voa-input-addon__text" }, this.countryCode), h("span", { part: "dropdown-icon", class: "voa-input-addon__dropdown-icon" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7 10L12 15L17 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+            case 'button':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "text", class: "voa-input-addon__button-text" }, this.buttonLabel)));
+            case 'currency-post':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "text", class: "voa-input-addon__text" }, this.currencyName), h("span", { part: "dropdown-icon", class: "voa-input-addon__dropdown-icon" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7 10L12 15L17 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+            case 'shortcut':
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("voa-keybinding", { shortcut: this.shortcut, platform: this.platform })));
+            case 'label':
+            default:
+                return (h("div", { part: "content", class: "voa-input-addon__content" }, h("span", { part: "text", class: "voa-input-addon__text" }, this.prependContent)));
+        }
+    }
+    static get is() { return "voa-input-addon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-input-addon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-input-addon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post'",
+                    "resolved": "\"button\" | \"clear\" | \"currency-post\" | \"currency-pre\" | \"flags\" | \"label\" | \"select\" | \"shortcut\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante do addon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'label'"
+            },
+            "prependContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do label/prepend (para variantes label, select)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prepend-content",
+                "defaultValue": "'http://'"
+            },
+            "countryCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "C\u00F3digo do pa\u00EDs (para variante flags)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country-code",
+                "defaultValue": "'BR +55'"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do bot\u00E3o (para variante button)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "'Procurar...'"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "S\u00EDmbolo da moeda (para variante currency-pre)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency",
+                "defaultValue": "'R$'"
+            },
+            "currencyName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome da moeda (para variante currency-post)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency-name",
+                "defaultValue": "'Real'"
+            },
+            "shortcut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tecla do atalho (para variante shortcut)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut",
+                "defaultValue": "'S'"
+            },
+            "platform": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'mac' | 'win'",
+                    "resolved": "\"mac\" | \"win\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Plataforma do atalho (para variante shortcut)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "platform",
+                "defaultValue": "'mac'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o addon \u00E9 clicado (para variantes interativas)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "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 acessibilidade WCAG 2.2 AA.\r\nDelega foco ao elemento interno nativo.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-input-addon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-input-addon.js","sourceRoot":"","sources":["../../../src/components/voa-input-addon/voa-input-addon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Componente Input-Addon para elementos auxiliares em inputs.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do addon\r\n * @part content - O conteúdo do addon\r\n * @part icon - O ícone (quando aplicável)\r\n * @part text - O texto do addon\r\n * @part dropdown-icon - O ícone de dropdown (quando aplicável)\r\n */\r\n@Component({\r\n  tag: 'voa-input-addon',\r\n  styleUrl: 'voa-input-addon.css',\r\n  shadow: true,\r\n  scoped: false,\r\n})\r\nexport class VoaInputAddon {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * Variante do addon\r\n   */\r\n  @Prop({ reflect: true }) variant: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post' = 'label';\r\n\r\n  /**\r\n   * Texto do label/prepend (para variantes label, select)\r\n   */\r\n  @Prop() prependContent?: string = 'http://';\r\n\r\n  /**\r\n   * Código do país (para variante flags)\r\n   */\r\n  @Prop() countryCode?: string = 'BR +55';\r\n\r\n  /**\r\n   * Texto do botão (para variante button)\r\n   */\r\n  @Prop() buttonLabel?: string = 'Procurar...';\r\n\r\n  /**\r\n   * Símbolo da moeda (para variante currency-pre)\r\n   */\r\n  @Prop() currency?: string = 'R$';\r\n\r\n  /**\r\n   * Nome da moeda (para variante currency-post)\r\n   */\r\n  @Prop() currencyName?: string = 'Real';\r\n\r\n  /**\r\n   * Tecla do atalho (para variante shortcut)\r\n   */\r\n  @Prop() shortcut?: string = 'S';\r\n\r\n  /**\r\n   * Plataforma do atalho (para variante shortcut)\r\n   */\r\n  @Prop() platform?: 'mac' | 'win' = 'mac';\r\n\r\n  /**\r\n   * Evento emitido quando o addon é clicado (para variantes interativas)\r\n   */\r\n  @Event() dsClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno nativo.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no addon\r\n   */\r\n  private handleClick = () => {\r\n    this.dsClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        this.handleClick();\r\n        break;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const isInteractive = ['button', 'select', 'flags', 'currency-post', 'clear'].includes(this.variant);\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          'voa-input-addon': true,\r\n          [`voa-input-addon--${this.variant}`]: true,\r\n          'voa-input-addon--interactive': isInteractive,\r\n        }}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class=\"voa-input-addon__base\"\r\n          onClick={isInteractive ? this.handleClick : undefined}\r\n          onKeyDown={isInteractive ? this.handleKeyDown : undefined}\r\n          role={isInteractive ? 'button' : undefined}\r\n          tabindex={isInteractive ? 0 : undefined}\r\n          aria-label={this.getAriaLabel()}\r\n        >\r\n          {this.renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private getAriaLabel(): string | undefined {\r\n    switch (this.variant) {\r\n      case 'button':\r\n        return this.buttonLabel || 'Botão';\r\n      case 'clear':\r\n        return 'Limpar campo';\r\n      case 'select':\r\n        return `Selecionar ${this.prependContent || 'opção'}`;\r\n      case 'flags':\r\n        return `Selecionar país ${this.countryCode || ''}`;\r\n      case 'currency-post':\r\n        return `Selecionar moeda ${this.currencyName || ''}`;\r\n      default:\r\n        return undefined;\r\n    }\r\n  }\r\n\r\n  private renderContent() {\r\n    switch (this.variant) {\r\n      case 'currency-pre':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.currency}\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'select':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.prependContent}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'clear':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"icon\" class=\"voa-input-addon__icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M18 6L6 18M6 6L18 18\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'flags':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"icon\" class=\"voa-input-addon__flag-icon\"></span>\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.countryCode}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'button':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__button-text\">\r\n              {this.buttonLabel}\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'currency-post':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.currencyName}\r\n            </span>\r\n            <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M7 10L12 15L17 10\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </svg>\r\n            </span>\r\n          </div>\r\n        );\r\n\r\n      case 'shortcut':\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <voa-keybinding shortcut={this.shortcut} platform={this.platform}></voa-keybinding>\r\n          </div>\r\n        );\r\n\r\n      case 'label':\r\n      default:\r\n        return (\r\n          <div part=\"content\" class=\"voa-input-addon__content\">\r\n            <span part=\"text\" class=\"voa-input-addon__text\">\r\n              {this.prependContent}\r\n            </span>\r\n          </div>\r\n        );\r\n    }\r\n  }\r\n}\r\n\r\n"]}