Set material stepper to horizontal or vertical based on attribute

[GCSDC]

#### Bug, feature request, or proposal:
proposal

#### What is the expected behavior?
Have a single component for both Horizontal and Vertical stepper, and have a bindable attribute to define if it should display vertically or horizontally

#### What is the current behavior?
There are two separate components: matHorizontalStepper and matVerticalStepper

#### What are the steps to reproduce?
N/A

#### What is the use-case or motivation for changing an existing behavior?
Horizontal steppers are great, and show the steps on a very clear way, but are not good for small screens (specially when the number fo steps grow).

Vertical steppers fits small screens very well, but do not provide a very clear view of all steps and the current selected one (specially if there is much content on each or some steps).

For providing a great experience on both small and large screens, a combination of both is required. This means needing to have both components on the template and choosing between one of them, and also duplicating content or encapsulating it using other strategies (which makes code less clearer).

Being able to use a single component on template and choose its type based on a property makes it much easier to use and allow for smaller and clearer code.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

N/A

Is there anything else we should know?

[crisbeto]

See #9173.

[GCSDC]

Thanks @crisbeto! Couldn't find that thread, so I've opened this one. I will keep track from there.

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