Merge branch '21.0.x' into copilot/cherry-pick-calendar-date-fixes

Author: desig9stein

projects/igniteui-angular/core/src/core/styles/components/slider/_slider-theme.scss

@@ -89,7 +89,6 @@
         // https://github.com/IgniteUI/igniteui-angular/issues/11597
         z-index: 0;
         height: $slider-height;
-        flex-grow: 1;
         align-items: center;
         transition: all .2s $out-quad;
         touch-action: pan-y pinch-zoom;

projects/igniteui-angular/directives/src/directives/button/button-base.ts

@@ -9,8 +9,10 @@ import {
     booleanAttribute,
     inject,
     AfterViewInit,
+    OnDestroy
 } from '@angular/core';
 import { PlatformUtil } from 'igniteui-angular/core';
+import { animationFrameScheduler, Subscription } from 'rxjs';
 
 export const IgxBaseButtonType = {
     Flat: 'flat',
@@ -20,10 +22,11 @@ export const IgxBaseButtonType = {
 
 
 @Directive()
-export abstract class IgxButtonBaseDirective implements AfterViewInit{
+export abstract class IgxButtonBaseDirective implements AfterViewInit, OnDestroy {
     private _platformUtil = inject(PlatformUtil);
     public element = inject(ElementRef);
-        private _viewInit = false;
+    private _viewInit = false;
+    private _animationScheduler: Subscription;
 
     /**
      * Emitted when the button is clicked.
@@ -109,12 +112,16 @@ export abstract class IgxButtonBaseDirective implements AfterViewInit{
         if (this._platformUtil.isBrowser && !this._viewInit) {
             this._viewInit = true;
 
-            requestAnimationFrame(() => {
+            this._animationScheduler = animationFrameScheduler.schedule(() => {
                 this.element.nativeElement.style.removeProperty('--_init-transition');
             });
         }
     }
 
+    public ngOnDestroy(): void {
+        this._animationScheduler.unsubscribe();
+    }
+
     /**
      * @hidden
      * @internal