diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index 5c6ddb1b5708..bfb0fbff1db1 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -273,14 +273,14 @@ export class OverlayRef implements PortalOutlet, OverlayReference { } /** Updates the position of the overlay based on the position strategy. */ - updatePosition() { + updatePosition(): void { if (this._positionStrategy) { this._positionStrategy.apply(); } } /** Switches to a new position strategy and updates the overlay position. */ - updatePositionStrategy(strategy: PositionStrategy) { + updatePositionStrategy(strategy: PositionStrategy): void { if (strategy === this._positionStrategy) { return; } @@ -298,17 +298,31 @@ export class OverlayRef implements PortalOutlet, OverlayReference { } /** Update the size properties of the overlay. */ - updateSize(sizeConfig: OverlaySizeConfig) { + updateSize(sizeConfig: OverlaySizeConfig): void { this._config = {...this._config, ...sizeConfig}; this._updateElementSize(); } /** Sets the LTR/RTL direction for the overlay. */ - setDirection(dir: Direction | Directionality) { + setDirection(dir: Direction | Directionality): void { this._config = {...this._config, direction: dir}; this._updateElementDirection(); } + /** Add a CSS class or an array of classes to the overlay pane. */ + addPanelClass(classes: string | string[]): void { + if (this._pane) { + this._toggleClasses(this._pane, classes, true); + } + } + + /** Remove a CSS class or an array of classes from the overlay pane. */ + removePanelClass(classes: string | string[]): void { + if (this._pane) { + this._toggleClasses(this._pane, classes, false); + } + } + /** * Returns the layout direction of the overlay panel. */ diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index fc0555ddf7bd..f7da3fc088e7 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -398,6 +398,26 @@ describe('Overlay', () => { expect(overlayContainerElement.textContent).toBe(''); }); + it('should add and remove classes while open', () => { + let overlayRef = overlay.create(); + overlayRef.attach(componentPortal); + + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(pane.classList) + .not.toContain('custom-class-one', 'Expected class to be initially missing'); + + overlayRef.addPanelClass('custom-class-one'); + expect(pane.classList).toContain('custom-class-one', 'Expected class to be added'); + + overlayRef.removePanelClass('custom-class-one'); + expect(pane.classList).not.toContain('custom-class-one', 'Expected class to be removed'); + + // Destroy the overlay and make sure no errors are thrown when trying to alter + // panel classes + overlayRef.dispose(); + expect(() => overlayRef.addPanelClass('custom-class-two')).not.toThrowError(); + }); + describe('positioning', () => { let config: OverlayConfig; diff --git a/src/dev-app/dialog/dialog-demo.html b/src/dev-app/dialog/dialog-demo.html index ebf76c003267..7605af0d8911 100644 --- a/src/dev-app/dialog/dialog-demo.html +++ b/src/dev-app/dialog/dialog-demo.html @@ -123,5 +123,5 @@
{{ data.message }}
- ` + diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index b3640fa356be..d79a59931bdd 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/src/dev-app/dialog/dialog-demo.ts @@ -7,7 +7,7 @@ */ import {DOCUMENT} from '@angular/common'; -import {Component, Inject, TemplateRef, ViewChild} from '@angular/core'; +import {Component, Inject, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material'; @@ -101,8 +101,11 @@ export class DialogDemo {{{ data.message }}
+ - ` + `, + encapsulation: ViewEncapsulation.None, + styles: [`.hidden-dialog { opacity: 0; }`] }) export class JazzDialog { private _dimesionToggle = false; @@ -124,6 +127,13 @@ export class JazzDialog { .updatePosition(); } } + + temporarilyHide(): void { + this.dialogRef.addPanelClass('hidden-dialog'); + setTimeout(() => { + this.dialogRef.removePanelClass('hidden-dialog'); + }, 2000); + } } diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts index 98af86092b9e..490e5699480d 100644 --- a/src/lib/dialog/dialog-ref.ts +++ b/src/lib/dialog/dialog-ref.ts @@ -173,6 +173,18 @@ export class MatDialogRef