fixup! feat(cdk-experimental/radio): create radio group and button directives

Author: wagnermaciel

src/cdk-experimental/radio/radio.ts

@@ -7,12 +7,12 @@
  */
 
 import {
+  afterRenderEffect,
   AfterViewInit,
   booleanAttribute,
   computed,
   contentChildren,
   Directive,
-  effect,
   ElementRef,
   inject,
   input,
@@ -56,7 +56,7 @@ import {_IdGenerator} from '@angular/cdk/a11y';
     '(focusin)': 'onFocus()',
   },
 })
-export class CdkRadioGroup<V> implements AfterViewInit {
+export class CdkRadioGroup<V> {
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   private readonly _directionality = inject(Directionality);
 
@@ -74,9 +74,6 @@ export class CdkRadioGroup<V> implements AfterViewInit {
   /** Whether the radio group is vertically or horizontally oriented. */
   orientation = input<'vertical' | 'horizontal'>('horizontal');
 
-  /** Whether focus should wrap when navigating. */
-  wrap = input(false, {transform: booleanAttribute}); // Radio groups typically don't wrap
-
   /** Whether disabled items in the group should be skipped when navigating. */
   skipDisabled = input(true, {transform: booleanAttribute});
 
@@ -111,17 +108,13 @@ export class CdkRadioGroup<V> implements AfterViewInit {
   private _isViewInitialized = signal(false);
 
   constructor() {
-    effect(() => {
-      if (this._isViewInitialized() && !this._hasFocused()) {
+    afterRenderEffect(() => {
+      if (!this._hasFocused()) {
         this.pattern.setDefaultState();
       }
     });
   }
 
-  ngAfterViewInit() {
-    this._isViewInitialized.set(true);
-  }
-
   onFocus() {
     this._hasFocused.set(true);
   }

src/cdk-experimental/ui-patterns/radio/radio-group.ts

@@ -21,7 +21,7 @@ interface SelectOptions {
 }
 
 /** Represents the required inputs for a radio group. */
-export type RadioGroupInputs<V> = ListNavigationInputs<RadioButtonPattern<V>> &
+export type RadioGroupInputs<V> = Omit<ListNavigationInputs<RadioButtonPattern<V>>, 'wrap'> &
   // Radio groups are always single-select.
   Omit<ListSelectionInputs<RadioButtonPattern<V>, V>, 'multi' | 'selectionMode'> &
   ListFocusInputs<RadioButtonPattern<V>> & {
@@ -115,12 +115,15 @@ export class RadioGroupPattern<V> {
     this.orientation = inputs.orientation;
 
     this.focusManager = new ListFocus(inputs);
-    this.navigation = new ListNavigation({...inputs, focusManager: this.focusManager});
+    this.navigation = new ListNavigation({
+      ...inputs,
+      wrap: () => false,
+      focusManager: this.focusManager,
+    });
     this.selection = new ListSelection({
       ...inputs,
-      // Radio groups are always single-select and selection follows focus.
-      multi: signal(false),
-      selectionMode: signal('follow'),
+      multi: () => false,
+      selectionMode: () => 'follow',
       focusManager: this.focusManager,
     });
   }