fix(fxLayoutGap): account for responsive fxHide on children elements (#…

…931) Fixes #606
angular · Dec 18, 2018 · 7759b6c · 7759b6c
1 parent 21b6d29
commit 7759b6c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/src/lib/flex/layout-gap/layout-gap.spec.ts b/src/lib/flex/layout-gap/layout-gap.spec.ts
@@ -412,6 +412,36 @@ describe('layout-gap directive', () => {
       expectEl(nodes[1]).toHaveStyle({'margin-bottom': '24px'}, styler);
       expectEl(nodes[2]).not.toHaveStyle({'margin-bottom': '*'}, styler);
     });
+
+    it('should work with responsive fxHide', () => {
+      let template = `
+        <div fxLayoutAlign="center center" fxLayoutGap="13px">
+          <div fxFlex="15" class="sec1" fxFlex.xs="55"></div>
+          <div fxFlex="30" class="sec2" fxFlex.sm></div>
+          <div fxFlex="55" class="sec3" fxShow fxHide.sm></div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      expect(nodes.length).toEqual(3);
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+      matchMedia.activate('sm');
+      fixture.detectChanges();
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[1]).not.toHaveStyle({'margin-right': '*'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+
+      matchMedia.activate('lg');
+      fixture.detectChanges();
+      expectEl(nodes[0]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'margin-right': '13px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '*'}, styler);
+    });
   });
 
   describe('rtl support', () => {

diff --git a/src/lib/flex/layout-gap/layout-gap.ts b/src/lib/flex/layout-gap/layout-gap.ts
@@ -173,7 +173,7 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
     }
     // Gather all non-hidden Element nodes
     const items = this.childrenNodes
-      .filter(el => el.nodeType === 1 && this.getDisplayStyle(el) !== 'none')
+      .filter(el => el.nodeType === 1 && this.willDisplay(el))
       .sort((a, b) => {
         const orderA = +this.styler.lookupStyle(a, 'order');
         const orderB = +this.styler.lookupStyle(b, 'order');
@@ -200,14 +200,11 @@ export class LayoutGapDirective extends BaseDirective2 implements AfterContentIn
     }
   }
 
-  /**
-   * Quick accessor to the current HTMLElement's `display` style
-   * Note: this allows us to preserve the original style
-   * and optional restore it when the mediaQueries deactivate
-   */
-  protected getDisplayStyle(source: HTMLElement = this.nativeElement): string {
-    const query = 'display';
-    return this.styler.lookupStyle(source, query);
+  /** Determine if an element will show or hide based on current activation */
+  protected willDisplay(source: HTMLElement): boolean {
+    const value = this.marshal.getValue(source, 'show-hide');
+    return value === true ||
+      (value === '' && this.styleUtils.lookupStyle(source, 'display') !== 'none');
   }
 
   protected buildChildObservable(): void {