RxJS challenge #12: modal closing

My new challenge offers you a simple system with a portal that can show a modal window with string content. The task is to allow a user to close modal clicking outside it or pressing Escape keyboard key:

https://stackblitz.com/edit/rxjs-challenge-12

Looks easy but…

This task is pretty easy until we realize must only close modal of user both started (mousedown) and ended (mouseup) the click on the overlay. In this case, we do not need to close our modal because it is a common pattern to prevent closing after a miss-click. And there is an opposite situation when a user selects some text inside the modal or works with a slider and finishes it outside the modal borders.

If you don’t worry about such a UX, you can just use (click) event on overlay and @HostListener on Escape button.

But we want to have a better UX and that is why let’s write a stream that will start our chain with DOM element of overlay:

So, here we can also make overlay$ that is observable from the subject but I do not see it…