feat(tooltip): make event tooltip display delay configurable

[mikebaum]

Here's the pull request for Issue #790, that Jelle raised. I wasn't able to test the changes by building the calendar and swapping it out in our project, but I was able to test by copying the directive with it's changes into our project and then using that tooltip directive.

[codecov-io]

Codecov Report

Merging #796 into master will decrease coverage by 0.63%.
The diff coverage is 60%.

@@            Coverage Diff             @@
##           master     #796      +/-   ##
==========================================
- Coverage   96.98%   96.34%   -0.64%     
==========================================
  Files          38       38              
  Lines         861      876      +15     
  Branches      116      118       +2     
==========================================
+ Hits          835      844       +9     
- Misses          0        4       +4     
- Partials       26       28       +2

Impacted Files	Coverage Δ
...r/src/modules/week/calendar-week-view.component.ts	96.42% <100%> (+0.01%)	⬆️
...c/modules/day/calendar-day-view-event.component.ts	100% <100%> (ø)	⬆️
...src/modules/month/calendar-month-view.component.ts	94.31% <100%> (+0.06%)	⬆️
...dar/src/modules/day/calendar-day-view.component.ts	95.83% <100%> (+0.03%)	⬆️
...src/modules/month/calendar-month-cell.component.ts	100% <100%> (ø)	⬆️
...modules/week/calendar-week-view-event.component.ts	100% <100%> (ø)	⬆️
...r/src/modules/common/calendar-tooltip.directive.ts	85.18% <33.33%> (-10.38%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a5fe1f9...bed99bf. Read the comment docs.

[mattlewis92]

Nice one, thank you! This will actually throw an error if the component is destroyed before the timeout fires. This can be worked around by adding a flag in the ngOnDestroy hook and checking for this here.

Or you could use rxjs to do the timeout:

timer(this.delay).pipe(
  takeUntil(merge(this.destroy$, this.mouseLeave$))
).subscribe(() => this.show())

btw to test your changes locally you can checkout the repo and do:

npm install
npm start

and then edit one of the demos to add the tooltip delay

Also can you add a test for the tooltip delay? You can copy from this one and instead of flushing all timeouts here you can do something like:

tick(delay - 1);
expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);
tick(1);
expect(!!document.body.querySelector('.cal-tooltip')).to.equal(true);

Let me know if you need any more info! 😄

[mattlewis92]

Hey @mikebaum, reckon you'll be able to take a look at the review comments some time? No worries if not! 😄

[mattlewis92]

Landed here: #891 and now available in the next beta: npm i angular-calendar@next Thanks for your contribution! 😄