https://www.grundfos.com/etc.clientlibs/settings/wcm/design/aembase/base/resources/chunks/CmpTabs.7bd6c994.js

1import{_ as I,b as y,w as v,l as n,g as _,s as w,r as T,t as S,V}from"./Truncate.7cbeefbf.js";import{m as E}from"./mobileOnly.04609cb6.js";import{C as k,w as C}from"./CmpHorizontalScroll.32e19dce.js";import{resolveComponent as H,openBlock as l,createElementBlock as r,normalizeProps as Q,guardReactiveProps as B,normalizeClass as g,createElementVNode as u,createTextVNode as p,toDisplayString as c,createCommentVNode as h,createVNode as M,withCtx as A,withModifiers as m,Fragment as L,renderList as O,renderSlot as P}from"vue";import"./vendor.44c95208.js";import"./lodash.1527dcd2.js";import"./propValidators.c5d3a9de.js";const{mapMutations:x,mapState:W}=V,f="all",N=2,z="Tab change",R="resetTabs",D="changeTab",U={name:"CmpTabs",components:{CmpHorizontalScroll:k},mixins:[y,E,C,v],provide(){return{registerTab:this.registerTab,unregisterTab:this.unregisterTab,updateTab:this.updateTab}},props:{activeTabId:{type:String,default:null},caption:{type:String,default:null},defaultTabId:{type:String,default:null},disabled:{type:Boolean,default:!1},heading:{type:String,default:null},theme:{type:String,default:""},labels:{type:Object,default:()=>({})},resetWatch:{type:[Number,String,Boolean,Object,Array],default:null},showAll:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},stickyHeading:{type:Boolean,default:!1},centered:{type:Boolean,default:!1},useQuery:{type:Boolean,default:!1},toggleHandler:{type:Function,default:n.noop}},data(){return{SHOW_ALL:f,currentTabId:null,isStuck:!1,prevTabId:null,navOffset:0,barHeight:0,contentPosInView:0,registeredTabs:[],tabs:[],loadedTabs:[],initialQueryValue:null}},computed:{...W("base",["navIsExpanded","windowScroll","viewportSize","headerHeight"]),attrs(){return this.isStuck?{style:{"padding-top":`${this.navOffset}px`}}:{}},initialTabId(){return this.showAll?f:this.defaultTabId},headingIsVisible(){return this.heading?this.stickyHeading?this.isStuck:!0:!1}},watch:{activeTabId(){this.currentTabId!==this.activeTabId&&this.setTab(this.activeTabId)},"registeredTabs.length":function(t){this.setTabs(),this.initialQueryValue&&this.$nextTick(()=>{if(this.registeredTabs.length===t&&this.initialQueryValue&&!this.validateTabId(this.initialQueryValue)){const e=this.initialTabId||n.get(this.tabs,"[0].id"),s=this.validateTabId(e)?e:null;this.setCurrentTabToDefault(s),this.initialQueryValue=null}})}},mounted(){try{this.useQuery&&(this.initialQueryValue=this.getQueryValue()),this.sticky&&(this.setSticky(this.windowScroll),this.$watch("windowScroll",this.setSticky),this.$watch("viewportSize",this.setNavOffset),this.$watch("viewportSize",this.setBarHeight)),this.resetWatch!==null&&this.$watch("resetWatch",this.setTabs),!!window.MSInputMethodContext&&!!document.documentMode&&setTimeout(()=>{this.setBarHeight(),this.setScroll()},200)}finally{this.setTabs(),window.addEventListener(R,()=>{this.setTabs()}),globalThis.addEventListener(D,t=>{this.setTab(t.detail)}),this.setCmpTabsMounted(!0)}},methods:{...x("base",["setCmpTabsMounted"]),windowLoad(){if(this.sticky&&(this.setNavOffset(),this.setBarHeight()),this.useQuery){const t=this.getHashValue(),e=this.getQueryValue();this.validateTabId(e)&&(t||this.tabUseQueryOnWindowLoad(e))&&this.setScroll()}this.setTabInViewport()},registerTab(t){this.registeredTabs.findIndex(s=>s.id===t.id)===-1&&this.registeredTabs.push({...t})},unregisterTab(t){const e=this.registeredTabs.findIndex(s=>s.id===t);e!==-1&&this.registeredTabs.splice(e,1)},updateTab(t){const e=this.registeredTabs.findIndex(s=>s.id===t.id);e!==-1&&(this.registeredTabs.splice(e,1,{...t}),this.tabs.splice(e,1,{...t}))},setTabInViewport(){const t=this.$refs.bar,e=Math.abs(t.maxPos),s=Math.abs(t.contentPos),i=document.querySelector(`[aria-controls = "${this.currentTabId}" ]`).parentElement.getBoundingClientRect(),o=this.viewportSize.width,b=(o-(i.right-i.left))/N,a=i.right-o+b+s;a<0?this.contentPosInView=0:a>0&&a<e?this.contentPosInView=-a:a>e&&(this.contentPosInView=-e)},getDimensions(t){const e=document.body.getBoundingClientRect(),s=t.getBoundingClientRect();return{top:s.top-e.top,bottom:s.top-e.top+s.height}},getHashValue(){const{location:{hash:t}}=window;return t.split("#")[1]||null},getHashEl(){return this.getHashValue()?document.getElementById(this.getHashValue()):null},getQueryValue(){return n.get(_(window.location.search),"tab",null)},setBarHeight(){this.$el.offsetParent!==null&&(this.barHeight=this.$refs.nav.getBoundingClientRect().height)},setSticky({y:t}){if(this.$el.offsetParent===null)return;const e=this.getDimensions(this.$el);this.isStuck=!this.isEditMode&&!this.navIsExpanded?t>=e.top&&t<=e.bottom-this.navOffset:!1},setNavOffset(){if(this.$el.offsetParent===null)return;if(this.isEditMode){this.navOffset=0;return}const t=this.stickyHeading?this.$refs.bar:this.$refs.nav;this.navOffset=t?t.getBoundingClientRect().height:0},setScroll(){this.$el.offsetParent!==null&&this.$nextTick().then(()=>{const t=this.getHashEl(),e=document.getElementById(this.currentTabId);let s=t&&e&&e.contains(t)?this.getDimensions(t).top-this.barHeight:this.getDimensions(this.$el).top;s<window.scrollY&&(s-=this.headerHeight),w(0,s,!0)})},getTabIdMatch(t){return t&&n.find(this.tabs,{id:t})?t:null},setTab(t){const e=decodeURI(t),s=this.validateTabId(e);!this.isEditMode&&s&&(this.prevTabId=this.currentTabId,this.currentTabId=e,this.toggleHandler(this.currentTabId,this.prevTabId),this.isActive&&this.useQuery&&(T({tab:this.currentTabId}),this.setScroll()),S({page:{tabName:t}},z),this.setTabInViewport(),this.addToLoadedTabs(this.currentTabId))},setTabs(){this.tabs=this.getTabsFromChildren();const t=this.initialTabId||n.get(this.tabs,"[0].id"),e=this.validateTabId(t)?t:null,s=this.validateTabId(this.activeTabId)?this.activeTabId:null;this.useQuery?this.handleQueryTabs(e):this.currentTabId=s||e,this.currentTabId&&(this.toggleHandler(this.currentTabId),this.addToLoadedTabs(this.currentTabId))},getTabsFromChildren(){return this.registeredTabs.map(t=>({caption:t.caption,disabled:t.disabled,id:t.id,label:t.label,subCaption:t.subCaption,useQueryOnWindowLoad:t.useQueryOnWindowLoad,captionClass:t.captionClass}))},handleQueryTabs(t){const e=this.getInitialQueryValue();this.shouldProcessQuery(e)?this.processQueryTabs(e,t):this.tabs.length>0&&this.setCurrentTabToDefault(t)},getInitialQueryValue(){return this.tabs.length===0?null:this.initialQueryValue||this.getQueryValue()},shouldProcessQuery(t){return this.tabs.length>0&&t},processQueryTabs(t,e){const d=this.getTabIdMatch(t)||t,i=d&&this.validateTabId(d);this.currentTabId=i?d:e,i&&(this.isEditMode||T({tab:this.currentTabId}),this.initialQueryValue=null)},setCurrentTabToDefault(t){this.currentTabId=t,this.isEditMode||T({tab:this.currentTabId})},toggleTab(t,e=!1){const s=n.find(this.tabs,{id:t});s&&(s.disabled=e)},validateTabId(t){const e=t===f&&this.showAll;if(t===null||e)return!0;const s=n.find(this.tabs,{id:t});return!!(s&&!s.disabled)},tabUseQueryOnWindowLoad(t){const e=n.find(this.tabs,{id:t});return e&&e.useQueryOnWindowLoad},addToLoadedTabs(t){this.loadedTabs.includes(t)||this.loadedTabs.push(this.currentTabId)},removeTabById(t){const e=n.find(this.tabs,{id:t});e&&this.tabs.splice(this.tabs.indexOf(e),1)}}},F={class:"cmp-tabs__nav-inner"},q={key:0,class:"cmp-tabs__heading"},j={key:0,class:"cmp-tabs__caption"},G={ref:"bar",class:"cmp-tabs__nav-bar"},Y={key:0,class:"cmp-tabs__list-item"},K=["aria-selected"],J=["data-qa","aria-controls","aria-selected","disabled","onClick"],X={key:1,class:"cmp-tabs__sub-caption"};function Z(t,e,s,d,i,o){const b=H("cmp-horizontal-scroll");return l(),r("section",Q(B(o.attrs)),[t.isActive?(l(),r("nav",{key:0,ref:"nav",class:g(["cmp-tabs__nav","cmp-tabs__nav--border",{"cmp-tabs__nav--sticky":s.sticky,"cmp-tabs__nav--centered":s.centered,"cmp-tabs__nav--sticky-heading":s.stickyHeading,"is-stuck":i.isStuck},`b-theme ${s.theme}`]),role:"tablist"},[u("div",F,[o.headingIsVisible?(l(),r("h2",q,[p(c(s.heading)+" ",1),s.caption?(l(),r("span",j,c(s.caption),1)):h("",!0)])):h("",!0),u("div",G,[M(b,{ref:"bar",key:"scroll","content-pos-in-view":i.contentPosInView,labels:s.labels,"resize-watch":i.tabs,class:"cmp-tabs__list cmp-horizontal-scroll"},{default:A(()=>[s.showAll?(l(),r("div",Y,[u("button",{"aria-selected":!t.isEditMode&&i.SHOW_ALL===i.currentTabId,class:"elm-tab-button",type:"button",role:"tab",onClick:e[0]||(e[0]=m(a=>o.setTab(i.SHOW_ALL),["prevent"]))},c(s.labels.all),9,K)])):h("",!0),(l(!0),r(L,null,O(i.tabs,a=>(l(),r("div",{key:a.id,class:"cmp-tabs__list-item"},[u("button",{"data-qa":`cmp-tab-${a.id}`,"aria-controls":a.id,"aria-selected":!t.isEditMode&&a.id===i.currentTabId,disabled:a.disabled||s.disabled,class:"elm-tab-button",type:"button",role:"tab",onClick:m($=>o.setTab(a.id),["prevent"])},[p(c(a.label)+" ",1),a.caption?(l(),r("span",{key:0,class:g(["cmp-tabs__caption",a.captionClass])},c(a.caption),3)):h("",!0),a.subCaption?(l(),r("span",X,c(a.subCaption),1)):h("",!0)],8,J)]))),128))]),_:1},8,["content-pos-in-view","labels","resize-watch"])],512)])],2)):h("",!0),P(t.$slots,"default",{currentTabId:i.currentTabId,isActive:i.currentTabId===i.SHOW_ALL?!1:t.isActive,toggleHandler:o.toggleTab,barHeight:i.barHeight,loadedTabs:i.loadedTabs,isStuck:i.isStuck}

1)],16)}const rt=I(U,[["render",Z]]);export{D as CHANGE_TAB_EVENT,R as RESET_TABS_EVENT,rt as default};