@govbr-ds/webcomponents 2.0.0-next.41 → 2.0.0-next.43

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,683 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { h, Host, } from "@stencil/core";
+import { FloatingUIManager } from "../../utils/floating-ui";
+import Helpers from "../../utils/helpers";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https:
+ *
+ * @slot trigger - Área para o elemento acionador do tooltip.
+ * @slot content - Área para o conteúdo do tooltip.
+ */
+export class Tooltip {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el;
+    /**
+     * Referência ao elemento Internals do componente.
+     * O elemento Internals fornece uma interface para acessar e manipular o estado interno do componente.
+     * Isso é útil para componentes que precisam se integrar com o sistema de formulários nativo do navegador.
+     */
+    elementInternals;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    customId = Helpers.generateUniqueId();
+    /**
+     * Define a posição do tooltip em relação ao elemento acionador.
+     * As opções disponíveis são: 'top', 'bottom', 'left' e 'right'.
+     * @default 'top'
+     */
+    position = 'top';
+    /**
+     * Define o tipo de tooltip a ser exibido.
+     * As opções disponíveis são: 'standard' e 'popover'.
+     * O tipo 'standard' exibe um tooltip simples, enquanto o tipo 'popover' exibe um tooltip com mais informações e fechamento por interação.
+     * @default 'standard'
+     */
+    type = 'standard';
+    /**
+     * Define a densidade do tooltip.
+     * As opções disponíveis são: 'large', 'medium' e 'small'.
+     * A densidade 'small' exibe um tooltip mais compacto, enquanto a densidade 'large' exibe um tooltip mais espaçado.
+     * @default 'medium'
+     */
+    density = 'medium';
+    /**
+     * Define o estado do tooltip.
+     * Os estados disponíveis são: 'info', 'warning', 'error' e 'success'.
+     * @default 'info'
+     */
+    state = 'info';
+    /**
+     * Define se o tooltip deve ser exibido automaticamente.
+     * Quando definido como true, o tooltip será exibido automaticamente.
+     * Quando definido como false, o tooltip será exibido apenas quando acionado pelo usuário.
+     * @default false
+     */
+    isAutoVisible = false;
+    /**
+     * Define o atraso em milissegundos para exibir o tooltip.
+     * @default null
+     */
+    showDelay = null;
+    /**
+     * Define o atraso em milissegundos para ocultar o tooltip.
+     * @default null
+     */
+    hideDelay = null;
+    /**
+     * Define a visibilidade do tooltip.
+     * Quando definido como true, o tooltip será exibido.
+     * Quando definido como false, o tooltip será ocultado.
+     * @default false
+     */
+    isVisible = false;
+    /**
+     * Watcher para monitorar alterações na propriedade `isVisible`.
+     * @param visible boolean
+     * @returns void
+     */
+    handleVisibilityChange(visible) {
+        if (this.contentElement == null)
+            return;
+        if (visible) {
+            this.positionTooltip();
+            this.brDidOpen.emit();
+        }
+        else {
+            this.clearAutoUpdate?.();
+            this.clearAutoUpdate = undefined;
+            this.brDidClose.emit();
+        }
+    }
+    /**
+     * Evento emitido quando o tooltip é aberto.
+     */
+    brDidOpen;
+    /**
+     * Evento emitido quando o tooltip é fechado.
+     */
+    brDidClose;
+    /**
+     * Listener para o evento de foco no elemento acionador.
+     * Este evento é utilizado para exibir o tooltip quando o elemento acionador recebe foco.
+     */
+    handleFocusIn() {
+        if (!this.fromPointerDown) {
+            this.showContent();
+        }
+        this.fromPointerDown = false;
+    }
+    /**
+     * Listener para o evento de desfoque no elemento acionador.
+     * Este evento é utilizado para ocultar o tooltip quando o elemento acionador perde o foco.
+     */
+    handleFocusOut() {
+        this.hideContent();
+    }
+    /**
+     * Listener para o evento de teclado no documento.
+     * Este evento é utilizado para fechar o tooltip quando a tecla Escape é pressionada.
+     * @param event KeyboardEvent
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.hideContent();
+            this.triggerElement?.focus();
+        }
+    }
+    floatingManager;
+    /**
+     * Elemento que aciona a exibição do tooltip.
+     * Este elemento é referenciado para garantir que o tooltip seja posicionado corretamente em relação a ele.
+     */
+    triggerElement;
+    /**
+     * Elemento que contém o conteúdo do tooltip.
+     * Este elemento é referenciado para garantir que o tooltip seja posicionado corretamente em relação a ele.
+     */
+    contentElement;
+    /**
+     * Elemento que representa a seta do tooltip.
+     * Este elemento é utilizado para indicar a direção do tooltip em relação ao elemento acionador.
+     */
+    arrowElement;
+    /**
+     * Função de limpeza para atualizar a posição do tooltip automaticamente.
+     * Esta função é chamada quando o tooltip não está mais visível ou quando o componente é desconectado.
+     * Isso garante que o tooltip não consuma recursos desnecessários quando não estiver em uso.
+     */
+    clearAutoUpdate;
+    /**
+     * Tempo limite para exibir o tooltip automaticamente.
+     */
+    showTimer;
+    /**
+     * Tempo limite para ocultar o tooltip.
+     */
+    hideTimer;
+    /**
+     * Indica se o tooltip foi acionado por um clique do mouse.
+     * Isso é utilizado para evitar conflito com o acionamento por foco.
+     */
+    fromPointerDown = false;
+    /**
+     * Controla a exibição do tooltip.
+     * Quando o tooltip é exibido, ele é posicionado em relação ao elemento acionador.
+     * Isso é feito utilizando a biblioteca Floating UI, que calcula a posição ideal do tooltip com base no espaço disponível na tela.
+     * A função `autoUpdate` é utilizada para atualizar automaticamente a posição do tooltip quando o elemento acionador é movido ou redimensionado.
+     */
+    positionTooltip() {
+        if (this.triggerElement == null || this.contentElement == null)
+            return;
+        this.floatingManager = new FloatingUIManager({
+            triggerElement: this.triggerElement,
+            contentElement: this.contentElement,
+            arrowElement: this.arrowElement,
+            placement: this.position,
+        });
+        this.floatingManager.start();
+    }
+    cleanupPositioning() {
+        this.floatingManager?.stop();
+    }
+    /**
+     * Define os eventos de interação do tooltip.
+     * Os eventos de interação incluem mouseenter, mouseleave, focus e blur.
+     * @returns void
+     */
+    setupInteractions() {
+        if (this.triggerElement == null || this.contentElement == null)
+            return;
+        if (this.type === 'standard') {
+            this.triggerElement.addEventListener('mouseenter', this.showContent);
+            this.triggerElement.addEventListener('mouseleave', this.hideContent);
+        }
+        if (this.type === 'popover') {
+            this.triggerElement.addEventListener('pointerdown', this.toggleContent);
+        }
+        if (this.isAutoVisible) {
+            requestAnimationFrame(() => {
+                this.clearShowTimer();
+                this.setShowTimer();
+            });
+        }
+    }
+    /**
+     * Alterna a exibição do tooltip.
+     * Se o tooltip estiver visível, ele será ocultado.
+     * Se o tooltip estiver oculto, ele será exibido.
+     */
+    toggleContent = () => {
+        this.fromPointerDown = true;
+        if (this.isVisible) {
+            this.hideContent();
+        }
+        else {
+            this.showContent();
+        }
+    };
+    /**
+     * Processa as ações relacionadas à exibição do tooltip.
+     * Isso inclui exibir o tooltip e iniciar o tempo limite de ocultação automática.
+     * @returns void
+     */
+    showContent = () => {
+        if (this.contentElement == null)
+            return;
+        this.isVisible = true;
+        if (this.isAutoVisible) {
+            if (this.hideDelay !== null) {
+                this.clearHideTimer();
+                this.setHideTimer();
+            }
+        }
+        if (this.type === 'popover') {
+            document.addEventListener('click', this.handleOutsideClick);
+        }
+    };
+    /**
+     * Processa as ações relacionadas ao fechamento do tooltip.
+     * Isso inclui ocultar o tooltip e limpar o tempo limite de ocultação automática.
+     * @returns void
+     */
+    hideContent = () => {
+        if (this.contentElement == null)
+            return;
+        this.isVisible = false;
+        if (this.type === 'popover') {
+            document.removeEventListener('click', this.handleOutsideClick);
+            requestAnimationFrame(() => this.contentElement?.focus());
+        }
+    };
+    /**
+     * Configura o tempo limite para exibir o tooltip automaticamente.
+     * O tempo limite é definido pelo valor da propriedade `showDelay`.
+     */
+    setShowTimer() {
+        this.showTimer = setTimeout(() => {
+            this.showContent();
+        }, this.showDelay || 0);
+    }
+    /**
+     * Limpa o tempo limite de exibição automática do tooltip.
+     */
+    clearShowTimer() {
+        if (this.showTimer !== undefined) {
+            clearTimeout(this.showTimer);
+            this.showTimer = undefined;
+        }
+    }
+    /**
+     * Configura o tempo limite para ocultar o tooltip automaticamente.
+     * O tempo limite é definido pelo valor da propriedade `hideDelay`.
+     */
+    setHideTimer() {
+        this.hideTimer = setTimeout(() => {
+            this.hideContent();
+        }, this.hideDelay);
+    }
+    /**
+     * Limpa o tempo limite de ocultação automática do tooltip.
+     */
+    clearHideTimer() {
+        if (this.hideTimer !== undefined) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = undefined;
+        }
+    }
+    /**
+     * Lida com cliques fora do tooltip.
+     * É utilizado para o tooltip do tipo 'popover'.
+     * @param event MouseEvent
+     */
+    handleOutsideClick = (event) => {
+        const path = event.composedPath();
+        if (this.isVisible &&
+            this.type === 'popover' &&
+            !path.includes(this.contentElement) &&
+            !path.includes(this.triggerElement)) {
+            this.hideContent();
+        }
+    };
+    /**
+     * Determina o mapeamento de classes CSS do componente.
+     * @returns Um objeto que representa o mapeamento de classes CSS do componente.
+     */
+    getCssClassMap() {
+        return {
+            'br-tooltip': true,
+        };
+    }
+    /**
+     * Determina o mapeamento de classes CSS do trigger.
+     * @returns Um objeto que representa o mapeamento de classes CSS do trigger.
+     */
+    getTriggerCssClassMap() {
+        return {
+            trigger: true,
+        };
+    }
+    /**
+     * Determina o mapeamento de classes CSS do conteúdo.
+     * @returns Um objeto que representa o mapeamento de classes CSS do conteúdo.
+     */
+    getContentCssClassMap() {
+        return {
+            'is-visible': this.isVisible,
+            content: true,
+            popover: this.type === 'popover',
+            large: this.density === 'large',
+            medium: this.density === 'medium',
+            small: this.density === 'small',
+            info: this.state === 'info',
+            warning: this.state === 'warning',
+            error: this.state === 'error',
+            success: this.state === 'success',
+        };
+    }
+    /**
+     * Determina o mapeamento de classes CSS da seta.
+     * @returns Um objeto que representa o mapeamento de classes CSS da seta.
+     */
+    getArrowCssClassMap() {
+        return {
+            arrow: true,
+            large: this.density === 'large',
+            medium: this.density === 'medium',
+            small: this.density === 'small',
+            info: this.state === 'info',
+            warning: this.state === 'warning',
+            error: this.state === 'error',
+            success: this.state === 'success',
+        };
+    }
+    /**
+     * Método do ciclo de vida do componente.
+     * Este método é chamado uma única vez após o componente ser montado no DOM.
+     */
+    componentDidLoad() {
+        if (typeof window === 'undefined')
+            return;
+        this.setupInteractions();
+    }
+    /**
+     * Método do ciclo de vida do componente.
+     * Este método é chamado quando o componente é desconectado do DOM.
+     */
+    disconnectedCallback() {
+        if (this.type === 'standard') {
+            this.triggerElement?.removeEventListener('mouseenter', this.showContent);
+            this.triggerElement?.removeEventListener('mouseleave', this.hideContent);
+        }
+        else if (this.type === 'popover') {
+            this.triggerElement?.removeEventListener('pointerdown', this.toggleContent);
+            document.removeEventListener('click', this.handleOutsideClick);
+        }
+        this.cleanupPositioning();
+        this.clearShowTimer();
+        this.clearHideTimer();
+    }
+    /**
+     * Renderiza o componente.
+     * Este método é responsável por gerar o conteúdo HTML do componente.
+     * Ele utiliza a função `h` do Stencil para criar elementos JSX.
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: 'c2ee0c8f2fb36acda135948629412023bce72e2b' }, h("div", { key: '05d87a50f8e33874bf9ecf7eeb0d8ac5cb79df3e', id: this.customId, class: this.getCssClassMap() }, h("div", { key: '71997f8547d509d31cb51f446354ed071ced6e30', class: this.getTriggerCssClassMap(), ref: (el) => (this.triggerElement = el), "aria-describedby": `${this.customId}-content`, "aria-expanded": this.isVisible ? 'true' : 'false', "aria-controls": `${this.customId}-content`, role: "button", tabindex: "-1  " }, h("slot", { key: 'b21d028a56374bc1ade6723b482b36eaf095d61a', name: "trigger" })), h("div", { key: 'ad412dcef59491cd56e5dbc7ce74a9e57fdec640', id: `${this.customId}-content`, class: this.getContentCssClassMap(), ref: (el) => (this.contentElement = el), role: this.type === 'popover' ? 'dialog' : 'tooltip', tabindex: "-1" }, h("slot", { key: '6a92b688e02a9a63786fcb999dc7a923c271087a', name: "content" }), this.type === 'popover' && (h("br-button", { key: 'd3cb6806d7b71e6893da692c087f54bce057483e', class: "close", shape: "circle", density: "small", onClick: this.hideContent, "aria-label": "Fechar popover" }, h("br-icon", { key: '0661b70afafe7bd7203cc93cbdf2537ad5dfb389', "icon-name": "fa6-solid:xmark" }))), h("div", { key: '852540bd9ef91d874df93785192dba5af023e3d8', class: this.getArrowCssClassMap(), ref: (el) => (this.arrowElement = el) })))));
+    }
+    static get is() { return "br-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-id",
+                "reflect": true,
+                "defaultValue": "Helpers.generateUniqueId()"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "global",
+                            "id": "global::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'top'"
+                        }],
+                    "text": "Define a posi\u00E7\u00E3o do tooltip em rela\u00E7\u00E3o ao elemento acionador.\nAs op\u00E7\u00F5es dispon\u00EDveis s\u00E3o: 'top', 'bottom', 'left' e 'right'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'top'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipType",
+                    "resolved": "\"popover\" | \"standard\"",
+                    "references": {
+                        "TooltipType": {
+                            "location": "global",
+                            "id": "global::TooltipType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'standard'"
+                        }],
+                    "text": "Define o tipo de tooltip a ser exibido.\nAs op\u00E7\u00F5es dispon\u00EDveis s\u00E3o: 'standard' e 'popover'.\nO tipo 'standard' exibe um tooltip simples, enquanto o tipo 'popover' exibe um tooltip com mais informa\u00E7\u00F5es e fechamento por intera\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'standard'"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "TooltipDensity": {
+                            "location": "global",
+                            "id": "global::TooltipDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
+                    "text": "Define a densidade do tooltip.\nAs op\u00E7\u00F5es dispon\u00EDveis s\u00E3o: 'large', 'medium' e 'small'.\nA densidade 'small' exibe um tooltip mais compacto, enquanto a densidade 'large' exibe um tooltip mais espa\u00E7ado."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "density",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipState",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TooltipState": {
+                            "location": "global",
+                            "id": "global::TooltipState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'info'"
+                        }],
+                    "text": "Define o estado do tooltip.\nOs estados dispon\u00EDveis s\u00E3o: 'info', 'warning', 'error' e 'success'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'info'"
+            },
+            "isAutoVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Define se o tooltip deve ser exibido automaticamente.\nQuando definido como true, o tooltip ser\u00E1 exibido automaticamente.\nQuando definido como false, o tooltip ser\u00E1 exibido apenas quando acionado pelo usu\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-auto-visible",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Define o atraso em milissegundos para exibir o tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-delay",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Define o atraso em milissegundos para ocultar o tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-delay",
+                "reflect": true,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidOpen",
+                "name": "brDidOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o tooltip \u00E9 aberto."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidClose",
+                "name": "brDidClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o tooltip \u00E9 fechado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isVisible",
+                "methodName": "handleVisibilityChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+//# sourceMappingURL=tooltip.js.map