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

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>;
 }