{"version":3,"file":"CatalogMainTags.eef5e3c6.js","sources":["../../../resources/js/common/components/Catalog/CatalogMainTags.vue"],"sourcesContent":["<template>\n    <div\n        class=\"courses-catalog__tags-container\"\n        :class=\"{ 'courses-catalog__tags-container_v2': styleVersion === 2 }\"\n        v-dragscroll=\"true\"\n    >\n        <button\n            v-if=\"tags.length > 0\"\n            class=\"courses-catalog__btn-tags\"\n            :class=\"{ 'courses-catalog__btn-tags_v2': styleVersion === 2 }\"\n            @click=\"tagsOpening()\"\n        >\n            <svg\n                :class=\"{ 'courses-catalog__btn-tags_svg': areTagsOpen }\"\n                width=\"10\"\n                height=\"5\"\n                viewBox=\"0 0 10 5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M4.58333 5C4.34626 5 4.18826 4.92648 4.03021 4.77942L0.237069 1.25002C-0.079023 0.9559 -0.079023 0.514706 0.237069 0.220588C0.553161 -0.0735294 1.02732 -0.0735294 1.34341 0.220588L4.58333 3.23532L7.82326 0.220588C8.13935 -0.0735294 8.61351 -0.0735294 8.9296 0.220588C9.24569 0.514706 9.24569 0.9559 8.9296 1.25002L5.13646 4.77942C4.97841 4.92648 4.74138 5 4.58333 5Z\"\n                />\n            </svg>\n        </button>\n        <div\n            class=\"courses-catalog__btn-tags_before\"\n            :class=\"{ 'courses-catalog__btn-tags_before-v2': styleVersion === 2 }\"\n        ></div>\n\n        <transition\n            v-if=\"tags.length === 0\"\n            mode=\"out-in\"\n            appear\n            appear-class=\"slider-appear-enter\"\n            appear-to-class=\"slider-appear-enter-to\"\n            appear-active-class=\"slider-appear-enter-active\"\n        >\n            <LoaderBlock :greenColor=\"styleVersion === 2\" class=\"courses-catalog__tags-loader\" />\n        </transition>\n\n        <transition\n            v-if=\"tags.length > 0\"\n            mode=\"out-in\"\n            appear\n            appear-class=\"slider-appear-enter\"\n            appear-to-class=\"slider-appear-enter-to\"\n            appear-active-class=\"slider-appear-enter-active\"\n        >\n            <div class=\"courses-catalog__tags\" id=\"tagsContainer\" v-dragscroll.x=\"true\">\n                <div\n                    style=\"width: max-content; height: max-content; margin-right: 10px\"\n                    v-for=\"tag in selectedTags\"\n                    :key=\"`${tag.id}-selected`\"\n                >\n                    <a\n                        style=\"display: block\"\n                        :href=\"completeUrl(null)\"\n                        v-if=\"selectedTags.length > 0\"\n                        @click=\"tagsCancellation(tag)\"\n                        class=\"courses-catalog__tag\"\n                        :class=\"{\n                            'courses-catalog__tag_selected': styleVersion !== 2,\n                            'courses-catalog__tag_v2': styleVersion === 2,\n                            'courses-catalog__tag_selected-v2': styleVersion === 2\n                        }\"\n                    >\n                        {{ tag.title || tag.name }}\n                    </a>\n                </div>\n\n                <a\n                    :href=\"completeUrl(tag)\"\n                    v-for=\"tag in localTags\"\n                    :key=\"tag.id\"\n                    @click=\"tagsSelection(tag)\"\n                    class=\"courses-catalog__tag courses-catalog__tag_default\"\n                    :class=\"{\n                        'courses-catalog__tag_v2': styleVersion === 2\n                    }\"\n                >\n                    {{ tag.title || tag.name }}\n                </a>\n\n                <div :class=\"{ 'courses-catalog__tag_last': !areTagsOpen }\"></div>\n            </div>\n        </transition>\n    </div>\n</template>\n\n<script>\nimport LoaderBlock from \"@components/Loaders/LoaderBlock\"\nimport { dragscroll } from \"vue-dragscroll\"\n\nexport default {\n    name: \"CatalogMainTags\",\n    components: {\n        LoaderBlock\n    },\n    props: {\n        tags: {\n            type: Array,\n            default: () => []\n        },\n        styleVersion: {\n            type: Number,\n            default: 1\n        },\n        closeOnSelection: {\n            type: Boolean,\n            default: true\n        },\n        selectedCategories: {\n            type: Array,\n            default: () => []\n        }\n    },\n    directives: {\n        dragscroll\n    },\n    data: () => ({\n        selectedTags: [],\n        areTagsOpen: false,\n        route: null,\n        appLocale: null,\n        appSubdomainUrl: null\n    }),\n    computed: {\n        localTags() {\n            return this.tags.filter(tag => !this.selectedTags.find(el => el.id === tag.id))\n        }\n    },\n    methods: {\n        tagsOpening() {\n            this.areTagsOpen = !this.areTagsOpen\n\n            const tagsContainer = document.getElementById(\"tagsContainer\")\n            if (parseFloat(getComputedStyle(tagsContainer).maxHeight) === 65) {\n                tagsContainer.style.flexWrap = \"wrap\"\n                tagsContainer.style.overflowX = \"auto\"\n                tagsContainer.style.overflowY = \"visible\"\n                tagsContainer.style.maxHeight = tagsContainer.scrollHeight + \"px\"\n            } else {\n                tagsContainer.style.maxHeight = \"65px\"\n                setTimeout(() => {\n                    tagsContainer.style.flexWrap = \"nowrap\"\n                    tagsContainer.style.overflowX = \"scroll\"\n                    tagsContainer.style.overflowY = \"hidden\"\n                }, 300)\n            }\n        },\n        selectedTagDisplayChange(el, value) {\n            const tagsCollection = document.querySelectorAll(\".courses-catalog__tag_default\")\n            const selectedTagIndex = this.tags.indexOf(el)\n            tagsCollection[selectedTagIndex].style.display = value\n\n            if (this.areTagsOpen && this.closeOnSelection) {\n                this.tagsOpening()\n                this.areTagsOpen = false\n            }\n        },\n        tagsSelection(tag) {\n            // Primitive logic for choosing one tag only\n            if (this.styleVersion !== 2) this.selectedTags = []\n\n            // this.selectedTags.push(tag)\n            this.selectedTags = [...this.selectedTags, tag]\n            this.selectedTagDisplayChange(tag, \"none\")\n\n            if (this.styleVersion === 2) this.$emit(\"handleCategories\", this.selectedTags)\n        },\n        tagsCancellation(tag) {\n            this.selectedTags = this.selectedTags.filter(el => el !== tag)\n            this.selectedTagDisplayChange(tag, \"block\")\n\n            if (this.styleVersion === 2) this.$emit(\"handleCategories\", this.selectedTags)\n        },\n        detectRoute() {\n            this.appLocale = window.app_locale\n            this.appSubdomainUrl = window.app_subdomain_url\n\n            this.route = window.location.href.split(\"/\")\n\n            this.tags.forEach(tag => {\n                if (this.route.indexOf(tag.slug) !== -1) {\n                    return this.tagsSelection(tag)\n                }\n            })\n        },\n        completeUrl(tag) {\n            if (this.styleVersion === 2) return null\n            return `${tag && tag.slug ? tag.unlock_link : \"\"}`\n        }\n    },\n    mounted() {\n        this.selectedTags = [...this.selectedCategories]\n\n        this.detectRoute()\n    }\n}\n</script>\n\n"],"names":["_sfc_main","LoaderBlock","dragscroll","tag","el","tagsContainer","value","tagsCollection","selectedTagIndex"],"mappings":"0FA8FA,MAAAA,EAAA,CACA,KAAA,kBACA,WAAA,CACA,YAAAC,CACA,EACA,MAAA,CACA,KAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EACA,aAAA,CACA,KAAA,OACA,QAAA,CACA,EACA,iBAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,mBAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,CACA,EACA,WAAA,CACA,WAAAC,CACA,EACA,KAAA,KAAA,CACA,aAAA,CAAA,EACA,YAAA,GACA,MAAA,KACA,UAAA,KACA,gBAAA,IACA,GACA,SAAA,CACA,WAAA,CACA,OAAA,KAAA,KAAA,OAAAC,GAAA,CAAA,KAAA,aAAA,KAAAC,GAAAA,EAAA,KAAAD,EAAA,EAAA,CAAA,CACA,CACA,EACA,QAAA,CACA,aAAA,CACA,KAAA,YAAA,CAAA,KAAA,YAEA,MAAAE,EAAA,SAAA,eAAA,eAAA,EACA,WAAA,iBAAAA,CAAA,EAAA,SAAA,IAAA,IACAA,EAAA,MAAA,SAAA,OACAA,EAAA,MAAA,UAAA,OACAA,EAAA,MAAA,UAAA,UACAA,EAAA,MAAA,UAAAA,EAAA,aAAA,OAEAA,EAAA,MAAA,UAAA,OACA,WAAA,IAAA,CACAA,EAAA,MAAA,SAAA,SACAA,EAAA,MAAA,UAAA,SACAA,EAAA,MAAA,UAAA,QACA,EAAA,GAAA,EAEA,EACA,yBAAAD,EAAAE,EAAA,CACA,MAAAC,EAAA,SAAA,iBAAA,+BAAA,EACAC,EAAA,KAAA,KAAA,QAAAJ,CAAA,EACAG,EAAAC,CAAA,EAAA,MAAA,QAAAF,EAEA,KAAA,aAAA,KAAA,mBACA,KAAA,YAAA,EACA,KAAA,YAAA,GAEA,EACA,cAAAH,EAAA,CAEA,KAAA,eAAA,IAAA,KAAA,aAAA,CAAA,GAGA,KAAA,aAAA,CAAA,GAAA,KAAA,aAAAA,CAAA,EACA,KAAA,yBAAAA,EAAA,MAAA,EAEA,KAAA,eAAA,GAAA,KAAA,MAAA,mBAAA,KAAA,YAAA,CACA,EACA,iBAAAA,EAAA,CACA,KAAA,aAAA,KAAA,aAAA,OAAAC,GAAAA,IAAAD,CAAA,EACA,KAAA,yBAAAA,EAAA,OAAA,EAEA,KAAA,eAAA,GAAA,KAAA,MAAA,mBAAA,KAAA,YAAA,CACA,EACA,aAAA,CACA,KAAA,UAAA,OAAA,WACA,KAAA,gBAAA,OAAA,kBAEA,KAAA,MAAA,OAAA,SAAA,KAAA,MAAA,GAAA,EAEA,KAAA,KAAA,QAAAA,GAAA,CACA,GAAA,KAAA,MAAA,QAAAA,EAAA,IAAA,IAAA,GACA,OAAA,KAAA,cAAAA,CAAA,CAEA,CAAA,CACA,EACA,YAAAA,EAAA,CACA,OAAA,KAAA,eAAA,EAAA,KACA,GAAAA,GAAAA,EAAA,KAAAA,EAAA,YAAA,EAAA,EACA,CACA,EACA,SAAA,CACA,KAAA,aAAA,CAAA,GAAA,KAAA,kBAAA,EAEA,KAAA,YAAA,CACA,CACA"}