bruno-ui/dist/cjs/brn-tabs.cjs.entry.js

Bruno UI Kit

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-a98adf17.js');

const TabsComponent = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    componentWillLoad() {
        this._tabs = [];
    }
    TabLoadedHandler(event) {
        const tab = event.detail;
        if (this._tabs.length - 1 < tab.Index) {
            this._tabs.length = tab.Index + 1;
        }
        this._tabs[tab.Index] = tab;
        this._tabs = [...this._tabs];
    }
    TabChangedHandler(event) {
        const tab = event.detail;
        let index = this._tabs.findIndex(x => x.Identifier == tab.Identifier);
        this._tabs[index] = tab;
        this._tabs = [...this._tabs];
    }
    render() {
        return (core.h("div", null, core.h("div", { class: "brn-tabs" }, this._tabs.filter(x => x).map(tab => {
            return (core.h("div", { class: { "brn-tabs__tab": true, 'brn-tabs__tab--active': tab.Active }, onClick: () => {
                    this.TabChangeHandler(tab);
                } }, tab.Name));
        })), core.h("div", { class: "brn-tabs__content" }, core.h("slot", null))));
    }
    TabChangeHandler(tab) {
        this.DeactivateAllTabs();
        tab.Active = true;
        tab.OnActive(true);
        this._tabs = [...this._tabs];
    }
    DeactivateAllTabs() {
        this._tabs.map(x => {
            x.Active = false;
            x.OnActive(false);
        });
    }
    static get style() { return "brn-tabs .brn-tabs {\n  display: block;\n  border-bottom: 1px solid #d7dde4;\n  margin-bottom: 0.5rem;\n}\nbrn-tabs .brn-tabs__tab {\n  position: relative;\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: none;\n  color: #808c9e;\n  font-size: 0.875rem;\n  padding: 0 0.85rem 0.5rem 0.85rem;\n  margin-bottom: -1px;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  user-select: none;\n}\nbrn-tabs .brn-tabs__tab--active {\n  color: #02364c;\n  border-bottom: 1px solid #02364c;\n}"; }
};

exports.brn_tabs = TabsComponent;