Mat-Select outline rendered incorrectly when dir="rtl"

[petersberg]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When displaying a MatFormField in RTL (right-to-left) mode, by setting dir="rtl" on a parent element, the outline "gap" for the label should be move right together with the label itself.

What is the current behavior?

The label is correctly moved right, but the gap in the outline is left aligned just as in LTR mode.

What are the steps to reproduce?

In the basic select example on https://material.angular.io, set dir="rtl"in the outermost div tag in index.html and add appearance="outline" to the mat-form-field in select-overview-example.html.

Or see https://stackblitz.com/edit/angular-b66kfk

What is the use-case or motivation for changing an existing behavior?

Angular Material should support RTL for all relevant components in order to support Arabic languages.

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

Angular: ^8.2.9
Material: ~8.2.2
TypeScript: ~3.5.3
Chome: 78.0.3904.108

Is there anything else we should know?

[crisbeto]

Should be resolved in the next release by #17395.

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