feat(cdk/bidi): add value signal to Directionality

Author: mmalerba

src/cdk/bidi/dir.ts

@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Directive, Output, Input, EventEmitter, AfterContentInit, OnDestroy} from '@angular/core';
+import {
+  AfterContentInit,
+  Directive,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  signal,
+} from '@angular/core';
 
 import {Direction, Directionality, _resolveDirectionality} from './directionality';
 
@@ -23,9 +31,6 @@ import {Direction, Directionality, _resolveDirectionality} from './directionalit
   exportAs: 'dir',
 })
 export class Dir implements Directionality, AfterContentInit, OnDestroy {
-  /** Normalized direction that accounts for invalid/unsupported values. */
-  private _dir: Direction = 'ltr';
-
   /** Whether the `value` has been set to its initial value. */
   private _isInitialized: boolean = false;
 
@@ -38,19 +43,19 @@ export class Dir implements Directionality, AfterContentInit, OnDestroy {
   /** @docs-private */
   @Input()
   get dir(): Direction {
-    return this._dir;
+    return this.valueSignal();
   }
   set dir(value: Direction | 'auto') {
-    const previousValue = this._dir;
+    const previousValue = this.valueSignal();
 
     // Note: `_resolveDirectionality` resolves the language based on the browser's language,
     // whereas the browser does it based on the content of the element. Since doing so based
     // on the content can be expensive, for now we're doing the simpler matching.
-    this._dir = _resolveDirectionality(value);
+    this.valueSignal.set(_resolveDirectionality(value));
     this._rawDir = value;
 
-    if (previousValue !== this._dir && this._isInitialized) {
-      this.change.emit(this._dir);
+    if (previousValue !== this.valueSignal() && this._isInitialized) {
+      this.change.emit(this.valueSignal());
     }
   }
 
@@ -59,6 +64,8 @@ export class Dir implements Directionality, AfterContentInit, OnDestroy {
     return this.dir;
   }
 
+  readonly valueSignal = signal<Direction>('ltr');
+
   /** Initialize once default value has been set. */
   ngAfterContentInit() {
     this._isInitialized = true;

src/cdk/bidi/directionality.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {EventEmitter, Injectable, OnDestroy, inject} from '@angular/core';
+import {EventEmitter, Injectable, OnDestroy, inject, signal} from '@angular/core';
 import {DIR_DOCUMENT} from './dir-document-token';
 
 export type Direction = 'ltr' | 'rtl';
@@ -33,7 +33,14 @@ export function _resolveDirectionality(rawValue: string): Direction {
 @Injectable({providedIn: 'root'})
 export class Directionality implements OnDestroy {
   /** The current 'ltr' or 'rtl' value. */
-  readonly value: Direction = 'ltr';
+  get value() {
+    return this.valueSignal();
+  }
+
+  /**
+   * The current 'ltr' or 'rtl' value.
+   */
+  readonly valueSignal = signal<Direction>('ltr');
 
   /** Stream that emits whenever the 'ltr' / 'rtl' state changes. */
   readonly change = new EventEmitter<Direction>();
@@ -46,7 +53,7 @@ export class Directionality implements OnDestroy {
     if (_document) {
       const bodyDir = _document.body ? _document.body.dir : null;
       const htmlDir = _document.documentElement ? _document.documentElement.dir : null;
-      this.value = _resolveDirectionality(bodyDir || htmlDir || 'ltr');
+      this.valueSignal.set(_resolveDirectionality(bodyDir || htmlDir || 'ltr'));
     }
   }
 

src/dev-app/dev-app/dev-app-directionality.ts

@@ -7,20 +7,21 @@
  */
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
+import {EventEmitter, Injectable, OnDestroy, signal} from '@angular/core';
 
 @Injectable()
 export class DevAppDirectionality implements Directionality, OnDestroy {
   readonly change = new EventEmitter<Direction>();
 
   get value(): Direction {
-    return this._value;
+    return this.valueSignal();
   }
   set value(value: Direction) {
-    this._value = value;
+    this.valueSignal.set(value);
     this.change.next(value);
   }
-  private _value: Direction = 'ltr';
+
+  valueSignal = signal<Direction>('ltr');
 
   ngOnDestroy() {
     this.change.complete();

src/material/datepicker/date-range-input.spec.ts

@@ -1,10 +1,10 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
-import {Directionality} from '@angular/cdk/bidi';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
-import {Component, Directive, ElementRef, Provider, Type, ViewChild} from '@angular/core';
-import {ComponentFixture, TestBed, fakeAsync, flush, inject, tick} from '@angular/core/testing';
+import {Component, Directive, ElementRef, Provider, signal, Type, ViewChild} from '@angular/core';
+import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {
   FormControl,
   FormGroup,
@@ -15,11 +15,11 @@ import {
   Validator,
   Validators,
 } from '@angular/forms';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Subscription} from 'rxjs';
 import {ErrorStateMatcher, MatNativeDateModule} from '../core';
 import {MatFormField, MatFormFieldModule, MatLabel} from '../form-field';
 import {MatInputModule} from '../input';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Subscription} from 'rxjs';
 import {MatDateRangeInput} from './date-range-input';
 import {MatEndDate, MatStartDate} from './date-range-input-parts';
 import {MatDateRangePicker} from './date-range-picker';
@@ -830,7 +830,7 @@ describe('MatDateRangeInput', () => {
 
   it('moves focus between fields with arrow keys when cursor is at edge (RTL)', () => {
     class RTL extends Directionality {
-      override readonly value = 'rtl';
+      override readonly valueSignal = signal<Direction>('rtl');
     }
     const fixture = createComponent(StandardRangePicker, [
       {