@govbr-ds/webcomponents 2.0.0-next.61 → 2.0.0-next.62

package/dist/hydrate/index.js

@@ -37014,7 +37014,9 @@ const modalCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:
 class Modal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.brModalOpen = createEvent(this, "brModalOpen", 7);
         this.brModalClose = createEvent(this, "brModalClose", 7);
+        this.brModalBeforeClose = createEvent(this, "brModalBeforeClose", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.elementInternals = hostRef.$hostElement$["s-ei"];
         }
@@ -37029,32 +37031,132 @@ class Modal {
         this.customId = Helpers.generateUniqueId('modal');
         /** Controla a visibilidade do modal. */
         this.show = false;
-        /** Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'. */
+        /**
+         * Define o comportamento de fechamento do modal.
+         *
+         * - `true`: O modal fecha automaticamente ao clicar no botão fechar.
+         * - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve
+         *   controlar manualmente o fechamento.
+         */
         this.autoClose = false;
         /**
          * Define o tamanho (largura) do modal.
          */
         this.size = 'medium';
-        /** Se `true`, exibe um fundo escurecido (scrim) atrás do modal. */
-        this.scrim = false;
         /** Se `true`, habilita a rolagem interna do conteúdo do modal. */
         this.scrollable = false;
         /**
          * Define o alinhamento do conteúdo do rodapé (slot="footer").
          */
         this.alignFooter = 'center';
+        this.isOpeningParentScrim = false;
+        /**
+         * Handler para evento brScrimOpen do parent scrim
+         * Quando scrim abre programaticamente, a modal deve abrir também
+         */
+        this.handleParentScrimOpen = () => {
+            const parentScrim = this.el.closest('br-scrim');
+            if (parentScrim === null)
+                return;
+            if (!this.show) {
+                this.show = true;
+            }
+        };
+        /**
+         * Handler para evento brScrimClose do parent scrim
+         * Se autoClose=true, fecha a modal junto com o scrim
+         * Se autoClose=false, não faz nada (modal permanece aberta)
+         */
+        this.handleParentScrimClose = () => {
+            const parentScrim = this.el.closest('br-scrim');
+            if (parentScrim === null)
+                return;
+            if (this.autoClose && this.show) {
+                this.show = false;
+            }
+        };
         this.handleClose = () => {
-            this.brModalClose.emit();
+            this.brModalBeforeClose.emit();
             if (this.autoClose) {
                 this.show = false;
-                // Se o modal está dentro de um br-scrim, fecha o scrim também
-                const parentScrim = this.el.closest('br-scrim');
-                if (parentScrim) {
-                    parentScrim.close();
-                }
             }
         };
     }
+    handleShowChange(newValue, oldValue) {
+        if (newValue) {
+            this.brModalOpen.emit();
+            this.openParentScrim();
+        }
+        else if (oldValue === true) {
+            this.brModalClose.emit();
+            this.closeParentScrim();
+        }
+    }
+    closeParentScrim() {
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim && typeof parentScrim.close === 'function') {
+            parentScrim.close();
+        }
+    }
+    componentWillLoad() {
+        if (!this.show) {
+            const parentScrim = this.el.closest('br-scrim');
+            if (parentScrim !== null && parentScrim.isOpen) {
+                this.show = true;
+            }
+        }
+    }
+    componentDidLoad() {
+        this.listenToParentScrimEvents();
+        if (this.show) {
+            this.openParentScrim();
+        }
+    }
+    disconnectedCallback() {
+        this.isOpeningParentScrim = false;
+        this.removeParentScrimEventListeners();
+    }
+    /**
+     * Adiciona listeners para eventos do parent scrim
+     */
+    listenToParentScrimEvents() {
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim !== null) {
+            parentScrim.addEventListener('brScrimOpen', this.handleParentScrimOpen);
+            parentScrim.addEventListener('brScrimClose', this.handleParentScrimClose);
+        }
+    }
+    /**
+     * Remove listeners de eventos do parent scrim
+     */
+    removeParentScrimEventListeners() {
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim !== null) {
+            parentScrim.removeEventListener('brScrimOpen', this.handleParentScrimOpen);
+            parentScrim.removeEventListener('brScrimClose', this.handleParentScrimClose);
+        }
+    }
+    openParentScrim() {
+        if (this.isOpeningParentScrim)
+            return;
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim && !parentScrim.isOpen) {
+            this.isOpeningParentScrim = true;
+            Promise.resolve()
+                .then(() => {
+                try {
+                    return parentScrim.open();
+                }
+                catch (error) {
+                    console.warn('br-modal: Erro ao abrir scrim pai:', error);
+                    throw error;
+                }
+            })
+                .finally(() => {
+                this.isOpeningParentScrim = false;
+            });
+        }
+    }
     get titleId() {
         return `${this.customId}-title`;
     }
@@ -37074,6 +37176,7 @@ class Modal {
     open() {
         return __awaiter(this, void 0, void 0, function* () {
             this.show = true;
+            this.openParentScrim();
         });
     }
     /**
@@ -37081,22 +37184,23 @@ class Modal {
      */
     close() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.show = false;
-            // Se o modal está dentro de um br-scrim, fecha o scrim também
-            const parentScrim = this.el.closest('br-scrim');
-            if (parentScrim) {
-                parentScrim.close();
+            if (!this.autoClose) {
+                return;
             }
+            this.show = false;
         });
     }
     render() {
         if (!this.show) {
             return null;
         }
-        return (hAsync(Host, null, hAsync("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, hAsync("div", { class: "br-modal-header" }, hAsync("div", { class: "modal-title", id: this.titleId }, hAsync("slot", { name: "header" }, this.titleText)), hAsync("slot", { name: "close-button" }, hAsync("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, hAsync("br-icon", { "icon-name": "fa-solid:times" })))), hAsync("div", { id: this.contentId, class: "br-modal-body" }, hAsync("slot", null)), hAsync("div", { class: `br-modal-footer ${this.alignFooter ? `justify-content-${this.alignFooter}` : ''}` }, hAsync("slot", { name: "footer" })))));
+        return (hAsync(Host, null, hAsync("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, hAsync("div", { class: "br-modal-header" }, hAsync("div", { class: "modal-title", id: this.titleId }, hAsync("slot", { name: "header" }, this.titleText)), hAsync("slot", { name: "close-button" }, hAsync("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, hAsync("br-icon", { "icon-name": "fa-solid:times" })))), hAsync("div", { id: this.contentId, class: "br-modal-body" }, hAsync("slot", null)), hAsync("div", { class: `br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}` }, hAsync("slot", { name: "footer" })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "show": ["handleShowChange"]
+    }; }
     static get style() { return modalCss; }
     static get cmpMeta() { return {
         "$flags$": 329,
@@ -37108,7 +37212,6 @@ class Modal {
             "autoClose": [516, "auto-close"],
             "initialFocusSelector": [1, "initial-focus-selector"],
             "size": [513],
-            "scrim": [516],
             "scrollable": [516],
             "alignFooter": [513, "align-footer"],
             "open": [64],
@@ -37116,7 +37219,7 @@ class Modal {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["customId", "custom-id"], ["show", "show"], ["autoClose", "auto-close"], ["size", "size"], ["scrim", "scrim"], ["scrollable", "scrollable"], ["alignFooter", "align-footer"]]
+        "$attrsToReflect$": [["customId", "custom-id"], ["show", "show"], ["autoClose", "auto-close"], ["size", "size"], ["scrollable", "scrollable"], ["alignFooter", "align-footer"]]
     }; }
 }
 
@@ -37846,6 +37949,29 @@ class Scrim {
         this.previouslyFocusedElement = null;
         this.focusTimeoutId = null;
         this.restoreFocusTimeoutId = null;
+        // ======================================================================
+        // GERENCIAMENTO DE COMPONENTES FILHOS
+        // ======================================================================
+        /**
+         * Handler para evento brModalOpen emitido por modal filha
+         */
+        this.handleModalOpen = (event) => {
+            const modalElement = event.target;
+            if (!this.isDirectChild(modalElement))
+                return;
+            if (!this.isOpen) {
+                this.open();
+            }
+        };
+        /**
+         * Handler para evento brModalClose emitido por modal filha
+         */
+        this.handleModalClose = (event) => {
+            const modalElement = event.target;
+            if (!this.isDirectChild(modalElement))
+                return;
+            this.close();
+        };
         this.handleActivatorClick = () => {
             this.toggle();
         };
@@ -37863,6 +37989,10 @@ class Scrim {
                 const reference = (_a = this.scrollOrigin) !== null && _a !== void 0 ? _a : this.lastScrollTop;
                 if (Math.abs(currentScroll - reference) > this.scrollThreshold) {
                     this.scrollOrigin = null;
+                    // Não fecha se tiver modal filha com autoClose=false ou não definido
+                    if (this.hasModalWithAutoClose()) {
+                        return;
+                    }
                     this.isOpen = false;
                     this.handleOpenChange(false);
                     return;
@@ -37898,7 +38028,9 @@ class Scrim {
             }
             if (event.key === 'Escape' && !this.disableCloseOnClick) {
                 event.preventDefault();
-                this.isOpen = false;
+                if (!this.hasModalWithAutoClose()) {
+                    this.isOpen = false;
+                }
             }
         };
         // Intercepta TODOS os eventos de clique globalmente quando scrim está ativo
@@ -37932,11 +38064,15 @@ class Scrim {
                 }, 0);
             }
         };
-        // ======================================================================
-        // MANIPULAÇÃO DE EVENTOS E UTILITÁRIOS
-        // ======================================================================
+        /**
+         * Handler para clique na máscara do scrim
+         * Fecha o scrim se disableCloseOnClick for false e não houver modal filha com autoClose=false
+         */
         this.handleMaskClick = (_event) => {
             if (!this.disableCloseOnClick) {
+                if (this.hasModalWithAutoClose()) {
+                    return;
+                }
                 this.close();
             }
         };
@@ -37945,37 +38081,39 @@ class Scrim {
     // LIFECYCLE HOOKS E WATCHERS
     // ======================================================================
     handleOpenChange(newValue) {
-        // Cancelar qualquer timeout anterior
-        if (this.focusTimeoutId !== null) {
-            clearTimeout(this.focusTimeoutId);
-            this.focusTimeoutId = null;
-        }
-        if (this.restoreFocusTimeoutId !== null) {
-            clearTimeout(this.restoreFocusTimeoutId);
-            this.restoreFocusTimeoutId = null;
-        }
-        this.isActive = newValue;
-        if (newValue && this.scrollStrategy === 'close') {
-            const currentScroll = window.scrollY;
-            this.lastScrollTop = currentScroll;
-            this.scrollOrigin = currentScroll;
-        }
-        this.updateStyles();
-        if (this.isActive) {
-            this.previouslyFocusedElement = document.activeElement;
-            this.applyScrollStrategy();
-            this.addGlobalEventInterception();
-            this.focusTimeoutId = setTimeout(() => {
-                this.focusFirstElement();
-            }, 100);
-            this.brScrimOpen.emit();
-        }
-        else {
-            this.resetScrolling();
-            this.removeGlobalEventInterception();
-            this.restoreFocus();
-            this.brScrimClose.emit();
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            // Cancelar qualquer timeout anterior
+            if (this.focusTimeoutId !== null) {
+                clearTimeout(this.focusTimeoutId);
+                this.focusTimeoutId = null;
+            }
+            if (this.restoreFocusTimeoutId !== null) {
+                clearTimeout(this.restoreFocusTimeoutId);
+                this.restoreFocusTimeoutId = null;
+            }
+            this.isActive = newValue;
+            if (newValue && this.scrollStrategy === 'close') {
+                const currentScroll = window.scrollY;
+                this.lastScrollTop = currentScroll;
+                this.scrollOrigin = currentScroll;
+            }
+            this.updateStyles();
+            if (this.isActive) {
+                this.previouslyFocusedElement = document.activeElement;
+                this.applyScrollStrategy();
+                this.addGlobalEventInterception();
+                this.focusTimeoutId = setTimeout(() => {
+                    this.focusFirstElement();
+                }, 100);
+                this.brScrimOpen.emit();
+            }
+            else {
+                this.resetScrolling();
+                this.removeGlobalEventInterception();
+                this.restoreFocus();
+                this.brScrimClose.emit();
+            }
+        });
     }
     updateStyles() {
         if (this.zIndex !== null && this.zIndex !== undefined) {
@@ -38002,6 +38140,7 @@ class Scrim {
         this.setupActivator();
         this.setupActivatorSlotClick();
         this.addContentEventListener();
+        this.listenToModalEvents();
         if (this.isActive) {
             this.applyScrollStrategy();
             this.addGlobalEventInterception();
@@ -38035,7 +38174,6 @@ class Scrim {
             clearTimeout(this.restoreFocusTimeoutId);
             this.restoreFocusTimeoutId = null;
         }
-        // Remover event listeners
         window.removeEventListener('scroll', this.handleScrollClose);
         window.removeEventListener('scroll', this.handleBlockScroll);
         if (this.contentRef !== null) {
@@ -38044,6 +38182,58 @@ class Scrim {
         this.removeActivatorClickListener();
         this.cleanupActivatorSlotClick();
         this.removeGlobalEventInterception();
+        this.removeModalEventListener();
+    }
+    /**
+     * Verifica se um elemento é filho direto deste scrim (não nested)
+     */
+    isDirectChild(element) {
+        const children = this.getDirectChildren();
+        return children.some((child) => child === element || child.contains(element));
+    }
+    /**
+     * Adiciona listeners para eventos brModalOpen e brModalClose das modais filhas
+     */
+    listenToModalEvents() {
+        this.el.addEventListener('brModalOpen', this.handleModalOpen);
+        this.el.addEventListener('brModalClose', this.handleModalClose);
+    }
+    /**
+     * Remove listeners dos eventos da modal
+     */
+    removeModalEventListener() {
+        this.el.removeEventListener('brModalOpen', this.handleModalOpen);
+        this.el.removeEventListener('brModalClose', this.handleModalClose);
+    }
+    /**
+     * Retorna os elementos filhos diretos do scrim via slot padrão
+     */
+    getDirectChildren() {
+        const shadowRoot = this.el.shadowRoot;
+        if (shadowRoot === null)
+            return [];
+        const slot = shadowRoot.querySelector('slot:not([name])');
+        if (slot === null)
+            return [];
+        return slot.assignedElements();
+    }
+    /**
+     * Busca uma modal filha direta do scrim
+     */
+    findModalChild() {
+        var _a;
+        const children = this.getDirectChildren();
+        const modalElement = children.find((child) => child.tagName === 'BR-MODAL');
+        return (_a = modalElement) !== null && _a !== void 0 ? _a : null;
+    }
+    /**
+     * Verifica se há uma modal filha com autoClose=false (padrão ou explícito)
+     * Retorna true se:
+     * - Existe modal filha E autoClose não é explicitamente true
+     */
+    hasModalWithAutoClose() {
+        const modal = this.findModalChild();
+        return modal !== null && modal.autoClose !== true;
     }
     // ======================================================================
     // GERENCIAMENTO DO ACTIVATOR (ELEMENTO ACIONADOR)
@@ -38232,7 +38422,11 @@ class Scrim {
         return elements.filter((el) => el.offsetWidth > 0 && el.offsetHeight > 0 && getComputedStyle(el).visibility !== 'hidden');
     }
     shouldHandleEscape(event) {
-        return (event.key === 'Escape' || event.key === 'Esc') && this.isActive && !this.disableCloseOnClick;
+        if ((event.key === 'Escape' || event.key === 'Esc') && this.isActive && !this.disableCloseOnClick) {
+            // Não fecha se tiver modal filha com autoClose=false ou não definido
+            return !this.hasModalWithAutoClose();
+        }
+        return false;
     }
     handleTabNavigation(event) {
         const focusableElements = this.getFocusableElements();
@@ -38293,6 +38487,9 @@ class Scrim {
         document.removeEventListener('focus', this.handleGlobalFocus, true);
         document.removeEventListener('focusin', this.handleGlobalFocus, true);
     }
+    // ======================================================================
+    // UTILITÁRIOS
+    // ======================================================================
     getCssClassMap() {
         return {
             'br-scrim': true,
@@ -38343,7 +38540,7 @@ class Scrim {
         });
     }
     render() {
-        return (hAsync(Host, { key: '1aea7418642867cfb24c099729f34412f9aec7bf' }, hAsync("slot", { key: '4468892291450f13cded3627ee91f31716108443', name: "activator" }), hAsync("div", { key: '6019de52484c176a5f5d706ca1dc759039dae940', class: this.getCssClassMap(), id: this.customId, role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel || 'Conteúdo do diálogo', "data-visible": this.isActive ? 'true' : 'false' }, hAsync("div", { key: '6c6df83177f1a14097ec5c08e409caaca3953d3b', class: "mask", onClick: this.handleMaskClick }), hAsync("div", { key: '1af0ecd53a0aaf630069139a7e6935533a563e10', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '2cb75f5b254ed22bbe821998700d9c1f4152dd5b' })))));
+        return (hAsync(Host, { key: '249de7af4056263464615cbe086b419f74b8981b' }, hAsync("slot", { key: '1698faa6b492e1ec594eba8425f20582a2af0e4a', name: "activator" }), hAsync("div", { key: 'adedf3eb84f3d8f79ac9bb19209022301453c019', class: this.getCssClassMap(), id: this.customId, role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel || 'Conteúdo do diálogo', "data-visible": this.isActive ? 'true' : 'false' }, hAsync("div", { key: 'ef7408a6672fabf4d2f79bc7922f301fd102652e', class: "mask", onClick: this.handleMaskClick }), hAsync("div", { key: '91ffb1a84478f09fc90cefbb97180c5db13dba5c', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '0600ac804980446103154cebf83389ac92e44d9d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }