@angular/cdk 19.0.0-next.0 → 19.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/drag-drop/index.d.ts +1 -4
  2. package/esm2022/drag-drop/drag-drop-registry.mjs +6 -24
  3. package/esm2022/drag-drop/preview-ref.mjs +12 -4
  4. package/esm2022/platform/platform.mjs +6 -9
  5. package/esm2022/private/index.mjs +9 -0
  6. package/esm2022/private/private_public_index.mjs +5 -0
  7. package/esm2022/private/public-api.mjs +9 -0
  8. package/esm2022/private/style-loader.mjs +50 -0
  9. package/esm2022/testing/testbed/task-state-zone-interceptor.mjs +4 -3
  10. package/esm2022/version.mjs +1 -1
  11. package/fesm2022/cdk.mjs +1 -1
  12. package/fesm2022/cdk.mjs.map +1 -1
  13. package/fesm2022/drag-drop.mjs +15 -25
  14. package/fesm2022/drag-drop.mjs.map +1 -1
  15. package/fesm2022/platform.mjs +5 -8
  16. package/fesm2022/platform.mjs.map +1 -1
  17. package/fesm2022/private.mjs +50 -0
  18. package/fesm2022/private.mjs.map +1 -0
  19. package/fesm2022/testing/testbed.mjs +3 -2
  20. package/fesm2022/testing/testbed.mjs.map +1 -1
  21. package/package.json +7 -1
  22. package/platform/index.d.ts +2 -1
  23. package/private/index.d.ts +20 -0
  24. package/schematics/ng-add/index.js +1 -1
  25. package/schematics/ng-add/index.mjs +1 -1
package/fesm2022/drag-drop.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, ApplicationRef, EnvironmentInjector, createComponent, Injectable, Inject, InjectionToken, booleanAttribute, Directive, Optional, SkipSelf, Input, EventEmitter, Injector, afterNextRender, numberAttribute, Self, Output, NgModule } from '@angular/core';
2
+ import { signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, Injectable, Inject, InjectionToken, booleanAttribute, Directive, Optional, SkipSelf, Input, EventEmitter, Injector, afterNextRender, numberAttribute, Self, Output, NgModule } from '@angular/core';
3
3
  import { DOCUMENT } from '@angular/common';
4
4
  import * as i1 from '@angular/cdk/scrolling';
5
5
  import { CdkScrollableModule } from '@angular/cdk/scrolling';
@@ -8,6 +8,7 @@ import { coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/c
8
8
  import { _getEventTarget, normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';
9
9
  import { Subject, Subscription, interval, animationFrameScheduler, Observable, merge, BehaviorSubject } from 'rxjs';
10
10
  import { takeUntil, map, take, tap, switchMap, startWith } from 'rxjs/operators';
11
+ import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
11
12
  import * as i1$1 from '@angular/cdk/bidi';
12
13
 
13
14
  /** Creates a deep clone of an element. */
@@ -342,7 +343,7 @@ class PreviewRef {
342
343
  parent.appendChild(this._preview);
343
344
  // The null check is necessary for browsers that don't support the popover API.
344
345
  // Note that we use a string access for compatibility with Closure.
345
- if ('showPopover' in this._preview) {
346
+ if (supportsPopover(this._preview)) {
346
347
  this._preview['showPopover']();
347
348
  }
348
349
  }
@@ -400,8 +401,12 @@ class PreviewRef {
400
401
  // It's important that we disable the pointer events on the preview, because
401
402
  // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
402
403
  'pointer-events': 'none',
403
- // We have to reset the margin, because it can throw off positioning relative to the viewport.
404
- 'margin': '0',
404
+ // If the preview has a margin, it can throw off our positioning so we reset it. The reset
405
+ // value for `margin-right` needs to be `auto` when opened as a popover, because our
406
+ // positioning is always top/left based, but native popover seems to position itself
407
+ // to the top/right if `<html>` or `<body>` have `dir="rtl"` (see #29604). Setting it
408
+ // to `auto` pushed it to the top/left corner in RTL and is a noop in LTR.
409
+ 'margin': supportsPopover(preview) ? '0 auto 0 0' : '0',
405
410
  'position': 'fixed',
406
411
  'top': '0',
407
412
  'left': '0',
@@ -422,6 +427,10 @@ class PreviewRef {
422
427
  return preview;
423
428
  }
424
429
  }
430
+ /** Checks whether a specific element supports the popover API. */
431
+ function supportsPopover(element) {
432
+ return 'showPopover' in element;
433
+ }
425
434
 
426
435
  /** Options that can be used to bind a passive event listener. */
427
436
  const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
@@ -2787,8 +2796,6 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({
2787
2796
  passive: false,
2788
2797
  capture: true,
2789
2798
  });
2790
- /** Keeps track of the apps currently containing drag items. */
2791
- const activeApps = new Set();
2792
2799
  /**
2793
2800
  * Component used to load the drag&drop reset styles.
2794
2801
  * @docs-private
@@ -2810,8 +2817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2",
2810
2817
  class DragDropRegistry {
2811
2818
  constructor(_ngZone, _document) {
2812
2819
  this._ngZone = _ngZone;
2813
- this._appRef = inject(ApplicationRef);
2814
- this._environmentInjector = inject(EnvironmentInjector);
2820
+ this._styleLoader = inject(_CdkPrivateStyleLoader);
2815
2821
  /** Registered drop container instances. */
2816
2822
  this._dropInstances = new Set();
2817
2823
  /** Registered drag item instances. */
@@ -2906,7 +2912,7 @@ class DragDropRegistry {
2906
2912
  if (this._activeDragInstances().indexOf(drag) > -1) {
2907
2913
  return;
2908
2914
  }
2909
- this._loadResets();
2915
+ this._styleLoader.load(_ResetsLoader);
2910
2916
  this._activeDragInstances.update(instances => [...instances, drag]);
2911
2917
  if (this._activeDragInstances().length === 1) {
2912
2918
  const isTouchEvent = event.type.startsWith('touch');
@@ -3009,22 +3015,6 @@ class DragDropRegistry {
3009
3015
  });
3010
3016
  this._globalListeners.clear();
3011
3017
  }
3012
- // TODO(crisbeto): abstract this away into something reusable.
3013
- /** Loads the CSS resets needed for the module to work correctly. */
3014
- _loadResets() {
3015
- if (!activeApps.has(this._appRef)) {
3016
- activeApps.add(this._appRef);
3017
- const componentRef = createComponent(_ResetsLoader, {
3018
- environmentInjector: this._environmentInjector,
3019
- });
3020
- this._appRef.onDestroy(() => {
3021
- activeApps.delete(this._appRef);
3022
- if (activeApps.size === 0) {
3023
- componentRef.destroy();
3024
- }
3025
- });
3026
- }
3027
- }
3028
3018
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: DragDropRegistry, deps: [{ token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
3029
3019
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: DragDropRegistry, providedIn: 'root' }); }
3030
3020
  }