{"version":3,"file":"tabComponent-d1cc1604.js","sources":["../../src/tab-component/TabComponent.vue","../../src/tab-component/app.js"],"sourcesContent":["<template>\r\n    <div class=\"tab-component\">\r\n        <div class=\"tab-component__header\">\r\n            <ul class=\"tab-component__header-items\">\r\n                <li class=\"tab-component__header-item\" v-for=\"(item, index) in tabContents\">\r\n                    <button class=\"tab-component__header-button\" @click=\"toggleTab(index)\">\r\n                        <img v-if=\"isTablet && item.header_icon != null && item.header_icon != false\" :src=\"`${item.header_icon}`\" alt=\"\" class=\"tab-component__header-icon\">\r\n                        <h6>{{ item.header }}</h6>\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"tab-component__content-container\">\r\n            <div class=\"tab-component__contents\" :style=\"`min-height: ${heighestContentTab}`\" v-for=\"(item, index) in tabContents\">\r\n                <span class=\"tab-component__closeModal\" @click=\"closeTab(index)\"></span>\r\n                <p class=\"tab-component__text\" v-html=\"item.content\"></p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n<script setup>\r\n    import { ref, onMounted, reactive } from 'vue';\r\n    const props = defineProps({\r\n        tabComponent: {\r\n            Array,\r\n            default: () => []\r\n        },\r\n    });\r\n    const tabContents = ref();\r\n    const heighestContentTab = ref();\r\n    const numberOfContentTabs = ref();\r\n    const activeTab = ref(0);\r\n\r\n    const isTablet = ref(false);\r\n\r\n    tabContents.value = props?.tabComponent.tab_content;\r\n\r\n    onMounted(() => {\r\n        const tabs = document.querySelectorAll('.tab-component__contents');\r\n        const headers = document.querySelectorAll('.tab-component__header-button')\r\n        \r\n        const observer = new ResizeObserver((body) => {\r\n            if(window.innerWidth < 500) {\r\n                isTablet.value = true;\r\n                calcHeight();\r\n                initialiseMobile(tabs, headers);\r\n            }\r\n            else {\r\n                isTablet.value = false;\r\n                calcHeight();\r\n                initialiseDesktop(tabs , headers);\r\n            }\r\n        });\r\n\r\n        observer.observe(document.body)\r\n\r\n        if(isTablet.value) {\r\n            // initialiseMobile(tabs, headers);\r\n        }\r\n        else {\r\n            // initialiseDesktop(tabs, headers);\r\n        }\r\n    \r\n    })\r\n\r\n    const initialiseMobile = (tabs, headers) => {\r\n        for(let i= 0; i < tabs.length; i++) {\r\n            tabs[i].classList.add('tab-component__contents--disabled')\r\n            headers[i].classList.remove('tab-component__header-button--disabled')\r\n            headers[i].classList.remove('tab-component__header-button--active')\r\n        }\r\n    }\r\n    const initialiseDesktop = (tabs, headers) => {\r\n        for(let i = 0; i< tabs.length; i++) {\r\n            if (i != activeTab.value) {\r\n                tabs[i].classList.add('tab-component__contents--disabled')\r\n                headers[i].classList.add('tab-component__header-button--disabled')\r\n            }\r\n            if(i == activeTab.value) {\r\n                tabs[i].classList.add('tab-component__contents--active')\r\n                headers[i].classList.add('tab-component__header-button--active')\r\n            }\r\n        }\r\n    }\r\n\r\n    const closeTab = (index) => {\r\n        const tabs = document.querySelectorAll('.tab-component__contents');\r\n        for (let i=0; i < tabs.length; i++) {\r\n            if (i == index) {\r\n                tabs[i].classList.remove('tab-component__contents--active')\r\n                tabs[i].classList.add('tab-component__contents--disabled')\r\n            }\r\n        }\r\n    }\r\n\r\n    const calcHeight = () => {\r\n        let height = 0;\r\n        const tabs = document.querySelectorAll('.tab-component__contents');\r\n        for(let i =0; i < tabs.length; i++) {\r\n            if (tabs[i].getBoundingClientRect().height > height) {\r\n                height = tabs[i].getBoundingClientRect().height;\r\n            }\r\n        }\r\n        if(isTablet.value) {\r\n            heighestContentTab.value = \"auto\";\r\n        }\r\n        else {\r\n            heighestContentTab.value = height+\"px\";\r\n        }\r\n    }\r\n\r\n\r\n    const toggleTab = (index) => {\r\n        const headers = document.querySelectorAll('.tab-component__header-button')\r\n        const tabs = document.querySelectorAll('.tab-component__contents');\r\n        for (let i = 0; i < tabs.length; i++) {\r\n            if (i == activeTab.value) {\r\n                tabs[i].classList.remove('tab-component__contents--active')\r\n                tabs[i].classList.add('tab-component__contents--disabled');\r\n                if(!isTablet.value) {\r\n                    headers[i].classList.remove('tab-component__header-button--active')\r\n                    headers[i].classList.add('tab-component__header-button--disabled');\r\n                }\r\n            }\r\n            if (i == index) {\r\n                if(!isTablet.value) {\r\n                    headers[i].classList.remove('tab-component__header-button--disabled')\r\n                    headers[i].classList.add('tab-component__header-button--active')\r\n                }\r\n                tabs[i].classList.remove('tab-component__contents--disabled')\r\n                tabs[i].classList.add('tab-component__contents--active')\r\n            }\r\n        }\r\n        activeTab.value = index\r\n    }\r\n\r\n</script>","import { createApp } from \"vue\";\r\n\r\nimport TabComponent from \"./TabComponent.vue\";\r\n\r\n\r\nconst handle = \"almero-vue-tab-component\";\r\nconst mountEls = document.querySelectorAll(`.${handle}`);\r\n\r\nmountEls.forEach((mountEl) => {\r\n    let props = {};\r\n    try {\r\n        props = JSON.parse(mountEl.dataset.rootProps);\r\n    }\r\n    catch (e) {\r\n        console.error(e);\r\n    }\r\n    const app = createApp(\r\n        TabComponent, {\r\n            ...props,\r\n        }\r\n    );\r\n    app.mount(mountEl);\r\n});"],"names":["props","__props","tabContents","ref","heighestContentTab","activeTab","isTablet","onMounted","tabs","headers","body","calcHeight","initialiseMobile","initialiseDesktop","i","closeTab","index","height","toggleTab","handle","mountEls","mountEl","e","createApp","TabComponent"],"mappings":"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"}