at-carbon-tab.html

<link rel="import" href="../tangere/tangere.html">
<link rel="import" href="../at-carbon-icon/at-carbon-icon.html">
<link rel="import" href="../at-carbon-badge/at-carbon-badge.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="at-carbon-tab">
  <template>
    <style>
       :host {
        display: inline-block;
        cursor: pointer;

        --tab-background-color: #EFF6FF;
        --tab-icon-color: #0050FF;
        --tab-text-color: #4A90E2;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }

      :host * {
        box-sizing: border-box;
      }

      :host(.scrollable) {
        height: 100%;
      }

      :host([link]) {
        padding: 0;
      }

      :host([disabled]) {
        @apply --at-form-disabled;
      }

      :host([disabled]) :hover {
        cursor: not-allowed;
      }

      .tab-content {
        height: 100%;
        padding: 0 12px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

       :host(:not(.iron-selected)) > .tab-content {
        opacity: 0.6;
      }

      .tab-content > ::slotted > a {
        height: 100%;
        @apply --layout-flex;
      }

      .tab-content > ::slotted {
        cursor: pointer;
      }

      .tab-content> ::slotted(a) {
        height: 100%;
        @apply --layout-flex;
      }

      .tab-content ::slotted(*) {
        cursor: pointer;
      }

      .cursor-pointer {
        cursor: pointer;
      }
      
      .hidden {
        display: none !important;
      }

      .icon-with-label {
        margin-right: 4px;
      }

      #container.default {
        padding: 0 12px;
        padding-bottom: 12px;
      }

      :host(:focus) {
        outline: none;
      }

      /*
        STYLES for the tab-style tab
      */
      #container.tab {
        padding: 0 12px;

        height: 100%;
        position: relative;

        margin: 0 auto;
        margin-left: 1px;

        border-bottom: 1px solid lightgray;
      }

      :host(.iron-selected) > #container.tab {
        color: var(--tab-text-color) !important;

        background-image: linear-gradient(transparent 10%, var(--tab-background-color));
      }

      #container.tab:before, 
      #container.tab:after {
        content: "";
        position: absolute;

        top: -1px;
        bottom: -1px;

        width: 1px;
        background-image: linear-gradient(transparent 30%, lightgray 100%);
      }

      #container.tab:before {
        left: -1px;
      }

      #container.tab:after {
        right: -1px;
      }

      /*
        COMPACT TAB styles
      */
      #container.tab.compact at-carbon-icon {
        display: none !important;
      }

      :host(:hover) > #container.tab.compact label {
        cursor: pointer;
        color: var(--tab-text-color);
      }

      :host(:focus) > #container.tab.compact {
        outline: none;
        background-image: linear-gradient(transparent 10%, var(--tab-background-color));
      }

      :host(:focus) > #container.tab.compact label {
        color: var(--tab-text-color);
      }

      /*
        LARGE TAB styles
      */

      #container.tab.large at-carbon-icon {
        display: block !important;
        margin: 0 auto;
      }

      #container.tab.large label {
        display: block !important;
      }

      :host(.iron-selected) > #container.tab.large {
        color: var(--tab-text-color);
      }

      :host(:hover) > #container.tab.large at-carbon-icon {
        color: var(--tab-text-color);
      }

      :host(:hover) > #container.tab.large label {
        color: var(--tab-text-color);
      }
      
      :host(:focus) > #container.tab.large {
        background-image: linear-gradient(transparent 10%, var(--tab-background-color));
      }

      :host(:focus) > #container.tab.large at-carbon-icon {
        color: var(--tab-text-color);
      }

      :host(:focus) > #container.tab.large label {
        color: var(--tab-text-color);
      }

      /*
        STYLES for the tab-style pill
      */

      #container.pill {
        position: relative;
        
        padding: 0 12px;
        border: 1px solid lightgray;
      }

      :host(.iron-selected) > #container.pill {
        color: var(--tab-text-color) !important;
        background-color: var(--tab-background-color) !important;
      }

      /*
        PILL COMPACT styles
      */
      
      :host(.iron-selected) > #container.pill.compact label {
        color: var(--tab-text-color) !important;
      }

      #container.pill.compact at-carbon-icon {
        display: none !important;
      }

      :host(:hover) > #container.pill.compact {
        background-color: var(--at-light-grey);
      }

      :host(:hover) > #container.pill.compact label {
        color: var(--at-black);
      }

      :host(:focus) > #container.pill.compact {
        background-color: var(--at-light-grey);
      }

      :host(:focus) > #container.pill.compact label {
        color: var(--tab-text-color);
      }
      
      /*
        PILL LARGE styles
      */

      #container.pill.large at-carbon-icon {
        display: block !important;
        margin: 0 auto;
      }

      #container.pill.large label {
        display: block !important;
      }

      :host(.iron-selected) > #container.pill.large at-carbon-icon {
        color: var(--tab-icon-color) !important;
      }

      :host(.iron-selected) > #container.pill.large label {
        color: var(--tab-text-color) !important;
      }

      :host(:hover) > #container.pill.large {
        background-color: var(--at-light-grey);
      }

      :host(:hover) > #container.pill.large at-carbon-icon {
        color: var(--at-black);
      }

      :host(:hover) > #container.pill.large label {
        color: var(--at-black);
      }

      :host(:focus) > #container.pill.large {
        outline: none;
        background-color: var(--at-light-grey);
      }

      :host(:focus) > #container.pill.large at-carbon-icon {
        color: var(--tab-icon-color);
      }

      :host(:focus) > #container.pill.large label {
        color: var(--tab-text-color);
      }

    </style>

    <div id="container" class$="tab-content [[_computeAdditionalClasses(label)]] [[_computeContainerTabStyleClasses(tabStyle, size)]] [[_computeContainerPillStyleClasses(tabStyle, size)]]">
      <div id="inner">
        <div hidden$="[[_computeLabelHidden(label, icon)]]">
          <at-carbon-icon hidden$="[[_computeIconHidden(icon)]]" class$="[[_computeAdditionalIconClass(label, icon, size)]]"  icon="[[icon]]"></at-carbon-icon>
          <label class="cursor-pointer unselectable">[[label]]</label>
        </div> 
        <div hidden$="[[_computeInnerHTMLHidden(label, icon)]]">
          <slot></slot>
        </div>
      </div>
      <at-carbon-badge id="badge" for="inner" label="[[badgeLabel]]" color="[[badgeColor]]" x-offset="6"></at-carbon-badge>
    </div>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'at-carbon-tab',

    properties: {
      label: {
        type: String,
        value: ''
      },
      icon: {
        type: String,
        value: ''
      },
      badgeLabel: {
        type: String,
        value: ''
      },
      badgeColor: {
        type: String,
        value: ''
      },

      tabStyle: {
        type: String,
        value: "default",
        xvaluelist: [
          { title: "Default", value: "default" },
          { title: "Tab", value: "tab" },
          { title: "Pill", value: "pill" }
        ],
        xtype: "enum"
      },

      size: {
        type: String,
        value: "compact",
        xvaluelist: [ 
          { title: "Compact", value: "compact" },
          { title: "Large", value: "large" }
        ],
        xtype: "enum"
      }
    },

    _computeContainerTabStyleClasses: function(tabStyle, tabSize) {
      if (tabStyle !== "tab") return tabStyle;
      var result = [ "tab" ];
      
      if (tabSize !== "default") {
        result.push(tabSize);
      }
      
      return result.length > 0 ? result.join(" ") : result.toString();
    },

    _computeContainerPillStyleClasses: function(tabStyle, tabSize) {
      if (tabStyle !== "pill") return "";
      var result = [ "pill" ];
      
      if (tabSize !== "default") {
        result.push(tabSize);
      }

      return result.join(" ");
    },

    _computeLabelHidden: function (label, icon) {
      this.async(function () {
        this.$.badge.updatePosition();
      }, 10);
      var result = !label && !icon;
      return result;
    },

    _computeIconHidden: function(icon) {
      return !icon;
    },

    _computeAdditionalIconClass: function(label, icon, size) {
      if (size == "compact") return 'hidden';
      
      return (icon && label) ? "icon-with-label" : "";
    },

    _computeInnerHTMLHidden: function(label, icon) {
      var result = !!label && !!icon;
      return result;
    },

    _computeAdditionalClasses: function(label) {
      if (label.length > 0) return "cursor-pointer";
      return "";
    }
  });
</script>