From 1d1af603a6a92fbb16be0d85a37f3f66b91b91a2 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 22 Aug 2024 08:37:20 +0200 Subject: [PATCH] fix(cdk/overlay): avoid having to manually load structural styles Changes the overlay so it loads its structural styles automatically, instead of requiring the user to do it. --- src/cdk/overlay/BUILD.bazel | 4 +++ .../fullscreen-overlay-container.spec.ts | 1 + src/cdk/overlay/overlay-container.ts | 29 ++++++++++++++++++- .../block-scroll-strategy-e2e.ts | 7 ++++- src/material/core/_core.scss | 1 - tools/public_api_guard/cdk/overlay.md | 4 +++ 6 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/cdk/overlay/BUILD.bazel b/src/cdk/overlay/BUILD.bazel index 55713dc87df7..a7bc728efa0a 100644 --- a/src/cdk/overlay/BUILD.bazel +++ b/src/cdk/overlay/BUILD.bazel @@ -18,6 +18,9 @@ ng_module( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), + assets = [ + ":overlay-prebuilt.css", + ], deps = [ "//src:dev_mode_types", "//src/cdk/bidi", @@ -25,6 +28,7 @@ ng_module( "//src/cdk/keycodes", "//src/cdk/platform", "//src/cdk/portal", + "//src/cdk/private", "//src/cdk/scrolling", "@npm//@angular/common", "@npm//@angular/core", diff --git a/src/cdk/overlay/fullscreen-overlay-container.spec.ts b/src/cdk/overlay/fullscreen-overlay-container.spec.ts index 02500dfb91c6..63b704193ae5 100644 --- a/src/cdk/overlay/fullscreen-overlay-container.spec.ts +++ b/src/cdk/overlay/fullscreen-overlay-container.spec.ts @@ -26,6 +26,7 @@ describe('FullscreenOverlayContainer', () => { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy fakeDocument = { body: document.body, + head: document.head, fullscreenElement: document.createElement('div'), fullscreenEnabled: true, addEventListener: (eventName: string, listener: EventListener) => { diff --git a/src/cdk/overlay/overlay-container.ts b/src/cdk/overlay/overlay-container.ts index d1b3fd2789df..5c27341638fb 100644 --- a/src/cdk/overlay/overlay-container.ts +++ b/src/cdk/overlay/overlay-container.ts @@ -7,14 +7,34 @@ */ import {DOCUMENT} from '@angular/common'; -import {Inject, Injectable, OnDestroy} from '@angular/core'; +import { + Inject, + Injectable, + OnDestroy, + Component, + ChangeDetectionStrategy, + ViewEncapsulation, + inject, +} from '@angular/core'; +import {_CdkPrivateStyleLoader} from '@angular/cdk/private'; import {Platform, _isTestEnvironment} from '@angular/cdk/platform'; +@Component({ + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + standalone: true, + styleUrl: 'overlay-prebuilt.css', + host: {'cdk-overlay-style-loader': ''}, +}) +export class _CdkOverlayStyleLoader {} + /** Container inside which all overlays will render. */ @Injectable({providedIn: 'root'}) export class OverlayContainer implements OnDestroy { protected _containerElement: HTMLElement; protected _document: Document; + protected _styleLoader = inject(_CdkPrivateStyleLoader); constructor( @Inject(DOCUMENT) document: any, @@ -34,6 +54,8 @@ export class OverlayContainer implements OnDestroy { * @returns the container element */ getContainerElement(): HTMLElement { + this._loadStyles(); + if (!this._containerElement) { this._createContainer(); } @@ -84,4 +106,9 @@ export class OverlayContainer implements OnDestroy { this._document.body.appendChild(container); this._containerElement = container; } + + /** Loads the structural styles necessary for the overlay to work. */ + protected _loadStyles(): void { + this._styleLoader.load(_CdkOverlayStyleLoader); + } } diff --git a/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts b/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts index ce4f93da1530..703bb9bc0eda 100644 --- a/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts +++ b/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts @@ -1,5 +1,5 @@ import {Component, inject} from '@angular/core'; -import {Overlay} from '@angular/cdk/overlay'; +import {Overlay, OverlayContainer} from '@angular/cdk/overlay'; import {ScrollingModule} from '@angular/cdk/scrolling'; @Component({ @@ -11,4 +11,9 @@ import {ScrollingModule} from '@angular/cdk/scrolling'; }) export class BlockScrollStrategyE2E { scrollStrategy = inject(Overlay).scrollStrategies.block(); + + constructor() { + // This loads the structural styles for the test. + inject(OverlayContainer).getContainerElement(); + } } diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 77f732b3bebd..91a7cd41cc8c 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -15,7 +15,6 @@ } @include cdk.a11y-visually-hidden(); - @include cdk.overlay(); @include cdk.text-field-autosize(); @include cdk.text-field-autofill(); @include private.structural-styling('mat'); diff --git a/tools/public_api_guard/cdk/overlay.md b/tools/public_api_guard/cdk/overlay.md index 727db310e756..90a6652adfb8 100644 --- a/tools/public_api_guard/cdk/overlay.md +++ b/tools/public_api_guard/cdk/overlay.md @@ -4,6 +4,7 @@ ```ts +import { _CdkPrivateStyleLoader } from '@angular/cdk/private'; import { CdkScrollable } from '@angular/cdk/scrolling'; import { ComponentFactoryResolver } from '@angular/core'; import { ComponentPortal } from '@angular/cdk/portal'; @@ -303,11 +304,14 @@ export class OverlayContainer implements OnDestroy { // (undocumented) protected _document: Document; getContainerElement(): HTMLElement; + protected _loadStyles(): void; // (undocumented) ngOnDestroy(): void; // (undocumented) protected _platform: Platform; // (undocumented) + protected _styleLoader: _CdkPrivateStyleLoader; + // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵprov: i0.ɵɵInjectableDeclaration;