feat: nopadding for grid (#303)

projects/ng-aquila/documentation/examples/grid/grid-nogutter/grid-nogutter-example.css

@@ -0,0 +1,4 @@
+:host {
+  overflow-x: hidden;
+  display: block;
+}

projects/ng-aquila/documentation/examples/grid/grid-nogutter/grid-nogutter-example.html

@@ -33,3 +33,21 @@
     </div>
   </div>
 </div>
+
+<p class="nx-margin-y-xs"><strong>Grid with nopadding:</strong></p>
+<div nxLayout="grid nopadding" class="docs-grid-colored-grid">
+  <div nxRow>
+    <div nxCol="2,3" class="docs-grid-colored-col">
+      This is an example with nopadding.
+    </div>
+    <div nxCol="2,3" class="docs-grid-colored-col">
+      This is an example with nopadding.
+    </div>
+    <div nxCol="2,3" class="docs-grid-colored-col">
+      This is an example with nopadding.
+    </div>
+    <div nxCol="2,3" class="docs-grid-colored-col">
+      This is an example with nopadding.
+    </div>
+  </div>
+</div>

projects/ng-aquila/src/accordion/expansion-panel.ts

@@ -42,7 +42,7 @@ const DEFAULT_TYPE = 'regular';
     '[class.nx-expansion-panel--regular]': '_accordionStyle === "regular"',
     '[class.nx-expansion-panel--extra-light]': '_accordionStyle === "extra-light"',
     '[class.nx-expansion-panel--negative]': 'negative',
-    '[class.is-disabled]': 'disabled',
+    '[class.is-disabled]': 'disabled'
   },
   providers: [
     // Provide NxAccordionDirective as undefined to prevent nested expansion panels from registering

projects/ng-aquila/src/grid/grid.md

@@ -122,8 +122,9 @@ If you want to offset a column you can use the `nxColOffset` property similar to
 
 <!-- example(grid-offset) -->
 
-#### NoGutters
-Remove the spacing from rows and (direct) columns with `nogutters` like this:
+#### NoGutters and NoPadding
+Use `nogutters` to remove the spacing from rows and (direct) columns.
+Use `nopadding` to remove the spacing around the grid, but keep the column gutters. This is useful when you need to place the grid inside of another component that already has spacing (including the grid in grid case). 
 
 <!-- example(grid-nogutter) -->
 

projects/ng-aquila/src/grid/layout.component.scss

@@ -4,7 +4,7 @@
   @include make-container($gutters: $grid-gutter-widths);
 }
 
-// Use for "edge to edge container" components
+// Use to remove all spacing between cells
 :host(.nx-grid--no-gutters) ::ng-deep {
   padding-left: 0;
   padding-right: 0;
@@ -21,6 +21,22 @@
   }
 }
 
+// Use to remove the outer spacing, for "edge to edge container" components
+:host(.nx-grid--no-padding) ::ng-deep {
+  padding-left: 0;
+  padding-right: 0;
+
+  .nx-grid__row {
+    margin-left: -$grid-gutter-width-base / 2;
+    margin-right: -$grid-gutter-width-base / 2;
+
+    @include media-breakpoint-down(small) {
+      margin-left: -$grid-gutter-width-mobile / 2;
+      margin-right: -$grid-gutter-width-mobile / 2;
+    }
+  }
+}
+
 :host(.nx-grid--max-width) {
   max-width: 100%;
   @include var(width, grid-max-width);

projects/ng-aquila/src/grid/layout.component.spec.ts

@@ -40,6 +40,7 @@ describe('NxLayoutDirective', () => {
                           BasicGridLayout,
                           BasicGridLayoutClassTest,
                           BasicNoGutters,
+                          BasicNoPadding,
                           BasicMaxWidth,
                           BasicCombinate,
                           Basic2Combinate,
@@ -63,6 +64,10 @@ describe('NxLayoutDirective', () => {
     it('should test with input nxLayout="grid nogutters"', () => {
         expect(getClassesCreated(BasicNoGutters)).toEqual('nx-grid nx-grid--no-gutters');
     });
+
+    it('should test with input nxLayout="grid nopadding"', () => {
+        expect(getClassesCreated(BasicNoPadding)).toEqual('nx-grid nx-grid--no-padding');
+    });
 
     it('should test with input nxLayout="grid maxwidth"', () => {
         expect(getClassesCreated(BasicMaxWidth)).toEqual('nx-grid nx-grid--max-width');
@@ -119,7 +124,11 @@ describe('NxLayoutDirective', () => {
 
   @Component( {
     template: `<div nxLayout='maxwidth grid nogutters' ></div> `
-  }) class BasicCompleteReverse extends DirectiveTest {}
+  }) class BasicCompleteReverse extends DirectiveTest { }
+
+  @Component( {
+    template: `<div nxLayout='grid nopadding'></div> `
+  }) class BasicNoPadding extends DirectiveTest {}
 
   @Component( {
     template: `<div [nxLayout]='layout' ></div> `

projects/ng-aquila/src/grid/layout.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -9,7 +9,8 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
   host: {
     '[class.nx-grid]': 'grid',
     '[class.nx-grid--no-gutters]': 'noGutters',
-    '[class.nx-grid--max-width]': 'maxWidth'
+    '[class.nx-grid--max-width]': 'maxWidth',
+    '[class.nx-grid--no-padding]': 'noPadding'
   }
 })
 export class NxLayoutComponent {
@@ -24,10 +25,13 @@ export class NxLayoutComponent {
   /** @docs-private */
   maxWidth: boolean;
 
+  /** @docs-private */
+  noPadding: boolean;
+
   /**
    * Type of layout.
    *
-   * Values: grid | grid nogutters | grid maxwidth. Default value: grid.
+   * Values: grid | grid nogutters | grid maxwidth | grid nopadding. Default value: grid.
    */
   @Input('nxLayout')
   set classNames(value: string) {
@@ -36,9 +40,10 @@ export class NxLayoutComponent {
     }
 
     this._classNames = value;
-    this.grid = !!this._classNames.match(/grid/);
-    this.noGutters = !!this._classNames.match(/nogutters/);
-    this.maxWidth = !!this._classNames.match(/maxwidth/);
+    this.grid = /grid/.test(this._classNames);
+    this.noGutters = /nogutters/.test(this._classNames);
+    this.maxWidth = /maxwidth/.test(this._classNames);
+    this.noPadding = /nopadding/.test(this._classNames);
   }
 
   get classNames(): string {