chore(select): use computed pseudocheckbox size for multi select during 2018 material spec update transition (#13110)

Author: josephperrott

src/lib/select/select.ts

@@ -117,15 +117,17 @@ export const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
 /** The height of the select items in `em` units. */
 export const SELECT_ITEM_HEIGHT_EM = 3;
 
+// TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged.
 /**
  * Distance between the panel edge and the option text in
  * multi-selection mode.
  *
+ * Calculated as:
  * (SELECT_PANEL_PADDING_X * 1.5) + 20 = 44
  * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
  * The checkbox width is 20px.
  */
-export const SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 20;
+export let SELECT_MULTIPLE_PANEL_PADDING_X = 0;
 
 /**
  * The select panel will only "fit" inside the viewport if it is positioned at
@@ -764,6 +766,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
    */
   _onAttached(): void {
     this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
+      this._setPseudoCheckboxPaddingSize();
       this._changeDetectorRef.detectChanges();
       this._calculateOverlayOffsetX();
       this.panel.nativeElement.scrollTop = this._scrollTop;
@@ -775,6 +778,17 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return this._parentFormField ? `mat-${this._parentFormField.color}` : '';
   }
 
+  // TODO(josephperrott): Remove after 2018 spec updates are fully merged.
+  /** Sets the pseudo checkbox padding size based on the width of the pseudo checkbox. */
+  private _setPseudoCheckboxPaddingSize() {
+    if (!SELECT_MULTIPLE_PANEL_PADDING_X && this.multiple) {
+      const pseudoCheckbox = this.panel.nativeElement.querySelector('.mat-pseudo-checkbox');
+      if (pseudoCheckbox) {
+        SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + pseudoCheckbox.offsetWidth;
+      }
+    }
+  }
+
   /** Whether the select has a value. */
   get empty(): boolean {
     return !this._selectionModel || this._selectionModel.isEmpty();