import { bindable, customAttribute } from 'aurelia-templating';
import { bindingMode } from 'aurelia-binding';
import { inject } from 'aurelia-dependency-injection';
import { AttributeManager } from '../common/attributeManager';

@customAttribute('md-waves')
@inject(Element)
export class MdWaves {
  @bindable({
    defaultBindingMode: bindingMode.oneTime
  }) color;
  constructor(element) {
    this.element = element;
    this.attributeManager = new AttributeManager(this.element);
  }

  attached() {
    let classes = ['waves-effect'];
    if (this.color) {
      classes.push(`waves-${this.color}`);
    }

    this.attributeManager.addClasses(classes);
    Waves.attach(this.element);
  }

  detached() {
    let classes = ['waves-effect'];
    if (this.color) {
      classes.push(`waves-${this.color}`);
    }

    this.attributeManager.removeClasses(classes);
  }
}

@@ -221,16 +221,85 @@
 anager';
+%0Aimport %7B getBooleanFromAttributeValue %7D from '../common/attributes';
 %0A%0A@custo
@@ -419,16 +419,94 @@
 oneTime%0A
+  %7D) block = false;%0A  @bindable(%7B%0A    defaultBindingMode: bindingMode.oneTime%0A
   %7D) col
@@ -674,32 +674,125 @@
 waves-effect'%5D;%0A
+    if (getBooleanFromAttributeValue(this.block)) %7B%0A      classes.push('waves-block');%0A    %7D%0A
     if (this.col
@@ -938,32 +938,32 @@
 %0A  detached() %7B%0A
-
     let classes 
@@ -971,32 +971,47 @@
  %5B'waves-effect'
+, 'waves-block'
 %5D;%0A    if (this.

add block property to activate waves-block (display: block)