feat(datepicker): add animation to calendar popup

[crisbeto]

Adds an animation when opening and closing the datepicker's calendar.

For reference:

[ghost]

It would be very cool if the sheet would do also a opening along the x-axis like here.

[crisbeto]

@theredd0t that's what I was going for initially (the menu has a similar animation), but it looks weird when the animation doesn't originate from the place where the user clicked.

[ghost]

@crisbeto Yeah I just realized that this would be a "Don't" according to the guidelines.

https://material.io/guidelines/motion/choreography.html#choreography-creation

[mmalerba]

Looks fantastic, thanks!

[mmalerba]

should we use the usual _destoryed.next()?

[crisbeto]

I think for this case it's better to go with the subscription, because it allows us to know whether we've subscribed before. Otherwise since we don't dispose of the datepicker content until the datepicker is destroyed, we could end up in a situation where we've subscribed multiple times to the same stream.

[mmalerba]

Just realized, since this adds an Angular animation to a component that previously didn't have one, it may be a breaking change.

@jelbourn should this be part of a patch, minor, or major?

[jelbourn]

I chatted w/ @StephenFluin and he agreed that adding an animation to a component that didn't have one before would be considered a breaking change since users would have to add BrowserAnimationsModule if they didn't have it (however unlikely it is that someone is using datepicker and not some other component that has animations already). I think this one may have to wait for 6.0

[mmalerba]

@jelbourn for 6.0 we might want to consider adding a no-op animation to anything that's supposed to have animations but we haven't got to it yet. That way we can do it at some point without it being breaking

[jelbourn]

Unless something changes in Angular, we won't be able to do that; both animations modules import BrowserModule, which Angular only allows to be imported once.

[mmalerba]

@jelbourn By no-op animation I don't mean the NoopAnimationModule, just an animation that does nothing, e.g. state('noop', style({})). This way it would have the BrowserAnimationsModule dependency and we could later make the animation do useful things without it being a breaking change

[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.}