diff --git a/goldens/material/autocomplete/index.api.md b/goldens/material/autocomplete/index.api.md index 9337ebaeee57..4bae890c74cd 100644 --- a/goldens/material/autocomplete/index.api.md +++ b/goldens/material/autocomplete/index.api.md @@ -197,6 +197,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn _onTouched: () => void; openPanel(): void; readonly optionSelections: Observable; + readonly _overlayPanelClass: string[]; get panelClosingActions(): Observable; get panelOpen(): boolean; position: 'auto' | 'above' | 'below'; diff --git a/goldens/material/snack-bar/index.api.md b/goldens/material/snack-bar/index.api.md index 111d667f63fc..4284125a1961 100644 --- a/goldens/material/snack-bar/index.api.md +++ b/goldens/material/snack-bar/index.api.md @@ -104,6 +104,8 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy // @deprecated attachDomPortal: (portal: DomPortal) => void; attachTemplatePortal(portal: TemplatePortal): EmbeddedViewRef; + // (undocumented) + readonly _elementRef: ElementRef; enter(): void; exit(): Observable; _label: ElementRef; diff --git a/goldens/material/tooltip/index.api.md b/goldens/material/tooltip/index.api.md index d81a8dd9a0b6..179ae42d6ffa 100644 --- a/goldens/material/tooltip/index.api.md +++ b/goldens/material/tooltip/index.api.md @@ -72,6 +72,8 @@ export class MatTooltip implements OnDestroy, AfterViewInit { ngAfterViewInit(): void; ngOnDestroy(): void; // (undocumented) + _overlayPanelClass: string[] | undefined; + // (undocumented) _overlayRef: OverlayRef | null; get position(): TooltipPosition; set position(value: TooltipPosition); diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts index c723970f3b4f..7095fa5773a1 100644 --- a/src/material/autocomplete/autocomplete-trigger.ts +++ b/src/material/autocomplete/autocomplete-trigger.ts @@ -41,6 +41,7 @@ import { forwardRef, inject, } from '@angular/core'; +import {coerceArray} from '@angular/cdk/coercion'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { MatOption, @@ -208,6 +209,9 @@ export class MatAutocompleteTrigger /** Stream of keyboard events that can close the panel. */ private readonly _closeKeyEventStream = new Subject(); + /** Classes to apply to the panel. Exposed as a public property for internal usage. */ + readonly _overlayPanelClass = coerceArray(this._defaults?.overlayPanelClass || []); + /** * Event handler for when the window is blurred. Needs to be an * arrow function in order to preserve the context. @@ -905,7 +909,7 @@ export class MatAutocompleteTrigger direction: this._dir ?? undefined, hasBackdrop: this._defaults?.hasBackdrop, backdropClass: this._defaults?.backdropClass, - panelClass: this._defaults?.overlayPanelClass, + panelClass: this._overlayPanelClass, disableAnimations: this._animationsDisabled, }); } diff --git a/src/material/snack-bar/snack-bar-container.ts b/src/material/snack-bar/snack-bar-container.ts index a7733ef7fbd3..5aa873d9ab83 100644 --- a/src/material/snack-bar/snack-bar-container.ts +++ b/src/material/snack-bar/snack-bar-container.ts @@ -65,7 +65,7 @@ const EXIT_ANIMATION = '_mat-snack-bar-exit'; }) export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy { private _ngZone = inject(NgZone); - private _elementRef = inject>(ElementRef); + readonly _elementRef = inject>(ElementRef); private _changeDetectorRef = inject(ChangeDetectorRef); private _platform = inject(Platform); protected _animationsDisabled = _animationsDisabled(); diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts index fdedccee645f..d54c7221cdb0 100644 --- a/src/material/tooltip/tooltip.ts +++ b/src/material/tooltip/tooltip.ts @@ -215,6 +215,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit { _overlayRef: OverlayRef | null; _tooltipInstance: TooltipComponent | null; + _overlayPanelClass: string[] | undefined; // Used for styling internally. private _portal: ComponentPortal; private _position: TooltipPosition = 'below'; @@ -525,6 +526,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit { .getAncestorScrollContainers(this._elementRef); const overlay = this._injector.get(Overlay); + const panelClass = `${this._cssClassPrefix}-${PANEL_CLASS}`; // Create connected position strategy that listens for scroll events to reposition. const strategy = overlay @@ -550,7 +552,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit { this._overlayRef = overlay.create({ direction: this._dir, positionStrategy: strategy, - panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`, + panelClass: this._overlayPanelClass ? [...this._overlayPanelClass, panelClass] : panelClass, scrollStrategy: this._injector.get(MAT_TOOLTIP_SCROLL_STRATEGY)(), disableAnimations: this._animationsDisabled, });