etools-checkable-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">

<!--
`etools-checkable-input`
Checkbox or radio input with label aligned top, right, bottom and left and a disabled state.

### Styling

You can use defined variables and mixins to change element style.

Custom property | Description | Default
----------------|-------------|----------
`--etools-checkable-input-size` | Input size | `16px`
`--etools-checkable-input-checked-color` | Input checked color | `#4a90e2`
`--etools-checkable-input-unchecked-color` | Input unchecked color | `#737373`
`--etools-checkable-input-font-size` | Label font size | `12px`
`--etools-checkable-input-label` | Mixin applied to the label | `{}`
`--etools-checkable-input-disabled-color` | Disabled color | `#d1d1d1`,
`--etools-checkable-input-ripple-color` | Radio btn ripple(#ink) color | `--primary-color`

@demo demo/index.html
-->

<dom-module id="etools-checkable-input">
  <template>
    <style include="iron-flex iron-flex-reverse iron-flex-alignment">
      :host {
        --paper-checkbox-label: {
          display: none;
        };
        --paper-radio-button-label: {
          display: none;
        };

        --paper-checkbox-size: var(--etools-checkable-input-size, 16px);
        --paper-checkbox-checked-color: var(--etools-checkable-input-checked-color, #4a90e2);
        --paper-checkbox-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373);
        --paper-checkbox-unchecked-ink-color: var(--etools-checkable-input-ripple-color, --primary-color);
        --paper-checkbox-checked-ink-color: var(--etools-checkable-input-ripple-color, --primary-color);

        --paper-radio-button-size: var(--etools-checkable-input-size, 16px);
        --paper-radio-button-checked-color: var(--etools-checkable-input-checked-color, #4a90e2);
        --paper-radio-button-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373);
        --paper-radio-button-checked-ink-color: var(--etools-checkable-input-ripple-color, --primary-color);
        --paper-radio-button-unchecked-ink-color: var(--etools-checkable-input-ripple-color, --primary-color);

      }

      #chLabel {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--etools-checkable-input-font-size, 12px);
        font-weight: 400;
        letter-spacing: 0.011em;
        line-height: 20px;

        cursor: pointer;
        color: var(--etools-checkable-input-unchecked-color, #737373);
        @apply(--etools-checkable-input-label);
      }
      #chLabel.uppercase {
        text-transform: uppercase;
      }
      #chLabel.capitalize {
        text-transform: capitalize;
      }
      #chLabel.end-justified {
        max-width: calc(100% - 25px);
      }

      :host .disabled #chLabel {
        color: var(--etools-checkable-input-disabled-color, #d1d1d1);
        cursor: not-allowed;
      }

      .left-aligned paper-checkbox,
      .left-aligned paper-radio-button {
        margin-right: 10px;
      }

      .right-aligned {
        margin-left: 10px;
      }

      :host([readonly]) {
        --paper-checkbox-unchecked-ink-color: rgba(255, 255, 255, 0);
        --paper-checkbox-checked-ink-color: rgba(255, 255, 255, 0);
        --paper-radio-button-checked-ink-color: rgba(255, 255, 255, 0);
        --paper-radio-button-unchecked-ink-color: rgba(255, 255, 255, 0);
      }

      :host([readonly]) #chLabel,
      :host([readonly]) paper-checkbox,
      :host([readonly]) paper-radio-button {
        cursor: default;
      }

      :host([readonly][checked][unchanged-readonly-style]) {
        --paper-checkbox-unchecked-color: var(--etools-checkable-input-checked-color, #4a90e2);
        --paper-radio-button-unchecked-color: var(--etools-checkable-input-checked-color, #4a90e2);
      }
      :host([readonly][is-disabled][unchanged-readonly-style]),
      :host([readonly][is-disabled][checked][unchanged-readonly-style]) {
        --paper-checkbox-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373);
        --paper-radio-button-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373);
      }

      .text-center {
        text-align: center;
      }
    </style>
    <div class$="[[_getElementWrapperClasses(labelAlignment)]] [[disabledClass]]">
      <span id="chLabel" class$="[[_getLabelAlignmentClasses(labelAlignment)]] [[labelTextTransform]]">[[label]]</span>
      <div class$="[[_getInputAlignmentClasses(labelAlignment)]]">
        <template is="dom-if" if="[[_isCheckbox(type)]]">
          <paper-checkbox id="el" checked="{{checked}}" disabled$="[[_isDisabled(isDisabled, readonly)]]"
                          on-iron-change="_valueChanged"></paper-checkbox>
        </template>
        <template is="dom-if" if="[[_isRadioBtn(type)]]">
          <paper-radio-button id="el" checked="{{checked}}" disabled$="[[_isDisabled(isDisabled, readonly)]]"
                              on-iron-change="_valueChanged"></paper-radio-button>
        </template>
      </div>
    </div>

  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'etools-checkable-input',

        properties: {
          type: {
            type: String,
            value: 'checkbox'
          },
          labelAlignment: {
            type: String,
            value: 'right'
          },
          labelTextTransform: {
            type: String,
            value: ''
          },
          label: {
            type: String,
            value: ''
          },
          checked: {
            type: Boolean,
            value: false,
            notify: true,
            reflectToAttribute: true
          },
          isDisabled: {
            type: Boolean,
            value: false,
            reflectToAttribute: true,
            observer: '_updateDisabledClass'
          },
          readonly: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
          },
          unchangedReadonlyStyle: {
            type: Boolean,
            value: true,
            reflectToAttribute: true
          }
        },
        observers: ['_stateChanged(readonly, isDisabled, checked)'],
        listeners: {
          'chLabel.tap': '_updateInputVal'
        },
        _stateChanged: function(readonly, isDisabled, checked) {
          this.async(function() {
            var el = this.$$('#el');
            if (el) {
              var elem;
              if (this.type === 'checkbox') {
                // checkbox
                elem = [el.$.checkbox];
              } else {
                // radio
                elem = [el.$.offRadio, el.$.onRadio];
              }
              if (isDisabled) {
                this._updateOpacity(elem, '');
                return;
              }
              if (readonly) {
                this._updateOpacity(elem, '1');
              } else {
                this._updateOpacity(elem, '');
              }
            }
          });
        },
        _updateOpacity: function(elements, opacityValue) {
          if (!(elements instanceof Array && elements.length)) {
            return;
          }
          elements.forEach(function(el) {
            el.style.opacity = opacityValue;
          });
          this.updateStyles();
        },
        _isDisabled: function(isDisabled, readonly) {
          return isDisabled || readonly;
        },
        _valueChanged: function() {
          this.fire('value-changed', {checked: this.checked === true ? true : false});
        },
        _updateInputVal: function() {
          if (this.isDisabled || this.readonly) {
            return false;
          }
          this.set('checked', !this.checked);
        },
        _isCheckbox: function(inputType) {
          return inputType === 'checkbox';
        },
        _isRadioBtn: function(inputType) {
          return inputType === 'radio';
        },
        _getElementWrapperClasses: function(align) {
          if (align === 'bottom') {
            return 'layout vertical-reverse text-center';
          } else if (align === 'right') {
            return 'layout horizontal-reverse wrap-reverse end-justified';
          } else if (align === 'left') {
            return 'layout horizontal';
          } else {
            return 'layout vertical text-center';
          }
        },
        _getLabelAlignmentClasses: function(align) {
          if (align === 'top' || align === 'bottom') {
            return 'layout horizontal center-justified';
          } else {
            return '';
          }
        },
        _getInputAlignmentClasses: function(align) {
          if (align === 'top' || align === 'bottom') {
            return 'layout horizontal center-justified';
          } else if (align === 'right') {
            return 'layout vertical center-justified left-aligned';
          } else if (align === 'left') {
            return 'right-aligned';
          } else {
            return '';
          }
        },
        _updateDisabledClass: function() {
          if (this.isDisabled === true) {
            this.disabledClass = 'disabled';
          } else {
            this.disabledClass = '';
          }
        }

      });
    })();
  </script>
</dom-module>