feat(layout-gap): add x/y options for grid mode (#1234)

Author: CaerusKaru

src/apps/demo-app/src/app/layout/layout-gap/layout-gap.component.ts

@@ -13,7 +13,7 @@ const DIRECTIONS = ['row', 'row-reverse', 'column', 'column-reverse'];
         <div fxFlexFill>
           <div fxFlexFill
                [fxLayout]="direction + ' wrap'"
-               fxLayoutGap="10px grid"
+               fxLayoutGap="10px 5px grid"
                style="cursor: pointer;"
                (click)="toggleDirection()">
             <div fxFlex="25">

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

@@ -509,6 +509,27 @@ describe('layout-gap directive', () => {
       expectNativeEl(fixture).toHaveStyle(expectedMargin, styler);
     });
 
+    it('should add gap styles correctly between option', () => {
+      let template = `
+        <div fxLayoutGap='13px 12px grid'>
+          <div fxFlex></div>
+          <div fxFlex></div>
+          <div fxFlex></div>
+        </div>
+      `;
+      createTestComponent(template);
+      fixture.detectChanges();
+
+      let nodes = queryFor(fixture, '[fxFlex]');
+      let expectedMargin = {'margin': '0px -13px -12px 0px'};
+      let expectedPadding = {'padding': '0px 13px 12px 0px'};
+      expect(nodes.length).toEqual(3);
+      expectEl(nodes[0]).toHaveStyle(expectedPadding, styler);
+      expectEl(nodes[1]).toHaveStyle(expectedPadding, styler);
+      expectEl(nodes[2]).toHaveStyle(expectedPadding, styler);
+      expectNativeEl(fixture).toHaveStyle(expectedMargin, styler);
+    });
+
     it('should set gap without fallback', () => {
       let template = `
         <div fxLayoutAlign='center center' fxLayoutGap.md="24px grid">

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

@@ -252,27 +252,32 @@ const layoutGapCacheColumnLtr: Map<string, StyleDefinition> = new Map();
 const GRID_SPECIFIER = ' grid';
 
 function buildGridPadding(value: string, directionality: string): StyleDefinition {
-  let paddingTop = '0px', paddingRight = '0px', paddingBottom = value, paddingLeft = '0px';
+  const [between, below] = value.split(' ');
+  const bottom = below || between;
+  let paddingRight = '0px', paddingBottom = bottom, paddingLeft = '0px';
 
   if (directionality === 'rtl') {
-    paddingLeft = value;
+    paddingLeft = between;
   } else {
-    paddingRight = value;
+    paddingRight = between;
   }
 
-  return {'padding': `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`};
+  return {'padding': `0px ${paddingRight} ${paddingBottom} ${paddingLeft}`};
 }
 
 function buildGridMargin(value: string, directionality: string): StyleDefinition {
-  let marginTop = '0px', marginRight = '0px', marginBottom = '-' + value, marginLeft = '0px';
+  const [between, below] = value.split(' ');
+  const bottom = below || between;
+  const minus = (str: string) => `-${str}`;
+  let marginRight = '0px', marginBottom = minus(bottom), marginLeft = '0px';
 
   if (directionality === 'rtl') {
-    marginLeft = '-' + value;
+    marginLeft = minus(between);
   } else {
-    marginRight = '-' + value;
+    marginRight = minus(between);
   }
 
-  return {'margin': `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`};
+  return {'margin': `0px ${marginRight} ${marginBottom} ${marginLeft}`};
 }
 
 function getMarginType(directionality: string, layout: string) {