import { h } from "@stencil/core";
export class DgaTabs {
    constructor() {
        this.size = 'md';
        this.orientation = 'horizontal';
        this.external = false;
        this.flush = false;
        this.divider = false;
        this.tabsList = [];
        this.disabled = false;
        this.activeTab = null;
        this.isMenuOpen = false; // State to control menu visibility
        this.toggleMenu = () => {
            this.isMenuOpen = !this.isMenuOpen;
            if (this.isMenuOpen) {
                document.addEventListener('click', this.handleOutsideClick);
            }
            else {
                document.removeEventListener('click', this.handleOutsideClick);
            }
        };
        this.closeMenu = () => {
            this.isMenuOpen = false;
            document.removeEventListener('click', this.handleOutsideClick);
        };
        this.handleOutsideClick = (event) => {
            const target = event.target;
            if (!this.host.contains(target)) {
                this.closeMenu();
            }
        };
    }
    setActiveTab(index) {
        this.activeTab = index;
    }
    renderIcon(iconName, iconProps) {
        return h("dga-icon", Object.assign({ icon: iconName }, iconProps));
    }
    render() {
        var _a;
        return (h("ul", { key: 'f47e8029b5e251d781cecd6fc75677c04a337252', class: `dga-tabs-list dga-tabs-list--${this.orientation} ${this.divider ? 'dga-tabs-list--divider' : ''} ${this.flush ? 'flush' : ''} ${this.extraClass}` }, (_a = this.tabsList) === null || _a === void 0 ? void 0 :
            _a.slice(0, 5).map((tab, index) => (h("li", { key: index }, this.external ? (h("a", { href: tab.link, class: `dga-tabs-list__item dga-tabs-list__item--${this.size} ${this.activeTab === index ? 'dga-tabs-list__item--active' : ''} ${this.disabled ? 'disabled' : ''}`, onClick: e => {
                    e.preventDefault();
                    !this.disabled && this.setActiveTab(index);
                } }, (tab === null || tab === void 0 ? void 0 : tab.tabIcon) && h("div", { class: "dga-tabs-list__icon" }, this.renderIcon(tab === null || tab === void 0 ? void 0 : tab.tabIcon, tab === null || tab === void 0 ? void 0 : tab.iconProps)), h("div", { class: "dga-tabs-list__label" }, tab === null || tab === void 0 ? void 0 : tab.label))) : (h("a", { href: "#", class: `dga-tabs-list__item dga-tabs-list__item--${this.size} ${this.activeTab === index ? 'dga-tabs-list__item--active' : ''} ${this.disabled ? 'disabled' : ''}`, onClick: e => {
                    e.preventDefault();
                    !this.disabled && this.setActiveTab(index);
                    (tab === null || tab === void 0 ? void 0 : tab.onClick) && (tab === null || tab === void 0 ? void 0 : tab.onClick(e));
                } }, (tab === null || tab === void 0 ? void 0 : tab.tabIcon) && h("div", { class: "dga-tabs-list__icon" }, this.renderIcon(tab === null || tab === void 0 ? void 0 : tab.tabIcon, tab === null || tab === void 0 ? void 0 : tab.iconProps)), h("div", { class: "dga-tabs-list__label" }, tab === null || tab === void 0 ? void 0 : tab.label)))))), this.orientation === 'horizontal' && this.tabsList.length > 5 && (h("li", { key: '751c6e8354205153e43ef559e5ed573be53af6c9', class: "breadcrumb-item ellipsis" }, h("dga-button", { key: '44dd7928203f9eb43cf21a41a88a95612cf39f41', iconOnly: true, iconProps: {
                size: 17,
                variant: 'solid',
            }, iconType: "MoreHorizontalCircle01Icon", label: "Button", onClick: () => {
                this.toggleMenu();
            }, size: "md", variant: "subtle", disabled: this.disabled, "aria-haspopup": "true", "aria-expanded": this.isMenuOpen ? 'true' : 'false' }), this.isMenuOpen && (h("div", { key: '012eda4fc6d68f51b10a3be77443468f8c4f72c9', class: "breadcrumb-dropdown" }, h("dga-tabs", { key: '31ffe18c42eecfa9c149f6147a82c71d44c99622', size: "md", orientation: "vertical",
            // tabIcons: true,
            flush: false, external: true, divider: true, tabsList: this.tabsList.slice(5) })))))));
    }
    static get is() { return "dga-tabs"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-tabs.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-tabs.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"sm\" | \"md\" | \"lg\"",
                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'md'"
            },
            "orientation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'horizontal' | 'vertical'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "orientation",
                "reflect": false,
                "defaultValue": "'horizontal'"
            },
            "external": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "external",
                "reflect": false,
                "defaultValue": "false"
            },
            "flush": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "flush",
                "reflect": false,
                "defaultValue": "false"
            },
            "divider": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "divider",
                "reflect": false,
                "defaultValue": "false"
            },
            "tabsList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ITab[]",
                    "resolved": "ITab[]",
                    "references": {
                        "ITab": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-tabs/dga-tabs.tsx",
                            "id": "src/components/dga-tabs/dga-tabs.tsx::ITab"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "extraClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "extra-class",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "activeTab": {},
            "isMenuOpen": {}
        };
    }
    static get elementRef() { return "host"; }
}
//# sourceMappingURL=dga-tabs.js.map
