@rxdi/ui-kit/tabs/tabs.component.js

UI Components for building graphql-server website

"use strict";
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
const settings_1 = require("../settings");
/**
 * @customElement rx-tabs
 */
let TabsComponent = class TabsComponent extends lit_html_1.LitElement {
    constructor() {
        super(...arguments);
        this.palette = 'default';
        this.changeLocation = true;
        this.pages = [];
    }
};
__decorate([
    (0, lit_html_1.property)({ type: String }),
    __metadata("design:type", String)
], TabsComponent.prototype, "palette", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Boolean }),
    __metadata("design:type", Object)
], TabsComponent.prototype, "changeLocation", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Array }),
    __metadata("design:type", Array)
], TabsComponent.prototype, "pages", void 0);
TabsComponent = __decorate([
    (0, lit_html_1.Component)({
        selector: 'rx-tabs',
        style: (0, lit_html_1.css) `
    .tabs {
      display: flex;
      flex-wrap: wrap;
      /* margin-left: -20px; */
      margin-top: 0px;
      padding: 0;
      list-style: none;
      position: relative;
      user-select: none;
    }
    .switcher {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .tabs > * {
      flex: none;
      /* padding-left: 20px; */
      position: relative;
    }
    .tabs > .active > a {
      color: #222;
    }
    .tabs > * > a {
      display: block;
      text-align: center;
      padding: 9px 20px;
      color: #999;
      border-bottom: 2px solid transparent;
      font-size: 12px;
      text-transform: uppercase;
      transition: color 0.1s ease-in-out;
      line-height: 20px;
    }

    a {
      text-decoration: none;
      cursor: pointer;
    }
    .hover:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    li {
      color: #666;
    }
  `,
        template() {
            return (0, lit_html_1.html) `
      <style>
        .tabs > .active > a {
          border-color: var(--${this.palette}-bg-color);
        }
      </style>
      <ul part="tabs" class="tabs">
        ${this.pages.map((tab, index) => (0, lit_html_1.html) `
            ${tab.settingsElement
                ? (0, lit_html_1.html) `<span style="flex: 1 3 auto;"></span>`
                : (0, lit_html_1.html) ``}
            <li part="li" class=${(0, lit_html_1.classMap)({ active: tab.active })}>
              <a
                part="a"
                class=${(0, lit_html_1.classMap)({ hover: tab.hoverable })}
                style=${(0, lit_html_1.styleMap)(tab.hoverable
                ? {
                    background: tab.active
                        ? 'rgba(255, 255, 255, 0.1)'
                        : '',
                }
                : {})}
                @click=${() => {
                if (!tab.disableOnChangeEvent) {
                    this.pages = this.pages.map((p) => {
                        p.active = false;
                        return p;
                    });
                    tab.active = true;
                    this.pages = [...this.pages];
                    if (this.changeLocation) {
                        const newLocation = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
                        window.history.pushState({}, null, `${newLocation}${index}`);
                    }
                    this.dispatchEvent(new CustomEvent('change', { detail: { tab, index } }));
                }
            }}
                >${tab.name}</a
              >
            </li>
          `)}
      </ul>

      <ul class="switcher">
        ${this.pages
                .filter((a) => a.active)
                .map((v) => (0, lit_html_1.html) ` <li>${v.view}</li> `)}
      </ul>
    `;
        },
    })
], TabsComponent);
exports.TabsComponent = TabsComponent;
//# sourceMappingURL=tabs.component.js.map