{"version":3,"file":"tabs.bundle.js","sources":["../src/tabs.js"],"sourcesContent":["import { Dom } from 'main.core';\n\nimport './tabs.css';\n\nimport type { JsonObject } from 'main.core';\n\nconst ARROW_CONTROL_SIZE = 50;\n\nexport const TabsColorScheme = Object.freeze({\n\twhite: 'white',\n\tgray: 'gray',\n});\n\n// @vue/component\nexport const MessengerTabs = {\n\tname: 'MessengerTabs',\n\tprops: {\n\t\tcolorScheme: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tdefault: TabsColorScheme.white,\n\t\t\tvalidator: (value) => Object.values(TabsColorScheme).includes(value.toLowerCase()),\n\t\t},\n\t\ttabs: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\tdata(): JsonObject\n\t{\n\t\treturn {\n\t\t\thasLeftControl: false,\n\t\t\thasRightControl: false,\n\t\t\tcurrentElementIndex: 0,\n\t\t\thighlightOffsetLeft: 0,\n\t\t\thighlightWidth: 0,\n\t\t\tisFirstCall: true,\n\t\t};\n\t},\n\tcomputed:\n\t{\n\t\thighlightStyle(): {left: string, width: string}\n\t\t{\n\t\t\treturn {\n\t\t\t\tleft: `${this.highlightOffsetLeft}px`,\n\t\t\t\twidth: `${this.highlightWidth}px`,\n\t\t\t};\n\t\t},\n\t\tcolorSchemeClass(): string\n\t\t{\n\t\t\treturn this.colorScheme === TabsColorScheme.white ? '--white' : '--gray';\n\t\t},\n\t},\n\twatch:\n\t{\n\t\tcurrentElementIndex(newIndex: number)\n\t\t{\n\t\t\tthis.updateHighlightPosition(newIndex);\n\t\t\tthis.$emit('tabSelect', this.tabs[newIndex]);\n\t\t\tthis.scrollToElement(newIndex);\n\t\t},\n\t},\n\tmounted()\n\t{\n\t\tconst savedTabIndex = localStorage.getItem('lastOpenedTabIndex');\n\t\tif (this.$refs.tabs.scrollWidth > this.$refs.tabs.offsetWidth)\n\t\t{\n\t\t\tthis.hasRightControl = true;\n\t\t}\n\n\t\tif (savedTabIndex && this.tabs[savedTabIndex])\n\t\t{\n\t\t\tthis.currentElementIndex = parseInt(savedTabIndex, 10);\n\t\t}\n\n\t\tthis.updateHighlightPosition(this.currentElementIndex);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.isFirstCall = false;\n\t\t}, 100);\n\t},\n\tbeforeUnmount()\n\t{\n\t\tlocalStorage.setItem('lastOpenedTabIndex', this.currentElementIndex.toString());\n\t},\n\tmethods:\n\t{\n\t\tgetElementNodeByIndex(index: number): HTMLElement\n\t\t{\n\t\t\treturn [...this.$refs.tabs.children].filter(\n\t\t\t\t(node) => !Dom.hasClass(node, 'bx-im-elements-tabs__highlight'),\n\t\t\t)[index];\n\t\t},\n\t\tupdateHighlightPosition(index: number)\n\t\t{\n\t\t\tconst element = this.getElementNodeByIndex(index);\n\t\t\tthis.highlightOffsetLeft = element.offsetLeft;\n\t\t\tthis.highlightWidth = element.offsetWidth;\n\t\t},\n\t\tscrollToElement(elementIndex: number)\n\t\t{\n\t\t\tconst element = this.getElementNodeByIndex(elementIndex);\n\t\t\tthis.$refs.tabs.scroll({ left: element.offsetLeft - ARROW_CONTROL_SIZE, behavior: 'smooth' });\n\t\t},\n\t\tonTabClick(event): {index: number}\n\t\t{\n\t\t\tthis.currentElementIndex = event.index;\n\t\t},\n\t\tisSelectedTab(index: number): boolean\n\t\t{\n\t\t\treturn index === this.currentElementIndex;\n\t\t},\n\t\tonLeftClick()\n\t\t{\n\t\t\tif (this.currentElementIndex <= 0)\n\t\t\t{\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.currentElementIndex--;\n\t\t},\n\t\tonRightClick()\n\t\t{\n\t\t\tif (this.currentElementIndex >= this.tabs.length - 1)\n\t\t\t{\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.currentElementIndex++;\n\t\t},\n\t\tupdateControlsVisibility()\n\t\t{\n\t\t\tthis.hasRightControl = this.$refs.tabs.scrollWidth > this.$refs.tabs.scrollLeft + this.$refs.tabs.clientWidth;\n\t\t\tthis.hasLeftControl = this.$refs.tabs.scrollLeft > 0;\n\t\t},\n\t},\n\ttemplate: `\n\t\t<div class=\"bx-im-elements-tabs__container bx-im-elements-tabs__scope\" :class=\"colorSchemeClass\">\n\t\t\t<div v-if=\"hasLeftControl\" @click.stop=\"onLeftClick\" class=\"bx-im-elements-tabs__control --left\">\n\t\t\t\t<div class=\"bx-im-elements-tabs__forward-icon\"></div>\n\t\t\t</div>\n\t\t\t<div v-if=\"hasRightControl\" @click.stop=\"onRightClick\" class=\"bx-im-elements-tabs__control --right\">\n\t\t\t\t<div class=\"bx-im-elements-tabs__forward-icon\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"bx-im-elements-tabs__elements\" ref=\"tabs\" @scroll.passive=\"updateControlsVisibility\">\n\t\t\t\t<div class=\"bx-im-elements-tabs__highlight\" :class=\"isFirstCall ? '' : '--transition'\" :style=\"highlightStyle\"></div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(tab, index) in tabs\"\n\t\t\t\t\t:key=\"tab.id\"\n\t\t\t\t\tclass=\"bx-im-elements-tabs__item\"\n\t\t\t\t\t:class=\"[isSelectedTab(index) ? '--selected' : '']\"\n\t\t\t\t\t@click=\"onTabClick({index: index})\"\n\t\t\t\t\t:title=\"tab.title\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"bx-im-elements-tabs__item-title\" :class=\"isFirstCall ? '' : '--transition'\">{{ tab.title }}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n};\n"],"names":["ARROW_CONTROL_SIZE","TabsColorScheme","Object","freeze","white","gray","MessengerTabs","name","props","colorScheme","type","String","required","default","validator","value","values","includes","toLowerCase","tabs","Array","data","hasLeftControl","hasRightControl","currentElementIndex","highlightOffsetLeft","highlightWidth","isFirstCall","computed","highlightStyle","left","width","colorSchemeClass","watch","newIndex","updateHighlightPosition","$emit","scrollToElement","mounted","savedTabIndex","localStorage","getItem","$refs","scrollWidth","offsetWidth","parseInt","setTimeout","beforeUnmount","setItem","toString","methods","getElementNodeByIndex","index","children","filter","node","Dom","hasClass","element","offsetLeft","elementIndex","scroll","behavior","onTabClick","event","isSelectedTab","onLeftClick","onRightClick","length","updateControlsVisibility","scrollLeft","clientWidth","template"],"mappings":"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"}