diff --git a/src/cdk/drag-drop/drag-drop-registry.ts b/src/cdk/drag-drop/drag-drop-registry.ts index d349cde4903d..a09fcaab495c 100644 --- a/src/cdk/drag-drop/drag-drop-registry.ts +++ b/src/cdk/drag-drop/drag-drop-registry.ts @@ -6,7 +6,19 @@ * found in the LICENSE file at https://angular.io/license */ -import {Injectable, NgZone, OnDestroy, Inject} from '@angular/core'; +import { + Injectable, + NgZone, + OnDestroy, + Inject, + inject, + ApplicationRef, + EnvironmentInjector, + Component, + ViewEncapsulation, + ChangeDetectionStrategy, + createComponent, +} from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {normalizePassiveListenerOptions} from '@angular/cdk/platform'; import {merge, Observable, Observer, Subject} from 'rxjs'; @@ -17,6 +29,23 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({ capture: true, }); +/** Keeps track of the apps currently containing drag items. */ +const activeApps = new Set(); + +/** + * Component used to load the drag&drop reset styles. + * @docs-private + */ +@Component({ + standalone: true, + styleUrl: 'resets.css', + encapsulation: ViewEncapsulation.None, + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + host: {'cdk-drag-resets-container': ''}, +}) +export class _ResetsLoader {} + /** * Service that keeps track of all the drag item and drop container * instances, and manages global event listeners on the `document`. @@ -28,6 +57,8 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({ @Injectable({providedIn: 'root'}) export class DragDropRegistry implements OnDestroy { private _document: Document; + private _appRef = inject(ApplicationRef); + private _environmentInjector = inject(EnvironmentInjector); /** Registered drop container instances. */ private _dropInstances = new Set(); @@ -136,6 +167,7 @@ export class DragDropRegistry implements O return; } + this._loadResets(); this._activeDragInstances.push(drag); if (this._activeDragInstances.length === 1) { @@ -276,4 +308,23 @@ export class DragDropRegistry implements O this._globalListeners.clear(); } + + // TODO(crisbeto): abstract this away into something reusable. + /** Loads the CSS resets needed for the module to work correctly. */ + private _loadResets() { + if (!activeApps.has(this._appRef)) { + activeApps.add(this._appRef); + + const componentRef = createComponent(_ResetsLoader, { + environmentInjector: this._environmentInjector, + }); + + this._appRef.onDestroy(() => { + activeApps.delete(this._appRef); + if (activeApps.size === 0) { + componentRef.destroy(); + } + }); + } + } } diff --git a/src/cdk/drag-drop/drag-drop.ts b/src/cdk/drag-drop/drag-drop.ts index 910f150c44cf..c83c219a59e9 100644 --- a/src/cdk/drag-drop/drag-drop.ts +++ b/src/cdk/drag-drop/drag-drop.ts @@ -6,19 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import { - Injectable, - Inject, - NgZone, - ElementRef, - Component, - ViewEncapsulation, - ChangeDetectionStrategy, - ApplicationRef, - inject, - createComponent, - EnvironmentInjector, -} from '@angular/core'; +import {Injectable, Inject, NgZone, ElementRef} from '@angular/core'; import {DOCUMENT} from '@angular/common'; import {ViewportRuler} from '@angular/cdk/scrolling'; import {DragRef, DragRefConfig} from './drag-ref'; @@ -31,31 +19,11 @@ const DEFAULT_CONFIG = { pointerDirectionChangeThreshold: 5, }; -/** Keeps track of the apps currently containing badges. */ -const activeApps = new Set(); - -/** - * Component used to load the drag&drop reset styles. - * @docs-private - */ -@Component({ - standalone: true, - styleUrl: 'resets.css', - encapsulation: ViewEncapsulation.None, - template: '', - changeDetection: ChangeDetectionStrategy.OnPush, - host: {'cdk-drag-resets-container': ''}, -}) -export class _ResetsLoader {} - /** * Service that allows for drag-and-drop functionality to be attached to DOM elements. */ @Injectable({providedIn: 'root'}) export class DragDrop { - private _appRef = inject(ApplicationRef); - private _environmentInjector = inject(EnvironmentInjector); - constructor( @Inject(DOCUMENT) private _document: any, private _ngZone: NgZone, @@ -72,7 +40,6 @@ export class DragDrop { element: ElementRef | HTMLElement, config: DragRefConfig = DEFAULT_CONFIG, ): DragRef { - this._loadResets(); return new DragRef( element, config, @@ -96,23 +63,4 @@ export class DragDrop { this._viewportRuler, ); } - - // TODO(crisbeto): abstract this away into something reusable. - /** Loads the CSS resets needed for the module to work correctly. */ - private _loadResets() { - if (!activeApps.has(this._appRef)) { - activeApps.add(this._appRef); - - const componentRef = createComponent(_ResetsLoader, { - environmentInjector: this._environmentInjector, - }); - - this._appRef.onDestroy(() => { - activeApps.delete(this._appRef); - if (activeApps.size === 0) { - componentRef.destroy(); - } - }); - } - } } diff --git a/src/cdk/drag-drop/public-api.ts b/src/cdk/drag-drop/public-api.ts index 37f515ce824c..a9fcb1972737 100644 --- a/src/cdk/drag-drop/public-api.ts +++ b/src/cdk/drag-drop/public-api.ts @@ -14,7 +14,7 @@ export {CDK_DRAG_PARENT} from './drag-parent'; export * from './drag-events'; export * from './drag-utils'; export * from './drag-drop-module'; -export * from './drag-drop-registry'; +export {DragDropRegistry} from './drag-drop-registry'; export {CdkDropList} from './directives/drop-list'; export * from './directives/config';