px-tabs.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../iron-selector/iron-selectable.html"/>
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html"/>
<link rel="import" href="px-tab.html"/>
<link rel="import" href="css/px-tabs-styles.html"/>

<!--
The px-tabs and px-tab components together provide the tabbed interface. The tabbed content is expected to be contained in a separate iron-pages component.

Note: There is no limit on the number of tabs in a set, but there is no support for scrolling or wrapping.

### Usage
```
    <px-tabs selected="{{selected}}">
        <px-tab>Tab 1</px-tab>
        <px-tab>Tab 2</px-tab>
        <px-tab>Tab 3</px-tab>
    </px-tabs>
    <iron-pages selected="{{selected}}">
        <div>Tab 1 content</div>
        <div>Tab 2 content</div>
        <div>Tab 3 content</div>
    </iron-pages>
```

### Styling
The following custom properties are available for styling:

Custom property | Description
----------------|-------------
`--px-tab-color` | Text color for unselected tabs
`--px-tab-color--hover` | Text color for unselected tabs on hover
`--px-tab-color--active` | Text color for unselected tabs on press
`--px-tab-color--selected` | Text and border color for selected tab
`--px-tab-border-color` | Border color for unselected tabs
|
`--px-tabs-container` | Mixin for the tab container (e.g. to add flex-wrap)

@element px-tabs
@blurb Container for px-tab elements
@homepage index.html
@demo index.html
-->
<dom-module id="px-tabs">
  <template>
    <style include="px-tabs-styles"></style>

    <div id="container" class="tabs-container" tabindex="0">
      <div class="tabs-container__nav flex">
        <slot id="tabdefs"></slot>
      </div>
    </div>

    <iron-a11y-keys target="[[_target]]" keys="right up" on-keys-pressed="_increment"></iron-a11y-keys>
    <iron-a11y-keys target="[[_target]]" keys="left down" on-keys-pressed="_decrement"></iron-a11y-keys>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'px-tabs',

    behaviors: [
      Polymer.IronSelectableBehavior
    ],

    listeners: {
      'iron-select' : '_onIronSelect'
    },

    properties: {
      _target: {
        type: Object,
        value: function() {
          return '';
        }
      }
    },

    attached: function() {
      this.setAttribute('role','tablist');
      this._target = this.$.container;
    },

    /**
     * Move forward by one tab, with wraparound from last to first.
     */
    _increment: function(evt) {
      evt.detail.keyboardEvent.preventDefault();
      this.selectNext();
    },

    /**
     * Move backward by one tab, with wraparound from first to last.
     */
    _decrement: function(evt) {
      evt.detail.keyboardEvent.preventDefault();
      this.selectPrevious();
    },

    /**
     * Fires an event when the tab is changed.
     */
    _onIronSelect: function(evt) {
      this.fire('px-tab-changed', {
        tabID: Polymer.dom(evt).event.detail.item.id
      }, {bubbles: true, cancelable: false});
    }
    /**
     * Event fired when the selected tab is changed.
     * evt.detail will contain the ID of the newly selected tab.
     * @event px-tab-changed
     */
  });
</script>