https://assets.dm.de/design-system/15.3.5/Tabs.71080e556528fa4177e5.min.js

1"use strict";(self.webpackChunkDmDesignSystem=self.webpackChunkDmDesignSystem||[]).push([[2999],{4956(e,t,n){n.r(t);var r=n(677),i=n(2641),a=n(7544),o=n(8709),l=n(5366);const s=e=>{let{theme:t,disabled:n,tabWidth:r="10.625rem"}=e;return{textAlign:"center",background:"none",position:"relative",height:"1.875rem",border:"none",cursor:!n&&"pointer",display:"flex",":focus":{outlineStyle:n?"none":"auto"},":hover":{fontWeight:!n&&600},[t.breakpoints.horizontal.s.mediaQuery]:{minWidth:r},"& svg":{filter:n&&"grayscale(100%)"}}},c=e=>{let{mobilePadding:t,theme:n,disabled:r}=e;return{width:"max-content",padding:t||`0 ${n.dimension.spacing.xs.rem}`,fontWeight:400,[n.breakpoints.horizontal.s.mediaQuery]:{padding:`0 ${n.dimension.spacing.xs.rem}`,width:"100%"},cursor:r&&"not-allowed",display:"inline-flex",justifyContent:"center"}},d=e=>{let{theme:t,disabled:n}=e;return{fontFamily:t.typography.fontFamily.primary.main,fontSize:t.typography.fontSize.m.rem,lineHeight:t.typography.lineHeight.m.value,color:n?t.color.text.disabled:t.color.text.base,[t.breakpoints.horizontal.s.mediaQuery]:{fontSize:t.typography.fontSize.l.rem},flexShrink:0,alignSelf:"center",alignItems:"center",display:"flex"}},u=e=>{let{theme:t,disabled:n}=e;return{backgroundColor:n?t.color.bg.button.primary.disabled:t.color.bg.inverted,borderRadius:9999,alignItems:"center",justifyContent:"center",alignSelf:"center",color:t.color.text.inverted,padding:`0.437rem ${t.dimension.spacing.xxs.rem} ${t.dimension.spacing.xxxs.rem} ${t.dimension.spacing.xxs.rem}`,minWidth:"1.5rem",height:"1.5rem",display:"inline-flex",marginLeft:t.dimension.spacing.xs.rem,fontFamily:t.typography.fontFamily.primary.main,fontWeight:500,fontSize:t.typography.fontSize.m.rem}},b=e=>{let{theme:t}=e;return{textStroke:`0.5px ${t.color.text.base}`,"-webkit-text-stroke":`0.5px ${t.color.text.base}`,color:t.color.text.base}},f=e=>{let{type:t="Tab",disabled:n=!1,mobilePadding:f,tabWidth:m,tabId:p,dmId:h="tab",index:g,ariaLabel:v,children:x,count:y}=e;const{activeTabId:I,onTabChange:T}=(0,r.useContext)(o.w),{t:w}=(0,a.useTranslation)(),k=I===p&&!n,{css:A}=(0,i.A)({disabled:n,mobilePadding:f,tabWidth:m}),C=(0,r.useRef)(null);return(0,l.jsx)("button",{className:A(s),type:"button",role:"tab",ref:C,id:g,tabIndex:n?-1:0,"aria-disabled":n,"aria-selected":k,"aria-controls":`panel-${p}`,"aria-label":v,"data-dmid":`${h}-${p}`,onClick:()=>{k||n||T(p)},children:(0,l.jsxs)("div",{className:A(c),children:[(0,l.jsx)("span",{className:A(d,k?b:{}),children:x}),(y||0===y)&&(0,l.jsx)("span",{"aria-label":w("tabs.a11yResultCount",{count:y}),className:A(u),children:y})]})})};n.d(t,["TAB_BUTTON_REF_SUFFIX",0,"_tabButton","default",0,f])},7602(e,t,n){n.r(t),n.d(t,{default:()=>x});var r=n(677),i=n(2641),a=n(4265),o=n(5366);const l=e=>{let{theme:t,animate:n}=e;return{height:"4px",borderRadius:"5px",position:"absolute",left:0,zIndex:t.dimension.zIndex.sticky,transition:n?"left 0.5s cubic-bezier(0.35,0,0.25,1), width 0.3s cubic-bezier(0.35,0,0.25,1), background 0.3s":"none",background:t.color.bg.inverted,bottom:"15px",[t.breakpoints.horizontal.m.mediaQuery]:{bottom:"-7px"}}},s=e=>{let{left:t,width:n,isActive:a,offsetY:s,activeTabId:c,prevActiveTabId:d}=e;const{css:u,theme:b}=(0,i.A)(),[f,m]=(0,r.useState)(!1);return(0,r.useEffect)(()=>{m(d!==c),d=c},[c,d]),a&&null!=n?(0,o.jsx)("div",{"data-dmid":"animated-bottom-line",className:u(l({theme:b,animate:f})),style:{left:t,width:n,transform:`translateY(${s+2}px)`}}):(0,o.jsx)(o.Fragment,{children:" "})},c="undefined"!=typeof window?r.useLayoutEffect:r.useEffect;const d=function(e){const[t,n]=(0,r.useState)(Object.create(null));return(0,r.useEffect)(()=>{e&&e()},[e,t]),(0,r.useCallback)(()=>{n(Object.create(null))},[])};function u(e){return(1+Math.sin(Math.PI*e-Math.PI/2))/2}const b=()=>({position:"relative",width:"100%",WebkitOverflowScrolling:"touch",display:"flex",whiteSpace:"nowrap",padding:"4px",overflowX:"scroll",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},"-webkit-mask-image":"linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0))"}),f=e=>{let{theme:t}=e;return{margin:t.dimension.spacing.xs.rem}},m=(0,r.forwardRef)((e,t)=>{let{dmId:n="scrollbar",getItemMeta:a,children:l,left:m,width:p,isActive:h,offsetY:g,activeTabId:v,prevActiveTabId:x}=e;const{css:y}=(0,i.A)(),I=e=>{const n=t?.current;n&&function(e){let{element:t,to:n,options:r,cb:i=()=>{}}=e,a=null;const o=t.scrollLeft;let l=!1;const{animationTimingFunction:s=u,duration:c=300}=r||{},d=()=>{l=!0},b=e=>{if(l)return void i(new Error("Animation cancelled"));null===a&&(a=e);const r=Math.min(1,(e-a)/c);t.scrollLeft=s(r)*(n-o+o),r>=1?requestAnimationFrame(()=>{i(null)}):requestAnimationFrame(b)};o===n?i(new Error("Element already at target position")):requestAnimationFrame(b)}({element:n,to:e})},T=function(e){const t=r.useRef(e);return c(()=>{t.current=e}),r.useCallback(function(){return t.current(...arguments)},[])}(()=>{const e=(()=>{const e=t?.current;if(e){const t=e.getBoundingClientRect();return{scrollLeft:e.scrollLeft,left:t.left,right:t.right}}return null})(),n=a();if(!n||!e)return;if(n.left<e.left){const t=e.scrollLeft+(n.left-e.left)-50;I(t)}else if(n.right>

1e.right){const t=e.scrollLeft+(n.right-e.right)+50;I(t)}}),w=d(T);return(0,o.jsxs)("div",{"data-dmid":n,className:y(b),ref:t,onClick:w,children:[l,(0,o.jsx)("div",{className:y(f),children:" "}),(0,o.jsx)(s,{left:m,width:p,isActive:h,offsetY:g,activeTabId:v,prevActiveTabId:x})]})}),p=m;var h=n(8709);const g=e=>{let{theme:t}=e;return{paddingTop:t.dimension.spacing.xs.rem,marginBottom:t.dimension.spacing.xxxs.rem,display:"flex",position:"relative",[t.breakpoints.horizontal.m.mediaQuery]:{marginBottom:t.dimension.spacing.xs.rem}}},v=e=>{let{theme:t}=e;return{width:"100%",top:"2.92rem",position:"absolute",height:0,borderTop:`1px solid ${t.color.border.separator.base}`,borderBottom:"none",color:t.color.border.separator.base,zIndex:-1,[t.breakpoints.horizontal.m.mediaQuery]:{top:"2.7rem"},margin:"8px 0"}},x=e=>{let{type:t="TabList",dmId:n="tablist",children:l}=e;const{activeTabId:c,prevActiveTabId:d}=(0,r.useContext)(h.w),{css:u,theme:b}=(0,i.A)(),f=(0,a.A)(b.breakpoints.horizontal.m.query),m=(0,r.useRef)(null),[x,y]=(0,r.useState)({left:0,width:0}),I=c||d||l[0]?.props?.tabId,T=l.findIndex(e=>e.props?.tabId===I)??0;(0,r.useLayoutEffect)(()=>{if(!m.current||T<0)return;const e=m.current.children[T];if(e){const t=m.current.getBoundingClientRect(),n=e.getBoundingClientRect(),r=m.current.scrollLeft;y({left:f?n.left-t.left:n.left-t.left+r,width:n.width})}},[T,f]);function w(e){return"true"===e.getAttribute("aria-disabled")}return(0,o.jsxs)("div",{"data-dmid":n,className:u(g),role:"tablist","aria-label":n,onKeyDown:e=>{const{target:t}=e;if("tab"!==t.getAttribute("role"))return;const n=Number(t.id);let r=null;switch(e.key){case"ArrowLeft":r=function(e){let t=e;for(;t--;){const e=m.current?.children[t];if(e&&!w(e))return e}t=l.length;for(;t-- >e;){const e=m.current?.children[t];if(e&&!w(e))return e}return m.current?.children[e]}(n);break;case"ArrowRight":r=function(e){const t=l.length;for(let n=e+1;n<t;n++){const e=m.current?.children[n];if(e&&!w(e))return e}for(let t=0;t<e;t++){const e=m.current?.children[t];if(e&&!w(e))return e}return m.current?.children[e]}(n)}r&&r.focus()},ref:f?m:void 0,style:{position:"relative"},children:[f?(0,o.jsxs)(o.Fragment,{children:[l,(0,o.jsx)(s,{left:x.left,width:x.width,isActive:!!I,offsetY:0,activeTabId:I,prevActiveTabId:d})]}):(e=>(0,o.jsx)(p,{dmId:"tabs-mobile-scrollbar",getItemMeta:()=>{const e=m.current?.children[T];return e?e.getBoundingClientRect():null},ref:m,left:x.left,width:x.width,isActive:!!I,offsetY:0,activeTabId:I,prevActiveTabId:d,children:e}))(l),(0,o.jsx)("span",{className:u(v)})]})}},2844(e,t,n){n.r(t);var r=n(677),i=n(2641),a=n(8709),o=n(5366);const l=e=>{let{isActive:t}=e;return{display:t?"flex":"none"}},s=e=>{let{type:t="TabPanel",tabId:n,dmId:s="tabpanel",children:c}=e;const{activeTabId:d}=(0,r.useContext)(a.w),u=d===n,{css:b}=(0,i.A)({isActive:u});return(0,o.jsx)("div",{id:`panel-${n}`,role:"tabpanel","aria-labelledby":n,className:b(l),"data-dmid":`${s}-${n}`,children:c})};n.d(t,["default",0,s])},8137(e,t,n){n.r(t);var r=n(2641),i=n(8709),a=n(5366);const o=()=>({width:"100%"}),l=e=>{let{dmId:t="tabs",activeTabId:n,onTabClick:l,controlled:s=!1,children:c}=e;const{css:d}=(0,r.A)();return(0,a.jsx)("div",{"data-designsystem":!0,"data-dmid":t,className:d(o),children:(0,a.jsx)(i.c,{activeTabId:n,onTabClick:l,controlled:s,children:c})})};n.d(t,["default",0,l])},8709(e,t,n){n.d(t,{c:()=>f,w:()=>b});var r=n(677);function i(e){return t=>t?.props?.type===e}const a=i("Tab"),o=i("TabList"),l=i("TabPanel");function s(e,t){return r.Children.map(e,e=>{if(null===e)return null;const n=e;return function(e){return a(e)||o(e)||l(e)}(e)?t(e):n.props?.children&&"object"==typeof n.props.children?(0,r.cloneElement)(e,{...n.props,children:s(n.props.children,t)}):e})}function c(e,t){return r.Children.forEach(e,e=>{if(null===e)return;const n=e;a(e)||l(e)?t(e):n.props?.children&&"object"==typeof n.props.children&&(o(e)&&t(e),c(n.props.children,t))})}function d(e){let t=0;return c(e,e=>{a(e)&&(t+=1)}),t}var u=n(5366);const b=(0,r.createContext)({activeTabId:void 0,activeIndex:void 0,prevActiveTabId:void 0,onTabChange:()=>{}}),f=e=>{let{activeTabId:t,onTabClick:n,controlled:i=!1,children:a}=e;const c=(0,r.useRef)(t),f=(0,r.useRef)([]),[m,p]=(0,r.useState)({prevActiveTabId:void 0,activeTabId:t}),h=(0,r.useCallback)(e=>{n&&n(e),p(t=>t.activeTabId===e?t:{...t,prevActiveTabId:t?.activeTabId,activeTabId:e,activeIndex:e?f.current.indexOf(e):0})},[n]),g=(()=>{let e=0;const t=d(a);for(let e=0;e<t;e+=1)f.current.push(`${e}`);return s(a,t=>{let n=t;if(o(t)){let e=0;n=(0,r.cloneElement)(t,{children:s(t.props.children,t=>{if(i){const n={tabId:f.current[e],index:`${e}`};return void 0!==c.current||t.props.disabled||(c.current=`${e}`),e+=1,(0,r.cloneElement)(t,n)}f.current[e]=t.props.tabId;const n={index:`${e}`};return e+=1,(0,r.cloneElement)(t,n)})})}else if(i&&l(t)){const i={tabId:f.current[e]};e+=1,n=(0,r.cloneElement)(t,i)}return n})})();(0,r.useEffect)(()=>{t?t!==m.activeTabId&&p({activeTabId:t,prevActiveTabId:m.activeTabId}):p(e=>({...e,activeTabId:c.current,activeIndex:c.current?f.current.indexOf(c.current):0}))},[t]);const v={...m,onTabChange:h};return(0,u.jsx)(b.Provider,{value:v,children:g})}}}]);