Critical Issue : JS execution infinite loop that crashes browser tab

[danted4]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Critical Issue : (infinite JS execution loop, breaks browser)

If we add a div outside of <angular-tag-cloud></angular-tag-cloud> with display = none, one of the for loops mentioned in belw file fails to exit :

File = projects/angular-tag-cloud-module/src/lib/tag-cloud.component.ts
Line Number = 289

From what it looks like, the function "overlapping" always returns true because the div has a width and height equal to zero (0).

Function in current state (without fix):
`
private overlapping(e1: HTMLElement, e2: HTMLElement) {
const rect1 = e1.getBoundingClientRect();
const rect2 = e2.getBoundingClientRect();

const overlap = !(
  rect1.right < rect2.left ||
  rect1.left > rect2.right ||
  rect1.bottom < rect2.top ||
  rect1.top > rect2.bottom
);
return overlap;

}
`

Suggested fix :
`
private overlapping(e1: HTMLElement, e2: HTMLElement) {
const rect1 = e1.getBoundingClientRect();
const rect2 = e2.getBoundingClientRect();

const overlap = !(
  rect1.right < rect2.left ||
  rect1.left > rect2.right ||
  rect1.bottom < rect2.top ||
  rect1.top > rect2.bottom
);
 return overlap && rect1.clientWidth > 0 && rect2.clientHeight > 0;

}
`

Expected behavior
Even if user add display none property to outside world ( from the point of view of the tag usage ) the library should not get stuck in infinite loop and avoid impact directly on the JS execution thread. Whenever possible try to have retry mechanism in the loops or have a full proof exit mechanism.

Reproduction of the problem

1. Add a div outside of :
   <angular-tag-cloud></angular-tag-cloud>

2. give it a display property of "none"

What is the motivation / use case for changing the behavior?
While using media queries ( because we needed to hide the tile for small screens ), we added a display property none to the outside tag whenever it met the screen width. The library code blocked the JS execution in an infinite loop causing the application to crash.

Please tell us about your environment:
It is OS Independent Issue

• NodeJS version: all
  Independent on node js version
  

• NPM version version: 8.19.2
  Npm version independent issue

• Angular version: 9.0.6
  Independent on angular version issue is with library

• Angular-CLI version: 9.0.6

• angular-tag-cloud-module version: 3.8.1
  Still an issue with the latest version ? - Yes

• Browser:
  All browsers