vaadin-tab.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="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<link rel="import" href="../../vaadin-item/src/vaadin-item-mixin.html">
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">

<dom-module id="vaadin-tab">
  <template>
    <slot></slot>
  </template>
  <script>
    (function() {
      /**
       * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
       *
       * ```
       *   <vaadin-tab>
       *     Tab 1
       *   </vaadin-tab>
       * ```
       *
       * The following state attributes are available for styling:
       *
       * Attribute  | Description | Part name
       * -----------|-------------|------------
       * `disabled` | Set to a disabled tab | :host
       * `focused` | Set when the element is focused | :host
       * `focus-ring` | Set when the element is keyboard focused | :host
       * `selected` | Set when the tab is selected | :host
       * `active` | Set when mousedown or enter/spacebar pressed | :host
       * `orientation` | Set to `horizontal` or `vertical` depending on the direction of items  | :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.ThemableMixin
       * @mixes Vaadin.ItemMixin
       */
      class TabElement extends Vaadin.ElementMixin(Vaadin.ThemableMixin(Vaadin.ItemMixin(Polymer.Element))) {
        static get is() {
          return 'vaadin-tab';
        }

        static get version() {
          return '3.2.0-beta1';
        }

        ready() {
          super.ready();
          this.setAttribute('role', 'tab');
        }

        /**
         * @param {!KeyboardEvent} event
         * @protected
         */
        _onKeyup(event) {
          const willClick = this.hasAttribute('active');

          super._onKeyup(event);

          if (willClick) {
            const anchor = this.querySelector('a');
            if (anchor) {
              anchor.click();
            }
          }
        }
      }

      customElements.define(TabElement.is, TabElement);

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