vaadin-radio-button.html

<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/mixins/gesture-event-listeners.html">
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<link rel="import" href="../../vaadin-control-state-mixin/vaadin-control-state-mixin.html">
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">

<dom-module id="vaadin-radio-button">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      label {
        display: inline-flex;
        align-items: baseline;
        outline: none;
      }

      [part="radio"] {
        position: relative;
        display: inline-block;
        flex: none;
      }

      input[type="radio"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: inherit;
        margin: 0;
      }

      :host([disabled]) {
        -webkit-tap-highlight-color: transparent;
      }
    </style>

    <label on-click="_preventDefault">
      <span part="radio">
        <input
          type="radio"
          checked="{{checked::change}}"
          disabled$="[[disabled]]"
          role="presentation"
          tabindex="-1">
      </span>

      <span part="label">
        <slot></slot>
      </span>
    </label>
  </template>

  <script>
    (function() {
      /**
       * `<vaadin-radio-button>` is a Web Component for radio buttons.
       *
       * ```html
       * <vaadin-radio-button value="foo">Foo</vaadin-radio-button>
       * ```
       *
       * ### Styling
       *
       * The following shadow DOM parts are available for styling:
       *
       * Part name         | Description
       * ------------------|----------------
       * `radio`           | The radio button element
       * `label`           | The label content element
       *
       * The following state attributes are available for styling:
       *
       * Attribute  | Description | Part name
       * -----------|-------------|------------
       * `disabled`   | Set when the radio button is disabled. | :host
       * `focus-ring` | Set when the radio button is focused using the keyboard. | :host
       * `focused`    | Set when the radio button is focused. | :host
       * `checked`    | Set when the radio button is checked. | :host
       *
       * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
       *
       * @memberof Vaadin
       * @mixes Vaadin.ElementMixin
       * @mixes Vaadin.ControlStateMixin
       * @mixes Vaadin.ThemableMixin
       * @mixes Polymer.GestureEventListeners
       * @element vaadin-radio-button
       * @demo demo/index.html
       */
      class RadioButtonElement extends
        Vaadin.ElementMixin(
          Vaadin.ControlStateMixin(
            Vaadin.ThemableMixin(
              Polymer.GestureEventListeners(Polymer.Element)))) {

        static get is() {
          return 'vaadin-radio-button';
        }

        static get version() {
          return '1.1.0-beta2';
        }

        static get properties() {
          return {
            /**
             * True if the radio button is checked.
             */
            checked: {
              type: Boolean,
              value: false,
              notify: true,
              observer: '_checkedChanged',
              reflectToAttribute: true
            },

            /**
             * The value for this element.
             */
            value: {
              type: String,
              value: 'on'
            }

          };
        }

        constructor() {
          super();

          /**
           * @type {string}
           * Name of the element.
           */
          this.name;
        }

        get name() {
          return this.checked ? this._storedName : '';
        }

        set name(name) {
          this._storedName = name;
        }

        ready() {
          super.ready();

          this.setAttribute('role', 'radio');

          this.addEventListener('click', this._handleClick.bind(this));

          this._addActiveListeners();

          const attrName = this.getAttribute('name');
          if (attrName) {
            this.name = attrName;
          }
        }

        _checkedChanged(checked) {
          this.setAttribute('aria-checked', checked);
        }

        _addActiveListeners() {
          this._addEventListenerToNode(this, 'down', (e) => {
            if (!this.disabled) {
              this.setAttribute('active', '');
            }
          });

          this._addEventListenerToNode(this, 'up', (e) => {
            this.removeAttribute('active');

            if (!this.checked && !this.disabled) {
              this.checked = true;
            }
          });

          this.addEventListener('keydown', e => {
            if (!this.disabled && e.keyCode === 32) {
              e.preventDefault();
              this.setAttribute('active', '');
            }
          });

          this.addEventListener('keyup', e => {
            if (!this.disabled && e.keyCode === 32) {
              e.preventDefault();
              this.setAttribute('checked', '');
              this.removeAttribute('active');
            }
          });
        }

        _handleClick(e) {
          if (!this.disabled) {
            e.preventDefault();
            this.checked = true;
          }
        }

        /** @protected */
        get focusElement() {
          return this.shadowRoot.querySelector('input');
        }

        _preventDefault(e) {
          e.preventDefault();
        }
      }

      customElements.define(RadioButtonElement.is, RadioButtonElement);


      /**
       * @namespace Vaadin
       */
      window.Vaadin.RadioButtonElement = RadioButtonElement;
    })();
  </script>
</dom-module>