baVard work still in progress

src/app/theme/baCard/baCard.component.ts

@@ -1,8 +1,11 @@
 import {Component, ViewEncapsulation, Input} from 'angular2/core';
 
+import {BaCardBlur} from './baCardBlur.directive';
+
 @Component({
   selector: 'ba-card',
   styles: [require('./baCard.scss')],
+  directives: [BaCardBlur],
   template: require('./baCard.html'),
   encapsulation: ViewEncapsulation.None
 })

src/app/theme/baCard/baCard.html

@@ -1,4 +1,4 @@
-<div  class="card {{cardType}} {{baCardClass || ''}}" zoom-in ba-panel-blur>
+<div  class="card {{cardType}} card-blur {{baCardClass || ''}}" zoom-in baCardBlur>
     <div *ngIf="title" class="card-header clearfix">
         <h3 class="card-title">{{title}}</h3>
     </div>

src/app/theme/baCard/baCardBlur.directive.ts

@@ -22,15 +22,15 @@ export class BaCardBlur {
   }
 
   private _getBodyImageSizesOnBgLoad():void {
-    this._baCardBlurHelper.bodyBgLoad().then(function() {
+    this._baCardBlurHelper.bodyBgLoad().subscribe(() => {
       this._bodyBgSize = this._baCardBlurHelper.getBodyBgImageSizes();
     });
   }
 
   private _recalculateCardStylesOnBgLoad():void {
-    this._baCardBlurHelper.bodyBgLoad().then(() => {
+    this._baCardBlurHelper.bodyBgLoad().subscribe((event) => {
-      setTimeout(this._recalculateCardStyle);
+      setTimeout(this._recalculateCardStyle.bind(this));
-    });
+    })
   }
 
   private _recalculateCardStyle():void {

src/app/theme/baCard/baCardBlurHelper.service.ts

@@ -1,15 +1,15 @@
 import {Injectable} from 'angular2/core'
-
 import {BgMetrics} from './bgMetrics';
+import {Subject} from 'rxjs/Subject';
 
 @Injectable()
 export class BaCardBlurHelper {
   private image:HTMLImageElement;
-  private imageLoadDeferred = Promise.defer(); //TODO: Promises or Observables refactor
+  private imageLoadSubject:Subject<void>;
 
   constructor() {
     this._genBgImage();
-    this._setImageLoadResolves()
+    this._genImageLoadSubject();
   }
 
   private _genBgImage():void {
@@ -18,17 +18,20 @@ export class BaCardBlurHelper {
     this.image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
   }
 
-  private _setImageLoadResolves():void {
+  private _genImageLoadSubject():void {
+    this.imageLoadSubject = new Subject<void>();
     this.image.onerror = () => {
-      this.imageLoadDeferred.reject();
+      this.imageLoadSubject.error();
+      this.imageLoadSubject.complete();
     };
     this.image.onload = () => {
-      this.imageLoadDeferred.resolve();
+      this.imageLoadSubject.next(null);
+      this.imageLoadSubject.complete();
     };
   }
 
-  public bodyBgLoad():Promise {
+  public bodyBgLoad():Subject<void> {
-    return this.imageLoadDeferred.promise;
+    return this.imageLoadSubject;
   }
 
   public getBodyBgImageSizes():BgMetrics {