diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index 3f2b0004dc11..1bc17261034b 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -68,7 +68,7 @@ } } -.mat-mdc-checkbox-ripple, +.mat-mdc-checkbox .mat-mdc-checkbox-ripple, .mdc-checkbox__ripple { @include layout-common.fill(); diff --git a/src/material/core/private/ripple-loader.ts b/src/material/core/private/ripple-loader.ts index 7cf0003cd7a4..2043f1037562 100644 --- a/src/material/core/private/ripple-loader.ts +++ b/src/material/core/private/ripple-loader.ts @@ -7,7 +7,14 @@ */ import {DOCUMENT} from '@angular/common'; -import {ANIMATION_MODULE_TYPE, Injectable, NgZone, OnDestroy, inject} from '@angular/core'; +import { + ANIMATION_MODULE_TYPE, + Injectable, + Injector, + NgZone, + OnDestroy, + inject, +} from '@angular/core'; import { MAT_RIPPLE_GLOBAL_OPTIONS, RippleRenderer, @@ -54,6 +61,7 @@ export class MatRippleLoader implements OnDestroy { private _globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {optional: true}); private _platform = inject(Platform); private _ngZone = inject(NgZone); + private _injector = inject(Injector); private _hosts = new Map< HTMLElement, {renderer: RippleRenderer; target: RippleTarget; hasSetUpEvents: boolean} @@ -184,7 +192,13 @@ export class MatRippleLoader implements OnDestroy { }, }; - const renderer = new RippleRenderer(target, this._ngZone, rippleEl, this._platform); + const renderer = new RippleRenderer( + target, + this._ngZone, + rippleEl, + this._platform, + this._injector, + ); const hasSetUpEvents = !target.rippleDisabled; if (hasSetUpEvents) { diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index b6cc122ffce6..282db3d041f4 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -83,7 +83,7 @@ $mat-tab-animation-duration: 500ms !default; } } - .mat-mdc-tab-ripple { + .mat-mdc-tab-ripple.mat-mdc-tab-ripple { position: absolute; top: 0; left: 0;