Bump the version to 1.0.0

Add documentation
jspanchal · May 23, 2018 · 628cd3e · 628cd3e
1 parent 81d4137
commit 628cd3e
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 [![NPM](https://nodei.co/npm/ngx-flyout.png)](https://www.npmjs.com/package/ngx-flyout)
 
-Angular Sidebar/Flyout/Sidenav Component without any drama.
+No Drama Sidebar/Flyout/Sidenav Component For Angular 6 and greater.
 
 ## Installation
 

diff --git a/projects/flyout/README.md b/projects/flyout/README.md
@@ -2,7 +2,7 @@
 
 [![NPM](https://nodei.co/npm/ngx-flyout.png)](https://www.npmjs.com/package/ngx-flyout)
 
-Angular Sidebar/Flyout/Sidenav Component without any drama.
+No Drama Sidebar/Flyout/Sidenav Component For Angular 6 and greater.
 
 ## Installation
 

diff --git a/projects/flyout/package.json b/projects/flyout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-flyout",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "Angular Sidebar/Flyout/Sidenav Component.",
   "repository": {
     "type": "git",

diff --git a/projects/flyout/src/lib/flyout.component.html b/projects/flyout/src/lib/flyout.component.html
@@ -4,7 +4,7 @@
   <div class="close-btn-container" [ngClass]="showCloseButton ? '' : 'hidden'">
     <div class="close-btn" (click)='onCloseButtonClick($event)'></div>
   </div>
-  <div>
+  <div class="flyout-content">
     <ng-content></ng-content>
   </div>
 </div>
diff --git a/projects/flyout/src/lib/flyout.component.ts b/projects/flyout/src/lib/flyout.component.ts
@@ -8,44 +8,115 @@ import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef,
 
 export class FlyoutComponent implements OnInit, OnChanges {
 
+  /**
+   * Fired when flyout is opened
+   *
+   * @memberof FlyoutComponent
+   */
   @Output()
   flyoutOpened = new EventEmitter<Object>();
 
+  /**
+   * Fired when flyout is closed
+   *
+   * @memberof FlyoutComponent
+   */
   @Output()
   flyoutClosed = new EventEmitter<Object>();
 
+  /**
+   * Use for two way data binding on open
+   *
+   * @memberof FlyoutComponent
+   */
   @Output()
   openChange = new EventEmitter<boolean>();
 
+  /**
+   * Position of layout
+   * left, right, top, bottom
+   *
+   * @memberof FlyoutComponent
+   */
   @Input()
   position = 'right';
 
-  @Input()
-  mode = 'over';
 
+  /**
+   * Whether flyout is open or not
+   * 
+   * @memberof FlyoutComponent
+   */
   @Input()
   open = false;
 
+  /**
+   * Whether to show close button or not
+   * 
+   * @memberof FlyoutComponent
+   */
   @Input()
   showCloseButton = true;
 
+  /**
+   * Additional css classes to style flyout
+   * 
+   * @memberof FlyoutComponent
+   */
   @Input()
   flyoutClasses = [];
 
+  /**
+   * Whether to show backdrop or not
+   * 
+   * @memberof FlyoutComponent
+   */
   @Input()
   showBackdrop = true;
 
+  /**
+   * Whether to close flyout when clicked on backdrop
+   * 
+   * @memberof FlyoutComponent
+   */
   @Input()
   hideOnBackdropClick = true;
 
+  /**
+   * Additional css classes to style backdrop
+   * 
+   * @memberof FlyoutComponent
+   */
   @Input()
   backdropClasses = [];
 
+  /**
+   * Flyout element reference
+   *
+   * @memberof FlyoutComponent
+   */
   @ViewChild('flyout') flyout: ElementRef;
+
+  /**
+   * Backdrop element reference
+   *
+   * @memberof FlyoutComponent
+   */
   @ViewChild('backdrop') backdrop: ElementRef;
 
+
+  /**
+   * Default css classes which will be applied on flyout
+   *
+   * @memberof FlyoutComponent
+   */
   _defaultFlyoutClasses = ['flyout'];
 
+  /**
+   * Default css classes which will be applied on backdrop
+   *
+   * @memberof FlyoutComponent
+   */
   _defaultBackdropClasses = ['backdrop'];
 
   constructor() { }
@@ -55,6 +126,11 @@ export class FlyoutComponent implements OnInit, OnChanges {
     this._enableAnimation();
   }
 
+  /**
+   * Handle ngOnChanges event
+   *
+   * @memberof FlyoutComponent
+   */
   ngOnChanges(changes): void {
     if (changes['open']) {
       if (this.open) {
@@ -67,14 +143,24 @@ export class FlyoutComponent implements OnInit, OnChanges {
     }
   }
 
+  /**
+   * Update css classes on flyout
+   *
+   * @memberof FlyoutComponent
+   */
   _updateFlyoutClassList() {
-    const classList = [...this._defaultFlyoutClasses, ...this.flyoutClasses, this.mode, this.position];
+    const classList = [...this._defaultFlyoutClasses, ...this.flyoutClasses, this.position];
     if (this.open) {
       classList.push('open');
     }
     this.flyout.nativeElement.className = classList.join(' ');
   }
 
+  /**
+   * Update transporm property of flyout
+   *
+   * @memberof FlyoutComponent
+   */
   _updateFlyoutTransform() {
     if (this.open) {
       this.flyout.nativeElement.style.transform = 'translate3d(0, 0, 0)';
@@ -106,6 +192,11 @@ export class FlyoutComponent implements OnInit, OnChanges {
     }
   }
 
+  /**
+   * Update css classes on backdrop element
+   *
+   * @memberof FlyoutComponent
+   */
   _updateBackdropClassList() {
     const classList = [...this._defaultBackdropClasses, ...this.backdropClasses];
     if (this.showBackdrop && this.open) {
@@ -114,34 +205,64 @@ export class FlyoutComponent implements OnInit, OnChanges {
     this.backdrop.nativeElement.className = classList.join(' ');
   }
 
+  /**
+   * Open/Show flyout
+   *
+   * @memberof FlyoutComponent
+   */
   _openFlyout() {
     this.open = true;
     this._renderUi();
     this.openChange.emit(this.open);
     this.flyoutOpened.emit();
   }
 
+  /**
+   * Close/Hide flyout
+   *
+   * @memberof FlyoutComponent
+   */
   _closeFlyout() {
     this.open = false;
     this._renderUi();
     this.openChange.emit(this.open);
     this.flyoutClosed.emit();
   }
 
+  /**
+   * Render the UI
+   *
+   * @memberof FlyoutComponent
+   */
   _renderUi() {
     this._updateBackdropClassList();
     this._updateFlyoutClassList();
     this._updateFlyoutTransform();
   }
 
+  /**
+   * Make flyout animated
+   *
+   * @memberof FlyoutComponent
+   */
   _enableAnimation() {
     this._defaultFlyoutClasses.push('animated');
   }
 
+  /**
+   * Handle close button click event
+   *
+   * @memberof FlyoutComponent
+   */
   onCloseButtonClick($event) {
     this._closeFlyout();
   }
 
+  /**
+   * Handle backdrop click event
+   *
+   * @memberof FlyoutComponent
+   */
   onBackdropClick($event) {
     if (this.hideOnBackdropClick) {
       this._closeFlyout();