fix(material-experimental/mdc-radio): avoid hard references to base material components

Currently the MDC radio button doesn't extend the Material one in order to avoid bringing in unecessary code. The problem is that the MDC button group still has a hard reference to the Material `MatRadioButton` which means that we'll likely end up importing it anyway.

These changes move the button group code into a base class and remove the references to the Material button.

Author: crisbeto

src/material-experimental/mdc-radio/radio.ts

@@ -26,7 +26,7 @@ import {
   MAT_RADIO_DEFAULT_OPTIONS,
   _MatRadioButtonBase,
   MatRadioDefaultOptions,
-  MatRadioGroup as BaseMatRadioGroup,
+  _MatRadioGroupBase,
 } from '@angular/material/radio';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
@@ -66,13 +66,12 @@ const RIPPLE_ANIMATION_CONFIG: RippleAnimationConfig = {
   host: {
     'role': 'radiogroup',
     'class': 'mat-mdc-radio-group',
-    '[class.mat-radio-group]': 'false',
   },
 })
-export class MatRadioGroup extends BaseMatRadioGroup {
+export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
   /** Child radio buttons. */
   @ContentChildren(forwardRef(() => MatRadioButton), {descendants: true})
-      _radios: QueryList<_MatRadioButtonBase>;
+      _radios: QueryList<MatRadioButton>;
 }
 
 @Component({

src/material/radio/radio.ts

@@ -78,32 +78,27 @@ export const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = {
 export class MatRadioChange {
   constructor(
     /** The MatRadioButton that emits the change event. */
-    public source: MatRadioButton,
+    public source: _MatRadioButtonBase,
     /** The value of the MatRadioButton. */
     public value: any) {}
 }
 
 /**
- * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
+ * Base class with all of the `MatRadioGroup` functionality.
+ * @docs-private
  */
-@Directive({
-  selector: 'mat-radio-group',
-  exportAs: 'matRadioGroup',
-  providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
-  host: {
-    'role': 'radiogroup',
-    'class': 'mat-radio-group',
-  },
-})
-export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
+@Directive()
+// tslint:disable-next-line:class-name
+export abstract class _MatRadioGroupBase<T extends _MatRadioButtonBase> implements AfterContentInit,
+  ControlValueAccessor {
   /** Selected value for the radio group. */
   private _value: any = null;
 
   /** The HTML name attribute applied to radio buttons in this group. */
   private _name: string = `mat-radio-group-${nextUniqueId++}`;
 
   /** The currently selected radio button. Should match value. */
-  private _selected: MatRadioButton | null = null;
+  private _selected: T | null = null;
 
   /** Whether the `value` has been set to its initial value. */
   private _isInitialized: boolean = false;
@@ -134,8 +129,7 @@ export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
   @Output() readonly change: EventEmitter<MatRadioChange> = new EventEmitter<MatRadioChange>();
 
   /** Child radio buttons. */
-  @ContentChildren(forwardRef(() => MatRadioButton), { descendants: true })
-  _radios: QueryList<MatRadioButton>;
+  abstract _radios: QueryList<T>;
 
   /** Theme color for all of the radio buttons in the group. */
   @Input() color: ThemePalette;
@@ -188,7 +182,7 @@ export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
    */
   @Input()
   get selected() { return this._selected; }
-  set selected(selected: MatRadioButton | null) {
+  set selected(selected: T | null) {
     this._selected = selected;
     this.value = selected ? selected.value : null;
     this._checkSelectedRadioButton();
@@ -311,6 +305,23 @@ export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
   static ngAcceptInputType_required: BooleanInput;
 }
 
+/**
+ * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
+ */
+@Directive({
+  selector: 'mat-radio-group',
+  exportAs: 'matRadioGroup',
+  providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
+  host: {
+    'role': 'radiogroup',
+    'class': 'mat-radio-group',
+  },
+})
+export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
+  @ContentChildren(forwardRef(() => MatRadioButton), {descendants: true})
+  _radios: QueryList<MatRadioButton>;
+}
+
 // Boilerplate for applying mixins to MatRadioButton.
 /** @docs-private */
 class MatRadioButtonBase {
@@ -441,7 +452,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
   @Output() readonly change: EventEmitter<MatRadioChange> = new EventEmitter<MatRadioChange>();
 
   /** The parent radio group. May or may not be present. */
-  radioGroup: MatRadioGroup;
+  radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>;
 
   /** ID of the native input element inside `<mat-radio-button>` */
   get inputId(): string { return `${this.id || this._uniqueId}-input`; }
@@ -464,7 +475,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
   /** The native `<input type=radio>` element */
   @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
 
-  constructor(@Optional() radioGroup: MatRadioGroup,
+  constructor(@Optional() radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>,
               elementRef: ElementRef,
               protected _changeDetector: ChangeDetectorRef,
               private _focusMonitor: FocusMonitor,
@@ -615,4 +626,15 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatRadioButton extends _MatRadioButtonBase {
+  constructor(@Optional() radioGroup: MatRadioGroup,
+              elementRef: ElementRef,
+              changeDetector: ChangeDetectorRef,
+              focusMonitor: FocusMonitor,
+              radioDispatcher: UniqueSelectionDispatcher,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
+                @Optional() @Inject(MAT_RADIO_DEFAULT_OPTIONS)
+                  providerOverride?: MatRadioDefaultOptions) {
+    super(radioGroup, elementRef, changeDetector, focusMonitor, radioDispatcher,
+          animationMode, providerOverride);
+  }
 }

tools/public_api_guard/material/radio.d.ts

@@ -17,12 +17,12 @@ export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBa
     get labelPosition(): 'before' | 'after';
     set labelPosition(value: 'before' | 'after');
     name: string;
-    radioGroup: MatRadioGroup;
+    radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>;
     get required(): boolean;
     set required(value: boolean);
     get value(): any;
     set value(value: any);
-    constructor(radioGroup: MatRadioGroup, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, _animationMode?: string | undefined, _providerOverride?: MatRadioDefaultOptions | undefined);
+    constructor(radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, _animationMode?: string | undefined, _providerOverride?: MatRadioDefaultOptions | undefined);
     _isRippleDisabled(): boolean;
     _markForCheck(): void;
     _onInputChange(event: Event): void;
@@ -40,32 +40,9 @@ export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBa
     static ɵfac: i0.ɵɵFactoryDef<_MatRadioButtonBase, [{ optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>;
 }
 
-export declare const MAT_RADIO_DEFAULT_OPTIONS: InjectionToken<MatRadioDefaultOptions>;
-
-export declare function MAT_RADIO_DEFAULT_OPTIONS_FACTORY(): MatRadioDefaultOptions;
-
-export declare const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any;
-
-export declare class MatRadioButton extends _MatRadioButtonBase {
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
-    static ɵfac: i0.ɵɵFactoryDef<MatRadioButton, never>;
-}
-
-export declare class MatRadioChange {
-    source: MatRadioButton;
-    value: any;
-    constructor(
-    source: MatRadioButton,
-    value: any);
-}
-
-export interface MatRadioDefaultOptions {
-    color: ThemePalette;
-}
-
-export declare class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
+export declare abstract class _MatRadioGroupBase<T extends _MatRadioButtonBase> implements AfterContentInit, ControlValueAccessor {
     _controlValueAccessorChangeFn: (value: any) => void;
-    _radios: QueryList<MatRadioButton>;
+    abstract _radios: QueryList<T>;
     readonly change: EventEmitter<MatRadioChange>;
     color: ThemePalette;
     get disabled(): boolean;
@@ -77,8 +54,8 @@ export declare class MatRadioGroup implements AfterContentInit, ControlValueAcce
     onTouched: () => any;
     get required(): boolean;
     set required(value: boolean);
-    get selected(): MatRadioButton | null;
-    set selected(selected: MatRadioButton | null);
+    get selected(): T | null;
+    set selected(selected: T | null);
     get value(): any;
     set value(newValue: any);
     constructor(_changeDetector: ChangeDetectorRef);
@@ -93,7 +70,37 @@ export declare class MatRadioGroup implements AfterContentInit, ControlValueAcce
     writeValue(value: any): void;
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatRadioGroup, "mat-radio-group", ["matRadioGroup"], { "color": "color"; "name": "name"; "labelPosition": "labelPosition"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "required": "required"; }, { "change": "change"; }, ["_radios"]>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatRadioGroupBase<any>, never, never, { "color": "color"; "name": "name"; "labelPosition": "labelPosition"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "required": "required"; }, { "change": "change"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDef<_MatRadioGroupBase<any>, never>;
+}
+
+export declare const MAT_RADIO_DEFAULT_OPTIONS: InjectionToken<MatRadioDefaultOptions>;
+
+export declare function MAT_RADIO_DEFAULT_OPTIONS_FACTORY(): MatRadioDefaultOptions;
+
+export declare const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any;
+
+export declare class MatRadioButton extends _MatRadioButtonBase {
+    constructor(radioGroup: MatRadioGroup, elementRef: ElementRef, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, radioDispatcher: UniqueSelectionDispatcher, animationMode?: string, providerOverride?: MatRadioDefaultOptions);
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatRadioButton, "mat-radio-button", ["matRadioButton"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDef<MatRadioButton, [{ optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>;
+}
+
+export declare class MatRadioChange {
+    source: _MatRadioButtonBase;
+    value: any;
+    constructor(
+    source: _MatRadioButtonBase,
+    value: any);
+}
+
+export interface MatRadioDefaultOptions {
+    color: ThemePalette;
+}
+
+export declare class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
+    _radios: QueryList<MatRadioButton>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatRadioGroup, "mat-radio-group", ["matRadioGroup"], {}, {}, ["_radios"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatRadioGroup, never>;
 }