Add public event to notify when the overlay is closed

[web-padawan]

Describe your motivation

Currently, vaadin-dialog and vaadin-notification don't notify about closing completed.
The opened-changed event isn't suitable since it is fired before the closing animation.

Describe the solution you'd like

1. Expose vaadin-overlay-closed event added in feat: dispatch an event after overlay closing completed #5397 publicly in vaadin-dialog (and possibly also vaadin-confirm-dialog for consistency)
2. Add a similar event to vaadin-notification that should be fired in _removeNotificationCard() method.

Describe alternatives you've considered

No response

Additional context

No response

[TatuLund]

The event seems to be public to me. For example the code here compiles.

https://github.com/TatuLund/hilla-demo/blob/hilla2/frontend/views/list/contact-form.ts#L196

Also needed types seems to be exported.

But the event listener is not getting fired.

[web-padawan]

The event is fired by vaadin-confirm-dialog-overlay, not the vaadin-confirm-dialog itself:

web-components/packages/overlay/src/vaadin-overlay-mixin.js

Line 373 in fb1b726

this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));

The fact that VSCode Lit plugin doesn't produce warnings related to this event doesn't mean it is correctly used.

Also, this is not a bug but an enhancement ticket.

[TatuLund]

The fact that VSCode Lit plugin doesn't produce warnings related to this event doesn't mean it is correctly used.

In addition to that, there is no run-time JavaScript exception either ... So that further increases the confusion.

[web-padawan]

I agree it's a bad DX. But it appears to be an issue of the Lit analyzer tools (including VS Code Lit plugin) that are lacking proper events support. I reported a few issues related to this e.g. runem/lit-analyzer#143 and runem/lit-analyzer#155

You can actually verify that by using e.g. @change - this will simply pick all the existing declarations of this event.

At the same time, I don't think adding an event listener to a non-existing event is supposed to produce an extension.

[TatuLund]

Ok, got it. So there is a workaround

import { ConfirmDialog } from "@vaadin/confirm-dialog";

export class CustomConfirmDialog extends ConfirmDialog {
  _onOverlayClosed(e) {
    const event = new CustomEvent("vaadin-overlay-closed");
    console.log("dispatching custom event", event);
    this.dispatchEvent(event);
  }

  connectedCallback() {
    super.connectedCallback();
    this._overlayElement.addEventListener(
      "vaadin-overlay-closed",
      this._onOverlayClosed.bind(this)
    );
  }
}

customElements.define("custom-confirm-dialog", CustomConfirmDialog);

[DiegoCardoso]

Done by #7471, #7472, and #7473.