https://www.maybelline.com/frontend/master/js/tab-list.215ee575.js

1"use strict";(self["webpackChunkwsf_master_mny"]=self["webpackChunkwsf_master_mny"]||[]).push([[9873],{4886:function(t,s,i){i.r(s);var e=i(2895),a=i(3163);s["default"]=(0,e.fC)({components:{SortBy:a.A}})},5484:function(t,s,i){i.r(s),i.d(s,{default:function(){return T}});var e=i(2895),a=function(){var t=this,s=t._self._c;return s("div",{ref:"tabsListWrapper",staticClass:"tab-list-wrapper",attrs:{role:"application","data-qa":"tab-list"}},[s("div",{staticClass:"tabs-arrows-wrapper",class:{"hide-tabs":!t.hideTabs}},[s("div",{staticClass:"tabs__wrapper",class:{"without-arrows":!t.showArrows,"left-mask-bg":t.showLeftMask,"right-mask-bg":t.showRightMask}},[s("div",{ref:"tabsList",staticClass:"tabs-list",attrs:{role:"tablist"}},[t._t("tabs-item")],2)]),t._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:t.showArrows,expression:"showArrows"}],staticClass:"arrows-wrapper"},[s("button",{staticClass:"arrows-wrapper__prev",attrs:{"aria-label":t.prevArrowAltText,disabled:t.prevDisabled,tabindex:"-1"},on:{click:function(s){return s.preventDefault(),t.prevCollection()}}},[s("svg",{staticClass:"icon icon--chevron",attrs:{"aria-hidden":"true"}},[s("use",{attrs:{"xlink:href":"#icon-chevron",href:"#icon-chevron"}})])]),t._v(" "),s("button",{staticClass:"arrows-wrapper__next",attrs:{"aria-label":t.nextArrowAltText,disabled:t.nextDisabled,tabindex:"-1"},on:{click:function(s){return s.preventDefault(),t.nextCollection()}}},[s("svg",{staticClass:"icon icon--chevron",attrs:{"aria-hidden":"true"}},[s("use",{attrs:{"xlink:href":"#icon-chevron",href:"#icon-chevron"}})])])])]),t._v(" "),s("div",{ref:"tabsDetails",staticClass:"tabs-details",class:{scaled:t.windowScale>=1.5&&t.windowWidth<2048}},[t._t("tabs-details-accordion")],2)])},r=[],h=i(4017);const n="active-tab",o="data-tab-name",l="active-tab-content",c="aria-selected",b="focus-button";var d={name:"TabList",props:{prevArrowAltText:{type:String,default:"See previous tab"},nextArrowAltText:{type:String,default:"See next tab"},tabSlideClass:{type:String,default:"info-card-with-accordion"}},data(){return{activeTabWidth:0,totalTabsWidth:0,tabsListWidth:0,prevDisabled:!0,nextDisabled:!1,tabIndex:0,tabsArray:null,allDetailContents:null,tabsQuantity:0,prevTabIndex:0,indexStartScrolling:0,showArrows:!1,defaultTabMargin:16,contentsClientWidth:0,windowWidth:window.innerWidth,windowScale:window.devicePixelRatio}},computed:{hideTabs(){return!(this.tabsArray&&this.tabsArray.length<2)},showLeftMask(){return this.showArrows&&this.nextDisabled},showRightMask(){return this.showArrows&&!this.nextDisabled}},watch:{activeTabWidth(t){this.prevDisabled=0===t,this.nextDisabled=t+this.tabsListWidth>this.totalTabsWidth}},mounted(){window.addEventListener("resize",this.onResize),this.settingValues(),this.getLastVisibleTab(),this.determineTabMargin(),window.screen.width>=1024?this.accessibilityUsageByKeyboard():this.swipeTabs()},beforeDestroy(){window.removeEventListener("resize",this.onResize)},methods:{onResize(){this.windowWidth=window.innerWidth,this.windowScale=window.devicePixelRatio},determineTabMargin(){this.windowWidth<=1300&&this.windowWidth>=768?this.defaultTabMargin=20:this.windowWidth<768?this.defaultTabMargin=10:this.defaultTabMargin=16},showArrowsMethod(){this.tabsQuantity<=1?this.showArrows=!1:this.totalTabsWidth&&0===this.tabsListWidth||(this.showArrows=this.totalTabsWidth-this.defaultTabMargin>this.contentsClientWidth)},settingValues(){const t=65;setTimeout(()=>{this.allDetailContents=this.$refs.tabsDetails.querySelectorAll(`.${this.tabSlideClass}`),this.contentsClientWidth=this.allDetailContents[0]?.clientWidth,this.countAllTabsWidth(this.tabsArray),this.showArrowsMethod()},500);const s=this.$refs.tabsList;this.tabsArray=Array.from(s.querySelectorAll(".tabs-list__item")),this.tabsListWidth=s.clientWidth-t,this.tabsQuantity=this.tabsArray.length,this.makeActiveTab()},getLastVisibleTab(){let t=0;for(let s=0;s<this.tabsArray.length;s++)if(this.indexStartScrolling=s,t+=this.tabsArray[s].clientWidth+this.defaultTabMargin,t>=this.tabsListWidth)break},scrollToActiveTab(){const t=this.tabsArray.findIndex(t=>t.classList.contains(n))+1,s=this.prevTabIndex===t,i=this.windowWidth<=768?this.indexStart

1Scrolling-1:this.indexStartScrolling-2;this.prevDisabled&&t>i&&!s&&this.nextCollection(),this.prevDisabled||this.nextDisabled||s||(this.prevTabIndex<t?this.nextCollection():this.prevCollection()),this.prevTabIndex!==t&&(this.prevTabIndex=t)},countAllTabsWidth(t){t.forEach(t=>{this.totalTabsWidth+=t.clientWidth+this.defaultTabMargin})},makeActiveTab(){this.tabsArray[0].classList.add(n),this.tabsArray.forEach(t=>this.addChangeEvent(t))},setActive(t){this.tabsArray.forEach(t=>{t.classList.remove(n),t.classList.remove(b),t.querySelector("button").setAttribute(c,!1)}),t.classList.add(n),t.querySelector("button").setAttribute(c,!0),this.makeActiveTabContent(t.getAttribute(o)),h.B.$emit("flipCopyCard")},addChangeEvent(t){t.addEventListener("click",()=>{this.setActive(t),this.showArrows&&this.scrollToActiveTab()});let s=t.querySelector("button");s.addEventListener("focus",()=>{this.setActive(t)})},makeActiveTabContent(t){for(let s of this.allDetailContents)s.classList.remove(l),s.classList.remove("hidden-card");this.$refs.tabsDetails.querySelector(`.${this.tabSlideClass}[data-tab-name='${t}']`)?.classList.add(l)},nextCollection(){this.tabIndex=this.tabsArray.length-this.tabsQuantity;const t=this.tabsArray[this.tabIndex].clientWidth;this.tabsQuantity--,this.movingTabs("+",t)},prevCollection(){const t=this.tabsArray[this.tabIndex].clientWidth;this.tabIndex=0===this.tabIndex?this.tabIndex:this.tabIndex-1,this.tabsQuantity++,this.movingTabs("-",t)},movingTabs(t,s){const i=document.body.classList.contains("rtl");let e,a,r="",h=s+this.defaultTabMargin;switch(t){case"-":e=this.activeTabWidth-=h,r=`${e}px`;break;case"+":a=this.activeTabWidth+=h,r=`${a}px`;break}this.$refs.tabsList.style.transform=`translateX(${i?"":"-"}${r})`},getTabIndex(){return this.tabsArray.findIndex(t=>t.classList.contains(n))},lastTabIdentify(){const t=this.tabsArray.slice(-1);return this.tabsArray.lastIndexOf(t[0])},goToNextTab(){const t=this.getTabIndex()+1,s=this.lastTabIdentify();this.showArrows?(t>=1&&!this.nextDisabled&&(this.nextCollection(),this.setActive(this.tabsArray[t])),this.nextDisabled&&t<=s&&this.setActive(this.tabsArray[t]),t>s&&(this.nextDisabled=!1,this.prevDisabled=!0,this.activeTabWidth=0,this.tabIndex=0,this.tabsQuantity=this.tabsArray.length,this.$refs.tabsList.style.transform="translateX(0)",this.setActive(this.tabsArray[0]))):(t>=1&&t<=s&&this.setActive(this.tabsArray[t]),t>s&&(this.tabIndex=0,this.tabsQuantity=this.tabsArray.length,this.setActive(this.tabsArray[0])))},goToPrevTab(){const t=this.getTabIndex();this.prevDisabled||(this.prevCollection(),this.setActive(this.tabsArray[t-1])),this.prevDisabled&&t>=1&&this.setActive(this.tabsArray[t-1]),0===t&&this.prevDisabled&&this.selectLastTab()},selectLastTab(){const t=this.lastTabIdentify();if(this.setActive(this.tabsArray[t]),this.showArrows)for(let s=0;s<this.tabsQuantity;s++){if(this.nextDisabled)break;this.nextCollection()}},focusActiveTabPanel(){this.$refs.tabsDetails.querySelector(`.${this.tabSlideClass}.${l}`).focus()},focusActiveTab(){this.tabsArray.forEach(t=>{t.classList.remove(b)});const t=this.$refs.tabsList.querySelector(`.tabs-list__item.${n}`);t.classList.add(b),t.querySelector("button").focus()},accessibilityUsageByKeyboard(){this.tabsArray.forEach(t=>{t.addEventListener("keyup",t=>{switch(t.preventDefault(),t.code){case"ArrowRight":this.goToNextTab(),this.focusActiveTab();break;case"ArrowLeft":this.goToPrevTab(),this.focusActiveTab();break;case"Space":this.focusActiveTabPanel();break;case"Enter":this.focusActiveTabPanel();break}})})},scrollToNextTab(){const t=this.getTabIndex()+1,s=this.lastTabIdentify();this.showArrows?(t>=1&&!this.nextDisabled&&(this.nextCollection(),this.setActive(this.tabsArray[t])),this.nextDisabled&&t<=s&&this.setActive(this.tabsArray[t])):t>=1&&t<=s&&this.setActive(this.tabsArray[t])},scrollToPrevTab(){const t=this.getTabIndex();this.prevDisabled||(this.prevCollection(),this.setActive(this.tabsArray[t-1])),this.prevDisabled&&t>=1&&this.setActive(this.tabsArray[t-1])},swipeTabs(){this.touchstartX=0,this.touchendX=0;const t=this.$refs.tabsListWrapper;t.addEventListener("touchstart",t=>{this.touchstartX=t.changedTouches[0].screenX},{passive:!0}),t.addEventListener("touchend",t=>{this.touchendX=t.changedTouches[0].screenX,this.handleGesture()},{passive:!0})},handleGesture(){const t=document.body.classList.contains("rtl"),s=Math.abs(this.touchendX-this.touchstartX),i=s>30,e=t?this.touchendX>this.touchstartX:this.touchendX<this.touchstartX;i&&(e?this.scrollToNextTab():e||this.scrollToPrevTab())}}},v=d,u=i(1656),w=(0,u.A)(v,a,r,!1,null,null,null),A=w.exports,T=(0,e.fC)({components:{TabList:A}})}}]);