Merge branch 'master' into 663

src/app/sandbox/sandbox.component.ts

@@ -23,7 +23,7 @@ import {BossyPopoverComponent} from '../../bossy-ui/components/popover/popover.c
 import {BossyPopoverConfig} from '../../bossy-ui/components/popover/popover.config';
 import {Validators} from '@angular/forms';
 import { BossyAlertComponent } from '../../bossy-ui/components/alert/alert.component';
-import { BossyAlertConfig } from '../../bossy-ui/components/alert/alert.config';
+import { BossyAlertConfig, alertType } from '../../bossy-ui/components/alert/alert.config';
 
 @Component({
   selector: 'app-sandbox',
@@ -49,7 +49,7 @@ export class SandboxComponent implements OnInit {
   }
 
   ngOnInit() {
-    const alertConfig = new BossyAlertConfig('insertHeader', 'insertMainText', 'insertExtraText');
+    const alertConfig = new BossyAlertConfig('insertHeader', 'insertMainText', 'insertExtraText', alertType.danger, true);
     const calendarConfig = new BossyCalendarConfig();
     const formInput1 = {
         name: 'textInput',
@@ -159,7 +159,7 @@ export class SandboxComponent implements OnInit {
       }
     );
     const bossyFormTextareaConfig = new BossyFormTextareaConfig(textareaInput1);
-    const bossyPopoverConfig = new BossyPopoverConfig('popover', true, 'PoverOver Title', 'Popover Description');
+    const bossyPopoverConfig = new BossyPopoverConfig('popover', 'popover1234', true, 'right', 'PoverOver Title', 'Popover Description');
 
     const bossyCollapseConfig = new BossyCollapseConfig([
         {name: 'button1' , data: 'example1'}

src/bossy-ui/components/alert/alert.config.ts

@@ -1,6 +1,18 @@
 export class BossyAlertConfig {
   constructor(public header: string,
-              public mainInfo: string,
-              public extraInfo: string) {
+              public text: string,
+              public subText: string,
+              public type: alertType,
+              public large: boolean) {
   }
 }
+export enum alertType {
+    primary= 'primary',
+    secondary= 'secondary',
+    success= 'success',
+    danger= 'danger',
+    warning= 'warning',
+    info= 'info',
+    light= 'light',
+    dark= 'dark'
+}

src/bossy-ui/components/alert/alert.html

@@ -1,10 +1,16 @@
-<div class="alert alert-success" role="alert " *ngIf="dataDismiss">
+<div class="alert alert-{{config.type}}" role="alert" *ngIf="dataDismiss && !config.large">
+    {{config.header}}
+    <button type="button" class="close" (click)="dismissHandler()"  aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button> 
+</div>
+<div class="alert alert-{{config.type}}" role="alert " *ngIf="dataDismiss && config.large">
     <h4 class="alert-heading">{{config.header}}
         <button type="button" class="close" (click)="dismissHandler()"  aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button> 
     </h4>
-    <p>{{config.mainInfo}}</p>
+    <p>{{config.text}}</p>
     <hr>
-    <p class="mb-0">{{config.extraInfo}}</p>
+    <p class="mb-0">{{config.subText}}</p>
 </div>

src/bossy-ui/components/popover/popover.component.html

@@ -1,8 +1,9 @@
 
-  <button type="button" (click)="ShowPopoverOnClick($event)" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Popover title">Click to toggle popover</button>
+  <button type="button" id="popover1234" data-toggle="popover" class="btn btn-lg btn-danger" title="" data-original-title="Popover title">Click to toggle popover(ID: popover1234)</button>
+  <button type="button" id="popover5678" data-toggle="popover" class="btn btn-lg btn-success" title="" data-original-title="Popover title">Click to toggle popover(ID: popover5678)</button>
 
-  <div *ngIf="hide" class="popover fade bs-popover-right show" role="tooltip" id="popover181151" x-placement="right" [style.top]="Top" [style.left]="Left" style="position: absolute; will-change: transform;">
-    <div class="arrow" style="top: 34px;"></div>
+  <div *ngIf="hide" name='popover' class="popover fade bs-popover-right show" role="tooltip"  x-placement="right" [style.top]="popoverTop" [style.left]="popoverLeft" style="position: absolute; will-change: transform;">
+    <div class="arrow" [style.transform]='arrowRotate' [style.left]='arrowLeft' [style.top]="arrowTop"></div>
       <h3 class="popover-header">{{config.popoverTitle}}</h3>
     <div class="popover-body">{{config.popoverData}}
     </div>

src/bossy-ui/components/popover/popover.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, SimpleChanges, ElementRef, HostListener} from '@angular/core';
+import {Component, Input, OnInit, SimpleChanges, ElementRef, HostListener, ChangeDetectorRef} from '@angular/core';
 import {BossyPopoverConfig} from './popover.config';
 
 
@@ -12,29 +12,127 @@ import {BossyPopoverConfig} from './popover.config';
 export class BossyPopoverComponent implements OnInit {
   @Input() config: BossyPopoverConfig;
 
-  constructor(private _eref: ElementRef) {}
+  constructor(private _eref: ElementRef, private cdRef: ChangeDetectorRef) {}
+
   hide = false;
-  Top = '0px';
-  Left = '0px';
+  popoverTop = '0px';
+  popoverLeft = '0px';
+  eventTarget = undefined;
+  arrowSpacing = 34;
+  arrowTop = '34px';
+  arrowLeft = '0px';
+  arrowRotate = 'rotate(0deg)';
 
   ngOnInit() {
-    this.Top = '0px';
-    this.Left = '0px';
-    this.hide = false;
+    this.calcSpacing();
+    const elements = document.body.querySelectorAll('[id=' + this.config.popoverID + ']');
+    this.eventTarget = elements[0];
+    if (this.eventTarget !== undefined) {
+      this.eventTarget.addEventListener('click', this.ShowPopoverOnClick.bind(this));
+      if (this.eventTarget.contains(event)) {
+        this.ShowPopoverOnClick(event);
+      }
+    } else {
+      console.error('Popover could not resolve element', this.config.popoverID);
+    }
   }
 
+
+  /*
+  * Function this function makes the popover dismiss when clicked outside of it.
+  */
   @HostListener('document:click', ['$event.target'])
   onClick(event: any) {
-    if (this.config.dismissable && this.hide) {
-      if (!this._eref.nativeElement.contains(event)) {
+    if (this.eventTarget !== undefined && this.config.dismissable && this.hide) {
+      const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+      if (!this.eventTarget.contains(event) && !popover_ref.contains(event)) {
         this.hide = false;
       }
     }
   }
 
+
+  /*
+  * Function to recalculate everytime where the event target is on screen and place the popover
+  *
+  * Better solution: maybe add a host listener to the event target if position changes update position
+  *                  of the popover and arrow variables. That would clean this up.
+  */
   ShowPopoverOnClick(event: any) {
-    this.Top = (event.target.offsetTop - 34) + 'px';
-    this.Left = event.target.offsetLeft + event.target.offsetWidth + 'px';
-    this.hide = !this.hide;
+    if (this.eventTarget !== undefined) {
+      if (this.config.placement === 'top') {
+        this.hide = !this.hide;
+        this.cdRef.detectChanges();
+        const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+        if (popover_ref !== undefined) {
+          this.popoverTop = (this.eventTarget.offsetTop - (popover_ref.offsetHeight)) - (this.arrowSpacing / 4) + 'px';
+          this.popoverLeft = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
+          this.arrowTop =  (popover_ref.offsetHeight - 10) + 'px';
+          this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
+          this.arrowRotate = 'rotate(270deg)';
+        }
+      } else if (this.config.placement === 'bottom') {
+        this.hide = !this.hide;
+        this.cdRef.detectChanges();
+        const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+        if (popover_ref !== undefined) {
+          this.popoverTop = (this.eventTarget.offsetTop + (this.eventTarget.offsetHeight)) + (this.arrowSpacing / 4) + 'px';
+          this.popoverLeft = this.eventTarget.offsetLeft + (this.eventTarget.offsetWidth / 2) - (popover_ref.offsetWidth / 2) + 'px';
+          this.arrowTop = '-16px';
+          this.arrowLeft = popover_ref.offsetWidth / 2 + 'px';
+          this.arrowRotate = 'rotate(90deg)';
+        }
+      } else if (this.config.placement === 'left') {
+        this.hide = !this.hide;
+        this.cdRef.detectChanges();
+        const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+        if (popover_ref !== undefined) {
+          this.popoverLeft = (this.eventTarget.offsetLeft - popover_ref.offsetWidth - (this.arrowSpacing / 2 )) + 'px';
+          this.popoverTop = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2 )) + 'px';
+          this.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
+          this.arrowLeft = (popover_ref.offsetWidth - 1) + 'px';
+          this.arrowRotate = 'rotate(180deg)';
+        }
+      } else {
+        if (this.config.placement !== 'right') {
+          console.error('invalid placement defaulting to {placement: right}');
+        }
+        this.hide = !this.hide;
+        this.cdRef.detectChanges();
+        const popover_ref = this._eref.nativeElement.querySelectorAll('div.popover')[0];
+        if (popover_ref !== undefined) {
+          this.popoverTop = (this.eventTarget.offsetTop - ((popover_ref.offsetHeight / 2) - this.eventTarget.offsetHeight / 2)) + 'px';
+          this.popoverLeft = this.eventTarget.offsetLeft + this.eventTarget.offsetWidth + 'px';
+          this.arrowTop = popover_ref.offsetHeight / 2 - (popover_ref.firstElementChild.offsetHeight / 2) + 'px';
+          this.arrowLeft = '-8px';
+          this.arrowRotate = 'rotate(0deg)';
+        }
+      }
+    }
+  }
+
+
+  /*
+  * Function when users only specify one field the spacing needs to be modified
+  * so the popover dosen't look 'Super Gross'.
+  */
+  calcSpacing() {
+    if (this.config.placement === 'top' || this.config.placement === 'bottom') {
+      if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
+        this.arrowSpacing = 34;
+        this.arrowTop = '34px';
+      } else {
+        this.arrowSpacing = 17;
+        this.arrowTop = '10px';
+      }
+    } else {
+      if (this.config.popoverData !== '' && this.config.popoverTitle !== '') {
+        this.arrowSpacing = 34;
+        this.arrowTop = '34px';
+      } else {
+        this.arrowSpacing = 34;
+        this.arrowTop = '12px';
+      }
+    }
   }
 }

src/bossy-ui/components/popover/popover.config.ts

@@ -3,7 +3,9 @@ export class BossyPopoverConfig {
   public hide: boolean;
   constructor(
               public name: string,
+              public popoverID: string,
               public dismissable: boolean,
+              public placement: string,
               public popoverTitle: string,
               public popoverData: string) {
   }