[ch-popover] Fix issues related with the positioning of the popover

[ncamera]

Changes we propose in this PR

• Use the viewport size, instead of the whole document size to properly position the popover.
  When the document has scrollbars, the ch-popover was not positioned correctly because the entire document size was used instead of the viewport size.

• Properly calculate the ch-popover's max size.
  We were always using the max size of the CSS custom vars if they were defined.

• Add support to re-position the ch-popover when the browser's window is resized.

• Add support to close the popover if it is no longer visible.

• Add support to know the reason of the popoverClosed event.
  The reason property of the event provides more information about the cause of the closing:

  • "click-outside": The popover is being closed because the user clicked outside the popover when using closeOnClickOutside === true and mode === "manual".

  • "escape-key": The popover is being closed because the user pressed the "Escape" key when using closeOnClickOutside === true and mode === "manual".

  • "popover-no-longer-visible": The popover is being closed because it is no longer visible.

  • "toggle": The popover is being closed by the native toggle behavior of popover. It can be produced by the user clicking the actionElement, pressing the "Enter" or "Space" keys on the actionElement, pressing the "Escape" key or other. Used when mode === "auto".

• Avoid emitting duplicated popoverClosed event.
  This fixes emitting the duplicated event in the following scenarios:

  • The "Escape" key is pressed in mode === "manual".

  • The user clicks outside the popover in mode === "manual".

  • The show property is changed to false externally.

  • The user scrolls the window and the popover is no longer visible.

[netlify]

✅ Deploy Preview for gx-chameleon ready!

Name	Link
🔨 Latest commit	41bd334
🔍 Latest deploy log	https://app.netlify.com/projects/gx-chameleon/deploys/68efc1a95a1da700080411a9
😎 Deploy Preview	https://deploy-preview-562--gx-chameleon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.