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-flex-layout/classes/iron-flex-layout.html">

  <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

  <link rel="import" href="../iron-behaviors/iron-control-state.html">
  <link rel="import" href="../iron-behaviors/iron-button-state.html">
  <link rel="import" href="../paper-ripple/paper-ripple.html">

  
  <!--
  `paper-tab` is styled to look like a tab.  It should be used in conjunction with
  `paper-tabs`.
  
  Example:
  
      <paper-tabs selected="0">
        <paper-tab>TAB 1</paper-tab>
        <paper-tab>TAB 2</paper-tab>
        <paper-tab>TAB 3</paper-tab>
      </paper-tabs>
  
  ### Styling
  
  The following custom properties and mixins are available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-tab-ink` | Ink color | `--paper-yellow-a100`
  `--paper-tab` | Mixin applied to the tab | `{}`
  `--paper-tab-content` | Mixin applied to the tab content | `{}`

  
  -->
  
  <dom-module id="paper-tab">

  
    <style>
  
      :host {
        @apply(--layout-inline);
        @apply(--layout-center);
        @apply(--layout-center-justified);
        @apply(--layout-flex);
  
        position: relative;
        padding: 0 12px;
        overflow: hidden;
        cursor: pointer;
  
        @apply(--paper-tab);
      }
  
      :host(:focus) {
        outline: none;
      }
  
      :host([link]) {
        padding: 0;
      }
  
      .tab-content {
        height: 100%;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
  
        @apply(--paper-tab-content);
      }
  
      :host(:not(.iron-selected)) > .tab-content {
        opacity: 0.8;
      }
  
      :host(:focus) .tab-content {
        opacity: 1;
        font-weight: 700;
      }
  
      #ink {
        color: var(--paper-tab-ink, --paper-yellow-a100);
        pointer-events: none;
      }
  
      .tab-content > ::content > a {
        height: 100%;
        /* flex */
        -ms-flex: 1 1 0.000000001px;
        -webkit-flex: 1;
        flex: 1;
        -webkit-flex-basis: 0.000000001px;
        flex-basis: 0.000000001px;
      }
  
    </style>
  

    <template>

      <div class="tab-content flex-auto center-center horizontal layout">
        <content></content>
      </div>

      <template is="dom-if" if="[[!noink]]">
        <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>
      </template>

    </template>

  </dom-module>

  <script>

    Polymer({

      is: 'paper-tab',

      behaviors: [
        Polymer.IronControlState,
        Polymer.IronButtonState
      ],

      properties: {

        /**
         * If true, ink ripple effect is disabled.
         *
         * @attribute noink
         */
        noink: {
          type: Boolean,
          value: false
        }

      },

      hostAttributes: {
        role: 'tab'
      },

      listeners: {
        down: '_updateNoink'
      },

      attached: function() {
        this._updateNoink();
      },

      get _parentNoink () {
        var parent = Polymer.dom(this).parentNode;
        return !!parent && !!parent.noink;
      },

      _updateNoink: function() {
        this.noink = !!this.noink || !!this._parentNoink;
      }
    });

  </script>