'use strict';

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

const index = require('./index-b7d9268e.js');

const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
const PdsTabsStyle0 = baseCss;

const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
const PdsTabsStyle1 = pdsTabsCss;

const PdsTabs = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.tablistLabel = undefined;
        this.componentId = undefined;
        this.variant = undefined;
        this.activeTabName = undefined;
        this.activeTabIndex = undefined;
    }
    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"];
        if (keySet.includes(ev.key)) {
            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() {
        this.tabs = this.el.querySelectorAll('pds-tab');
        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
    }
    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 (index.h(index.Host, { key: '8b7537e2fc9007aaca3c1a6baff0a1c3d6b2cb07', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: '7afa678022c1170d3912137897a5ece92e7b4394', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, index.h("slot", { key: 'e2026e752548b4cdf8f768137e4bb567550ef3cd', name: "tabs" })), index.h("slot", { key: 'c3a3fbbfab88494b45e5d1cc6563877df2017f9f', name: "tabpanels" })));
    }
    get el() { return index.getElement(this); }
};
PdsTabs.style = PdsTabsStyle0 + PdsTabsStyle1;

exports.pds_tabs = PdsTabs;

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