From 92f131fd293717a9c7090655fb3d427dde847c6b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 2 Sep 2024 09:35:43 +0200 Subject: [PATCH] refactor(multiple): switch experimental packages to inject Switches all the experimental packages to use `inject` instead of constructor-based injection. --- .../column-resize-flex.ts | 18 +++--- .../column-resize-directives/column-resize.ts | 18 +++--- .../default-enabled-column-resize-flex.ts | 18 +++--- .../default-enabled-column-resize.ts | 18 +++--- .../column-resize/event-dispatcher.ts | 6 +- .../column-resize/resize-strategy.ts | 32 ++++------ .../combobox/combobox-popup.ts | 10 ++-- src/cdk-experimental/combobox/combobox.ts | 28 ++++----- .../popover-edit/edit-event-dispatcher.ts | 6 +- src/cdk-experimental/popover-edit/edit-ref.ts | 11 ++-- .../popover-edit/edit-services.ts | 20 +++---- .../popover-edit/focus-dispatcher.ts | 6 +- .../popover-edit/focus-escape-notifier.ts | 14 ++--- .../popover-edit/lens-directives.ts | 24 ++++---- .../popover-edit/table-directives.ts | 58 +++++++++---------- .../selection/row-selection.ts | 6 +- src/cdk-experimental/selection/select-all.ts | 19 +++--- .../selection/selection-column.ts | 13 ++--- .../selection/selection-toggle.ts | 19 +++--- .../selection/selection.spec.ts | 34 +++++------ .../table-scroll-container.ts | 23 +++----- .../column-resize-flex.ts | 16 ++--- .../column-resize-directives/column-resize.ts | 16 ++--- .../default-enabled-column-resize-flex.ts | 16 ++--- .../default-enabled-column-resize.ts | 16 ++--- .../column-resize/overlay-handle.ts | 30 ++++------ .../default-enabled-resizable.ts | 38 +++++------- .../resizable-directives/resizable.ts | 38 +++++------- .../column-resize/resize-strategy.ts | 16 +---- .../selection/selection-column.ts | 13 ++--- 30 files changed, 239 insertions(+), 361 deletions(-) diff --git a/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts b/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts index 2cb252b60830..ec05a3870016 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import {CdkTable} from '@angular/cdk/table'; import {ColumnResize} from '../column-resize'; @@ -24,14 +24,10 @@ import {FLEX_PROVIDERS} from './constants'; standalone: true, }) export class CdkColumnResizeFlex extends ColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - protected readonly table: CdkTable, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); + protected readonly table = inject>(CdkTable); } diff --git a/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts b/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts index 167b39766f4a..b042e849d360 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import {CdkTable} from '@angular/cdk/table'; import {ColumnResize} from '../column-resize'; @@ -24,14 +24,10 @@ import {TABLE_PROVIDERS} from './constants'; standalone: true, }) export class CdkColumnResize extends ColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - protected readonly table: CdkTable, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); + protected readonly table = inject>(CdkTable); } diff --git a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts index a8e4689658b5..22697a0f70bc 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import {CdkTable} from '@angular/cdk/table'; import {ColumnResize} from '../column-resize'; @@ -27,14 +27,10 @@ import {FLEX_PROVIDERS} from './constants'; standalone: true, }) export class CdkDefaultEnabledColumnResizeFlex extends ColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - protected readonly table: CdkTable, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); + protected readonly table = inject>(CdkTable); } diff --git a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts index 9601fa719655..43d7068bec8b 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import {CdkTable} from '@angular/cdk/table'; import {ColumnResize} from '../column-resize'; @@ -27,14 +27,10 @@ import {TABLE_PROVIDERS} from './constants'; standalone: true, }) export class CdkDefaultEnabledColumnResize extends ColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - protected readonly table: CdkTable, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); + protected readonly table = inject>(CdkTable); } diff --git a/src/cdk-experimental/column-resize/event-dispatcher.ts b/src/cdk-experimental/column-resize/event-dispatcher.ts index 7ded3849d34d..2b6c43db5b43 100644 --- a/src/cdk-experimental/column-resize/event-dispatcher.ts +++ b/src/cdk-experimental/column-resize/event-dispatcher.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Injectable, NgZone} from '@angular/core'; +import {Injectable, NgZone, inject} from '@angular/core'; import {combineLatest, MonoTypeOperatorFunction, Observable, Subject} from 'rxjs'; import {distinctUntilChanged, map, share, skip, startWith} from 'rxjs/operators'; @@ -17,6 +17,8 @@ import {HEADER_ROW_SELECTOR} from './selectors'; /** Coordinates events between the column resize directives. */ @Injectable() export class HeaderRowEventDispatcher { + private readonly _ngZone = inject(NgZone); + /** * Emits the currently hovered header cell or null when no header cells are hovered. * Exposed publicly for events to feed in, but subscribers should use headerCellHoveredDistinct, @@ -30,8 +32,6 @@ export class HeaderRowEventDispatcher { */ readonly overlayHandleActiveForCell = new Subject(); - constructor(private readonly _ngZone: NgZone) {} - /** Distinct and shared version of headerCellHovered. */ readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share()); diff --git a/src/cdk-experimental/column-resize/resize-strategy.ts b/src/cdk-experimental/column-resize/resize-strategy.ts index aeeff842d49a..bac7c5186414 100644 --- a/src/cdk-experimental/column-resize/resize-strategy.ts +++ b/src/cdk-experimental/column-resize/resize-strategy.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Inject, Injectable, OnDestroy, Provider, CSP_NONCE, Optional} from '@angular/core'; +import {Injectable, OnDestroy, Provider, CSP_NONCE, inject} from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {coerceCssPixelValue} from '@angular/cdk/coercion'; import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table'; @@ -77,14 +77,9 @@ export abstract class ResizeStrategy { */ @Injectable() export class TableLayoutFixedResizeStrategy extends ResizeStrategy { - constructor( - protected readonly columnResize: ColumnResize, - @Inject(_COALESCED_STYLE_SCHEDULER) - protected readonly styleScheduler: _CoalescedStyleScheduler, - protected readonly table: CdkTable, - ) { - super(); - } + protected readonly columnResize = inject(ColumnResize); + protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER); + protected readonly table = inject>(CdkTable); applyColumnSize( _: string, @@ -128,7 +123,12 @@ export class TableLayoutFixedResizeStrategy extends ResizeStrategy { */ @Injectable() export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDestroy { - private readonly _document: Document; + protected readonly columnResize = inject(ColumnResize); + protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER); + protected readonly table = inject>(CdkTable); + private readonly _nonce = inject(CSP_NONCE, {optional: true}); + + private readonly _document = inject(DOCUMENT); private readonly _columnIndexes = new Map(); private readonly _columnProperties = new Map>(); @@ -138,18 +138,6 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest protected readonly defaultMinSize = 0; protected readonly defaultMaxSize = Number.MAX_SAFE_INTEGER; - constructor( - protected readonly columnResize: ColumnResize, - @Inject(_COALESCED_STYLE_SCHEDULER) - protected readonly styleScheduler: _CoalescedStyleScheduler, - protected readonly table: CdkTable, - @Inject(DOCUMENT) document: any, - @Inject(CSP_NONCE) @Optional() private readonly _nonce?: string | null, - ) { - super(); - this._document = document; - } - applyColumnSize( cssFriendlyColumnName: string, columnHeader: HTMLElement, diff --git a/src/cdk-experimental/combobox/combobox-popup.ts b/src/cdk-experimental/combobox/combobox-popup.ts index 90aa3e99d069..6270156e1dc9 100644 --- a/src/cdk-experimental/combobox/combobox-popup.ts +++ b/src/cdk-experimental/combobox/combobox-popup.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, Inject, Input, OnInit} from '@angular/core'; +import {Directive, ElementRef, Input, OnInit, inject} from '@angular/core'; import {AriaHasPopupValue, CDK_COMBOBOX, CdkCombobox} from './combobox'; let nextId = 0; @@ -24,6 +24,9 @@ let nextId = 0; standalone: true, }) export class CdkComboboxPopup implements OnInit { + private readonly _elementRef = inject>(ElementRef); + private readonly _combobox = inject(CDK_COMBOBOX); + @Input() get role(): AriaHasPopupValue { return this._role; @@ -44,11 +47,6 @@ export class CdkComboboxPopup implements OnInit { @Input() id = `cdk-combobox-popup-${nextId++}`; - constructor( - private readonly _elementRef: ElementRef, - @Inject(CDK_COMBOBOX) private readonly _combobox: CdkCombobox, - ) {} - ngOnInit() { this.registerWithPanel(); } diff --git a/src/cdk-experimental/combobox/combobox.ts b/src/cdk-experimental/combobox/combobox.ts index e04a5a33aa84..0c3bf2aca942 100644 --- a/src/cdk-experimental/combobox/combobox.ts +++ b/src/cdk-experimental/combobox/combobox.ts @@ -23,12 +23,10 @@ import { Directive, ElementRef, EventEmitter, - Inject, InjectionToken, Injector, Input, OnDestroy, - Optional, Output, TemplateRef, ViewContainerRef, @@ -63,6 +61,16 @@ export const CDK_COMBOBOX = new InjectionToken('CDK_COMBOBOX'); standalone: true, }) export class CdkCombobox implements OnDestroy { + private readonly _elementRef = inject>(ElementRef); + private readonly _overlay = inject(Overlay); + protected readonly _viewContainerRef = inject(ViewContainerRef); + private readonly _injector = inject(Injector); + private readonly _doc = inject(DOCUMENT); + private readonly _directionality = inject(Directionality, {optional: true}); + private _changeDetectorRef = inject(ChangeDetectorRef); + private _overlayRef: OverlayRef; + private _panelPortal: TemplatePortal; + @Input('cdkComboboxTriggerFor') _panelTemplateRef: TemplateRef; @@ -103,23 +111,9 @@ export class CdkCombobox implements OnDestroy { T[] >(); - private _overlayRef: OverlayRef; - private _panelPortal: TemplatePortal; - contentId: string = ''; contentType: AriaHasPopupValue; - private _changeDetectorRef = inject(ChangeDetectorRef); - - constructor( - private readonly _elementRef: ElementRef, - private readonly _overlay: Overlay, - protected readonly _viewContainerRef: ViewContainerRef, - private readonly _injector: Injector, - @Inject(DOCUMENT) private readonly _doc: any, - @Optional() private readonly _directionality?: Directionality, - ) {} - ngOnDestroy() { if (this._overlayRef) { this._overlayRef.dispose(); @@ -260,7 +254,7 @@ export class CdkCombobox implements OnDestroy { return new OverlayConfig({ positionStrategy: this._getOverlayPositionStrategy(), scrollStrategy: this._overlay.scrollStrategies.block(), - direction: this._directionality, + direction: this._directionality || undefined, }); } diff --git a/src/cdk-experimental/popover-edit/edit-event-dispatcher.ts b/src/cdk-experimental/popover-edit/edit-event-dispatcher.ts index cc9999a3bedc..6457b1d425ae 100644 --- a/src/cdk-experimental/popover-edit/edit-event-dispatcher.ts +++ b/src/cdk-experimental/popover-edit/edit-event-dispatcher.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Injectable, NgZone} from '@angular/core'; +import {Injectable, NgZone, inject} from '@angular/core'; import {combineLatest, MonoTypeOperatorFunction, Observable, pipe, Subject} from 'rxjs'; import { audit, @@ -50,6 +50,8 @@ export enum HoverContentState { */ @Injectable() export class EditEventDispatcher { + private readonly _ngZone = inject(NgZone); + /** A subject that indicates which table cell is currently editing (unless it is disabled). */ readonly editing = new Subject(); @@ -155,7 +157,7 @@ export class EditEventDispatcher { private _lastSeenRow: Element | null = null; private _lastSeenRowHoverOrFocus: Observable | null = null; - constructor(private readonly _ngZone: NgZone) { + constructor() { this._editingAndEnabledDistinct.subscribe(cell => { this._currentlyEditing = cell; }); diff --git a/src/cdk-experimental/popover-edit/edit-ref.ts b/src/cdk-experimental/popover-edit/edit-ref.ts index 0d4e93e77557..d96132955de6 100644 --- a/src/cdk-experimental/popover-edit/edit-ref.ts +++ b/src/cdk-experimental/popover-edit/edit-ref.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Injectable, OnDestroy, Self, afterNextRender, inject, Injector} from '@angular/core'; +import {Injectable, OnDestroy, afterNextRender, inject, Injector} from '@angular/core'; import {ControlContainer} from '@angular/forms'; import {Observable, Subject} from 'rxjs'; @@ -18,6 +18,10 @@ import {EditEventDispatcher} from './edit-event-dispatcher'; */ @Injectable() export class EditRef implements OnDestroy { + private readonly _form = inject(ControlContainer, {self: true}); + private readonly _editEventDispatcher = + inject>>(EditEventDispatcher); + /** Emits the final value of this edit instance before closing. */ private readonly _finalValueSubject = new Subject(); readonly finalValue: Observable = this._finalValueSubject; @@ -31,10 +35,7 @@ export class EditRef implements OnDestroy { private _injector = inject(Injector); - constructor( - @Self() private readonly _form: ControlContainer, - private readonly _editEventDispatcher: EditEventDispatcher>, - ) { + constructor() { this._editEventDispatcher.setActiveEditRef(this); } diff --git a/src/cdk-experimental/popover-edit/edit-services.ts b/src/cdk-experimental/popover-edit/edit-services.ts index 09693c23eea4..1b833c85cdef 100644 --- a/src/cdk-experimental/popover-edit/edit-services.ts +++ b/src/cdk-experimental/popover-edit/edit-services.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Injectable, NgZone} from '@angular/core'; +import {Injectable, NgZone, inject} from '@angular/core'; import {FocusTrapFactory} from '@angular/cdk/a11y'; import {Directionality} from '@angular/cdk/bidi'; import {Overlay} from '@angular/cdk/overlay'; @@ -24,14 +24,12 @@ import {EditRef} from './edit-ref'; */ @Injectable() export class EditServices { - constructor( - readonly directionality: Directionality, - readonly editEventDispatcher: EditEventDispatcher>, - readonly focusDispatcher: FocusDispatcher, - readonly focusTrapFactory: FocusTrapFactory, - readonly ngZone: NgZone, - readonly overlay: Overlay, - readonly scrollDispatcher: ScrollDispatcher, - readonly viewportRuler: ViewportRuler, - ) {} + readonly directionality = inject(Directionality); + readonly editEventDispatcher = inject>>(EditEventDispatcher); + readonly focusDispatcher = inject(FocusDispatcher); + readonly focusTrapFactory = inject(FocusTrapFactory); + readonly ngZone = inject(NgZone); + readonly overlay = inject(Overlay); + readonly scrollDispatcher = inject(ScrollDispatcher); + readonly viewportRuler = inject(ViewportRuler); } diff --git a/src/cdk-experimental/popover-edit/focus-dispatcher.ts b/src/cdk-experimental/popover-edit/focus-dispatcher.ts index b29f784ace4f..f9abdf00f8c0 100644 --- a/src/cdk-experimental/popover-edit/focus-dispatcher.ts +++ b/src/cdk-experimental/popover-edit/focus-dispatcher.ts @@ -8,7 +8,7 @@ import {Directionality} from '@angular/cdk/bidi'; import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW} from '@angular/cdk/keycodes'; -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {PartialObserver} from 'rxjs'; import {EDITABLE_CELL_SELECTOR, ROW_SELECTOR, TABLE_SELECTOR} from './constants'; @@ -20,10 +20,12 @@ import {closest} from './polyfill'; */ @Injectable({providedIn: 'root'}) export class FocusDispatcher { + protected readonly directionality = inject(Directionality); + /** Observes keydown events triggered from the table. */ readonly keyObserver: PartialObserver; - constructor(protected readonly directionality: Directionality) { + constructor() { this.keyObserver = {next: event => this.handleKeyboardEvent(event)}; } diff --git a/src/cdk-experimental/popover-edit/focus-escape-notifier.ts b/src/cdk-experimental/popover-edit/focus-escape-notifier.ts index 970c79c784d5..3260d564da9b 100644 --- a/src/cdk-experimental/popover-edit/focus-escape-notifier.ts +++ b/src/cdk-experimental/popover-edit/focus-escape-notifier.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Inject, Injectable, NgZone} from '@angular/core'; +import {Injectable, NgZone, inject} from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {FocusTrap, InteractivityChecker} from '@angular/cdk/a11y'; import {Observable, Subject} from 'rxjs'; @@ -54,15 +54,9 @@ export class FocusEscapeNotifier extends FocusTrap { /** Factory that allows easy instantiation of focus escape notifiers. */ @Injectable({providedIn: 'root'}) export class FocusEscapeNotifierFactory { - private _document: Document; - - constructor( - private _checker: InteractivityChecker, - private _ngZone: NgZone, - @Inject(DOCUMENT) _document: any, - ) { - this._document = _document; - } + private _checker = inject(InteractivityChecker); + private _ngZone = inject(NgZone); + private _document = inject(DOCUMENT); /** * Creates a focus escape notifier region around the given element. diff --git a/src/cdk-experimental/popover-edit/lens-directives.ts b/src/cdk-experimental/popover-edit/lens-directives.ts index 4a6cb4f54c5f..0b4548d740fb 100644 --- a/src/cdk-experimental/popover-edit/lens-directives.ts +++ b/src/cdk-experimental/popover-edit/lens-directives.ts @@ -7,7 +7,7 @@ */ import {Subject} from 'rxjs'; -import {Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Input} from '@angular/core'; +import {Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Input, inject} from '@angular/core'; import {hasModifierKey} from '@angular/cdk/keycodes'; import {EDIT_PANE_SELECTOR} from './constants'; import {closest} from './polyfill'; @@ -39,6 +39,9 @@ export type PopoverEditClickOutBehavior = 'close' | 'submit' | 'noop'; standalone: true, }) export class CdkEditControl implements OnDestroy, OnInit { + protected readonly elementRef = inject(ElementRef); + readonly editRef = inject>(EditRef); + protected readonly destroyed = new Subject(); /** @@ -61,11 +64,6 @@ export class CdkEditControl implements OnDestroy, OnInit { */ ignoreSubmitUnlessValid = true; - constructor( - protected readonly elementRef: ElementRef, - readonly editRef: EditRef, - ) {} - ngOnInit(): void { this.editRef.init(this.preservedFormValue); this.editRef.finalValue.subscribe(this.preservedFormValueChange); @@ -150,11 +148,11 @@ export class CdkEditControl implements OnDestroy, OnInit { standalone: true, }) export class CdkEditRevert { + protected readonly editRef = inject>(EditRef); + /** Type of the button. Defaults to `button` to avoid accident form submits. */ @Input() type: string = 'button'; - constructor(protected readonly editRef: EditRef) {} - revertEdit(): void { this.editRef.reset(); } @@ -171,11 +169,11 @@ export class CdkEditRevert { standalone: true, }) export class CdkEditClose { - constructor( - protected readonly elementRef: ElementRef, - protected readonly editRef: EditRef, - ) { - const nativeElement = elementRef.nativeElement; + protected readonly elementRef = inject>(ElementRef); + protected readonly editRef = inject>(EditRef); + + constructor() { + const nativeElement = this.elementRef.nativeElement; // Prevent accidental form submits. if (nativeElement.nodeName === 'BUTTON' && !nativeElement.getAttribute('type')) { diff --git a/src/cdk-experimental/popover-edit/table-directives.ts b/src/cdk-experimental/popover-edit/table-directives.ts index 916e55807528..601576189d75 100644 --- a/src/cdk-experimental/popover-edit/table-directives.ts +++ b/src/cdk-experimental/popover-edit/table-directives.ts @@ -18,6 +18,7 @@ import { OnDestroy, TemplateRef, ViewContainerRef, + inject, } from '@angular/core'; import {fromEvent, fromEventPattern, merge, Subject} from 'rxjs'; import { @@ -68,16 +69,17 @@ const MOUSE_MOVE_THROTTLE_TIME_MS = 10; standalone: true, }) export class CdkEditable implements AfterViewInit, OnDestroy { + protected readonly elementRef = inject(ElementRef); + protected readonly editEventDispatcher = + inject>>(EditEventDispatcher); + protected readonly focusDispatcher = inject(FocusDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly destroyed = new Subject(); private _rendered = new Subject(); - constructor( - protected readonly elementRef: ElementRef, - protected readonly editEventDispatcher: EditEventDispatcher>, - protected readonly focusDispatcher: FocusDispatcher, - protected readonly ngZone: NgZone, - ) { + constructor() { afterRender(() => { this._rendered.next(); }); @@ -191,6 +193,10 @@ const POPOVER_EDIT_INPUTS = [ standalone: true, }) export class CdkPopoverEdit implements AfterViewInit, OnDestroy { + protected readonly services = inject(EditServices); + protected readonly elementRef = inject(ElementRef); + protected readonly viewContainerRef = inject(ViewContainerRef); + /** The edit lens template shown over the cell on edit. */ template: TemplateRef | null = null; @@ -244,12 +250,6 @@ export class CdkPopoverEdit implements AfterViewInit, OnDestroy { protected overlayRef?: OverlayRef; protected readonly destroyed = new Subject(); - constructor( - protected readonly services: EditServices, - protected readonly elementRef: ElementRef, - protected readonly viewContainerRef: ViewContainerRef, - ) {} - ngAfterViewInit(): void { this._startListeningToEditEvents(); } @@ -418,16 +418,9 @@ export class CdkPopoverEdit implements AfterViewInit, OnDestroy { standalone: true, }) export class CdkPopoverEditTabOut extends CdkPopoverEdit { - protected override focusTrap?: FocusEscapeNotifier = undefined; + protected readonly focusEscapeNotifierFactory = inject(FocusEscapeNotifierFactory); - constructor( - elementRef: ElementRef, - viewContainerRef: ViewContainerRef, - services: EditServices, - protected readonly focusEscapeNotifierFactory: FocusEscapeNotifierFactory, - ) { - super(services, elementRef, viewContainerRef); - } + protected override focusTrap?: FocusEscapeNotifier = undefined; protected override initFocusTrap(): void { this.focusTrap = this.focusEscapeNotifierFactory.create(this.overlayRef!.overlayElement); @@ -456,18 +449,16 @@ export class CdkPopoverEditTabOut extends CdkPopoverEdit { standalone: true, }) export class CdkRowHoverContent implements AfterViewInit, OnDestroy { + protected readonly services = inject(EditServices); + protected readonly elementRef = inject(ElementRef); + protected readonly templateRef = inject>(TemplateRef); + protected readonly viewContainerRef = inject(ViewContainerRef); + protected readonly destroyed = new Subject(); protected viewRef: EmbeddedViewRef | null = null; private _row?: Element; - constructor( - protected readonly services: EditServices, - protected readonly elementRef: ElementRef, - protected readonly templateRef: TemplateRef, - protected readonly viewContainerRef: ViewContainerRef, - ) {} - ngAfterViewInit(): void { this._row = closest(this.elementRef.nativeElement!, ROW_SELECTOR)!; @@ -553,10 +544,13 @@ export class CdkRowHoverContent implements AfterViewInit, OnDestroy { standalone: true, }) export class CdkEditOpen { - constructor( - protected readonly elementRef: ElementRef, - protected readonly editEventDispatcher: EditEventDispatcher>, - ) { + protected readonly elementRef = inject>(ElementRef); + protected readonly editEventDispatcher = + inject>>(EditEventDispatcher); + + constructor() { + const elementRef = this.elementRef; + const nativeElement = elementRef.nativeElement; // Prevent accidental form submits. diff --git a/src/cdk-experimental/selection/row-selection.ts b/src/cdk-experimental/selection/row-selection.ts index c09c48a278fb..7f16da7492e9 100644 --- a/src/cdk-experimental/selection/row-selection.ts +++ b/src/cdk-experimental/selection/row-selection.ts @@ -7,7 +7,7 @@ */ import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion'; -import {Directive, Input} from '@angular/core'; +import {Directive, Input, inject} from '@angular/core'; import {CdkSelection} from './selection'; @@ -27,6 +27,8 @@ import {CdkSelection} from './selection'; standalone: true, }) export class CdkRowSelection { + readonly _selection = inject>(CdkSelection); + // We need an initializer here to avoid a TS error. @Input('cdkRowSelectionValue') value: T = undefined!; @@ -38,6 +40,4 @@ export class CdkRowSelection { this._index = coerceNumberProperty(index); } protected _index?: number; - - constructor(readonly _selection: CdkSelection) {} } diff --git a/src/cdk-experimental/selection/select-all.ts b/src/cdk-experimental/selection/select-all.ts index 566055652347..2b629e8d94ce 100644 --- a/src/cdk-experimental/selection/select-all.ts +++ b/src/cdk-experimental/selection/select-all.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, Inject, OnDestroy, OnInit, Optional, Self} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; +import {Directive, OnDestroy, OnInit, inject} from '@angular/core'; +import {NG_VALUE_ACCESSOR} from '@angular/forms'; import {Observable, of as observableOf, Subject} from 'rxjs'; import {switchMap, takeUntil} from 'rxjs/operators'; @@ -29,6 +29,9 @@ import {CdkSelection} from './selection'; standalone: true, }) export class CdkSelectAll implements OnDestroy, OnInit { + private readonly _selection = inject>(CdkSelection, {optional: true})!; + private readonly _controlValueAccessor = inject(NG_VALUE_ACCESSOR, {optional: true, self: true}); + /** * The checked state of the toggle. * Resolves to `true` if all the values are selected, `false` if no value is selected. @@ -63,13 +66,9 @@ export class CdkSelectAll implements OnDestroy, OnInit { private readonly _destroyed = new Subject(); - constructor( - @Optional() @Inject(CdkSelection) private readonly _selection: CdkSelection, - @Optional() - @Self() - @Inject(NG_VALUE_ACCESSOR) - private readonly _controlValueAccessor: ControlValueAccessor[], - ) { + constructor() { + const _selection = this._selection; + this.checked = _selection.change.pipe( switchMap(() => observableOf(_selection.isAllSelected())), ); @@ -92,7 +91,7 @@ export class CdkSelectAll implements OnDestroy, OnInit { } }); this.checked.pipe(takeUntil(this._destroyed)).subscribe(state => { - this._controlValueAccessor[0].writeValue(state); + this._controlValueAccessor![0].writeValue(state); }); } } diff --git a/src/cdk-experimental/selection/selection-column.ts b/src/cdk-experimental/selection/selection-column.ts index 5f7c651b360c..ca1f3f290689 100644 --- a/src/cdk-experimental/selection/selection-column.ts +++ b/src/cdk-experimental/selection/selection-column.ts @@ -12,11 +12,10 @@ import { Input, OnDestroy, OnInit, - Optional, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, - Inject, + inject, } from '@angular/core'; import {CdkSelection} from './selection'; @@ -35,7 +34,7 @@ import {CdkSelectAll} from './select-all'; template: ` - @if (selection.multiple) { + @if (selection && selection.multiple) { implements OnInit, OnDestroy { + private _table = inject>(CdkTable, {optional: true}); + readonly selection = inject>(CdkSelection, {optional: true}); + /** Column name that should be used to reference this column. */ @Input('cdkSelectionColumnName') get name(): string { @@ -84,11 +86,6 @@ export class CdkSelectionColumn implements OnInit, OnDestroy { @ViewChild(CdkCellDef, {static: true}) private readonly _cell: CdkCellDef; @ViewChild(CdkHeaderCellDef, {static: true}) private readonly _headerCell: CdkHeaderCellDef; - constructor( - @Optional() @Inject(CdkTable) private _table: CdkTable, - @Optional() @Inject(CdkSelection) readonly selection: CdkSelection, - ) {} - ngOnInit() { if (!this.selection && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('CdkSelectionColumn: missing CdkSelection in the parent'); diff --git a/src/cdk-experimental/selection/selection-toggle.ts b/src/cdk-experimental/selection/selection-toggle.ts index 4bee76beb873..c8f5ebd2622c 100644 --- a/src/cdk-experimental/selection/selection-toggle.ts +++ b/src/cdk-experimental/selection/selection-toggle.ts @@ -7,8 +7,8 @@ */ import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion'; -import {Directive, Inject, Input, OnDestroy, OnInit, Optional, Self} from '@angular/core'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; +import {Directive, Input, OnDestroy, OnInit, inject} from '@angular/core'; +import {NG_VALUE_ACCESSOR} from '@angular/forms'; import {Observable, of as observableOf, Subject} from 'rxjs'; import {distinctUntilChanged, switchMap, takeUntil} from 'rxjs/operators'; @@ -30,6 +30,9 @@ import {CdkSelection} from './selection'; standalone: true, }) export class CdkSelectionToggle implements OnDestroy, OnInit { + private _selection = inject>(CdkSelection, {optional: true})!; + private _controlValueAccessors = inject(NG_VALUE_ACCESSOR, {optional: true, self: true}); + /** The value that is associated with the toggle */ @Input('cdkSelectionToggleValue') value: T; @@ -53,13 +56,9 @@ export class CdkSelectionToggle implements OnDestroy, OnInit { private _destroyed = new Subject(); - constructor( - @Optional() @Inject(CdkSelection) private _selection: CdkSelection, - @Optional() - @Self() - @Inject(NG_VALUE_ACCESSOR) - private _controlValueAccessors: ControlValueAccessor[], - ) { + constructor() { + const _selection = this._selection; + this.checked = _selection.change.pipe( switchMap(() => observableOf(this._isSelected())), distinctUntilChanged(), @@ -91,7 +90,7 @@ export class CdkSelectionToggle implements OnDestroy, OnInit { }); this.checked.pipe(takeUntil(this._destroyed)).subscribe(state => { - this._controlValueAccessors[0].writeValue(state); + this._controlValueAccessors![0].writeValue(state); }); } } diff --git a/src/cdk-experimental/selection/selection.spec.ts b/src/cdk-experimental/selection/selection.spec.ts index 8fe14dc688cc..1661251b78be 100644 --- a/src/cdk-experimental/selection/selection.spec.ts +++ b/src/cdk-experimental/selection/selection.spec.ts @@ -1,6 +1,6 @@ import {AsyncPipe} from '@angular/common'; import {CdkTableModule} from '@angular/cdk/table'; -import {ChangeDetectorRef, Component, ElementRef, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, ElementRef, ViewChild, inject} from '@angular/core'; import {waitForAsync, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing'; import {CdkSelection} from './selection'; @@ -456,17 +456,15 @@ describe('cdkSelectionColumn with multiple = false', () => { imports: [CdkSelectionModule, AsyncPipe], }) class ListWithMultiSelection { + private readonly _elementRef = inject(ElementRef); + private readonly _cdr = inject(ChangeDetectorRef); + @ViewChild(CdkSelection) cdkSelection: CdkSelection; data = ['apple', 'banana', 'cherry', 'durian']; selectionChange?: SelectionChange; - constructor( - private readonly _elementRef: ElementRef, - private readonly _cdr: ChangeDetectorRef, - ) {} - selectAllState(indeterminateState: boolean | null, checkedState: boolean | null): string { if (indeterminateState) { return 'indeterminate'; @@ -523,6 +521,9 @@ class ListWithMultiSelection { imports: [CdkSelectionModule, AsyncPipe], }) class ListWithSingleSelection { + private readonly _elementRef = inject(ElementRef); + private readonly _cdr = inject(ChangeDetectorRef); + @ViewChild(CdkSelection) cdkSelection: CdkSelection; data = ['apple', 'banana', 'cherry', 'durian']; @@ -539,11 +540,6 @@ class ListWithSingleSelection { this._cdr.detectChanges(); } - constructor( - private readonly _elementRef: ElementRef, - private readonly _cdr: ChangeDetectorRef, - ) {} - getSelectionToggle(index: number) { return this._elementRef.nativeElement.querySelectorAll('[cdkselectiontoggle]')[index]; } @@ -567,6 +563,9 @@ class ListWithSingleSelection { imports: [CdkSelectionModule, CdkTableModule], }) class MultiSelectTableWithSelectionColumn { + readonly elementRef = inject(ElementRef); + private readonly _cdr = inject(ChangeDetectorRef); + @ViewChild(CdkSelection) cdkSelection: CdkSelection; columns = ['select', 'name']; @@ -601,11 +600,6 @@ class MultiSelectTableWithSelectionColumn { flush(); } - constructor( - readonly elementRef: ElementRef, - private readonly _cdr: ChangeDetectorRef, - ) {} - getSelectAll(): HTMLInputElement { return this.elementRef.nativeElement.querySelector('input[cdkselectall]'); } @@ -637,6 +631,9 @@ class MultiSelectTableWithSelectionColumn { imports: [CdkSelectionModule, CdkTableModule], }) class SingleSelectTableWithSelectionColumn { + readonly elementRef = inject(ElementRef); + private readonly _cdr = inject(ChangeDetectorRef); + @ViewChild(CdkSelection) cdkSelection: CdkSelection; columns = ['select', 'name']; @@ -654,11 +651,6 @@ class SingleSelectTableWithSelectionColumn { flush(); } - constructor( - readonly elementRef: ElementRef, - private readonly _cdr: ChangeDetectorRef, - ) {} - getSelectionToggle(index: number): HTMLInputElement { return this.elementRef.nativeElement.querySelectorAll('input[cdkselectiontoggle]')[index]; } diff --git a/src/cdk-experimental/table-scroll-container/table-scroll-container.ts b/src/cdk-experimental/table-scroll-container/table-scroll-container.ts index 89d164f57956..23b9c58f75b4 100644 --- a/src/cdk-experimental/table-scroll-container/table-scroll-container.ts +++ b/src/cdk-experimental/table-scroll-container/table-scroll-container.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {CSP_NONCE, Directive, ElementRef, Inject, OnDestroy, OnInit, Optional} from '@angular/core'; +import {CSP_NONCE, Directive, ElementRef, OnDestroy, OnInit, inject} from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {Directionality} from '@angular/cdk/bidi'; import {_getShadowRoot} from '@angular/cdk/platform'; @@ -39,7 +39,12 @@ let nextId = 0; standalone: true, }) export class CdkTableScrollContainer implements StickyPositioningListener, OnDestroy, OnInit { - private readonly _uniqueClassName: string; + private readonly _elementRef = inject>(ElementRef); + private readonly _document = inject(DOCUMENT); + private readonly _directionality = inject(Directionality, {optional: true}); + private readonly _nonce = inject(CSP_NONCE, {optional: true}); + + private readonly _uniqueClassName = `cdk-table-scroll-container-${++nextId}`; private _styleRoot!: Node; private _styleElement?: HTMLStyleElement; @@ -49,20 +54,8 @@ export class CdkTableScrollContainer implements StickyPositioningListener, OnDes private _headerSizes: StickySize[] = []; private _footerSizes: StickySize[] = []; - constructor( - private readonly _elementRef: ElementRef, - @Inject(DOCUMENT) private readonly _document: Document, - @Optional() private readonly _directionality?: Directionality, - @Optional() @Inject(CSP_NONCE) private readonly _nonce?: string | null, - ) { - this._uniqueClassName = `cdk-table-scroll-container-${++nextId}`; - _elementRef.nativeElement.classList.add(this._uniqueClassName); - } - ngOnInit() { - // Note that we need to look up the root node in ngOnInit, rather than the constructor, because - // Angular seems to create the element outside the shadow root and then moves it inside, if the - // node is inside an `ngIf` and a ShadowDom-encapsulated component. + this._elementRef.nativeElement.classList.add(this._uniqueClassName); this._styleRoot = _getShadowRoot(this._elementRef.nativeElement) ?? this._document.head; } diff --git a/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts b/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts index aa8bec4a92ed..d4179165356c 100644 --- a/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts +++ b/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import { ColumnResize, ColumnResizeNotifier, @@ -27,13 +27,9 @@ import {AbstractMatColumnResize, FLEX_HOST_BINDINGS, FLEX_PROVIDERS} from './com standalone: true, }) export class MatColumnResizeFlex extends AbstractMatColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); } diff --git a/src/material-experimental/column-resize/column-resize-directives/column-resize.ts b/src/material-experimental/column-resize/column-resize-directives/column-resize.ts index 3c7cc70fa650..32b15f71c118 100644 --- a/src/material-experimental/column-resize/column-resize-directives/column-resize.ts +++ b/src/material-experimental/column-resize/column-resize-directives/column-resize.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import { ColumnResize, ColumnResizeNotifier, @@ -27,13 +27,9 @@ import {AbstractMatColumnResize, TABLE_HOST_BINDINGS, TABLE_PROVIDERS} from './c standalone: true, }) export class MatColumnResize extends AbstractMatColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); } diff --git a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts index 8ff5364dd2a3..e86120ab037b 100644 --- a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts +++ b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import { ColumnResize, ColumnResizeNotifier, @@ -30,13 +30,9 @@ import {AbstractMatColumnResize, FLEX_HOST_BINDINGS, FLEX_PROVIDERS} from './com standalone: true, }) export class MatDefaultEnabledColumnResizeFlex extends AbstractMatColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); } diff --git a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts index 9aa4f8134b97..053288145992 100644 --- a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts +++ b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import {Directive, ElementRef, NgZone, inject} from '@angular/core'; import { ColumnResize, ColumnResizeNotifier, @@ -30,13 +30,9 @@ import {AbstractMatColumnResize, TABLE_HOST_BINDINGS, TABLE_PROVIDERS} from './c standalone: true, }) export class MatDefaultEnabledColumnResize extends AbstractMatColumnResize { - constructor( - readonly columnResizeNotifier: ColumnResizeNotifier, - readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly notifier: ColumnResizeNotifierSource, - ) { - super(); - } + readonly columnResizeNotifier = inject(ColumnResizeNotifier); + readonly elementRef = inject>(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly notifier = inject(ColumnResizeNotifierSource); } diff --git a/src/material-experimental/column-resize/overlay-handle.ts b/src/material-experimental/column-resize/overlay-handle.ts index ed944e684b24..9712316b4902 100644 --- a/src/material-experimental/column-resize/overlay-handle.ts +++ b/src/material-experimental/column-resize/overlay-handle.ts @@ -10,10 +10,10 @@ import { ChangeDetectionStrategy, Component, ElementRef, - Inject, NgZone, ViewChild, ViewEncapsulation, + inject, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import { @@ -44,27 +44,19 @@ import {AbstractMatColumnResize} from './column-resize-directives/common'; standalone: true, }) export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle { - protected readonly document: Document; + protected readonly columnDef = inject(CdkColumnDef); + protected readonly columnResize = inject(ColumnResize); + protected readonly directionality = inject(Directionality); + protected readonly elementRef = inject(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly ngZone = inject(NgZone); + protected readonly resizeNotifier = inject(ColumnResizeNotifierSource); + protected readonly resizeRef = inject(ResizeRef); + protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER); + protected readonly document = inject(DOCUMENT); @ViewChild('top', {static: true}) topElement: ElementRef; - constructor( - protected readonly columnDef: CdkColumnDef, - protected readonly columnResize: ColumnResize, - protected readonly directionality: Directionality, - protected readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly ngZone: NgZone, - protected readonly resizeNotifier: ColumnResizeNotifierSource, - protected readonly resizeRef: ResizeRef, - @Inject(_COALESCED_STYLE_SCHEDULER) - protected readonly styleScheduler: _CoalescedStyleScheduler, - @Inject(DOCUMENT) document: any, - ) { - super(); - this.document = document; - } - protected override updateResizeActive(active: boolean): void { super.updateResizeActive(active); diff --git a/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts b/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts index 774dfbdd8313..e67f1d61bcba 100644 --- a/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts +++ b/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts @@ -9,11 +9,11 @@ import { Directive, ElementRef, - Inject, Injector, NgZone, ViewContainerRef, ChangeDetectorRef, + inject, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {Directionality} from '@angular/cdk/bidi'; @@ -43,26 +43,18 @@ import {AbstractMatResizable, RESIZABLE_HOST_BINDINGS, RESIZABLE_INPUTS} from '. standalone: true, }) export class MatDefaultResizable extends AbstractMatResizable { - protected readonly document: Document; - - constructor( - protected readonly columnDef: CdkColumnDef, - protected readonly columnResize: ColumnResize, - protected readonly directionality: Directionality, - @Inject(DOCUMENT) document: any, - protected readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly injector: Injector, - protected readonly ngZone: NgZone, - protected readonly overlay: Overlay, - protected readonly resizeNotifier: ColumnResizeNotifierSource, - protected readonly resizeStrategy: ResizeStrategy, - @Inject(_COALESCED_STYLE_SCHEDULER) - protected readonly styleScheduler: _CoalescedStyleScheduler, - protected readonly viewContainerRef: ViewContainerRef, - protected readonly changeDetectorRef: ChangeDetectorRef, - ) { - super(); - this.document = document; - } + protected readonly columnDef = inject(CdkColumnDef); + protected readonly columnResize = inject(ColumnResize); + protected readonly directionality = inject(Directionality); + protected readonly elementRef = inject(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly injector = inject(Injector); + protected readonly ngZone = inject(NgZone); + protected readonly overlay = inject(Overlay); + protected readonly resizeNotifier = inject(ColumnResizeNotifierSource); + protected readonly resizeStrategy = inject(ResizeStrategy); + protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER); + protected readonly viewContainerRef = inject(ViewContainerRef); + protected readonly changeDetectorRef = inject(ChangeDetectorRef); + protected readonly document = inject(DOCUMENT); } diff --git a/src/material-experimental/column-resize/resizable-directives/resizable.ts b/src/material-experimental/column-resize/resizable-directives/resizable.ts index 5ed52c6e3b21..169adf5d4ffb 100644 --- a/src/material-experimental/column-resize/resizable-directives/resizable.ts +++ b/src/material-experimental/column-resize/resizable-directives/resizable.ts @@ -9,11 +9,11 @@ import { Directive, ElementRef, - Inject, Injector, NgZone, ViewContainerRef, ChangeDetectorRef, + inject, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {Directionality} from '@angular/cdk/bidi'; @@ -42,26 +42,18 @@ import {AbstractMatResizable, RESIZABLE_HOST_BINDINGS, RESIZABLE_INPUTS} from '. standalone: true, }) export class MatResizable extends AbstractMatResizable { - protected readonly document: Document; - - constructor( - protected readonly columnDef: CdkColumnDef, - protected readonly columnResize: ColumnResize, - protected readonly directionality: Directionality, - @Inject(DOCUMENT) document: any, - protected readonly elementRef: ElementRef, - protected readonly eventDispatcher: HeaderRowEventDispatcher, - protected readonly injector: Injector, - protected readonly ngZone: NgZone, - protected readonly overlay: Overlay, - protected readonly resizeNotifier: ColumnResizeNotifierSource, - protected readonly resizeStrategy: ResizeStrategy, - @Inject(_COALESCED_STYLE_SCHEDULER) - protected readonly styleScheduler: _CoalescedStyleScheduler, - protected readonly viewContainerRef: ViewContainerRef, - protected readonly changeDetectorRef: ChangeDetectorRef, - ) { - super(); - this.document = document; - } + protected readonly columnDef = inject(CdkColumnDef); + protected readonly columnResize = inject(ColumnResize); + protected readonly directionality = inject(Directionality); + protected readonly elementRef = inject(ElementRef); + protected readonly eventDispatcher = inject(HeaderRowEventDispatcher); + protected readonly injector = inject(Injector); + protected readonly ngZone = inject(NgZone); + protected readonly overlay = inject(Overlay); + protected readonly resizeNotifier = inject(ColumnResizeNotifierSource); + protected readonly resizeStrategy = inject(ResizeStrategy); + protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER); + protected readonly viewContainerRef = inject(ViewContainerRef); + protected readonly changeDetectorRef = inject(ChangeDetectorRef); + protected readonly document = inject(DOCUMENT); } diff --git a/src/material-experimental/column-resize/resize-strategy.ts b/src/material-experimental/column-resize/resize-strategy.ts index 884b935852cf..65d0ca0158df 100644 --- a/src/material-experimental/column-resize/resize-strategy.ts +++ b/src/material-experimental/column-resize/resize-strategy.ts @@ -6,12 +6,10 @@ * found in the LICENSE file at https://angular.io/license */ -import {CSP_NONCE, Inject, Injectable, Optional, Provider} from '@angular/core'; -import {DOCUMENT} from '@angular/common'; -import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table'; +import {Injectable, Provider} from '@angular/core'; +import {_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table'; import { - ColumnResize, ResizeStrategy, CdkFlexTableResizeStrategy, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, @@ -24,16 +22,6 @@ export {TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER}; */ @Injectable() export class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy { - constructor( - columnResize: ColumnResize, - @Inject(_COALESCED_STYLE_SCHEDULER) styleScheduler: _CoalescedStyleScheduler, - table: CdkTable, - @Inject(DOCUMENT) document: any, - @Inject(CSP_NONCE) @Optional() nonce?: string | null, - ) { - super(columnResize, styleScheduler, table, document, nonce); - } - protected override getColumnCssClass(cssFriendlyColumnName: string): string { return `mat-column-${cssFriendlyColumnName}`; } diff --git a/src/material-experimental/selection/selection-column.ts b/src/material-experimental/selection/selection-column.ts index 5d1d55dabcbc..200dc0dd91b8 100644 --- a/src/material-experimental/selection/selection-column.ts +++ b/src/material-experimental/selection/selection-column.ts @@ -19,11 +19,10 @@ import { Input, OnDestroy, OnInit, - Optional, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, - Inject, + inject, } from '@angular/core'; import {AsyncPipe} from '@angular/common'; @@ -43,7 +42,7 @@ import {MatSelectAll} from './select-all'; template: ` - @if (selection.multiple) { + @if (selection && selection.multiple) { implements OnInit, OnDestroy { + private _table = inject>(MatTable, {optional: true}); + readonly selection = inject>(MatSelection, {optional: true}); + /** Column name that should be used to reference this column. */ @Input() get name(): string { @@ -92,11 +94,6 @@ export class MatSelectionColumn implements OnInit, OnDestroy { @ViewChild(MatHeaderCellDef, {static: true}) private readonly _headerCell: MatHeaderCellDef; - constructor( - @Optional() @Inject(MatTable) private _table: MatTable, - @Optional() @Inject(MatSelection) readonly selection: MatSelection, - ) {} - ngOnInit() { if (!this.selection && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('MatSelectionColumn: missing MatSelection in the parent');