{"version":"1.0.6","templatekey":"tabs","name":"Tabs","instructions":"<p>Tabs separate content by heading and are an efficient way to organize data and avoid lots of scrolling. Between the Generico tab tags nest as many Generico tabitem tags as you need.</p>","content":"<div id=\"{{AUTOID}}\">\n<div class=\"filter_generico_tabs_container px-1\">","templateend":"</div>\n</div>","variabledefaults":"","jscontent":"require([], function() {\n    const container = document.getElementById('{{AUTOID}}');\n    const tabsContainer = container.querySelector('.filter_generico_tabs_container');\n\n    container.querySelectorAll('.filter_generico_tabitem').forEach((e) => {\n        const parent = e.parentNode;\n        if (parent && parent.tagName.toLowerCase() === 'span') {\n            parent.replaceWith(...parent.childNodes);\n        }\n    });\n\n    Array.from(tabsContainer.children).forEach(child => {\n        if (!child.classList.contains('filter_generico_tabitem')) {\n            child.remove();\n        }\n    });\n\n    const nav = document.createElement('nav');\n    const navDiv = document.createElement('div');\n    navDiv.classList.add('nav', 'nav-tabs', 'mb-2');\n    navDiv.setAttribute('role', 'tablist');\n    nav.appendChild(navDiv);\n\n    const tabContent = document.createElement('div');\n    tabContent.classList.add('tab-content');\n\n    Array.from(tabsContainer.querySelectorAll('.filter_generico_tabitem')).forEach((item, index) => {\n        const titleEl = item.querySelector('#title_' + item.id);\n        const titleText = titleEl ? titleEl.textContent.trim() : '';\n        if (titleEl) {\n            titleEl.remove();\n        }\n\n        item.classList.add('tab-pane', 'fade');\n        item.setAttribute('role', 'tabpanel');\n        item.setAttribute('aria-labelledby', item.id + '-tab');\n        if (index === 0) {\n            item.classList.add('show', 'active');\n        }\n\n        const btn = document.createElement('button');\n        btn.classList.add('nav-link');\n        if (index === 0) {\n            btn.classList.add('active');\n        }\n        btn.id = item.id + '-tab';\n        btn.setAttribute('data-bs-toggle', 'tab');\n        btn.setAttribute('data-bs-target', '#' + item.id);\n        btn.setAttribute('type', 'button');\n        btn.setAttribute('role', 'tab');\n        btn.setAttribute('aria-controls', item.id);\n        btn.setAttribute('aria-selected', index === 0 ? 'true' : 'false');\n        btn.textContent = titleText;\n\n        navDiv.appendChild(btn);\n        tabContent.appendChild(item);\n    });\n\n    tabsContainer.appendChild(nav);\n    tabsContainer.appendChild(tabContent);\n});\n","importcss":"","customcss":"","dataset":"","datasetvars":"","allowedcontexts":"","allowedcontextids":""}