WebCompDev / 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="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">

  <link rel="import" href="../iron-selector/iron-selectable.html">
  <link rel="import" href="../paper-radio-button/paper-radio-button.html">

  
  <!--

  Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
  
  `paper-radio-group` allows user to select at most one radio button from a set.

  Checking one radio button that belongs to a radio group unchecks any
  previously checked radio button within the same group. Use
  `selected` to get or set the selected radio button.
  

  The <paper-radio-buttons> inside the group must have the `name` attribute
  set.
  

  Example:
  
      <paper-radio-group selected="small">
        <paper-radio-button name="small">Small</paper-radio-button>
        <paper-radio-button name="medium">Medium</paper-radio-button>
        <paper-radio-button name="large">Large</paper-radio-button>
      </paper-radio-group>
  

  Radio-button-groups can be made optional, and allow zero buttons to be selected:
  
      <paper-radio-group selected="small" allow-empty-selection>
        <paper-radio-button name="small">Small</paper-radio-button>
        <paper-radio-button name="medium">Medium</paper-radio-button>
        <paper-radio-button name="large">Large</paper-radio-button>
      </paper-radio-group>
  
  See <a href="paper-radio-button">paper-radio-button</a> for more

  information about `paper-radio-button`.
  
  @group Paper Elements
  @element paper-radio-group
  @hero hero.svg
  @demo demo/index.html
  -->
  

  <dom-module id="paper-radio-group">

    <style>
      :host {
        display: inline-block;
      }

      :host ::content > * {
        padding: 12px;
      }
    </style>

    <template>
        <content id="items" select="*"></content>

    </template>

  </dom-module>
  
  <script>
    Polymer({
      is: 'paper-radio-group',
  
      behaviors: [
        Polymer.IronA11yKeysBehavior,
        Polymer.IronSelectableBehavior
      ],
  
      hostAttributes: {
        role: 'radiogroup',
        tabindex: 0
      },
  
      properties: {
        /**

         * Fired when the radio group selection changes.
         *
         * @event paper-radio-group-changed
         */
  
        /**

         * Overriden from Polymer.IronSelectableBehavior
         */
        attrForSelected: {
          type: String,
          value: 'name'
        },
  
        /**
         * Overriden from Polymer.IronSelectableBehavior
         */
        selectedAttribute: {
          type: String,
          value: 'checked'
        },
  
        /**
         * Overriden from Polymer.IronSelectableBehavior
         */
        selectable: {
          type: String,
          value: 'paper-radio-button'

        },
  
        /**
         * If true, radio-buttons can be deselected
         */
        allowEmptySelection: {
          type: Boolean,
          value: false

        }
      },
  
      keyBindings: {
        'left up': 'selectPrevious',
        'right down': 'selectNext',
      },
  
      /**
       * Selects the given value.
       */
       select: function(value) {
        if (this.selected) {
          var oldItem = this._valueToItem(this.selected);
  

          if (this.selected == value) {

            // If deselecting is allowed we'll have to apply an empty selection.
            // Otherwise, we should force the selection to stay and make this
            // action a no-op.
            if (this.allowEmptySelection) {
              value = '';
            } else {

              oldItem.checked = true;

              return;
            }

          }
  
          if (oldItem)
            oldItem.checked = false;
        }
  
        Polymer.IronSelectableBehavior.select.apply(this, [value]);
        this.fire('paper-radio-group-changed');
      },
  
      /**
       * Selects the previous item. If the previous item is disabled, then it is
       * skipped, and its previous item is selected
       */
      selectPrevious: function() {
        var length = this.items.length;
        var newIndex = Number(this._valueToIndex(this.selected));
  
        do {
          newIndex = (newIndex - 1 + length) % length;
        } while (this.items[newIndex].disabled)
  

        this.select(this._indexToValue(newIndex));

      },
  
      /**
       * Selects the next item. If the next item is disabled, then it is
       * skipped, and the next item after it is selected.
       */
      selectNext: function() {
        var length = this.items.length;
        var newIndex = Number(this._valueToIndex(this.selected));
  
        do {
          newIndex = (newIndex + 1 + length) % length;
        } while (this.items[newIndex].disabled)
  

        this.select(this._indexToValue(newIndex));

      },
    });
  </script>