voa-ds-core 1.0.3

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

@@ -0,0 +1,342 @@
+import { h, Host } from "@stencil/core";
+import { getAlertIcon } from "../../utils/icons";
+/**
+ * O componente voa-alert é usado para exibir mensagens importantes para o usuário.
+ * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.
+ * Suporta variantes default (layout vertical) e inline (layout horizontal).
+ *
+ * @part base - O elemento raiz do alerta
+ * @part content-wrapper - Wrapper do conteúdo principal
+ * @part icon - Container do ícone
+ * @part content - Container do conteúdo (slot padrão)
+ * @part title - Container do título
+ * @part description - Container da descrição
+ * @part close-button - Botão de fechar
+ * @part actions - Container dos botões de ação
+ * @part primary-btn-base - Expõe o part "base" do botão primário para estilização externa
+ * @part secondary-btn-base - Expõe o part "base" do botão secundário para estilização externa
+ */
+export class VoaAlert {
+    constructor() {
+        /**
+         * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).
+         * Padrão é 'default'.
+         */
+        this.variant = 'default';
+        /**
+         * O tipo de alerta a ser exibido. Influencia a cor e o ícone.
+         * Padrão é 'info'.
+         */
+        this.type = 'info';
+        /**
+         * Determina se o alerta pode ser fechado pelo usuário.
+         */
+        this.closable = false;
+        /**
+         * Texto do rótulo para o botão de fechar, para acessibilidade.
+         * Padrão é "Fechar alerta".
+         */
+        this.closeButtonLabel = 'Fechar alerta';
+        /**
+         * Determina se os botões devem ser exibidos.
+         * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).
+         * Se false, os botões não serão exibidos, independente das outras props.
+         */
+        this.showButtons = false;
+        this.handleClose = (e) => {
+            e.stopPropagation();
+            this.voaDismiss.emit();
+        };
+    }
+    /**
+     * Método para acessibilidade WCAG 2.2 AA
+     * Delega foco ao botão de fechar se existir
+     */
+    async setFocus() {
+        var _a;
+        const closeBtn = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="close-button"]');
+        if (closeBtn) {
+            closeBtn.focus();
+        }
+    }
+    renderIcon() {
+        const iconType = this.variant === 'inline' && this.type === 'warning' ? 'warning-inline' : this.type;
+        const IconComponent = getAlertIcon(iconType, this.variant);
+        return (h("div", { part: "icon", class: "alert-icon" }, h(IconComponent, null)));
+    }
+    render() {
+        const hasButtons = this.variant === 'default' && this.showButtons && !!this.primaryButtonText;
+        return (h(Host, { key: '3e04be2859dc5ef25212fd5df6cba4ba2eff5c88', role: "alert", "aria-hidden": !this.closable ? null : "false" }, h("div", { key: '98f0d6a88ef58e7692818154090ca4150e2ce404', part: "base", class: {
+                'alert-container': true,
+                [`alert-${this.variant}`]: true,
+                [`alert-type-${this.type}`]: true
+            } }, h("div", { key: '41ba5dcd37cdf3fbf4afb4593f4eea352f30453c', part: "content-wrapper", class: "content-wrapper" }, this.renderIcon(), h("div", { key: '274c21ee707d150d83ee405b62464f98c31d34f4', part: "content", class: "content" }, (this.alertTitle || this.description) ? (h("div", { class: "text-group" }, this.alertTitle && h("div", { part: "title", class: "title" }, this.alertTitle), this.variant === 'default' && this.description && (h("div", { part: "description", class: "description" }, this.description)))) : (h("slot", null))), this.closable && (h("button", { key: '03da877fab62fab406fac41e4c94e71298af132c', part: "close-button", type: "button", class: "close-button", onClick: this.handleClose, "aria-label": this.closeButtonLabel }, getAlertIcon('close', this.variant)()))), hasButtons && (h("div", { key: '98b4b495e98dc4bb7105df40e34071ffb03965cb', part: "actions", class: "actions-wrapper" }, this.secondaryButtonText && (h("voa-button", { key: '8006d6fbdb687ce60b7dc832eb0bb91e28bf5195', variant: "ghost", size: "sm", onDsClick: () => this.voaSecondaryClick.emit(), exportparts: "base: secondary-btn-base" }, this.secondaryButtonText)), h("voa-button", { key: '9917cb71af08d6956dc0359b8a66bfb094d5c18c', variant: "primary", size: "sm", onDsClick: () => this.voaPrimaryClick.emit(), exportparts: "base: primary-btn-base" }, this.primaryButtonText))))));
+    }
+    static get is() { return "voa-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inline'",
+                    "resolved": "\"default\" | \"inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).\r\nPadr\u00E3o \u00E9 'default'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info'",
+                    "resolved": "\"basic\" | \"error\" | \"info\" | \"success\" | \"warning\" | \"warning-inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "O tipo de alerta a ser exibido. Influencia a cor e o \u00EDcone.\r\nPadr\u00E3o \u00E9 'info'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'info'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determina se o alerta pode ser fechado pelo usu\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "closeButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do r\u00F3tulo para o bot\u00E3o de fechar, para acessibilidade.\r\nPadr\u00E3o \u00E9 \"Fechar alerta\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-button-label",
+                "defaultValue": "'Fechar alerta'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "T\u00EDtulo do alerta. Quando fornecido, ser\u00E1 exibido como t\u00EDtulo principal.\r\nPara variant inline, apenas o t\u00EDtulo \u00E9 exibido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-title"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Descri\u00E7\u00E3o do alerta. Apenas exibida na variante default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "showButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determina se os bot\u00F5es devem ser exibidos.\r\nSe true, os bot\u00F5es ser\u00E3o exibidos (desde que pelo menos primaryButtonText seja fornecido).\r\nSe false, os bot\u00F5es n\u00E3o ser\u00E3o exibidos, independente das outras props."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-buttons",
+                "defaultValue": "false"
+            },
+            "primaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do bot\u00E3o prim\u00E1rio. S\u00F3 ser\u00E1 exibido se showButtons for true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-button-text"
+            },
+            "secondaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do bot\u00E3o secund\u00E1rio. S\u00F3 ser\u00E1 exibido se showButtons for true e primaryButtonText tamb\u00E9m for fornecido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-button-text"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaDismiss",
+                "name": "voaDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o alerta \u00E9 dispensado (fechado)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "voaPrimaryClick",
+                "name": "voaPrimaryClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o bot\u00E3o prim\u00E1rio \u00E9 clicado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "voaSecondaryClick",
+                "name": "voaSecondaryClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o bot\u00E3o secund\u00E1rio \u00E9 clicado."
+                },
+                "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 bot\u00E3o de fechar se existir",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=voa-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-alert.js","sourceRoot":"","sources":["../../../src/components/voa-alert/voa-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, h, Element, Method, Host } from '@stencil/core';\r\nimport { getAlertIcon } from '../../utils/icons';\r\n\r\n/**\r\n * O componente voa-alert é usado para exibir mensagens importantes para o usuário.\r\n * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.\r\n * Suporta variantes default (layout vertical) e inline (layout horizontal).\r\n * \r\n * @part base - O elemento raiz do alerta\r\n * @part content-wrapper - Wrapper do conteúdo principal\r\n * @part icon - Container do ícone\r\n * @part content - Container do conteúdo (slot padrão)\r\n * @part title - Container do título\r\n * @part description - Container da descrição\r\n * @part close-button - Botão de fechar\r\n * @part actions - Container dos botões de ação\r\n * @part primary-btn-base - Expõe o part \"base\" do botão primário para estilização externa\r\n * @part secondary-btn-base - Expõe o part \"base\" do botão secundário para estilização externa\r\n */\r\n@Component({\r\n  tag: 'voa-alert',\r\n  styleUrl: 'voa-alert.css',\r\n  shadow: true,\r\n})\r\nexport class VoaAlert {\r\n  @Element() host: HTMLVoaAlertElement;\r\n\r\n  /**\r\n   * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).\r\n   * Padrão é 'default'.\r\n   */\r\n  @Prop({ reflect: true }) variant: 'default' | 'inline' = 'default';\r\n\r\n  /**\r\n   * O tipo de alerta a ser exibido. Influencia a cor e o ícone.\r\n   * Padrão é 'info'.\r\n   */\r\n  @Prop({ reflect: true }) type: 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info' = 'info';\r\n\r\n  /**\r\n   * Determina se o alerta pode ser fechado pelo usuário.\r\n   */\r\n  @Prop() closable: boolean = false;\r\n\r\n  /**\r\n   * Texto do rótulo para o botão de fechar, para acessibilidade.\r\n   * Padrão é \"Fechar alerta\".\r\n   */\r\n  @Prop() closeButtonLabel: string = 'Fechar alerta';\r\n\r\n  /**\r\n   * Título do alerta. Quando fornecido, será exibido como título principal.\r\n   * Para variant inline, apenas o título é exibido.\r\n   */\r\n  @Prop() alertTitle?: string;\r\n\r\n  /**\r\n   * Descrição do alerta. Apenas exibida na variante default.\r\n   */\r\n  @Prop() description?: string;\r\n\r\n  /**\r\n   * Determina se os botões devem ser exibidos.\r\n   * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).\r\n   * Se false, os botões não serão exibidos, independente das outras props.\r\n   */\r\n  @Prop() showButtons: boolean = false;\r\n\r\n  /**\r\n   * Texto do botão primário. Só será exibido se showButtons for true.\r\n   */\r\n  @Prop() primaryButtonText?: string;\r\n\r\n  /**\r\n   * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.\r\n   */\r\n  @Prop() secondaryButtonText?: string;\r\n\r\n  /**\r\n   * Evento emitido quando o alerta é dispensado (fechado).\r\n   */\r\n  @Event() voaDismiss: EventEmitter<void>;\r\n\r\n  /**\r\n   * Evento emitido quando o botão primário é clicado.\r\n   */\r\n  @Event() voaPrimaryClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Evento emitido quando o botão secundário é clicado.\r\n   */\r\n  @Event() voaSecondaryClick: EventEmitter<void>;\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA\r\n   * Delega foco ao botão de fechar se existir\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    const closeBtn = this.host.shadowRoot?.querySelector('[part=\"close-button\"]') as HTMLElement;\r\n    if (closeBtn) {\r\n      closeBtn.focus();\r\n    }\r\n  }\r\n\r\n  private handleClose = (e: Event) => {\r\n    e.stopPropagation();\r\n    this.voaDismiss.emit();\r\n  };\r\n\r\n  private renderIcon() {\r\n    const iconType = this.variant === 'inline' && this.type === 'warning' ? 'warning-inline' : this.type;\r\n    const IconComponent = getAlertIcon(iconType, this.variant);\r\n    \r\n    return (\r\n      <div part=\"icon\" class=\"alert-icon\">\r\n        <IconComponent />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const hasButtons = this.variant === 'default' && this.showButtons && !!this.primaryButtonText;\r\n\r\n    return (\r\n      <Host \r\n        role=\"alert\" \r\n        aria-hidden={!this.closable ? null : \"false\"}\r\n      >\r\n        <div\r\n          part=\"base\"\r\n          class={{\r\n            'alert-container': true,\r\n            [`alert-${this.variant}`]: true,\r\n            [`alert-type-${this.type}`]: true\r\n          }}\r\n        >\r\n          <div part=\"content-wrapper\" class=\"content-wrapper\">\r\n            {this.renderIcon()}\r\n            \r\n            <div part=\"content\" class=\"content\">\r\n              {(this.alertTitle || this.description) ? (\r\n                <div class=\"text-group\">\r\n                   {this.alertTitle && <div part=\"title\" class=\"title\">{this.alertTitle}</div>}\r\n                   {this.variant === 'default' && this.description && (\r\n                     <div part=\"description\" class=\"description\">{this.description}</div>\r\n                   )}\r\n                </div>\r\n              ) : (\r\n                <slot />\r\n              )}\r\n            </div>\r\n\r\n            {this.closable && (\r\n              <button\r\n                part=\"close-button\"\r\n                type=\"button\"\r\n                class=\"close-button\"\r\n                onClick={this.handleClose}\r\n                aria-label={this.closeButtonLabel}\r\n              >\r\n                {getAlertIcon('close', this.variant)()}\r\n              </button>\r\n            )}\r\n          </div>\r\n\r\n          {/* Action Buttons */}\r\n          {hasButtons && (\r\n            <div part=\"actions\" class=\"actions-wrapper\">\r\n              {this.secondaryButtonText && (\r\n                <voa-button\r\n                  variant=\"ghost\"\r\n                  size=\"sm\"\r\n                  onDsClick={() => this.voaSecondaryClick.emit()}\r\n                  exportparts=\"base: secondary-btn-base\" \r\n                >\r\n                  {this.secondaryButtonText}\r\n                </voa-button>\r\n              )}\r\n              \r\n              <voa-button\r\n                variant=\"primary\"\r\n                size=\"sm\"\r\n                onDsClick={() => this.voaPrimaryClick.emit()}\r\n                exportparts=\"base: primary-btn-base\"\r\n              >\r\n                {this.primaryButtonText}\r\n              </voa-button>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n} "]}