Allow [@.disabled] binding on component host

* It can happen that someone applies `[@.disabled]` directly on the component host element (e.g. `<mat-tab-group [@.disabled]="disableAnimations"]></mat-tab-group>`)

Author: devversion

src/lib/button/_button-base.scss

@@ -83,7 +83,7 @@ $mat-mini-fab-padding: 8px !default;
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
   }
 }

src/lib/checkbox/checkbox.scss

@@ -184,7 +184,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
   }
 

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -35,7 +35,7 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
     border-color: transparent;
   }
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
 
     &::after {

src/lib/form-field/form-field-fill.scss

@@ -63,7 +63,7 @@ $mat-form-field-fill-subscript-padding:
   }
 
   &:not(.mat-form-field-disabled) {
-    &._mat-animation-noopable, .ng-animate-disabled & {
+    &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
       .mat-form-field-flex:hover ~ .mat-form-field-underline .mat-form-field-ripple {
         transition: none;
       }

src/lib/form-field/form-field-outline.scss

@@ -133,7 +133,7 @@ $mat-form-field-outline-subscript-padding:
     padding: 0 $mat-form-field-outline-subscript-padding;
   }
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
     .mat-form-field-outline,
     .mat-form-field-outline-start,

src/lib/form-field/form-field-standard.scss

@@ -60,7 +60,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
   }
 
   &:not(.mat-form-field-disabled) {
-    &._mat-animation-noopable, .ng-animate-disabled & {
+    &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
       .mat-form-field-flex:hover ~ .mat-form-field-underline .mat-form-field-ripple {
         transition: none;
       }

src/lib/form-field/form-field.scss

@@ -217,7 +217,7 @@ $mat-form-field-default-infix-width: 180px !default;
   display: block;
 }
 
-.mat-form-field._mat-animation-noopable, .ng-animate-disabled .mat-form-field {
+._mat-animation-noopable, .ng-animate-disabled {
   .mat-form-field-label,
   .mat-form-field-ripple {
     transition: none;

src/lib/progress-bar/progress-bar.scss

@@ -16,7 +16,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   transition: opacity $mat-progress-bar-piece-animation-duration linear;
   width: 100%;
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
   }
 
@@ -139,7 +139,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   }
 
   // Disabled animations handling.
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     .mat-progress-bar-fill,
     .mat-progress-bar-fill::after,
     .mat-progress-bar-buffer,

src/lib/progress-spinner/progress-spinner.scss

@@ -11,7 +11,7 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   display: block;
   position: relative;
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     animation: none;
 
     circle {

src/lib/select/select.scss

@@ -68,9 +68,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
     transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
   }
 
-  ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty &,
-  .ng-animate-disabled .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
-    transition: none;
+  .mat-form-field-appearance-standard {
+    .ng-animate-disabled &, &.ng-animate-disabled, &._mat-animation-noopable {
+      .mat-select.mat-select-empty {
+        transition: none;
+      }
+    }
   }
 }
 

src/lib/slider/slider.scss

@@ -469,18 +469,18 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 }
 
-// Slider inside a component with disabled animations.
-.mat-slider._mat-animation-noopable,
-.ng-animate-disabled .mat-slider {
-  .mat-slider-track-fill,
-  .mat-slider-track-background,
-  .mat-slider-ticks,
-  .mat-slider-thumb-container,
-  .mat-slider-focus-ring,
-  .mat-slider-thumb,
-  .mat-slider-thumb-label,
-  .mat-slider-thumb-label-text,
-  .mat-slider-has-ticks .mat-slider-wrapper::after {
-    transition: none;
+.mat-slider {
+  .ng-animate-disabled &, &.ng-animate-disabled, &._mat-animation-noopable {
+    .mat-slider-track-fill,
+    .mat-slider-track-background,
+    .mat-slider-ticks,
+    .mat-slider-thumb-container,
+    .mat-slider-focus-ring,
+    .mat-slider-thumb,
+    .mat-slider-thumb-label,
+    .mat-slider-thumb-label-text,
+    .mat-slider-has-ticks .mat-slider-wrapper::after {
+      transition: none;
+    }
   }
 }