refactor: export component animations for reuse

[crisbeto]

Exports all of the component animations so they can be reused by consumers.

Fixes #8904.

[josephperrott]

If we are exporting them all publically perhaps we should "namespace" them? We could put all of the definitions inside of respective objects for animations. I worry about polluting the exported namespace.

For example:

export const ExpansionPanelAnimations = {
  indicatorRotate: AnimationTriggerMetadata = trigger('indicatorRotate', [
    state('collapsed', style({transform: 'rotate(0deg)'})),
    state('expanded', style({transform: 'rotate(180deg)'})),
    transition('expanded <=> collapsed',
               animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ]),
  expansionHeaderHeight: AnimationTriggerMetadata = trigger('expansionHeight', [
    state('collapsed', style({
      height: '{{collapsedHeight}}',
    }), {
      params: {collapsedHeight: '48px'},
    }),
    state('expanded', style({
      height: '{{expandedHeight}}'
    }), {
      params: {expandedHeight: '64px'}
    }),
    transition('expanded <=> collapsed', 
               animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ]),
  bodyExpansion: AnimationTriggerMetadata = trigger('bodyExpansion', [
    state('collapsed', style({height: '0px', visibility: 'hidden'})),
    state('expanded', style({height: '*', visibility: 'visible'})),
    transition('expanded <=> collapsed', 
               animate(EXPANSION_PANEL_ANIMATION_TIMING)),
  ])
}

[crisbeto]

Good point @josephperrott, I was hoping that this would come up during the review since I'm not a fan of just exporting them as plain variables either. Switching them over to namespaces.

[jelbourn]

We can't use typescript namespaces; they're forbidden inside google (has to do with interop with Closure-style javascript)

[crisbeto]

In this case what would be the proper way to namespace them? Should we have a MatDialogAnimations class with static properties or just an object with some properties on it? The static class has the advantage of allowing us to make the properties readonly.

[jelbourn]

I would just do an object that we can use typescript to make immutable

[crisbeto]

Refactored it based on our discussion @jelbourn. Note that I'm not a fan of having to add the typings to all of the constants, but it seems like the simplest way of ensuring that the properties are immutable. Initially I was going for something like {readonly [key: string]: AnimationTriggerMetadata}, but that really only prevents people from adding new keys, it doesn't break if they try to override the existing ones.

[jelbourn]

LGTM

[jelbourn]

nit: can condense these comments to a single line

[jelbourn]

Changing this to minor release since it adds new APIs

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