@salla.sa/twilight-components/dist/cjs/salla-tab-content_3.cjs.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
'use strict';

var index = require('./index-uoA36zqH.js');

const sallaTabContentCss = "";

const SallaTabContent = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.isSelected = false;
    }
    /**
     * Expose self for the parent.
     */
    async getChild() {
        return {
            selected: this.selected.bind(this),
            unselect: this.unselect.bind(this),
            name: this.name
        };
    }
    unselect() {
        this.isSelected = false;
    }
    selected() {
        this.isSelected = true;
    }
    render() {
        const classes = {
            's-tabs-content': true,
            's-tabs-content-selected': this.isSelected
        };
        return (index.h("div", { key: '59729323fd707b74b2b1fd8707fcb122ee21ed9f', class: classes }, index.h("slot", { key: 'a273156c8bbb3dbf25dc2e556d060c4402a8a394' })));
    }
};
SallaTabContent.style = sallaTabContentCss;

function generateRandomId() {
    return Math.random().toString(36).slice(2, 10);
}

const sallaTabHeaderCss = "";

const SallaTabHeader = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.tabSelected = index.createEvent(this, "tabSelected");
        this.id = generateRandomId();
        /**
       * The class applied to the currently active(selected) tab
       */
        this.activeClass = undefined;
        /**
         * Set the height of the tab bar
         */
        this.height = undefined;
        /**
         * Center tab items in the given flex.
         */
        this.centered = false;
        this.isSelected = false;
    }
    /**
     * Expose self for the parent.
     */
    async getChild() {
        return {
            selected: this.selected.bind(this),
            unselect: this.unselect.bind(this),
            name: this.name,
            id: this.id
        };
    }
    unselect() {
        this.isSelected = false;
    }
    selected() {
        this.isSelected = true;
    }
    onClick() {
        this.getChild().then(child => {
            this.tabSelected.emit(child);
        });
    }
    render() {
        const classes = {
            's-tabs-header-item': true,
            's-tabs-bg-normal': true,
            's-tabs-active': this.isSelected,
        };
        return [
            index.h("div", { key: 'cdeff834ff1a1e4a5cd19c52e5c36bcc51491064', class: classes, onClick: this.onClick.bind(this) }, index.h("slot", { key: '5aeedafb3c074f588cd2a343fe48fc5b8807821d' })),
        ];
    }
};
SallaTabHeader.style = sallaTabHeaderCss;

const sallaTabsCss = ".s-tabs-header{-ms-overflow-style:none;scrollbar-width:none;}.s-tabs-header::-webkit-scrollbar{display:none}";

const SallaTabs = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Background color
         */
        this.backgroundColor = undefined;
        /**
         * Align tabs vertically.
         */
        this.vertical = false;
    }
    componentWillLoad() {
        this.createGroup().then(() => {
            const [group] = this.tabGroup;
            this.selectGroup(group);
        });
    }
    onSelectedTab(event) {
        const group = this.tabGroup.find(group => group.header.id === event.detail.id);
        this.selectGroup(group);
    }
    async createGroup() {
        const tabsHeaderEl = Array.from(this.host.querySelectorAll('salla-tab-header'));
        this.tabsHeader = await Promise.all(tabsHeaderEl.map(async (el) => await el.getChild()));
        const tabsContentEl = Array.from(this.host.querySelectorAll('salla-tab-content'));
        this.tabsContent = await Promise.all(tabsContentEl.map(async (el) => await 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.map(g => {
            g.header.unselect();
            g.content.unselect();
        });
        group.header.selected();
        group.content.selected();
    }
    render() {
        return [
            index.h("div", { key: '1d2c28a8025c9c9c1d988dbded489263794cb92e', class: "s-tabs" }, index.h("div", { key: '54f011017f5378e7053b4f3a135d6a050e08479c', class: "s-tabs-header" }, index.h("slot", { key: 'efd25fb8dd73b9296015be1e224b84fc53ab9082', name: "header" })), index.h("div", { key: 'f80582281746ae231092360e26d65331cc98f480', class: "s-tabs-content-wrapper" }, index.h("slot", { key: 'c97cde11dcbd37124dc1c24559c918111c57e6fe', name: "content" })))
        ];
    }
    get host() { return index.getElement(this); }
};
SallaTabs.style = sallaTabsCss;

exports.salla_tab_content = SallaTabContent;
exports.salla_tab_header = SallaTabHeader;
exports.salla_tabs = SallaTabs;