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

package/dist/collection/components/modal/modal.js

@@ -25,32 +25,132 @@ export 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`;
     }
@@ -70,6 +170,7 @@ export class Modal {
     open() {
         return __awaiter(this, void 0, void 0, function* () {
             this.show = true;
+            this.openParentScrim();
         });
     }
     /**
@@ -77,19 +178,17 @@ export 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 (h(Host, null, h("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, h("div", { class: "br-modal-header" }, h("div", { class: "modal-title", id: this.titleId }, h("slot", { name: "header" }, this.titleText)), h("slot", { name: "close-button" }, h("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, h("br-icon", { "icon-name": "fa-solid:times" })))), h("div", { id: this.contentId, class: "br-modal-body" }, h("slot", null)), h("div", { class: `br-modal-footer ${this.alignFooter ? `justify-content-${this.alignFooter}` : ''}` }, h("slot", { name: "footer" })))));
+        return (h(Host, null, h("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, h("div", { class: "br-modal-header" }, h("div", { class: "modal-title", id: this.titleId }, h("slot", { name: "header" }, this.titleText)), h("slot", { name: "close-button" }, h("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, h("br-icon", { "icon-name": "fa-solid:times" })))), h("div", { id: this.contentId, class: "br-modal-body" }, h("slot", null)), h("div", { class: `br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}` }, h("slot", { name: "footer" })))));
     }
     static get is() { return "br-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -177,7 +276,7 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Se `true`, o modal se fechar\u00E1 automaticamente ao clicar no bot\u00E3o de fechar ou pressionar a tecla 'Escape'."
+                    "text": "Define o comportamento de fechamento do modal.\n\n- `true`: O modal fecha automaticamente ao clicar no bot\u00E3o fechar.\n- `false`: O modal emite `brModalBeforeClose` mas n\u00E3o fecha, permitindo a implementa\u00E7\u00E3o de l\u00F3gica customizada (valida\u00E7\u00E3o, confirma\u00E7\u00E3o, etc.) antes do fechamento. O desenvolvedor deve\n  controlar manualmente o fechamento."
                 },
                 "getter": false,
                 "setter": false,
@@ -224,26 +323,6 @@ export class Modal {
                 "attribute": "size",
                 "defaultValue": "'medium'"
             },
-            "scrim": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Se `true`, exibe um fundo escurecido (scrim) atr\u00E1s do modal."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "scrim",
-                "defaultValue": "false"
-            },
             "scrollable": {
                 "type": "boolean",
                 "mutable": false,
@@ -288,6 +367,21 @@ export class Modal {
     }
     static get events() {
         return [{
+                "method": "brModalOpen",
+                "name": "brModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando o modal \u00E9 aberto (quando `show` muda de `false` para `true`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "brModalClose",
                 "name": "brModalClose",
                 "bubbles": true,
@@ -295,7 +389,22 @@ export class Modal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento emitido quando o modal solicita ser fechado (pelo bot\u00E3o 'x', tecla 'Escape' ou clique no scrim)."
+                    "text": "Evento emitido ap\u00F3s o modal ser fechado (quando `show` muda de `true` para `false`)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brModalBeforeClose",
+                "name": "brModalBeforeClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido antes do fechamento do modal (quando o bot\u00E3o X \u00E9 clicado).\nSe autoClose est\u00E1 desativado, o desenvolvedor deve fechar manualmente o modal ap\u00F3s este evento.\nSe autoClose est\u00E1 ativado, o modal fecha automaticamente ap\u00F3s este evento."
                 },
                 "complexType": {
                     "original": "void",
@@ -343,6 +452,12 @@ export class Modal {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "show",
+                "methodName": "handleShowChange"
+            }];
+    }
     static get attachInternalsMemberName() { return "elementInternals"; }
 }
 //# sourceMappingURL=modal.js.map

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/modal?tab=designer).\n *\n * @slot header - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.\n * @slot default - Corpo do modal.\n * @slot footer - Rodapé do modal.\n * @slot close-button - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.\n *\n */\n@Component({\n  tag: 'br-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Modal {\n  /** Referência ao elemento host do componente. */\n  @Element() el: HTMLBrModalElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId('modal')\n\n  /** O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido. */\n  @Prop() readonly titleText: string\n\n  /** Controla a visibilidade do modal. */\n  @Prop({ reflect: true, mutable: true }) show = false\n\n  /** Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'. */\n  @Prop({ reflect: true }) autoClose = false\n\n  /** Seletor CSS para o elemento que deve receber foco quando o modal é aberto. */\n  @Prop() readonly initialFocusSelector: string\n\n  /**\n   * Define o tamanho (largura) do modal.\n   */\n  @Prop({ reflect: true }) readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto' = 'medium'\n\n  /** Se `true`, exibe um fundo escurecido (scrim) atrás do modal. */\n  @Prop({ reflect: true }) readonly scrim = false\n\n  /** Se `true`, habilita a rolagem interna do conteúdo do modal. */\n  @Prop({ reflect: true }) readonly scrollable = false\n\n  /**\n   * Define o alinhamento do conteúdo do rodapé (slot=\"footer\").\n   */\n  @Prop({ reflect: true }) readonly alignFooter: 'start' | 'end' | 'center' = 'center'\n\n  /** Evento emitido quando o modal solicita ser fechado (pelo botão 'x', tecla 'Escape' ou clique no scrim). */\n  @Event() brModalClose: EventEmitter<void>\n\n  private get titleId() {\n    return `${this.customId}-title`\n  }\n\n  private get contentId() {\n    return `${this.customId}-content`\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-modal': true,\n      [this.size]: true,\n      scrollable: this.scrollable,\n    }\n  }\n\n  private handleClose = () => {\n    this.brModalClose.emit()\n    if (this.autoClose) {\n      this.show = false\n\n      // Se o modal está dentro de um br-scrim, fecha o scrim também\n      const parentScrim = this.el.closest('br-scrim')\n      if (parentScrim) {\n        parentScrim.close()\n      }\n    }\n  }\n\n  /**\n   * Método público para abrir o modal\n   */\n  @Method()\n  async open() {\n    this.show = true\n  }\n\n  /**\n   * Método público para fechar o modal\n   */\n  @Method()\n  async close() {\n    this.show = false\n\n    // Se o modal está dentro de um br-scrim, fecha o scrim também\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim) {\n      parentScrim.close()\n    }\n  }\n\n  render() {\n    if (!this.show) {\n      return null\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getCssClassMap()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.titleId}\n          aria-describedby={this.contentId}\n        >\n          <div class=\"br-modal-header\">\n            <div class=\"modal-title\" id={this.titleId}>\n              <slot name=\"header\">{this.titleText}</slot>\n            </div>\n            <slot name=\"close-button\">\n              <br-button class=\"close\" shape=\"circle\" density=\"small\" aria-label=\"Fechar\" onClick={this.handleClose}>\n                <br-icon icon-name=\"fa-solid:times\"></br-icon>\n              </br-button>\n            </slot>\n          </div>\n          <div id={this.contentId} class=\"br-modal-body\">\n            <slot></slot>\n          </div>\n          <div class={`br-modal-footer ${this.alignFooter ? `justify-content-${this.alignFooter}` : ''}`}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/modal?tab=designer).\n *\n * @slot header - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.\n * @slot default - Corpo do modal.\n * @slot footer - Rodapé do modal.\n * @slot close-button - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.\n *\n */\n@Component({\n  tag: 'br-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Modal {\n  /** Referência ao elemento host do componente. */\n  @Element() el: HTMLBrModalElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId('modal')\n\n  /** O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido. */\n  @Prop() readonly titleText: string\n\n  /** Controla a visibilidade do modal. */\n  @Prop({ reflect: true, mutable: true }) show = false\n\n  /**\n   * Define o comportamento de fechamento do modal.\n   *\n   * - `true`: O modal fecha automaticamente ao clicar no botão fechar.\n   * - `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\n   *   controlar manualmente o fechamento.\n   */\n  @Prop({ reflect: true }) autoClose = false\n\n  /** Seletor CSS para o elemento que deve receber foco quando o modal é aberto. */\n  @Prop() readonly initialFocusSelector: string\n\n  /**\n   * Define o tamanho (largura) do modal.\n   */\n  @Prop({ reflect: true }) readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto' = 'medium'\n\n  /** Se `true`, habilita a rolagem interna do conteúdo do modal. */\n  @Prop({ reflect: true }) readonly scrollable = false\n\n  /**\n   * Define o alinhamento do conteúdo do rodapé (slot=\"footer\").\n   */\n  @Prop({ reflect: true }) readonly alignFooter: 'start' | 'end' | 'center' = 'center'\n\n  private isOpeningParentScrim = false\n\n  /**\n   * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).\n   */\n  @Event() brModalOpen: EventEmitter<void>\n\n  /**\n   * Evento emitido após o modal ser fechado (quando `show` muda de `true` para `false`).\n   */\n  @Event() brModalClose: EventEmitter<void>\n\n  /**\n   * Evento emitido antes do fechamento do modal (quando o botão X é clicado).\n   * Se autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento.\n   * Se autoClose está ativado, o modal fecha automaticamente após este evento.\n   */\n  @Event() brModalBeforeClose: EventEmitter<void>\n\n  @Watch('show')\n  handleShowChange(newValue: boolean, oldValue: boolean) {\n    if (newValue) {\n      this.brModalOpen.emit()\n      this.openParentScrim()\n    } else if (oldValue === true) {\n      this.brModalClose.emit()\n      this.closeParentScrim()\n    }\n  }\n\n  private closeParentScrim() {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim && typeof parentScrim.close === 'function') {\n      parentScrim.close()\n    }\n  }\n\n  componentWillLoad() {\n    if (!this.show) {\n      const parentScrim = this.el.closest('br-scrim')\n      if (parentScrim !== null && parentScrim.isOpen) {\n        this.show = true\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.listenToParentScrimEvents()\n\n    if (this.show) {\n      this.openParentScrim()\n    }\n  }\n\n  disconnectedCallback() {\n    this.isOpeningParentScrim = false\n    this.removeParentScrimEventListeners()\n  }\n\n  /**\n   * Adiciona listeners para eventos do parent scrim\n   */\n  private listenToParentScrimEvents() {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim !== null) {\n      parentScrim.addEventListener('brScrimOpen', this.handleParentScrimOpen)\n      parentScrim.addEventListener('brScrimClose', this.handleParentScrimClose)\n    }\n  }\n\n  /**\n   * Remove listeners de eventos do parent scrim\n   */\n  private removeParentScrimEventListeners() {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim !== null) {\n      parentScrim.removeEventListener('brScrimOpen', this.handleParentScrimOpen)\n      parentScrim.removeEventListener('brScrimClose', this.handleParentScrimClose)\n    }\n  }\n\n  /**\n   * Handler para evento brScrimOpen do parent scrim\n   * Quando scrim abre programaticamente, a modal deve abrir também\n   */\n  private handleParentScrimOpen = () => {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim === null) return\n\n    if (!this.show) {\n      this.show = true\n    }\n  }\n\n  /**\n   * Handler para evento brScrimClose do parent scrim\n   * Se autoClose=true, fecha a modal junto com o scrim\n   * Se autoClose=false, não faz nada (modal permanece aberta)\n   */\n  private handleParentScrimClose = () => {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim === null) return\n\n    if (this.autoClose && this.show) {\n      this.show = false\n    }\n  }\n\n  private openParentScrim() {\n    if (this.isOpeningParentScrim) return\n\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim && !parentScrim.isOpen) {\n      this.isOpeningParentScrim = true\n\n      Promise.resolve()\n        .then(() => {\n          try {\n            return parentScrim.open()\n          } catch (error) {\n            console.warn('br-modal: Erro ao abrir scrim pai:', error)\n            throw error\n          }\n        })\n        .finally(() => {\n          this.isOpeningParentScrim = false\n        })\n    }\n  }\n\n  private get titleId() {\n    return `${this.customId}-title`\n  }\n\n  private get contentId() {\n    return `${this.customId}-content`\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-modal': true,\n      [this.size]: true,\n      scrollable: this.scrollable,\n    }\n  }\n\n  private handleClose = () => {\n    this.brModalBeforeClose.emit()\n\n    if (this.autoClose) {\n      this.show = false\n    }\n  }\n\n  /**\n   * Método público para abrir o modal\n   */\n  @Method()\n  async open() {\n    this.show = true\n\n    this.openParentScrim()\n  }\n\n  /**\n   * Método público para fechar o modal\n   */\n  @Method()\n  async close() {\n    if (!this.autoClose) {\n      return\n    }\n\n    this.show = false\n  }\n\n  render() {\n    if (!this.show) {\n      return null\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getCssClassMap()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.titleId}\n          aria-describedby={this.contentId}\n        >\n          <div class=\"br-modal-header\">\n            <div class=\"modal-title\" id={this.titleId}>\n              <slot name=\"header\">{this.titleText}</slot>\n            </div>\n            <slot name=\"close-button\">\n              <br-button class=\"close\" shape=\"circle\" density=\"small\" aria-label=\"Fechar\" onClick={this.handleClose}>\n                <br-icon icon-name=\"fa-solid:times\"></br-icon>\n              </br-button>\n            </slot>\n          </div>\n          <div id={this.contentId} class=\"br-modal-body\">\n            <slot></slot>\n          </div>\n          <div class={`br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}`}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/scrim/scrim.js

@@ -82,6 +82,29 @@ export 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();
         };
@@ -99,6 +122,10 @@ export 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;
@@ -134,7 +161,9 @@ export 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
@@ -168,11 +197,15 @@ export 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();
             }
         };
@@ -181,37 +214,39 @@ export 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) {
@@ -238,6 +273,7 @@ export class Scrim {
         this.setupActivator();
         this.setupActivatorSlotClick();
         this.addContentEventListener();
+        this.listenToModalEvents();
         if (this.isActive) {
             this.applyScrollStrategy();
             this.addGlobalEventInterception();
@@ -271,7 +307,6 @@ export 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) {
@@ -280,6 +315,58 @@ export 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)
@@ -468,7 +555,11 @@ export 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();
@@ -530,6 +621,9 @@ export class Scrim {
         document.removeEventListener('focus', this.handleGlobalFocus, true);
         document.removeEventListener('focusin', this.handleGlobalFocus, true);
     }
+    // ======================================================================
+    // UTILITÁRIOS
+    // ======================================================================
     getCssClassMap() {
         return {
             'br-scrim': true,
@@ -580,7 +674,7 @@ export class Scrim {
         });
     }
     render() {
-        return (h(Host, { key: '1aea7418642867cfb24c099729f34412f9aec7bf' }, h("slot", { key: '4468892291450f13cded3627ee91f31716108443', name: "activator" }), h("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' }, h("div", { key: '6c6df83177f1a14097ec5c08e409caaca3953d3b', class: "mask", onClick: this.handleMaskClick }), h("div", { key: '1af0ecd53a0aaf630069139a7e6935533a563e10', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, h("slot", { key: '2cb75f5b254ed22bbe821998700d9c1f4152dd5b' })))));
+        return (h(Host, { key: '249de7af4056263464615cbe086b419f74b8981b' }, h("slot", { key: '1698faa6b492e1ec594eba8425f20582a2af0e4a', name: "activator" }), h("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' }, h("div", { key: 'ef7408a6672fabf4d2f79bc7922f301fd102652e', class: "mask", onClick: this.handleMaskClick }), h("div", { key: '91ffb1a84478f09fc90cefbb97180c5db13dba5c', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, h("slot", { key: '0600ac804980446103154cebf83389ac92e44d9d' })))));
     }
     static get is() { return "br-scrim"; }
     static get encapsulation() { return "shadow"; }