import { h } from '../webcomponents.core.js';

import './chunk-de721f0a.js';
import { d as Util } from './chunk-6163e267.js';

class TabContent {
    constructor() {
        this.isSelected = false;
    }
    getChild() {
        return {
            select: this.select.bind(this),
            unselect: this.unselect.bind(this),
            name: this.name
        };
    }
    unselect() {
        this.isSelected = false;
    }
    select() {
        this.isSelected = true;
    }
    render() {
        const classes = {
            'ema-tab-content': true,
            'ema-tab-content-selected': this.isSelected
        };
        return (h("div", { class: classes },
            h("slot", null)));
    }
    static get is() { return "ema-tab-content"; }
    static get properties() { return {
        "getChild": {
            "method": true
        },
        "isSelected": {
            "state": true
        },
        "name": {
            "type": String,
            "attr": "name"
        }
    }; }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}.ema-tab-content{display:none}.ema-tab-content-selected{display:block}"; }
}

class TabHeader {
    constructor() {
        this.id = Util.getUUID();
        this.isSelected = false;
    }
    getChild() {
        return {
            select: this.select.bind(this),
            unselect: this.unselect.bind(this),
            name: this.name,
            id: this.id
        };
    }
    unselect() {
        this.isSelected = false;
    }
    select() {
        this.isSelected = true;
    }
    onClick() {
        this.onSelect.emit(this.getChild());
    }
    render() {
        const classes = {
            'ema-tab-header': true,
            'ema-tab-header-selected': this.isSelected
        };
        return [
            h("div", { class: classes, onClick: this.onClick.bind(this) },
                h("slot", null)),
        ];
    }
    static get is() { return "ema-tab-header"; }
    static get properties() { return {
        "getChild": {
            "method": true
        },
        "isSelected": {
            "state": true
        },
        "name": {
            "type": String,
            "attr": "name"
        }
    }; }
    static get events() { return [{
            "name": "onSelect",
            "method": "onSelect",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}.ema-tab-header{min-height:40px;min-width:150px;padding:5px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-bottom:2px solid transparent}\@media (max-width:599px){.ema-tab-header{min-width:100px}}.ema-tab-header-selected{border-bottom:2px solid var(--ema-primary,#807b7e)}"; }
}

class Tabs {
    componentDidLoad() {
        this.createGroup();
        const [group] = this.tabGroup;
        this.selectGroup(group);
        if (this.selectedIndex)
            this.activeIndex = Number(this.selectedIndex) - 1;
    }
    componentDidUpdate() {
        if (this.selectedIndex)
            this.activeIndex = Number(this.selectedIndex) - 1;
    }
    onSelectedTab(event) {
        const group = this.tabGroup.find(group => group.header.id === event.detail.id);
        this.selectGroup(group);
    }
    createGroup() {
        const tabsHeaderEl = Array.from(this.host.querySelectorAll('ema-tab-header'));
        this.tabsHeader = tabsHeaderEl.map(el => el.getChild());
        const tabsContentEl = Array.from(this.host.querySelectorAll('ema-tab-content'));
        this.tabsContent = tabsContentEl.map(el => el.getChild());
        this.tabGroup = this.tabsHeader.map(header => {
            const content = this.tabsContent.find(content => content.name === header.name);
            return {
                header: header,
                content: content
            };
        });
    }
    selectGroup(group) {
        this.tabGroup.forEach(_ => {
            _.header.unselect();
            _.content.unselect();
        });
        group.header.select();
        group.content.select();
    }
    set activeIndex(index) {
        let i = 0;
        this.tabGroup.forEach(_ => {
            if (i == index) {
                _.header.select();
                _.content.select();
            }
            else {
                _.header.unselect();
                _.content.unselect();
            }
            i++;
        });
    }
    render() {
        return [
            h("div", { class: "ema-tabs-header" },
                h("slot", { name: "header" })),
            h("div", { class: "ema-tabs-content" },
                h("slot", { name: "content" }))
        ];
    }
    static get is() { return "ema-tabs"; }
    static get properties() { return {
        "host": {
            "elementRef": true
        },
        "selectedIndex": {
            "type": Number,
            "attr": "selected-index"
        }
    }; }
    static get listeners() { return [{
            "name": "onSelect",
            "method": "onSelectedTab"
        }]; }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}.ema-tabs-header{display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.3)}.ema-tabs-content{padding:10px}"; }
}

export { TabContent as EmaTabContent, TabHeader as EmaTabHeader, Tabs as EmaTabs };
