fix(material/select): rotate arrow while open (angular#31936)

Rotates the select's arrow while it's open.

Fixes angular#29985.
Fixes angular#31869.

(cherry picked from commit 6fba204)

Author: crisbeto

src/material/select/select.scss

@@ -120,6 +120,14 @@ div.mat-mdc-select-panel {
     color: token-utils.slot(select-disabled-arrow-color, $fallbacks);
   }
 
+  .mat-select-open & {
+    transform: rotate(180deg);
+  }
+
+  .mat-form-field-animations-enabled & {
+    transition: transform variables.$swift-linear-duration variables.$swift-linear-timing-function;
+  }
+
   svg {
     fill: currentColor;
     position: absolute;

src/material/select/select.ts

@@ -200,6 +200,7 @@ export class MatSelectChange<T = any> {
     '[class.mat-mdc-select-required]': 'required',
     '[class.mat-mdc-select-empty]': 'empty',
     '[class.mat-mdc-select-multiple]': 'multiple',
+    '[class.mat-select-open]': 'panelOpen',
     '(keydown)': '_handleKeydown($event)',
     '(focus)': '_onFocus()',
     '(blur)': '_onBlur()',