@angular/cdk 21.0.0-rc.0 → 21.0.0-rc.2

package/overlay/_index.scss

@@ -190,11 +190,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     background: none;
     border: none;
     padding: 0;
-    color: inherit;
     outline: 0;
     overflow: visible;
     position: fixed;
     pointer-events: none;
+    white-space: normal;
+    color: inherit;
+    text-decoration: none;
 
     // These are important so the overlay can be measured before it's fully inserted.
     width: 100%;
@@ -204,6 +206,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     // with `align-self` can break the positioning (see #29809).
     inset: auto;
 
+    // Some older versions of Chrome won't render the popover properly without these.
+    top: 0;
+    left: 0;
+
     // For the time being we're using our `.cdk-overlay-backdrop` element instead of the native one.
     &::backdrop {
       display: none;
@@ -211,6 +217,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     .cdk-overlay-backdrop {
       position: fixed;
+      z-index: auto;
     }
   }
 }

package/overlay-prebuilt.css

@@ -1 +1 @@
-.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;color:inherit;outline:0;overflow:visible;position:fixed;pointer-events:none;width:100%;height:100%;inset:auto}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed}
+.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:auto;top:0;left:0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cdk",
-  "version": "21.0.0-rc.0",
+  "version": "21.0.0-rc.2",
   "description": "Angular Material Component Development Kit",
   "repository": {
     "type": "git",

package/schematics/ng-add/index.js

@@ -26,6 +26,6 @@ function default_1() {
     // In order to align the CDK version with other Angular dependencies that are setup by
     // `@schematics/angular`, we use tilde instead of caret. This is default for Angular
     // dependencies in new CLI projects.
-    return (0, utility_1.addDependency)('@angular/cdk', `~21.0.0-rc.0`, { existing: utility_1.ExistingBehavior.Skip });
+    return (0, utility_1.addDependency)('@angular/cdk', `~21.0.0-rc.2`, { existing: utility_1.ExistingBehavior.Skip });
 }
 //# sourceMappingURL=index.js.map

package/types/_overlay-module-chunk.d.ts

@@ -235,7 +235,7 @@ interface PositionStrategy {
      * Gets the element in the DOM after which to insert
      * the overlay when it is rendered out as a popover.
      */
-    getPopoverInsertionPoint?(): Element;
+    getPopoverInsertionPoint?(): Element | null;
 }
 
 /** Initial configuration used when creating an overlay. */
@@ -423,6 +423,8 @@ type FlexibleConnectedPositionStrategyOrigin = ElementRef | Element | (Point & {
  * @param origin Origin relative to which to position the overlay.
  */
 declare function createFlexibleConnectedPositionStrategy(injector: Injector, origin: FlexibleConnectedPositionStrategyOrigin): FlexibleConnectedPositionStrategy;
+/** Supported locations in the DOM for connected overlays. */
+type FlexibleOverlayPopoverLocation = 'global' | 'inline';
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
  * implicit position relative some origin element. The relative position is defined in terms of
@@ -494,6 +496,8 @@ declare class FlexibleConnectedPositionStrategy implements PositionStrategy {
     private _appliedPanelClasses;
     /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */
     private _previousPushAmount;
+    /** Configures where in the DOM to insert the overlay when popovers are enabled. */
+    private _popoverLocation;
     /** Observable sequence of position changes. */
     positionChanges: Observable<ConnectedOverlayPositionChange>;
     /** Ordered list of preferred positions, from most to least desirable. */
@@ -582,8 +586,15 @@ declare class FlexibleConnectedPositionStrategy implements PositionStrategy {
      *    elements onto which to set the transform origin.
      */
     withTransformOriginOn(selector: string): this;
+    /**
+     * Determines where in the DOM the overlay will be rendered when popover mode is enabled.
+     * @param location Configures the location in the DOM. Supports the following values:
+     *  - `global` - The default which inserts the overlay inside the overlay container.
+     *  - `inline` - Inserts the overlay next to the trigger.
+     */
+    withPopoverLocation(location: FlexibleOverlayPopoverLocation): this;
     /** @docs-private */
-    getPopoverInsertionPoint(): Element;
+    getPopoverInsertionPoint(): Element | null;
     /**
      * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
      */
@@ -748,7 +759,7 @@ interface CdkConnectedOverlayConfig {
     growAfterOpen?: boolean;
     push?: boolean;
     disposeOnNavigation?: boolean;
-    usePopover?: boolean;
+    usePopover?: FlexibleOverlayPopoverLocation | null;
     matchWidth?: boolean;
 }
 /**
@@ -819,7 +830,7 @@ declare class CdkConnectedOverlay implements OnDestroy, OnChanges {
     /** Whether the overlay should be disposed of when the user goes backwards/forwards in history. */
     disposeOnNavigation: boolean;
     /** Whether the connected overlay should be rendered inside a popover element or the overlay container. */
-    usePopover: boolean;
+    usePopover: FlexibleOverlayPopoverLocation | null;
     /** Whether the overlay should match the trigger's width. */
     matchWidth: boolean;
     /** Shorthand for setting multiple overlay options at once. */
@@ -867,7 +878,6 @@ declare class CdkConnectedOverlay implements OnDestroy, OnChanges {
     static ngAcceptInputType_growAfterOpen: unknown;
     static ngAcceptInputType_push: unknown;
     static ngAcceptInputType_disposeOnNavigation: unknown;
-    static ngAcceptInputType_usePopover: unknown;
     static ngAcceptInputType_matchWidth: unknown;
 }
 
@@ -878,4 +888,4 @@ declare class OverlayModule {
 }
 
 export { CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG, CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayContainer, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlayRef, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollingVisibility, createFlexibleConnectedPositionStrategy, validateHorizontalPosition, validateVerticalPosition };
-export type { CdkConnectedOverlayConfig, ConnectedPosition, FlexibleConnectedPositionStrategyOrigin, HorizontalConnectionPos, OriginConnectionPosition, OverlayConnectionPosition, OverlaySizeConfig, PositionStrategy, ScrollStrategy, VerticalConnectionPos, ViewportMargin };
+export type { CdkConnectedOverlayConfig, ConnectedPosition, FlexibleConnectedPositionStrategyOrigin, FlexibleOverlayPopoverLocation, HorizontalConnectionPos, OriginConnectionPosition, OverlayConnectionPosition, OverlaySizeConfig, PositionStrategy, ScrollStrategy, VerticalConnectionPos, ViewportMargin };

package/types/a11y.d.ts

@@ -506,11 +506,13 @@ declare class HighContrastModeDetector implements OnDestroy {
 /** Service that generates unique IDs for DOM nodes. */
 declare class _IdGenerator {
     private _appId;
+    private static _infix;
     /**
      * Generates a unique ID with a specific prefix.
      * @param prefix Prefix to add to the ID.
+     * @param randomize Add a randomized infix string.
      */
-    getId(prefix: string): string;
+    getId(prefix: string, randomize?: boolean): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<_IdGenerator, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<_IdGenerator>;
 }

package/types/overlay.d.ts

@@ -1,10 +1,10 @@
 import { ScrollStrategy, OverlayRef, PositionStrategy, FlexibleConnectedPositionStrategyOrigin, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayContainer } from './_overlay-module-chunk.js';
-export { CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG, CdkConnectedOverlay, CdkConnectedOverlayConfig, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectedPosition, ConnectionPositionPair, HorizontalConnectionPos, OriginConnectionPosition, OverlayConnectionPosition, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlaySizeConfig, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollingVisibility, VerticalConnectionPos, ViewportMargin, createFlexibleConnectedPositionStrategy, validateHorizontalPosition, validateVerticalPosition } from './_overlay-module-chunk.js';
+export { CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG, CdkConnectedOverlay, CdkConnectedOverlayConfig, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectedPosition, ConnectionPositionPair, FlexibleOverlayPopoverLocation, HorizontalConnectionPos, OriginConnectionPosition, OverlayConnectionPosition, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlaySizeConfig, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollingVisibility, VerticalConnectionPos, ViewportMargin, createFlexibleConnectedPositionStrategy, validateHorizontalPosition, validateVerticalPosition } from './_overlay-module-chunk.js';
 import { ScrollDispatcher } from './_scrolling-module-chunk.js';
 export { CdkScrollable, CdkFixedSizeVirtualScroll as ɵɵCdkFixedSizeVirtualScroll, CdkScrollableModule as ɵɵCdkScrollableModule, CdkVirtualForOf as ɵɵCdkVirtualForOf, CdkVirtualScrollViewport as ɵɵCdkVirtualScrollViewport, CdkVirtualScrollableElement as ɵɵCdkVirtualScrollableElement, CdkVirtualScrollableWindow as ɵɵCdkVirtualScrollableWindow } from './_scrolling-module-chunk.js';
 import { ViewportRuler } from './scrolling.js';
 import * as i0 from '@angular/core';
-import { Injector, NgZone, OnDestroy } from '@angular/core';
+import { Injector, NgZone, InjectionToken, OnDestroy } from '@angular/core';
 export { ComponentType } from './_portal-directives-chunk.js';
 export { Dir as ɵɵDir } from './_bidi-module-chunk.js';
 import '@angular/common';
@@ -154,7 +154,7 @@ declare class ScrollStrategyOptions {
  * Creates a global position strategy.
  * @param injector Injector used to resolve dependencies for the strategy.
  */
-declare function createGlobalPositionStrategy(injector: Injector): GlobalPositionStrategy;
+declare function createGlobalPositionStrategy(_injector: Injector): GlobalPositionStrategy;
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
  * explicit position relative to the browser's viewport. We use flexbox, instead of
@@ -173,8 +173,6 @@ declare class GlobalPositionStrategy implements PositionStrategy {
     private _width;
     private _height;
     private _isDisposed;
-    private _document;
-    constructor(injector?: Injector);
     attach(overlayRef: OverlayRef): void;
     /**
      * Sets the top position of the overlay. Clears any previously set vertical position.
@@ -246,8 +244,6 @@ declare class GlobalPositionStrategy implements PositionStrategy {
      * @docs-private
      */
     dispose(): void;
-    /** @docs-private */
-    getPopoverInsertionPoint(): Element;
 }
 
 /** Builder for overlay position strategy. */
@@ -267,6 +263,12 @@ declare class OverlayPositionBuilder {
     static ɵprov: i0.ɵɵInjectableDeclaration<OverlayPositionBuilder>;
 }
 
+/** Object used to configure the default options for overlays. */
+interface OverlayDefaultConfig {
+    usePopover?: boolean;
+}
+/** Injection token used to configure the default options for CDK overlays. */
+declare const OVERLAY_DEFAULT_CONFIG: InjectionToken<OverlayDefaultConfig>;
 /**
  * Creates an overlay.
  * @param injector Injector to use when resolving the overlay's dependencies.
@@ -328,5 +330,5 @@ declare class FullscreenOverlayContainer extends OverlayContainer implements OnD
     static ɵprov: i0.ɵɵInjectableDeclaration<FullscreenOverlayContainer>;
 }
 
-export { BlockScrollStrategy, CloseScrollStrategy, FlexibleConnectedPositionStrategy, FlexibleConnectedPositionStrategyOrigin, FullscreenOverlayContainer, GlobalPositionStrategy, NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayPositionBuilder, OverlayRef, PositionStrategy, RepositionScrollStrategy, ScrollDispatcher, ScrollStrategy, ScrollStrategyOptions, ViewportRuler, createBlockScrollStrategy, createCloseScrollStrategy, createGlobalPositionStrategy, createNoopScrollStrategy, createOverlayRef, createRepositionScrollStrategy };
-export type { RepositionScrollStrategyConfig };
+export { BlockScrollStrategy, CloseScrollStrategy, FlexibleConnectedPositionStrategy, FlexibleConnectedPositionStrategyOrigin, FullscreenOverlayContainer, GlobalPositionStrategy, NoopScrollStrategy, OVERLAY_DEFAULT_CONFIG, Overlay, OverlayConfig, OverlayContainer, OverlayPositionBuilder, OverlayRef, PositionStrategy, RepositionScrollStrategy, ScrollDispatcher, ScrollStrategy, ScrollStrategyOptions, ViewportRuler, createBlockScrollStrategy, createCloseScrollStrategy, createGlobalPositionStrategy, createNoopScrollStrategy, createOverlayRef, createRepositionScrollStrategy };
+export type { OverlayDefaultConfig, RepositionScrollStrategyConfig };