feat(core): add support for default unit for unitless values (#1384)

Author: CaerusKaru

projects/libs/flex-layout/core/tokens/library-config.ts

@@ -20,6 +20,7 @@ export interface LayoutConfigOptions {
   mediaTriggerAutoRestore?: boolean;
   ssrObserveBreakpoints?: string[];
   multiplier?: Multiplier;
+  defaultUnit?: string;
 }
 
 export const DEFAULT_CONFIG: Required<LayoutConfigOptions> = {
@@ -36,6 +37,7 @@ export const DEFAULT_CONFIG: Required<LayoutConfigOptions> = {
   // run for all users, regardless of whether they're using this feature.
   // Instead, we disable it by default, which requires this ugly cast.
   multiplier: undefined as unknown as Multiplier,
+  defaultUnit: 'px',
 };
 
 export const LAYOUT_CONFIG = new InjectionToken<LayoutConfigOptions>(

projects/libs/flex-layout/flex/layout-gap/layout-gap.spec.ts

@@ -135,6 +135,25 @@ describe('layout-gap directive', () => {
       expectEl(nodes[2]).not.toHaveStyle({'margin-right': '0px'}, styler);
     });
 
+    it('should add gap styles to all children except the 1st child w/o unit', () => {
+      let template = `
+              <div fxLayoutAlign='center center' fxLayoutGap='13'>
+                  <div fxFlex></div>
+                  <div fxFlex></div>
+                  <div fxFlex></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': '13px'}, styler);
+      expectEl(nodes[2]).not.toHaveStyle({'margin-right': '0px'}, styler);
+    });
+
     it('should add gap styles in proper order when order style is applied', () => {
       let template = `
         <div fxLayoutAlign='center center' fxLayoutGap='13px'>

projects/libs/flex-layout/flex/layout-gap/layout-gap.ts

@@ -73,6 +73,8 @@ export class LayoutGapStyleBuilder extends StyleBuilder {
       this._styler.applyStyleToElements(paddingStyles, parent.items);
     } else {
       gapValue = multiply(gapValue, this._config.multiplier);
+      gapValue = this.addFallbackUnit(gapValue);
+
       const lastItem = items.pop()!;
 
       // For each `element` children EXCEPT the last,
@@ -84,6 +86,10 @@ export class LayoutGapStyleBuilder extends StyleBuilder {
       this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem]);
     }
   }
+
+  private addFallbackUnit(value: string) {
+    return !isNaN(+value) ? `${value}${this._config.defaultUnit}` : value;
+  }
 }
 
 const inputs = [