Allow [@.disabled] binding on component host

devversion · devversion · commit 375634d98ad9 · 2018-08-26T16:26:09.000+02:00
* It can happen that someone applies `[@.disabled]` directly on the component host element (e.g. `&lt;mat-tab-group [@.disabled]="disableAnimations"]&gt;&lt;/mat-tab-group&gt;`)
diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
@@ -84,7 +84,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;
   }
 
diff --git a/src/lib/checkbox/checkbox.scss b/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;
   }
 
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/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 {
diff --git a/src/lib/form-field/form-field-fill.scss b/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;
       }
diff --git a/src/lib/form-field/form-field-outline.scss b/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,
diff --git a/src/lib/form-field/form-field-standard.scss b/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;
       }
diff --git a/src/lib/form-field/form-field.scss b/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;
diff --git a/src/lib/progress-bar/progress-bar.scss b/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,
diff --git a/src/lib/progress-spinner/progress-spinner.scss b/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 {
diff --git a/src/lib/select/select.scss b/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;
+      }
+    }
   }
 }
 
diff --git a/src/lib/slider/slider.scss b/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;
+    }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ $mat-mini-fab-padding: 8px !default;`
`84`	`84`	`transition: background $swift-ease-out-duration $swift-ease-out-timing-function,`
`85`	`85`	`mat-elevation-transition-property-value();`
`86`	`86`
`87`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`87`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`88`	`88`	`transition: none;`
`89`	`89`	`}`
`90`	`90`
Original file line number	Diff line number	Diff line change
`@@ -184,7 +184,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;`
`184`	`184`	`transition: background $swift-ease-out-duration $swift-ease-out-timing-function,`
`185`	`185`	`mat-elevation-transition-property-value();`
`186`	`186`
`187`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`187`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`188`	`188`	`transition: none;`
`189`	`189`	`}`
`190`	`190`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad`
`35`	`35`	`border-color: transparent;`
`36`	`36`	`}`
`37`	`37`
`38`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`38`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`39`	`39`	`transition: none;`
`40`	`40`
`41`	`41`	`&::after {`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ $mat-form-field-fill-subscript-padding:`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`&:not(.mat-form-field-disabled) {`
`66`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`66`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`67`	`67`	`.mat-form-field-flex:hover ~ .mat-form-field-underline .mat-form-field-ripple {`
`68`	`68`	`transition: none;`
`69`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,7 @@ $mat-form-field-outline-subscript-padding:`
`133`	`133`	`padding: 0 $mat-form-field-outline-subscript-padding;`
`134`	`134`	`}`
`135`	`135`
`136`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`136`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`137`	`137`	`&:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,`
`138`	`138`	`.mat-form-field-outline,`
`139`	`139`	`.mat-form-field-outline-start,`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`&:not(.mat-form-field-disabled) {`
`63`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`63`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`64`	`64`	`.mat-form-field-flex:hover ~ .mat-form-field-underline .mat-form-field-ripple {`
`65`	`65`	`transition: none;`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -217,7 +217,7 @@ $mat-form-field-default-infix-width: 180px !default;`
`217`	`217`	`display: block;`
`218`	`218`	`}`
`219`	`219`
`220`		`-.mat-form-field._mat-animation-noopable, .ng-animate-disabled .mat-form-field {`
	`220`	`+._mat-animation-noopable, .ng-animate-disabled {`
`221`	`221`	`.mat-form-field-label,`
`222`	`222`	`.mat-form-field-ripple {`
`223`	`223`	`transition: none;`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;`
`16`	`16`	`transition: opacity $mat-progress-bar-piece-animation-duration linear;`
`17`	`17`	`width: 100%;`
`18`	`18`
`19`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`19`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`20`	`20`	`transition: none;`
`21`	`21`	`}`
`22`	`22`
`@@ -139,7 +139,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;`
`139`	`139`	`}`
`140`	`140`
`141`	`141`	`// Disabled animations handling.`
`142`		`- &._mat-animation-noopable, .ng-animate-disabled & {`
	`142`	`+ &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {`
`143`	`143`	`.mat-progress-bar-fill,`
`144`	`144`	`.mat-progress-bar-fill::after,`
`145`	`145`	`.mat-progress-bar-buffer,`
Original file line number	Diff line number	Diff line change
`@@ -68,9 +68,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a`
`68`	`68`	`transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;`
`69`	`69`	`}`
`70`	`70`
`71`		`- ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty &,`
`72`		`- .ng-animate-disabled .mat-form-field-appearance-standard .mat-select.mat-select-empty & {`
`73`		`- transition: none;`
	`71`	`+ .mat-form-field-appearance-standard {`
	`72`	`+ .ng-animate-disabled &, &.ng-animate-disabled, &._mat-animation-noopable {`
	`73`	`+ .mat-select.mat-select-empty {`
	`74`	`+ transition: none;`
	`75`	`+ }`
	`76`	`+ }`
`74`	`77`	`}`
`75`	`78`	`}`
`76`	`79`