SGH / COMPONENTS

  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  
  <link rel="import" href="../polymer/polymer.html">
  <link rel="import" href="../paper-ripple/paper-ripple.html">
  <link rel="import" href="../paper-styles/default-theme.html">

  <link rel="import" href="../paper-styles/color.html">

  <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
  

  <!--

  Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)

  
  `paper-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:
  
      <paper-checkbox>label</paper-checkbox>
  
      <paper-checkbox checked> label</paper-checkbox>
  
  ### Styling
  
  The following custom properties and mixins are available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
  `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
  `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
  `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--default-primary-color`
  `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
  `--paper-checkbox-checkmark-color` | Checkmark color | `white`
  `--paper-checkbox-label-color` | Label color | `--primary-text-color`

  `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`

  `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500`

  `--paper-checkbox-size` | Size of the checkbox | `18px`

  
  @demo demo/index.html
  -->
  
  <dom-module id="paper-checkbox">

    <template strip-whitespace>

      <style>
        :host {
          display: inline-block;
          white-space: nowrap;

          cursor: pointer;
          --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);

        }
  
        :host(:focus) {
          outline: none;
        }
  
        .hidden {
          display: none;
        }
  
        #checkboxContainer {
          display: inline-block;
          position: relative;

          width: var(--calculated-paper-checkbox-size);
          height: var(--calculated-paper-checkbox-size);
          min-width: var(--calculated-paper-checkbox-size);

          vertical-align: middle;
          background-color: var(--paper-checkbox-unchecked-background-color, transparent);
        }
  

        #ink {

          position: absolute;

  
          /* Center the ripple in the checkbox by negative offsetting it by
           * (inkWidth - rippleWidth) / 2 */
          top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
          left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);
          width: calc(2.66 * var(--calculated-paper-checkbox-size));
          height: calc(2.66 * var(--calculated-paper-checkbox-size));

          color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
          opacity: 0.6;
          pointer-events: none;
        }
  

        :host-context([dir="rtl"]) #ink {

          right: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--calculated-paper-checkbox-size)) / 2);

          left: auto;
        }
  
        #ink[checked] {

          color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
        }
  

        #checkbox {

          position: relative;
          box-sizing: border-box;
          height: 100%;
          border: solid 2px;
          border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
          border-radius: 2px;
          pointer-events: none;
          -webkit-transition: background-color 140ms, border-color 140ms;
          transition: background-color 140ms, border-color 140ms;
        }
  
        /* checkbox checked animations */
        #checkbox.checked #checkmark {
          -webkit-animation: checkmark-expand 140ms ease-out forwards;
          animation: checkmark-expand 140ms ease-out forwards;
        }
  
        @-webkit-keyframes checkmark-expand {
          0% {

            -webkit-transform: scale(0, 0) rotate(45deg);

          }
          100% {

            -webkit-transform: scale(1, 1) rotate(45deg);

          }
        }
  
        @keyframes checkmark-expand {
          0% {

            transform: scale(0, 0) rotate(45deg);

          }
          100% {

            transform: scale(1, 1) rotate(45deg);

          }
        }
  

        #checkbox.checked {

          background-color: var(--paper-checkbox-checked-color, --default-primary-color);
          border-color: var(--paper-checkbox-checked-color, --default-primary-color);
        }
  

        #checkmark {

          position: absolute;

          width: 36%;
          height: 70%;

          border-style: solid;
          border-top: none;
          border-left: none;

          border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
          border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));

          border-color: var(--paper-checkbox-checkmark-color, white);

          transform-origin: 97% 86%;
          -webkit-transform-origin: 97% 86%;
        }
  
        :host-context([dir="rtl"]) #checkmark {
          transform-origin: 50% 14%;
          -webkit-transform-origin: 50% 14%;

        }
  
        /* label */
        #checkboxLabel {
          position: relative;
          display: inline-block;
          vertical-align: middle;

          padding-left: var(--paper-checkbox-label-spacing, 8px);

          white-space: normal;
          pointer-events: none;
          color: var(--paper-checkbox-label-color, --primary-text-color);
        }
  

        :host-context([dir="rtl"]) #checkboxLabel {
          padding-right: var(--paper-checkbox-label-spacing, 8px);
          padding-left: 0;
        }
  

        #checkboxLabel[hidden] {
          display: none;
        }
  
        /* disabled state */
        :host([disabled]) {
          pointer-events: none;
        }
  
        :host([disabled]) #checkbox {
          opacity: 0.5;
          border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
        }
  
        :host([disabled][checked]) #checkbox {
          background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
          opacity: 0.5;
        }
  
        :host([disabled]) #checkboxLabel  {
          opacity: 0.65;
        }
  
        /* invalid state */
        #checkbox.invalid:not(.checked) {
          border-color: var(--paper-checkbox-error-color, --google-red-500);
        }
      </style>

  
      <div id="checkboxContainer">

        <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">

          <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
        </div>
      </div>
  

      <div id="checkboxLabel"><content></content></div>

    </template>
  
    <script>
      Polymer({
        is: 'paper-checkbox',
  
        behaviors: [

          Polymer.PaperCheckedElementBehavior

        ],
  
        hostAttributes: {
          role: 'checkbox',
          'aria-checked': false,
          tabindex: 0
        },
  
        properties: {
          /**
           * Fired when the checked state changes due to user interaction.
           *
           * @event change
           */
  
          /**
           * Fired when the checked state changes.
           *
           * @event iron-change
           */

          ariaActiveAttribute: {
            type: String,
            value: 'aria-checked'
          }
        },

        _computeCheckboxClass: function(checked, invalid) {
          var className = '';

          if (checked) {

            className += 'checked ';

          }

          if (invalid) {
            className += 'invalid';
          }
          return className;

        },
  
        _computeCheckmarkClass: function(checked) {

          return checked ? '' : 'hidden';

        },
  
        // create ripple inside the checkboxContainer
        _createRipple: function() {
          this._rippleContainer = this.$.checkboxContainer;
          return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);

        }

      });

    </script>

  </dom-module>