fix(core): correctly handle lack of fallback values (#949)

Fixes #947

Author: CaerusKaru

src/lib/core/base/base2.ts

@@ -108,7 +108,9 @@ export abstract class BaseDirective2 implements OnChanges, OnDestroy {
   /** Force trigger style updates on DOM element */
   protected triggerUpdate() {
     const val = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY);
-    this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, val);
+    if (val !== undefined) {
+      this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, val);
+    }
   }
 
   /**

src/lib/core/media-marshaller/media-marshaller.ts

@@ -108,11 +108,10 @@ export class MediaMarshaller {
     if (bpMap) {
       const values = bp !== undefined ? bpMap.get(bp) : this.getFallback(bpMap, key);
       if (values) {
-        const value = values.get(key);
-        return value !== undefined ? value : '';
+        return values.get(key);
       }
     }
-    return '';
+    return undefined;
   }
 
   /**
@@ -148,7 +147,10 @@ export class MediaMarshaller {
       bpMap.set(bp, values);
       this.elementMap.set(element, bpMap);
     }
-    this.updateElement(element, key, this.getValue(element, key));
+    const value = this.getValue(element, key);
+    if (value !== undefined) {
+      this.updateElement(element, key, value);
+    }
   }
 
   /** Track element value changes for a specific key */
@@ -286,7 +288,8 @@ export class MediaMarshaller {
         }
       }
     }
-    return bpMap.get('');
+    const lastHope = bpMap.get('');
+    return (key === undefined || lastHope && lastHope.has(key)) ? lastHope : undefined;
   }
 
   private registerBreakpoints() {

src/lib/extended/style/style.ts

@@ -35,7 +35,7 @@ import {
 export class StyleDirective extends BaseDirective2 implements DoCheck {
 
   protected DIRECTIVE_KEY = 'ngStyle';
-  protected fallbackStyles: NgStyleMap = {};
+  protected fallbackStyles: NgStyleMap;
 
   constructor(protected elementRef: ElementRef,
               protected styler: StyleUtils,
@@ -55,12 +55,19 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
     this.fallbackStyles = this.buildStyleMap(styles);
   }
 
+  /** Add generated styles */
   protected updateWithValue(value: any) {
     const styles = this.buildStyleMap(value);
     this.ngStyleInstance.ngStyle = {...this.fallbackStyles, ...styles};
     this.ngStyleInstance.ngDoCheck();
   }
 
+  /** Remove generated styles */
+  protected clearStyles() {
+    this.ngStyleInstance.ngStyle = this.fallbackStyles;
+    this.ngStyleInstance.ngDoCheck();
+  }
+
   /**
    * Convert raw strings to ngStyleMap; which is required by ngStyle
    * NOTE: Raw string key-value pairs MUST be delimited by `;`

src/lib/flex/flex/flex.ts

@@ -274,8 +274,11 @@ export class FlexDirective extends BaseDirective2 {
 
   /** Trigger a style reflow, usually based on a shrink/grow input event */
   protected triggerReflow() {
-    const parts = validateBasis(this.activatedValue, this.flexGrow, this.flexShrink);
-    this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
+    const activatedValue = this.activatedValue;
+    if (activatedValue !== undefined) {
+      const parts = validateBasis(activatedValue, this.flexGrow, this.flexShrink);
+      this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
+    }
   }
 }
 

src/lib/flex/layout-align/layout-align.spec.ts

@@ -363,6 +363,35 @@ describe('layout-align directive', () => {
       }, styler);
     });
 
+    it('should not fallback to value not registered with fxLayout', () => {
+      createTestComponent(`
+         <section fxLayout="row"
+                  fxLayoutAlign.lt-md="center center">
+         </section>
+      `);
+
+      matchMedia.activate('lt-md');
+      expectNativeEl(fixture).toHaveStyle({
+        'justify-content': 'center',
+        'align-items': 'center',
+        'align-content': 'center'
+      }, styler);
+
+      matchMedia.activate('md');
+      expectNativeEl(fixture).not.toHaveStyle({
+        'justify-content': 'center',
+        'align-items': 'center',
+        'align-content': 'center'
+      }, styler);
+
+      matchMedia.activate('lt-md');
+      expectNativeEl(fixture).toHaveStyle({
+        'justify-content': 'center',
+        'align-items': 'center',
+        'align-content': 'center'
+      }, styler);
+    });
+
     it('should fallback to closest overlapping value when the active mediaQuery change is not configured', () => { // tslint:disable-line:max-line-length
       createTestComponent(`
           <div  fxLayout

src/lib/flex/layout-gap/layout-gap.spec.ts

@@ -543,6 +543,7 @@ describe('layout-gap directive', () => {
 
 @Injectable({providedIn: FlexModule})
 export class MockLayoutGapStyleBuilder extends StyleBuilder {
+  shouldCache = false;
   buildStyles(_input: string) {
     return {'margin-top': '12px'};
   }

src/lib/flex/layout-gap/layout-gap.ts

@@ -168,9 +168,6 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
    *
    */
   protected updateWithValue(value: string) {
-    if (!value) {
-      value = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY);
-    }
     // Gather all non-hidden Element nodes
     const items = this.childrenNodes
       .filter(el => el.nodeType === 1 && this.willDisplay(el))
@@ -204,7 +201,7 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
   protected willDisplay(source: HTMLElement): boolean {
     const value = this.marshal.getValue(source, 'show-hide');
     return value === true ||
-      (value === '' && this.styleUtils.lookupStyle(source, 'display') !== 'none');
+      (value === undefined && this.styleUtils.lookupStyle(source, 'display') !== 'none');
   }
 
   protected buildChildObservable(): void {