(function() {

'use strict';

// Feature detect

if (!(window.customElements && document.body.attachShadow)) {

  document.querySelector('fancy-tabs').innerHTML = "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";

  return;

}

​

let selected_ = null;

customElements.define('tuts-tabs', class extends HTMLElement {

​

  constructor() {

    super(); // always call super() first in the ctor.

​

    // Create shadow DOM for the component.

    let shadowRoot = this.attachShadow({mode: 'open'});

    shadowRoot.innerHTML = `

      <style>

        :host {

          display: inline-block;

          font-family: 'Roboto Slab';

          contain: content;

        }

        #panels {

          box-shadow: 0 2px 2px rgba(0, 0, 0, .3);

          background: white;

          border-radius: 3px;

          padding: 16px;

          height: 250px;

          overflow: auto;

        }

        #tabs slot {

          display: inline-flex; /* Safari bug. Treats <slot> as a parent */

        }

        #tabs ::slotted(*) {

          font: 400 16px/22px 'Roboto';

          padding: 16px 8px;

          margin: 0;

          text-align: center;

          width: 100px;

          text-overflow: ellipsis;

          white-space: nowrap;

          overflow: hidden;

          cursor: pointer;

          border-top-left-radius: 3px;

          border-top-right-radius: 3px;

          background: linear-gradient(#fafafa, #eee);

          border: none; /* if the user users a <button> */

        }

        #panels ::slotted([aria-hidden="true"]) {

          display: none;

        }

      </style>

      <div id="tabs">

        <slot id="tabsSlot" name="title"></slot>

      </div>

      <div id="panels">

        <slot id="panelsSlot"></slot>

      </div>

    `;

  }

  get selected() {

    return selected_;

  }

​

  set selected(idx) {

    selected_ = idx;

    this._selectTab(idx);

    this.setAttribute('selected', idx);

  }

  connectedCallback() {

    this.setAttribute('role', 'tablist');

​

    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');

    const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');

​

    this.tabs = tabsSlot.assignedNodes({flatten: true});

    this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => {

      return el.nodeType === Node.ELEMENT_NODE;

    });

    // Save refer to we can remove listeners later.

    this._boundOnTitleClick = this._onTitleClick.bind(this);

    tabsSlot.addEventListener('click', this._boundOnTitleClick);

    this.selected = this._findFirstSelectedTab() || 0;

  }

  disconnectedCallback() {

    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');

    tabsSlot.removeEventListener('click', this._boundOnTitleClick);

  }

  _onTitleClick(e) { 

    if (e.target.slot === 'title') {

      this.selected = this.tabs.indexOf(e.target);

      e.target.focus();

    }

  }

​

  _findFirstSelectedTab() {

    let selectedIdx;

    for (let [i, tab] of this.tabs.entries()) {

      tab.setAttribute('role', 'tab');

if (tab.hasAttribute('selected')) {

        selectedIdx = i;

      }

    }

    return selectedIdx;

  }

  _selectTab(idx = null) {

    for (let i = 0, tab; tab = this.tabs[i]; ++i) {

      let select = i === idx;

      tab.setAttribute('tabindex', select ? 0 : -1);

      tab.setAttribute('aria-selected', select);

      this.panels[i].setAttribute('aria-hidden', !select);

    }

  }

});

})();

​