this.BX=this.BX||{};this.BX.Messenger=this.BX.Messenger||{};this.BX.Messenger.v2=this.BX.Messenger.v2||{};this.BX.Messenger.v2.Component=this.BX.Messenger.v2.Component||{};(function(t,e){"use strict";const s=50;const i=Object.freeze({white:"white",gray:"gray"});const n={name:"MessengerTabs",props:{colorScheme:{type:String,required:true,default:i.white,validator:t=>Object.values(i).includes(t.toLowerCase())},tabs:{type:Array,default:()=>[]}},data(){return{hasLeftControl:false,hasRightControl:false,currentElementIndex:0,highlightOffsetLeft:0,highlightWidth:0,isFirstCall:true}},computed:{highlightStyle(){return{left:`${this.highlightOffsetLeft}px`,width:`${this.highlightWidth}px`}},colorSchemeClass(){return this.colorScheme===i.white?"--white":"--gray"}},watch:{currentElementIndex(t){this.updateHighlightPosition(t);this.$emit("tabSelect",this.tabs[t]);this.scrollToElement(t)}},mounted(){const t=localStorage.getItem("lastOpenedTabIndex");if(this.$refs.tabs.scrollWidth>this.$refs.tabs.offsetWidth){this.hasRightControl=true}if(t&&this.tabs[t]){this.currentElementIndex=parseInt(t,10)}this.updateHighlightPosition(this.currentElementIndex);setTimeout((()=>{this.isFirstCall=false}),100)},beforeUnmount(){localStorage.setItem("lastOpenedTabIndex",this.currentElementIndex.toString())},methods:{getElementNodeByIndex(t){return[...this.$refs.tabs.children].filter((t=>!e.Dom.hasClass(t,"bx-im-elements-tabs__highlight")))[t]},updateHighlightPosition(t){const e=this.getElementNodeByIndex(t);this.highlightOffsetLeft=e.offsetLeft;this.highlightWidth=e.offsetWidth},scrollToElement(t){const e=this.getElementNodeByIndex(t);this.$refs.tabs.scroll({left:e.offsetLeft-s,behavior:"smooth"})},onTabClick(t){this.currentElementIndex=t.index},isSelectedTab(t){return t===this.currentElementIndex},onLeftClick(){if(this.currentElementIndex<=0){return}this.currentElementIndex--},onRightClick(){if(this.currentElementIndex>=this.tabs.length-1){return}this.currentElementIndex++},updateControlsVisibility(){this.hasRightControl=this.$refs.tabs.scrollWidth>this.$refs.tabs.scrollLeft+this.$refs.tabs.clientWidth;this.hasLeftControl=this.$refs.tabs.scrollLeft>0}},template:`\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`};t.TabsColorScheme=i;t.MessengerTabs=n})(this.BX.Messenger.v2.Component.Elements=this.BX.Messenger.v2.Component.Elements||{},BX);
//# sourceMappingURL=tabs.bundle.map.js