diff --git a/goldens/material/bottom-sheet/index.api.md b/goldens/material/bottom-sheet/index.api.md index 82c18018fbeb..8b6fbb64049b 100644 --- a/goldens/material/bottom-sheet/index.api.md +++ b/goldens/material/bottom-sheet/index.api.md @@ -56,6 +56,7 @@ export class MatBottomSheetConfig { backdropClass?: string; bindings?: Binding[]; closeOnNavigation?: boolean; + containerClass?: string | string[]; data?: D | null; direction?: Direction; disableClose?: boolean; diff --git a/src/material/bottom-sheet/bottom-sheet-config.ts b/src/material/bottom-sheet/bottom-sheet-config.ts index dd7b6e5fc737..d97c2da35b0a 100644 --- a/src/material/bottom-sheet/bottom-sheet-config.ts +++ b/src/material/bottom-sheet/bottom-sheet-config.ts @@ -30,9 +30,12 @@ export class MatBottomSheetConfig { */ injector?: Injector; - /** Extra CSS classes to be added to the bottom sheet container. */ + /** Extra CSS classes to be added to the bottom sheet pane. */ panelClass?: string | string[]; + /** Extra CSS classes to be added to the bottom sheet container. */ + containerClass?: string | string[]; + /** Text layout direction for the bottom sheet. */ direction?: Direction; diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts index 49bbc54d830f..a04bfc75c1e6 100644 --- a/src/material/bottom-sheet/bottom-sheet-container.ts +++ b/src/material/bottom-sheet/bottom-sheet-container.ts @@ -18,7 +18,9 @@ import { } from '@angular/core'; import {Subscription} from 'rxjs'; import {CdkPortalOutlet} from '@angular/cdk/portal'; +import {coerceStringArray} from '@angular/cdk/coercion'; import {_animationsDisabled} from '../core'; +import {MatBottomSheetConfig} from './bottom-sheet-config'; const ENTER_ANIMATION = '_mat-bottom-sheet-enter'; const EXIT_ANIMATION = '_mat-bottom-sheet-exit'; @@ -72,6 +74,14 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes super(); const breakpointObserver = inject(BreakpointObserver); + const bottomSheetConfig = this._config as MatBottomSheetConfig; + + if (bottomSheetConfig.containerClass) { + const containerClasses = coerceStringArray(bottomSheetConfig.containerClass); + if (containerClasses.length) { + this._elementRef.nativeElement.classList.add(...containerClasses); + } + } this._breakpointSubscription = breakpointObserver .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge]) diff --git a/src/material/bottom-sheet/bottom-sheet.spec.ts b/src/material/bottom-sheet/bottom-sheet.spec.ts index 79b162609eff..79f35fc9c7f7 100644 --- a/src/material/bottom-sheet/bottom-sheet.spec.ts +++ b/src/material/bottom-sheet/bottom-sheet.spec.ts @@ -148,6 +148,23 @@ describe('MatBottomSheet', () => { expect(containerElement.getAttribute('aria-modal')).toBe('false'); }); + it('should apply the specified container class', () => { + bottomSheet.open(PizzaMsg, {containerClass: 'custom-container-class'}); + viewContainerFixture.detectChanges(); + + const containerElement = overlayContainerElement.querySelector('mat-bottom-sheet-container')!; + expect(containerElement.classList.contains('custom-container-class')).toBe(true); + }); + + it('should apply multiple container classes', () => { + bottomSheet.open(PizzaMsg, {containerClass: ['custom-class-1', 'custom-class-2']}); + viewContainerFixture.detectChanges(); + + const containerElement = overlayContainerElement.querySelector('mat-bottom-sheet-container')!; + expect(containerElement.classList.contains('custom-class-1')).toBe(true); + expect(containerElement.classList.contains('custom-class-2')).toBe(true); + }); + it('should be able to set aria-modal', () => { bottomSheet.open(PizzaMsg, { ariaModal: true,