fix(material/paginator): added transparent element for larger touch target

added transparent touch target element on top of paginator select  to get touch target to 48 pixel height

Fixes b/225394124

Author: DBowen33

src/material/paginator/paginator.html

@@ -12,6 +12,7 @@
             [color]="color"
             class="mat-mdc-paginator-page-size-select">
             <mat-select
+              #selectRef
               [value]="pageSize"
               [disabled]="disabled"
               [aria-labelledby]="_pageSizeLabelId"
@@ -25,6 +26,7 @@
                 </mat-option>
               }
             </mat-select>
+          <div class="mat-mdc-paginator-touch-target" (click)="selectRef.open()"></div>
           </mat-form-field>
         }
 

src/material/paginator/paginator.scss

@@ -9,6 +9,7 @@ $page-size-margin-right: 8px;
 $items-per-page-label-margin: 0 4px;
 $selector-margin: 0 4px;
 $selector-trigger-width: 84px;
+$touch-target-height: 48px;
 
 $range-label-margin: 0 32px 0 24px;
 $button-icon-size: 28px;
@@ -47,7 +48,7 @@ $button-icon-size: 28px;
   .mat-mdc-select {
     // The smaller font size inherited from the paginator throws off the centering of the select
     // inside the form field. This `line-height` helps to center it relative to the other text.
-    line-height: 2;
+    line-height: 1.5;
   }
 }
 
@@ -133,3 +134,14 @@ $button-icon-size: 28px;
     outline: solid 1px;
   }
 }
+
+.mat-mdc-paginator-touch-target {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $selector-trigger-width;
+  height: $touch-target-height;
+  background-color: transparent;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}