/**
 * @license
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 */

CLASS({
  package: 'foam.ui.md',
  name: 'FlatButton',
  extendsModel: 'foam.flow.Element',

  requires: [ 'foam.ui.md.HaloView' ],

  properties: [
    {
      name: 'className',
      defaultValue: 'flatbutton'
    },
    {
      name: 'action',
      postSet: function() { this.bindData(); }
    },
    {
      name: 'data',
      postSet: function() { this.bindData(); }
    },
    {
      name: 'escapeHtml',
      defaultValue: true,
    },
    {
      name: 'halo',
      lazyFactory: function() {
        return this.HaloView.create({
          className: 'halo',
          recentering: false,
          color$: this.currentColor_$,
          pressedAlpha: 0.2,
          startAlpha: 0.2,
          finishAlpha: 0
        });
      }
    },
    {
      model_: 'StringProperty',
      name: 'currentColor_',
      hidden: true,
      defaultValueFn: function() { return this.color; }
    },
    {
      name: 'color',
      help: 'The text and background color to use for the active state',
      defaultValue: '#02A8F3'
    },
    {
      model_: 'BooleanProperty',
      name: 'isHidden',
      defaultValue: false
    }
  ],

  methods: [
    function initHTML() {
      var self = this;

      this.currentColor_$.addListener(function() {
        if ( self.$ ) self.$.style.color = this.currentColor_;
      });
      if ( self.$ ) self.$.style.color = this.currentColor_;

      this.$.addEventListener('click', function(event) {
        event.stopPropagation();
        event.preventDefault();
        self.action.maybeCall(self.X, self.data);
      }, this.id);

      this.setClass('hidden', function() { return self.isHidden; }, this.id);
    },
    function bindData() {
      if ( ! this.action || ! this.data ) return;

      var self = this;

      if ( this.action.labelFn ) this.X.dynamic(
        function() {
          self.action.label = self.action.labelFn.call(self.data, self.action);
        },
        function() {
          if ( self.$ ) self.$.querySelector('span').innerHTML = self.labelHTML();
        });

      // available enabled etc.
      this.X.dynamic(
        function() { self.action.isEnabled.call(self.data, self.action); },
        function() {
          if ( self.action.isEnabled.call(self.data, self.action) ) {
            self.currentColor_ = self.color;
          } else {
            self.currentColor_ = "#5a5a5a";
          }
        }
      );

      this.X.dynamic(
        function() { self.action.isAvailable.call(self.data, self.action); },
        function() {
          self.isHidden = ! self.action.isAvailable.call(self.data, self.action);
        }
      );
    }
  ],

  templates: [
    function CSS() {/*
      flat-button {
        padding: 10px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        border-radius: 2px;
        cursor: pointer;
      }

      .hidden {
        display: none;
      }

      .halo  {
        position: absolute;
        left: 0;
        top: 0;
      }
    */},
    function toHTML() {/*
      <<%= self.tagName %> id="%%id" <%= this.cssClassAttr() %> >
        %%halo
        <span><% this.labelHTML(out) %></span>
      </%%tagName>
    */},
    function labelHTML() {/*
      <% if ( this.action ) { %>
        <% if ( this.escapeHtml ) { %>
          {{this.action.label}}
        <% } else { %>
          {{{this.action.label}}}
        <% } %>
      <% } else if ( this.inner ) { %>
         <%= this.inner() %>
      <% } else { %>label<% } %>
    */}
  ]
});

@@ -1489,32 +1489,52 @@
 var self = this;
+%0A      this.SUPER();
 %0A%0A      this.cur
@@ -1639,24 +1639,24 @@
 ;%0A      %7D);%0A
+
       if ( s
@@ -1709,200 +1709,8 @@
 _;%0A%0A
-      this.$.addEventListener('click', function(event) %7B%0A        event.stopPropagation();%0A        event.preventDefault();%0A        self.action.maybeCall(self.X, self.data);%0A      %7D, this.id);%0A%0A
     
@@ -3372,16 +3372,113 @@
 agName%3E%0A
+      %3C%25 this.on('click', function() %7B self.action.maybeCall(self.X, self.data); %7D, this.id); %25%3E%0A
     */%7D,

Use this.on('click') instead of raw DOM events