intervention-pages/dist/common/layout/etools-tabs.js

PD pages

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, property, customElement } from 'lit-element';
import '@polymer/paper-tabs/paper-tabs';
import '@polymer/paper-tabs/paper-tab';
import { layoutHorizontal, layoutStartJustified } from '../styles/flex-layout-styles';
/**
 * @LitElement
 * @customElement
 */
let EtoolsTabs = class EtoolsTabs extends LitElement {
    constructor() {
        super(...arguments);
        this.activeTab = '';
    }
    render() {
        // main template
        // language=HTML
        return html `
      <style>
        *[hidden] {
          display: none !important;
        }

        paper-tab[disabled] {
          opacity: .3;
        }

        *[disabled] {
          cursor: not-allowed !important;
          pointer-events: auto !important;
        }

        :host {
          ${layoutHorizontal}
          ${layoutStartJustified}
        }

        :host([border-bottom]) {
          border-bottom: 1px solid var(--dark-divider-color);
        }

        paper-tabs {
          --paper-tabs-selection-bar-color: var(--primary-color);
        }

        paper-tab[link],
        paper-tab {
          --paper-tab-ink: var(--primary-color);
          padding: 0 24px;
        }

        paper-tab .tab-content {
          color: var(--secondary-text-color);
          text-transform: uppercase;
        }

        paper-tab.iron-selected .tab-content {
          color: var(--primary-color);
        }

        @media print {
          :host {
            display: none;
          }
        }
      </style>

      <paper-tabs id="tabs" selected="${this.activeTab}" attr-for-selected="name" noink>
        ${this.tabs.map((item) => this.getTabHtml(item))}
      </paper-tabs>
    `;
    }
    getTabHtml(item) {
        return html `
      <paper-tab name="${item.tab}" link ?hidden="${item.hidden}" ?disabled="${item.disabled}">
        <span class="tab-content">
          ${item.tabLabel} ${item.showTabCounter ? html `(item.counter)` : ''}
        </span>
      </paper-tab>
    `;
    }
};
__decorate([
    property({ type: String })
], EtoolsTabs.prototype, "activeTab", void 0);
__decorate([
    property({ type: Array })
], EtoolsTabs.prototype, "tabs", void 0);
EtoolsTabs = __decorate([
    customElement('etools-tabs')
], EtoolsTabs);
export { EtoolsTabs };