@aqua-ds/web-components/components-build/aq-tab-item.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const aqTabItemCss = ":host{display:block}";

const AqTabItem$1 = /*@__PURE__*/ proxyCustomElement(class AqTabItem extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.numberStep = 1;
        this.selectedIndex = 0;
        this.isDisabled = false;
    }
    handleselectedIndexChange() {
        if (this.numberStep === this.selectedIndex && !this.isDisabled)
            this.show();
        else
            this.hide();
    }
    show() {
        this.el.style.display = 'block';
    }
    hide() {
        this.el.style.display = 'none';
    }
    getIsDisabled() {
        const tabsItems = this.el.closest('aq-tab-items');
        if (!tabsItems)
            return false;
        const tabGroup = tabsItems.closest('aq-tab-group');
        const Tabs = tabGroup.querySelectorAll('aq-tab');
        if (!Tabs)
            return false;
        this.isDisabled = Tabs[this.numberStep - 1].isDisabled;
    }
    componentDidRender() {
        this.getIsDisabled();
        this.handleselectedIndexChange();
    }
    async componentDidLoad() {
        const parentElement = this.el.closest('aq-tab-items');
        if (parentElement) {
            this.numberStep = await parentElement.registerTabItem?.(this.el);
            parentElement.addEventListener('tabItemChange', this.handleStepChange.bind(this));
        }
        if (this.selectedIndex === 0)
            this.selectedIndex = 1;
        if (this.isDisabled) {
            const tabGroup = parentElement.closest('aq-tab-group');
            const Tabs = tabGroup.querySelectorAll('aq-tab');
            let consecutive = true;
            let lastDisabledIndex = -1;
            for (let i = 0; i < Tabs.length; i++) {
                if (Tabs[i].isDisabled) {
                    if (consecutive) {
                        lastDisabledIndex = i;
                    }
                }
                else {
                    if (lastDisabledIndex !== -1) {
                        consecutive = false;
                        break;
                    }
                }
            }
            if (lastDisabledIndex !== -1 && !consecutive) {
                this.selectedIndex = lastDisabledIndex + 2;
            }
            parentElement.updateSelectTab(this.selectedIndex);
        }
    }
    handleStepChange(event) {
        this.selectedIndex = event.detail;
    }
    render() {
        return (h(Host, { key: 'df994d26a4876c4c15fcb91cf3d313cf302d5a23' }, h("slot", { key: '1efe6d5cf53390aeeac9cfaf816f4435e7fe860b' })));
    }
    get el() { return this; }
    static get watchers() { return {
        "selectedIndex": ["handleselectedIndexChange"]
    }; }
    static get style() { return aqTabItemCss; }
}, [260, "aq-tab-item", {
        "numberStep": [32],
        "selectedIndex": [32]
    }, undefined, {
        "selectedIndex": ["handleselectedIndexChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-tab-item"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-tab-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqTabItem$1);
            }
            break;
    } });
}

const AqTabItem = AqTabItem$1;
const defineCustomElement = defineCustomElement$1;

export { AqTabItem, defineCustomElement };