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

const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";

const PdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabs extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
    }
    tabClickHandler(event) {
        if (this.componentId === event.detail[1]) {
            this.activeTabIndex = event.detail[0];
            this.activeTabName = this.tabs[this.activeTabIndex].name;
        }
    }
    handleKeyDown(ev) {
        const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
        // Only handle keyboard navigation if the event originated from a tab button
        // that belongs to THIS tabs component
        const target = ev.target;
        const targetTab = target.closest('pds-tab');
        // Check if the tab belongs to this tabs instance (not a nested one)
        const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
        if (keySet.includes(ev.key) && isOwnTab) {
            ev.preventDefault();
            this.moveActiveTab(ev.key);
        }
    }
    moveActiveTab(key) {
        const firstTabNumber = 0;
        const lastTabNumber = this.tabs.length - 1;
        let moveFocusTo = null;
        switch (key) {
            case 'ArrowLeft':
                moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));
                break;
            case 'ArrowRight':
                moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);
                break;
            case 'Home':
                moveFocusTo = firstTabNumber;
                break;
            case 'End':
                moveFocusTo = lastTabNumber;
                break;
        }
        // Move focus to the button element within `pds-tab`
        this.tabs[moveFocusTo].children[0].focus();
        this.activeTabName = this.tabs[moveFocusTo].name;
        this.activeTabIndex = moveFocusTo;
    }
    findAllChildren() {
        // Only select direct children tabs/tabpanels, not nested ones
        const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
        const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
        // Filter to only include tabs that belong to this tabs component (not nested)
        this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
        this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
    }
    propGeneration(child, index = 0) {
        child.parentComponentId = this.componentId.toString();
        child.variant = this.variant.toString();
        child.selected = (this.activeTabName === child.name) ? true : false;
        child['index'] = index;
    }
    passPropsToChildren() {
        this.tabs.forEach((child, index) => {
            if (this.activeTabName === child.name)
                this.activeTabIndex = index;
            this.propGeneration(child, index);
        });
        this.tabPanels.forEach((child) => {
            this.propGeneration(child);
        });
    }
    classNames() {
        let className = `pds-tabs`;
        if (this.variant && this.variant != 'primary') {
            const variantClassName = `pds-tabs--${this.variant}`;
            className += ' ' + variantClassName;
        }
        return className;
    }
    ;
    componentWillLoad() {
        this.findAllChildren();
    }
    componentWillRender() {
        this.passPropsToChildren();
    }
    render() {
        return (h(Host, { key: '213dfbe8f2828b430ab81dce23f43c2137206861', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '68989e852e2eeed180f91e5ac901c4318d6c0d70', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: '4a06996745c049fdaf830460e8d57caefd50900b', name: "tabs" })), h("slot", { key: 'e0558392bff0955defb133b36dd4e7360f33acce', name: "tabpanels" })));
    }
    get el() { return this; }
    static get style() { return pdsTabsCss; }
}, [257, "pds-tabs", {
        "tablistLabel": [1, "tablist-label"],
        "componentId": [1, "component-id"],
        "variant": [1],
        "activeTabName": [1025, "active-tab-name"],
        "activeTabIndex": [1026, "active-tab-index"]
    }, [[16, "pdsTabClick", "tabClickHandler"], [0, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-tabs"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-tabs":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsTabs$1);
            }
            break;
    } });
}

const PdsTabs = PdsTabs$1;
const defineCustomElement = defineCustomElement$1;

export { PdsTabs, defineCustomElement };
//# sourceMappingURL=pds-tabs.js.map

//# sourceMappingURL=pds-tabs.js.map