feat(grid): add order option

A-l-y-l-e · Sep 10, 2018 · 2803457 · 2803457
1 parent 0a6e020
commit 2803457
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/src/lib/grid/grid.ts b/src/lib/grid/grid.ts
@@ -129,6 +129,7 @@ export class LyGrid {
   }
   set justify(val: Justify) {
     if (val !== this.justify) {
+      this._justify = val;
       this._justifyClass = this.theme.addStyle(`lyGrid-justify:${val}`, () => {
         let justifyStyles: {
           justifyContent?: string
@@ -160,6 +161,7 @@ export class LyGrid {
   }
   set direction(val: Direction) {
     if (val !== this.direction) {
+      this._direction = val;
       this._directionClass = this.theme.addStyle(`lyGrid-direction:${val}`, () => {
         let directionStyles: {
           flexDirection?: string
@@ -200,6 +202,9 @@ export class LyGridCol implements OnInit {
   private _col: string | number;
   private _colClass: string;
 
+  private _order: string | number;
+  private _orderClass: string;
+
   /** Defines the number of grids */
   @Input()
   get col(): string | number {
@@ -234,6 +239,38 @@ export class LyGridCol implements OnInit {
     }
   }
 
+
+
+  /** Defines the order style property. */
+  @Input()
+  get order(): string | number {
+    return this._order;
+  }
+  set order(val: string | number) {
+    if (val !== this.order) {
+      this._order = val;
+      this._orderClass = this.theme.addStyle(`lyGrid-order:${val}`, () => {
+        let orderStyles: {
+          order?: string
+        };
+        eachMedia(`${val}`, (value, media, isMedia) => {
+          const newOrderStyles = {
+            order: value
+          };
+          if (isMedia) {
+            if (!orderStyles) {
+              orderStyles = {};
+            }
+            orderStyles[`@media ${this.mediaQueries[media]}`] = newOrderStyles;
+          } else {
+            orderStyles = newOrderStyles;
+          }
+        });
+        return orderStyles as any;
+      }, this.el.nativeElement, this._orderClass);
+    }
+  }
+
   constructor(
     @Optional() @Inject(LY_MEDIA_QUERIES) private mediaQueries: any,
     private gridContainer: LyGrid,