@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/skip-link/skip-link.js

@@ -0,0 +1,699 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+const ALT_SHORTCUT_REGEX = /^[1-9]$/;
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/skip-link?tab=designer).
+ *
+ * @category Navegação
+ * @status stable
+ * @slot default - Slot para inserir os itens de navegação rápida (br-skiplink-item).
+ *
+ * @part container - Parte para o contêiner principal do componente skip-link, usada para estilização via ::part().
+ */
+export class SkipLink {
+    constructor() {
+        /**
+         * Largura do container pai
+         */
+        this.containerWidth = 0;
+        /**
+         * Define se o componente está em modo tela pequena
+         */
+        this.isSmallScreen = false;
+        /**
+         * Estado interno que controla a visibilidade do componente.
+         */
+        this.isVisible = false;
+        /**
+         * Define se o componente precisa mudar para modo simples por falta de espaço
+         */
+        this.needsSimpleMode = false;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Controla se o skip link está aberto.
+         */
+        this.open = false;
+        /**
+         * Define se o skip link apresenta um ou múltiplos itens visíveis.
+         * - 'simple': Exibe apenas um item por vez.
+         * - 'compound': Exibe uma lista com múltiplos itens.
+         */
+        this.variant = 'compound';
+        /**
+         * Define a posição do skip link na tela.
+         * - 'top-left': Posicionado no canto superior esquerdo.
+         * - 'top-center': Posicionado no centro superior.
+         * - 'top-right': Posicionado no canto superior direito.
+         */
+        this.position = 'top-left';
+        /**
+         * Define o z-index do componente.
+         * Controla a ordem de empilhamento do componente na página.
+         */
+        this.zIndex = null;
+        this.globalKeyHandler = (event) => {
+            if (event.altKey && ALT_SHORTCUT_REGEX.test(event.key)) {
+                const items = this.getSkipLinkItems();
+                const targetItem = items.find((item) => {
+                    const keyNumber = item.getAttribute('key-number');
+                    return keyNumber === event.key;
+                });
+                if (targetItem && typeof targetItem.navigateToTarget === 'function') {
+                    event.preventDefault();
+                    targetItem.navigateToTarget();
+                    this.show();
+                }
+            }
+        };
+        /**
+         * Calcula a largura total dos itens e atualiza os estados do componente
+         */
+        this.updateContainerSize = (entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                this.containerWidth = width;
+                this.isSmallScreen = width < 570;
+                if (!this.isSmallScreen) {
+                    this.calculateItemsWidth();
+                }
+                else {
+                    this.needsSimpleMode = false;
+                }
+            }
+        };
+    }
+    handleOpenChange() {
+        this.isVisible = this.open;
+        this.updateItemCounts();
+    }
+    updateStyles() {
+        if (this.zIndex !== null && this.zIndex !== undefined) {
+            this.el.style.zIndex = `${this.zIndex}`;
+            this.el.style.setProperty('--skiplink-layer', `${this.zIndex}`);
+        }
+    }
+    /**
+     * Observa mudanças nos estados que afetam o modo efetivo (simple/compound)
+     * e atualiza as contagens dos itens quando necessário.
+     */
+    watchModeChanges() {
+        this.updateItemCounts();
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.globalKeyHandler);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(this.updateContainerSize);
+            const parentElement = this.el.parentElement;
+            if (parentElement !== null) {
+                this.resizeObserver.observe(parentElement);
+            }
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.globalKeyHandler);
+        if (this.resizeObserver !== undefined && this.resizeObserver !== null) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentWillLoad() {
+        this.isVisible = this.open;
+        const parentElement = this.el.parentElement;
+        if (parentElement !== null) {
+            this.containerWidth = parentElement.clientWidth;
+        }
+    }
+    componentDidLoad() {
+        this.updateItemCounts();
+        this.calculateItemsWidth();
+    }
+    /**
+     * Listener para eventos de navegação dos itens filhos.
+     */
+    handleItemNavigation(event) {
+        this.brSkiplinkNavigation.emit(event.detail);
+        this.brSkipLinkNavigate.emit(event.detail);
+        this.hide();
+    }
+    /**
+     * Listener para evento de foco no componente.
+     */
+    handleFocusIn() {
+        if (!this.isVisible) {
+            this.show();
+        }
+    }
+    /**
+     * Listener para evento de perda de foco no componente.
+     */
+    handleFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget === null || !this.isInsideComponent(relatedTarget)) {
+            this.hide();
+        }
+    }
+    /**
+     * Listener para a tecla Escape.
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isVisible) {
+            event.preventDefault();
+            this.hide();
+            document.activeElement?.blur();
+            return;
+        }
+    }
+    /**
+     * Oculta o componente programaticamente.
+     */
+    async hide() {
+        const focusedElement = this.el.querySelector(':focus');
+        if (focusedElement instanceof HTMLElement) {
+            focusedElement.blur();
+        }
+        this.isVisible = false;
+        this.open = false;
+        this.brDidHide.emit();
+        this.brSkipLinkHide.emit();
+        return Promise.resolve();
+    }
+    /**
+     * Exibe o componente programaticamente.
+     */
+    async show() {
+        this.isVisible = true;
+        this.open = true;
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        const firstItem = this.getSkipLinkItems()[0] ?? null;
+        if (firstItem !== null) {
+            if (typeof firstItem.itemFocus === 'function') {
+                await firstItem.itemFocus();
+            }
+            else {
+                const focusableElement = firstItem.shadowRoot?.querySelector('a, button');
+                if (focusableElement !== null) {
+                    focusableElement.focus();
+                }
+            }
+        }
+        this.brDidShow.emit();
+        this.brSkipLinkShow.emit();
+        return Promise.resolve();
+    }
+    isInsideComponent(target) {
+        if (!(target instanceof Node))
+            return false;
+        let current = target;
+        while (current !== null) {
+            if (current === this.el)
+                return true;
+            if (current.parentNode !== null) {
+                current = current.parentNode;
+                continue;
+            }
+            const root = current.getRootNode();
+            current = root instanceof ShadowRoot ? root.host : null;
+        }
+        return false;
+    }
+    /**
+     * Manipulador global para atalhos de teclado Alt+[número].
+     */
+    getSkipLinkItems() {
+        return Array.from(this.el.querySelectorAll('br-skiplink-item, br-skip-link-item')).flatMap((element) => {
+            if (element.tagName.toLowerCase() === 'br-skiplink-item') {
+                return [element];
+            }
+            const legacyItem = element.shadowRoot?.querySelector('br-skiplink-item');
+            return legacyItem ? [legacyItem] : [];
+        });
+    }
+    /**
+     * Calcula a largura total dos itens do skip-link e determina se deve usar modo simple ou compound.
+     */
+    calculateItemsWidth() {
+        requestAnimationFrame(() => {
+            const items = this.getSkipLinkItems();
+            if (items.length === 0 || this.isSmallScreen)
+                return;
+            if (items.length > 4) {
+                this.needsSimpleMode = true;
+                return;
+            }
+            this.needsSimpleMode = false;
+            const totalWidth = this.sumItemsWidth(items);
+            const availableWidth = this.calculateAvailableWidth();
+            if (totalWidth > availableWidth) {
+                this.needsSimpleMode = true;
+            }
+        });
+    }
+    /**
+     * Soma a largura de todos os itens do skip-link
+     */
+    sumItemsWidth(items) {
+        let total = 0;
+        items.forEach((item) => {
+            const brItem = item.shadowRoot?.querySelector('br-item');
+            if (brItem === null)
+                return;
+            const width = brItem.offsetWidth || brItem.scrollWidth || brItem.getBoundingClientRect().width;
+            total += width;
+        });
+        return total;
+    }
+    /**
+     * Calcula a largura disponível descontando margens e margem de segurança
+     */
+    calculateAvailableWidth() {
+        if (this.containerWidth === 0)
+            return 0;
+        // Obtém o valor da margem definida no CSS
+        const computedStyle = getComputedStyle(this.el);
+        const spacingValue = computedStyle.getPropertyValue('--spacing-scale-3x').trim();
+        const margin = parseFloat(spacingValue) || 24;
+        // Margem de segurança para evitar quebras visuais
+        const safetyMargin = 20;
+        // Desconta: margem esquerda + margem direita + margem de segurança
+        return this.containerWidth - margin * 2 - safetyMargin;
+    }
+    /**
+     * Atualiza os atributos de contagem nos itens filhos.
+     * Adiciona data-item-index e data-item-total em cada br-skiplink-item.
+     * A contagem é exibida quando o componente está em modo simple (incluindo modo responsivo).
+     */
+    updateItemCounts() {
+        const effectiveVariant = this.isSmallScreen || this.needsSimpleMode ? 'simple' : this.variant;
+        const shouldShowCount = this.showItemCount !== undefined ? this.showItemCount : effectiveVariant === 'simple';
+        const isCompoundMode = effectiveVariant === 'compound';
+        const items = this.getSkipLinkItems();
+        items.forEach((item, index) => {
+            item.classList.toggle('open', this.open && !isCompoundMode && index === 0);
+            if (isCompoundMode) {
+                item.classList.add('compound-mode');
+            }
+            else {
+                item.classList.remove('compound-mode');
+            }
+        });
+        if (!shouldShowCount) {
+            items.forEach((item) => {
+                item.removeAttribute('data-item-index');
+                item.removeAttribute('data-item-total');
+            });
+            return;
+        }
+        const total = items.length;
+        items.forEach((item, index) => {
+            item.setAttribute('data-item-index', (index + 1).toString());
+            item.setAttribute('data-item-total', total.toString());
+        });
+    }
+    getEffectivePosition() {
+        if (this.isSmallScreen) {
+            return 'top-left';
+        }
+        return this.position;
+    }
+    getCssClassMap() {
+        const effectiveVariant = this.isSmallScreen || this.needsSimpleMode ? 'simple' : this.variant;
+        const effectivePosition = this.getEffectivePosition();
+        return {
+            'br-skiplink': true,
+            full: effectiveVariant === 'compound',
+            [effectivePosition]: true,
+            visible: this.isVisible,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'ced02bcde89c3d5b00026a0087a159e0a2d95ebb' }, h("nav", { key: '1fc2fbc543fdd791db50b19e4ec3bbb888033499', part: "container", class: this.getCssClassMap(), id: this.customId }, h("br-list", { key: '1ee348e22b8a2627f8c749e3b290d9863fa782b1' }, h("slot", { key: '95e4bad67684b76dfcfed60d3d4e42c9b6364b3d' })))));
+    }
+    static get is() { return "br-skip-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skip-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skip-link.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 do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla se o skip link est\u00E1 aberto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkipLinkVariant",
+                    "resolved": "\"compound\" | \"simple\"",
+                    "references": {
+                        "SkipLinkVariant": {
+                            "location": "import",
+                            "path": "./skip-link.types",
+                            "id": "src/components/skip-link/skip-link.types.ts::SkipLinkVariant",
+                            "referenceLocation": "SkipLinkVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define se o skip link apresenta um ou m\u00FAltiplos itens vis\u00EDveis.\n- 'simple': Exibe apenas um item por vez.\n- 'compound': Exibe uma lista com m\u00FAltiplos itens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'compound'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkipLinkPosition",
+                    "resolved": "\"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "SkipLinkPosition": {
+                            "location": "import",
+                            "path": "./skip-link.types",
+                            "id": "src/components/skip-link/skip-link.types.ts::SkipLinkPosition",
+                            "referenceLocation": "SkipLinkPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a posi\u00E7\u00E3o do skip link na tela.\n- 'top-left': Posicionado no canto superior esquerdo.\n- 'top-center': Posicionado no centro superior.\n- 'top-right': Posicionado no canto superior direito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'top-left'"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o z-index do componente.\nControla a ordem de empilhamento do componente na p\u00E1gina."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "z-index",
+                "defaultValue": "null"
+            },
+            "showItemCount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe a contagem de itens no formato (1/4), (2/4), etc.\nQuando `true`, cada item mostrar\u00E1 sua posi\u00E7\u00E3o relativa ao total de itens.\nPor padr\u00E3o, \u00E9 `true` para o modo simple e `false` para o modo compound."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-item-count"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "containerWidth": {},
+            "isSmallScreen": {},
+            "isVisible": {},
+            "needsSimpleMode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brSkiplinkNavigation",
+                "name": "brSkiplinkNavigation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brSkipLinkNavigate`."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SkipLinkNavigateDetail",
+                    "resolved": "SkipLinkNavigateDetail",
+                    "references": {
+                        "SkipLinkNavigateDetail": {
+                            "location": "import",
+                            "path": "./skip-link.types",
+                            "id": "src/components/skip-link/skip-link.types.ts::SkipLinkNavigateDetail",
+                            "referenceLocation": "SkipLinkNavigateDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brSkipLinkNavigate",
+                "name": "brSkipLinkNavigate",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando um destino \u00E9 ativado."
+                },
+                "complexType": {
+                    "original": "SkipLinkNavigateDetail",
+                    "resolved": "SkipLinkNavigateDetail",
+                    "references": {
+                        "SkipLinkNavigateDetail": {
+                            "location": "import",
+                            "path": "./skip-link.types",
+                            "id": "src/components/skip-link/skip-link.types.ts::SkipLinkNavigateDetail",
+                            "referenceLocation": "SkipLinkNavigateDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "brDidShow",
+                "name": "brDidShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brSkipLinkShow`."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brSkipLinkShow",
+                "name": "brSkipLinkShow",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido ao exibir o componente."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidHide",
+                "name": "brDidHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `brSkipLinkHide`."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brSkipLinkHide",
+                "name": "brSkipLinkHide",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido ao ocultar o componente."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Oculta o componente programaticamente.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Exibe o componente programaticamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "zIndex",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "needsSimpleMode",
+                "methodName": "watchModeChanges"
+            }, {
+                "propName": "isSmallScreen",
+                "methodName": "watchModeChanges"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "brSkiplinkItemClick",
+                "method": "handleItemNavigation",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "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": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/skip-link/skip-link.types.js

@@ -0,0 +1 @@
+export {};