feat(datepicker): implement comparison and overlap ranges

[crisbeto]

Adds the ability to render a comparison range in the date range picker. When the comparison overlaps with the primary range, the overlapping dates are shown in a separate "overlap" range.

Some examples for reference:

[mmalerba]

I really don't like the yellow circles, it's very confusing to look at and try to understand. Instead of a straightforward mental mapping like:

• blue = only selected range occupies this cell
• yellow = only comparison range occupies this cell
• green = both ranges occupy this cell

We get:

• blue = only selected range occupies this cell
• yellow = ¯\(ツ)/¯
• green = both ranges occupy this cell

I propose just making the dark yellow circle a dark green circle, and if people really want their users to be confused they can always override it

[crisbeto]

I've reworked it based on the feedback @mmalerba

[mmalerba]

I noticed a couple visual bugs:

1. Notice the extra green glow on the right side of the solid green circle:
2. This is when I have selected 13 and was hovering on 6. Notice the extra pale blue selection, and the fact that the circle is blue instead of green:
   

[crisbeto]

1. Yeah that's annoying, but it's a side effect of the changes which add the gap between the calendar rows. The problem is that the element isn't perfectly circular anymore so in some cases it can end up sticking out. We might have to re-evaluate how we do the row gap.
2. That one's a little tricky to resolve with the current approach. I'll see if I can address it when I rework it to use gradients.

[mmalerba]

Did some hacking in chrome devtools and this seemed to fix the first issue for LTR:

.mat-calendar-body-cell::before, .mat-calendar-body-cell::after {
  left: 0;
  right: 0;
  // width: unspecified;
}

.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before, .mat-calendar-body-range-start.mat-calendar-body-comparison-start::before, .mat-calendar-body-range-start::after, .mat-calendar-body-comparison-start:not(.mat-calendar-body-in-range)::before, .mat-calendar-body-comparison-start::after {
  left: 5%;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  // width: unspecified;
}

.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before, .mat-calendar-body-range-end.mat-calendar-body-comparison-end::before, .mat-calendar-body-range-end::after, .mat-calendar-body-range-start.mat-calendar-body-comparison-end::before, .mat-calendar-body-comparison-end:not(.mat-calendar-body-in-range)::before, .mat-calendar-body-comparison-end:not(.mat-calendar-body-range-start)::after {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  right: 5%;
  // width: unspecified;
}

Would still need to be updated for RTL (which is currently broken with and without these adjustments).

It might just be worth revisiting this whole approach though, as it seems very complicated and brittle

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}