Some updates

Author: vanand-conga

.idea/codeStyles/codeStyleConfig.xml

@@ -92,7 +92,7 @@ <h4>Code</h4>
 
     <pre>
 &lt;div <strong>bon-f
-     bon-f-direction-md="column"
+     bon-f-direction="column"
      bon-f-direction-md="row"</strong>&gt;
   &lt;div class="green" <strong>bon-fi bon-fi-grow="1"</strong>&gt;&lt;/div&gt;
   &lt;div class="yellow" <strong>bon-fi bon-fi-grow="1"</strong>&gt;&lt;/div&gt;
@@ -283,28 +283,69 @@ <h3>Flex Directives</h3>
     </p>
 
     <p>
-      Below tables lists the properties of both the directives.
+      Below tables lists the properties of both the directives. If default is not provided then it's assumed to be the
+      browser's default.
     </p>
 
     <table>
       <caption>Properties of flex container directive <var>bon-f</var></caption>
       <thead>
       <tr>
-        <th>Property Name</th>
-        <th>Type</th>
-        <th>Default</th>
+        <th style="width: 25%">Property Name</th>
+        <th style="width: 10%">Type</th>
+        <th style="width: 10%">Default</th>
         <th>Description</th>
       </tr>
       </thead>
       <tbody>
       <tr>
-        <td>sd</td>
-        <td>asd</td>
-        <td>ad</td>
-        <td>asdsad</td>
+        <td>bon-f</td>
+        <td>string</td>
+        <td>flex</td>
+        <td>The display type of the container. The value can be either "flex", "inline-flex" or "none".</td>
+      </tr>
+      <tr>
+        <td>bon-f-direction</td>
+        <td>string</td>
+        <td></td>
+        <td>The flex direction. It can be one of these values: "row", "row-reverse", "column" or "column-reverse".</td>
+      </tr>
+      <tr>
+        <td>bon-f-wrap</td>
+        <td>string</td>
+        <td></td>
+        <td>Controls the wrapping behavior of flex items. It can be "nowrap", "wrap" or "wrap-reverse".</td>
+      </tr>
+      <tr>
+        <td>bon-f-justify-content</td>
+        <td>string</td>
+        <td></td>
+        <td>Defines the alignment along the main axis. Some of the possible values are: "flex-start", "flex-end", "center" etc.</td>
+      </tr>
+      <tr>
+        <td>bon-f-align-items</td>
+        <td>string</td>
+        <td></td>
+        <td>Defines the default behaviour for how flex items are laid out along the cross axis. Some of the possible values are: "flex-start", "flex-end", "center" etc.</td>
+      </tr>
+      <tr>
+        <td>bon-f-align-content</td>
+        <td>string</td>
+        <td></td>
+        <td>Defines the alignment of individual items within the main-axis. Some of the possible values are: "flex-start", "flex-end", "center" etc.</td>
       </tr>
       </tbody>
     </table>
 
+    <p>
+      The above properties repeats for other screen sizes with the respective suffix. For example, in case of small screen
+      the properties are: <var>bon-f-sm</var>, <var>bon-f-direction-sm</var> and so on.
+    </p>
+
+    <table>
+      <caption>Properties of flex item directive <var>bon-fi</var></caption>
+      <thead>
+      </thead>
+    </table>
   </main>
 </div>

.idea/vcs.xml

@@ -76,7 +76,7 @@
   }
 
   main {
-    padding: 2rem 4rem;
+    padding: 2rem 4rem 10rem 4rem;
 
     h1 {
       border-bottom: solid 1px #eaefef;

demo/demo.html

@@ -50,7 +50,7 @@ class DemoComponent implements AfterViewInit, OnDestroy {
       return;
     }
 
-    if (this.breakpoint == Breakpoint.Large || this.breakpoint === Breakpoint.ExtraLarge) {
+    if ([Breakpoint.Medium, Breakpoint.Large, Breakpoint.ExtraLarge].indexOf(this.breakpoint) > -1) {
       this.isSticky = window.pageYOffset >= this.initialOffset;
     } else {
       this.isSticky = false;

demo/demo.scss

@@ -40,20 +40,31 @@ html, body {
 
   table {
     width: 100%;
-    border: solid 1px #eee;
     border-radius: 5px;
 
     caption {
       font-weight: bold;
       font-size: 16px;
-      margin: 5px 0;
+      margin: 10px 0;
+      text-align: left;
     }
 
     thead {
       tr {
         th {
           text-align: left;
-          margin: 5px;
+          padding: 10px 0;
+          font-weight: bold;
+          border-bottom: solid 1px #eee;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        td {
+          padding: 10px 0;
+          border-bottom: solid 1px #eee;
         }
       }
     }

demo/demo.ts

@@ -2,9 +2,6 @@ import { ElementRef, EventEmitter, Inject, OnChanges, OnDestroy, Output } from '
 import { Breakpoint } from './breakpoint';
 import { MediaSizeWatcher } from './watcher';
 
-/**
- * The arguments that'll be passed to handler that listens for breakpoint changes.
- */
 export interface BreakpointChangeHandlerArgs {
   breakpoint: Breakpoint;
   el: ElementRef;
@@ -13,20 +10,11 @@ export interface BreakpointChangeHandlerArgs {
 
 export abstract class BoneBase implements OnChanges, OnDestroy {
 
-  /**
-   * Handler that should be invoked when there is a breakpoint change.
-   */
   @Output('breakpoint-change')
-  public breakpointChange: EventEmitter<BreakpointChangeHandlerArgs>;
+  public breakpointChange: EventEmitter<BreakpointChangeHandlerArgs> = new EventEmitter<BreakpointChangeHandlerArgs>();
 
-  /**
-   * The current breakpoint.
-   */
   protected breakpoint: Breakpoint;
 
-  /**
-   * The media-size-watcher unsubscribe function.
-   */
   protected mediaWatcherUnSubscribeFunction: () => void;
 
   protected currentAppliedStyles: any = null;
@@ -44,26 +32,17 @@ export abstract class BoneBase implements OnChanges, OnDestroy {
     });
   }
 
-  /**
-   * Re-apply the layout on change of props.
-   */
   ngOnChanges() {
     this.applyLayout();
   }
 
-  /**
-   * Unsubscribe from watcher and remove the applied styles.
-   */
   ngOnDestroy() {
     this.mediaWatcherUnSubscribeFunction();
     this.getStylePropNames().forEach(style => {
       this.el.nativeElement.style.removeProperty(style);
     });
   }
 
-  /**
-   * Applies the layout style properties to the attached element.
-   */
   public applyLayout(): void {
     const styles = this.getStyles();
 
@@ -82,19 +61,10 @@ export abstract class BoneBase implements OnChanges, OnDestroy {
     });
   }
 
-  /**
-   * Returns the styles that should be applied to the target element.
-   */
   public abstract getStyles(): { [key: string]: any };
 
-  /**
-   * Returns the style properties affected by the directive in kebab-cased.
-   */
   public abstract getStylePropNames(): Array<string>;
 
-  /**
-   * Destroys the directive and removes the changes applied by it.
-   */
   public destroy(): void {
     this.ngOnDestroy();
   }