'use strict';

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

const index = require('./index-b55be5aa.js');
const helpers = require('./helpers-d38772ff.js');

const XTab = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.fluid = undefined;
        this.active = undefined;
        this.disabled = undefined;
        this.label = undefined;
        this.icon = undefined;
        this.badge = undefined;
        this.index = undefined;
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: 'e0f4244ca5e73ac8f3a8c663d5f084d8799332ce', class: helpers.cls({ 'tab-disabled': this.disabled, 'tab-active': this.active, 'tab-fluid': this.fluid }) }, index.h("slot", { key: '4b0a7f5718f31642e58c8973a0143e122c481148' }));
    }
    get el() { return index.getElement(this); }
};

const styleCss = "x-tabs>nav{font-family:inherit;-ms-flex-align:center;align-items:center;display:-ms-flexbox !important;display:flex !important;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:start;justify-content:flex-start;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}x-tabs>nav::-webkit-scrollbar{display:none}x-tabs>nav ul{-ms-flex-align:center;align-items:center;border-bottom-color:var(--color-default-lucid, #f0f0f0);border-bottom-style:solid;border-bottom-width:2px;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:start;justify-content:flex-start;padding-left:0px;padding-top:0px;margin-top:0px;margin-bottom:0px}.is-dark-mode x-tabs>nav ul{border-bottom-color:var(--color-default-shadest, #464646)}x-tabs>nav li{list-style:none;cursor:pointer}x-tabs>nav li a{-ms-flex-align:center;align-items:center;border-bottom-color:var(--color-default-lucid, #f0f0f0);border-bottom-style:solid;border-bottom-width:2px;color:var(--color-text, #4A4A4A);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:0.5em 1em;vertical-align:top;margin-bottom:-2px;min-height:28px}.is-dark-mode x-tabs>nav li a{color:var(--color-text-light-shade, #d8d8d8);border-bottom-color:var(--color-default-shadest, #464646)}x-tabs>nav li a>x-icon{font-size:1.5rem;margin-right:5px}x-tabs>nav li a x-badge{margin-left:0.5rem}x-tabs>nav li.tab-disabled{pointer-events:none;cursor:not-allowed;opacity:0.5}x-tabs>nav .is-transitioning{overflow:hidden}x-tabs li.tab-active a{border-bottom-color:var(--color-primary, #4275F2) !important;color:var(--color-primary, #4275F2);font-weight:bolder}.is-dark-mode x-tabs li.tab-active a{color:var(--color-primary, #4275F2)}x-tabs li.tab-active a:hover{color:var(--color-primary-shade, #3863ce)}x-tabs .tab-content{position:relative;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:1rem 0}.is-dark-mode x-tabs .tab-content{color:var(--color-text-light, #FEFEFE)}x-tabs .tab-content x-tab{padding:0 1rem;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto;display:none}x-tabs .tab-content x-tab[active]{display:block;-webkit-animation:tabShow 0.4s;animation:tabShow 0.4s}x-tabs .tab-content x-tab.tab-fluid{padding:0}x-tabs .tab-content.is-transitioning{overflow:hidden}x-tabs .tabs-block{width:100%}x-tabs .tabs-block ul{-ms-flex-pack:distribute;justify-content:space-around}x-tabs .tabs-block li{width:100%}x-tabs .tabs-fluid ul{padding-left:1.2rem;padding-right:1.2rem;border-bottom-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.35)}x-tabs .tabs-fluid ul li a{border-bottom-color:transparent}x-tabs .tabs-left ul{-ms-flex-pack:start;justify-content:flex-start}x-tabs .tabs-centered ul{-ms-flex-pack:center;justify-content:center}x-tabs .tabs-right ul{-ms-flex-pack:end;justify-content:flex-end}@-webkit-keyframes tabShow{from{opacity:0;-webkit-transform:translate3d(-1rem, 0, 0);transform:translate3d(-1rem, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes tabShow{from{opacity:0;-webkit-transform:translate3d(-1rem, 0, 0);transform:translate3d(-1rem, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}";
const XTabsStyle0 = styleCss;

const XTabs = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.fluid = undefined;
        this.block = false;
        this.position = 'left';
        this.tabs = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildTabs();
    }
    /**
     * On component will loaded hook
     */
    componentWillLoad() {
        this.computeChildTabs();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (!this.tabs.length) {
            return;
        }
        setTimeout(() => {
            const validTabs = this.tabs.filter(tab => !tab.disabled);
            const activeTabs = validTabs.filter(tab => tab.active);
            if (!activeTabs.length) {
                this.showTab(validTabs[0]);
            }
        }, 0);
    }
    /**
     * Update the child tabs and render the result
     */
    computeChildTabs() {
        this.tabs = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-tab')
            .map(el => el);
        this.tabs.forEach((tab, index) => {
            tab.index = index;
        });
    }
    /**
     * Show the content of selected tab by index and set active
     *
     * @param index
     * @param tab
     */
    showTab(tab) {
        this.tabs.filter(tab => tab.active).forEach(tab => {
            tab.active = false;
        });
        this.el.querySelectorAll('nav li.tab-active').forEach(li => li.classList.remove('tab-active'));
        setTimeout(() => {
            var _a;
            tab && (tab.active = true);
            (_a = this.el.querySelector(`.tab-index-${tab.index}`)) === null || _a === void 0 ? void 0 : _a.classList.add('tab-active');
        }, 0);
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: '7cf0f4d63c50b7b6f2f6616d9a6a7d8300059a26' }, index.h("nav", { key: '5b5cd7ead3928070a34d833f0fe95ce41bc609c4', class: helpers.cls(`tabs-${this.position}`, { 'tabs-block': this.block, 'tabs-fluid': this.fluid }) }, index.h("ul", { key: '08d9f4977059fec57e214af9ec4b5125101c7e71' }, this.tabs.map((tab, i) => index.h("li", { key: i, class: helpers.cls(`tab-index-${i}`, { 'tab-disabled': tab.disabled, 'tab-active': tab.active }) }, index.h("a", { href: "javascript:;", tabIndex: i, onClick: () => this.showTab(tab) }, tab.icon && index.h("x-icon", { name: tab.icon }), index.h("span", null, tab.label), tab.badge && index.h("x-badge", { color: "primary" }, tab.badge)))))), index.h("div", { key: 'eff80d271876d537625ec4f32ac5c741b4229794', class: "tab-content" }, index.h("slot", { key: 'fa3d3a705d01254993acd1d0a25770e6d7004c75' })));
    }
    get el() { return index.getElement(this); }
};
XTabs.style = XTabsStyle0;

exports.x_tab = XTab;
exports.x_tabs = XTabs;
