t-checkbox.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">

<!--
`t-checkbox` is a button that can be either checked or unchecked.  User
can tap the checkbox to check or uncheck it.  Usually you use checkboxes
to allow user to select multiple options from a set.  If you have a single
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
instead.

Example:

    <t-checkbox>label</t-checkbox>

    <t-checkbox checked> label</t-checkbox>
### Styling
  
  * {
    /* Unhecked state colors. */
    --t-checkbox-unchecked-color: #5a5a5a;
    --t-checkbox-unchecked-ink-color: #5a5a5a;

    /* Checked state colors. */
    --t-checkbox-checked-color: #009688;
    --t-checkbox-checked-ink-color: #009688;
  }
-->
<dom-module id="t-checkbox">
  <link rel="import" type="css" href="t-checkbox.css">
<template>
<style include="iron-flex"></style>
  	<div class="layout horizontal center">
      <div id="checkboxContainer">
        <div id="checkbox" class$="[[_computeCheckboxClass(checked)]]">
          <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
        </div>
      </div>

      <div id="checkboxLabel" class="flex" aria-hidden="true">
      	<content></content>
      </div>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 't-checkbox',

    behaviors: [
      // TODO: Paper behaviors add ripple. Remove them if we don't want ripples
      Polymer.PaperInkyFocusBehavior
    ],

    hostAttributes: {
      role: 'checkbox',
      'aria-checked': false,
      tabindex: 0
    },

    properties: {
      
      /**
       * Put the checkmark on the right.
       *
       * @attribute checked
       * @type boolean
       * @default false
       */
       checkboxRight:{
        type:Boolean,
        value:false,
        reflectToAttribute:true
       },

       /**
       * Gets or sets the state, `true` is checked and `false` is unchecked.
       *
       * @attribute checked
       * @type boolean
       * @default false
       */
      checked: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
        notify: true,
        observer: '_checkedChanged'
      },

      /**
       * If true, the button toggles the active state with each tap or press
       * of the spacebar.
       *
       * @attribute toggles
       * @type boolean
       * @default true
       */
      toggles: {
        type: Boolean,
        value: true,
        reflectToAttribute: true
      }
    },

    ready: function() {
      if (Polymer.dom(this).textContent == '') {
          this.$.checkboxLabel.hidden = true;
        } else {
          this.setAttribute('aria-label', Polymer.dom(this).textContent);
        }
        this._isReady = true;
    },

    // button-behavior hook
    _buttonStateChanged: function() {
      if (this.disabled) {
          return;
        }
        if (this._isReady) {
          this.checked = this.active;
        }
    },

    _checkedChanged: function(checked) {
      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
      this.active = this.checked;
      this.fire('checked-change');
    },

    _computeCheckboxClass: function(checked) {
      if (checked) {
        return 'checked';
      }
    },

    _computeCheckmarkClass: function(checked) {
      if (!checked) {
        return 'hidden';
      }
    }
  })
</script>