1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-behaviors/iron-button-state.html">
13<link rel="import" href="../iron-behaviors/iron-control-state.html">
14<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
15<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
16
17<!--
18`paper-tab` is styled to look like a tab.  It should be used in conjunction with
19`paper-tabs`.
20
21Example:
22
23    <paper-tabs selected="0">
24      <paper-tab>TAB 1</paper-tab>
25      <paper-tab>TAB 2</paper-tab>
26      <paper-tab>TAB 3</paper-tab>
27    </paper-tabs>
28
29### Styling
30
31The following custom properties and mixins are available for styling:
32
33Custom property | Description | Default
34----------------|-------------|----------
35`--paper-tab-ink` | Ink color | `--paper-yellow-a100`
36`--paper-tab` | Mixin applied to the tab | `{}`
37`--paper-tab-content` | Mixin applied to the tab content | `{}`
38`--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}`
39
40This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
41In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
42
43-->
44
45<dom-module id="paper-tab">
46  <template>
47    <style>
48      :host {
49        @apply(--layout-inline);
50        @apply(--layout-center);
51        @apply(--layout-center-justified);
52        @apply(--layout-flex-auto);
53
54        position: relative;
55        padding: 0 12px;
56        overflow: hidden;
57        cursor: pointer;
58        vertical-align: middle;
59
60        @apply(--paper-font-common-base);
61        @apply(--paper-tab);
62      }
63
64      :host(:focus) {
65        outline: none;
66      }
67
68      :host([link]) {
69        padding: 0;
70      }
71
72      .tab-content {
73        height: 100%;
74        transform: translateZ(0);
75          -webkit-transform: translateZ(0);
76        transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
77        @apply(--layout-horizontal);
78        @apply(--layout-center-center);
79        @apply(--layout-flex-auto);
80        @apply(--paper-tab-content);
81      }
82
83      :host(:not(.iron-selected)) > .tab-content {
84        opacity: 0.8;
85
86        @apply(--paper-tab-content-unselected);
87      }
88
89      :host(:focus) .tab-content {
90        opacity: 1;
91        font-weight: 700;
92      }
93
94      paper-ripple {
95        color: var(--paper-tab-ink, --paper-yellow-a100);
96      }
97
98      .tab-content > ::content > a {
99        @apply(--layout-flex-auto);
100
101        height: 100%;
102      }
103    </style>
104
105    <div class="tab-content">
106      <content></content>
107    </div>
108  </template>
109</dom-module>
110<script>
111Polymer({
112  is: 'paper-tab',
113
114  behaviors: [
115    Polymer.IronControlState,
116    Polymer.IronButtonState,
117    Polymer.PaperRippleBehavior
118  ],
119
120  properties: {
121
122    /**
123      * If true, the tab will forward keyboard clicks (enter/space) to
124      * the first anchor element found in its descendants
125      */
126    link: {
127      type: Boolean,
128      value: false,
129      reflectToAttribute: true
130    }
131
132  },
133
134  hostAttributes: {
135    role: 'tab'
136  },
137
138  listeners: {
139    down: '_updateNoink',
140    tap: '_onTap'
141  },
142
143  attached: function() {
144    this._updateNoink();
145  },
146
147  get _parentNoink () {
148    var parent = Polymer.dom(this).parentNode;
149    return !!parent && !!parent.noink;
150  },
151
152  _updateNoink: function() {
153    this.noink = !!this.noink || !!this._parentNoink;
154  },
155
156  _onTap: function(event) {
157    if (this.link) {
158      var anchor = this.queryEffectiveChildren('a');
159
160      if (!anchor) {
161        return;
162      }
163
164      // Don't get stuck in a loop delegating
165      // the listener from the child anchor
166      if (event.target === anchor) {
167        return;
168      }
169
170      anchor.click();
171    }
172  }
173
174});
175</script>
176