https://www.ottoversand.at/assets/turbo/ace91a57/ottoversandat/_next/static/chunks/4919.e69883fca3ce18d0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4919],{94919:(e,t,n)=>{n.r(t),n.d(t,{ResponsiveFlyout:()=>D,default:()=>B});var s,a,r=n(54568),l=n(7620);function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)({}).hasOwnProperty.call(n,s)&&(e[s]=n[s])}return e}).apply(null,arguments)}var o=n(53615),c=n(58862);function u(e,t){return e.replace(RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var d=n(40764),p=n(42995),f=function(e,t){return e&&t&&t.split(" ").forEach(function(t){e.classList?e.classList.remove(t):"string"==typeof e.className?e.className=u(e.className,t):e.setAttribute("class",u(e.className&&e.className.baseVal||"",t))})},m=function(e){function t(){for(var t,n=arguments.length,s=Array(n),a=0;a<n;a++)s[a]=arguments[a];return(t=e.call.apply(e,[this].concat(s))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){var s=t.resolveArguments(e,n),a=s[0],r=s[1];t.removeClasses(a,"exit"),t.addClass(a,r?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var s=t.resolveArguments(e,n),a=s[0],r=s[1];t.addClass(a,r?"appear":"enter","active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var s=t.resolveArguments(e,n),a=s[0],r=s[1]?"appear":"enter";t.removeClasses(a,r),t.addClass(a,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){var n=t.resolveArguments(e)[0];t.removeClasses(n,"appear"),t.removeClasses(n,"enter"),t.addClass(n,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){var n=t.resolveArguments(e)[0];t.addClass(n,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){var n=t.resolveArguments(e)[0];t.removeClasses(n,"exit"),t.addClass(n,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.resolveArguments=function(e,n){return t.props.nodeRef?[t.props.nodeRef.current,e]:[e,n]},t.getClassNames=function(e){var n=t.props.classNames,s="string"==typeof n,a=s&&n?n+"-":"",r=s?""+a+e:n[e],l=s?r+"-active":n[e+"Active"],i=s?r+"-done":n[e+"Done"];return{baseClassName:r,activeClassName:l,doneClassName:i}},t}(0,c.A)(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var s,a=this.getClassNames(t)[n+"ClassName"],r=this.getClassNames("enter").doneClassName;"appear"===t&&"done"===n&&r&&(a+=" "+r),"active"===n&&e&&(0,p.F)(e),a&&(this.appliedClasses[t][n]=a,s=a,e&&s&&s.split(" ").forEach(function(t){e.classList?e.classList.add(t):(e.classList?t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" "))||("string"==typeof e.className?e.className=e.className+" "+t:e.setAttribute("class",(e.className&&e.className.baseVal||"")+" "+t))}))},n.removeClasses=function(e,t){var n=this.appliedClasses[t],s=n.base,a=n.active,r=n.done;this.appliedClasses[t]={},s&&f(e,s),a&&f(e,a),r&&f(e,r)},n.render=function(){var e=this.props,t=(e.classNames,(0,o.A)(e,["classNames"]));return l.createElement(d.Ay,i({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(l.Component);m.defaultProps={classNames:""},m.propTypes={};var g=n(25599),h=n(85958),v=n(81610);let x=(0,g.YK)({back:{id:"header.navigation.flyout.buttons.back",defaultMessage:"Zur\xfcck"},close:{id:"header.navigation.flyout.buttons.close",defaultMessage:"Schlie\xdfen"}}),y=(0,l.forwardRef)(({title:e,onClose:t,onBack:n,shouldFocusCloseButton:s},a)=>{let i=(0,l.useRef)(null),o=(0,l.useRef)(null);(0,l.useEffect)(()=>{s&&i.current?.focus()},[s]),(0,l.useEffect)(()=>{let e=e=>{"Backspace"===e.key&&n?.(),"Escape"===e.key&&t?.()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[n,t]);let{formatMessage:c}=(0,h.A)();return(0,r.jsxs)("div",{className:"hidden items-center p-1 [grid-template:'full'_1fr/auto] lg:grid",children:[(0,r.jsx)(m,{appear:!0,in:!!n,timeout:125,classNames:{enter:"translate-x-2 opacity-0",enterA

1ctive:"translate-x-0 opacity-0",enterDone:"translate-x-0 opacity-100",exit:"translate-x-2 opacity-0",exitActive:"translate-x-2 opacity-0"},unmountOnExit:!0,nodeRef:o,children:(0,r.jsxs)(v.Button,{ref:o,className:"start-button typography-h5 col-span-full row-span-full translate-x-2 justify-self-start border-none opacity-0 transition-[opacity,translate] duration-125 ease-in-out",onClick:n,children:[(0,r.jsx)("span",{className:"icon-emp-arrow-medium-left size-4"}),(0,r.jsx)("span",{className:"text-size-headline-base",children:c(x.back)})]})}),(0,r.jsx)("header",{className:"justify-self-center [grid-area:full]",children:(0,r.jsx)("span",{className:"text-size-headline-xl",children:e})}),(0,r.jsxs)(v.Button,{className:"end-button typography-h5 col-span-full row-span-full justify-self-end border-none",ref:i,onClick:()=>{t?.()},children:[(0,r.jsx)("span",{className:"text-size-headline-base",children:c(x.close)}),(0,r.jsx)("span",{className:"icon-emp-cancel size-4"})]})]})});var E=n(80336),N=n(20353),C="out-in",b="in-out",j=function(e,t,n){return function(){var s;e.props[t]&&(s=e.props)[t].apply(s,arguments),n()}},k=((s={})[C]=function(e){var t=e.current,n=e.changeState;return l.cloneElement(t,{in:!1,onExited:j(t,"onExited",function(){n(d.ns,null)})})},s[b]=function(e){var t=e.current,n=e.changeState,s=e.children;return[t,l.cloneElement(s,{in:!0,onEntered:j(s,"onEntered",function(){n(d.ns)})})]},s),w=((a={})[C]=function(e){var t=e.children,n=e.changeState;return l.cloneElement(t,{in:!0,onEntered:j(t,"onEntered",function(){n(d._K,l.cloneElement(t,{in:!0}))})})},a[b]=function(e){var t=e.current,n=e.children,s=e.changeState;return[l.cloneElement(t,{in:!1,onExited:j(t,"onExited",function(){s(d._K,l.cloneElement(n,{in:!0}))})}),l.cloneElement(n,{in:!0})]},a),A=function(e){function t(){for(var t,n=arguments.length,s=Array(n),a=0;a<n;a++)s[a]=arguments[a];return(t=e.call.apply(e,[this].concat(s))||this).state={status:d._K,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}(0,c.A)(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){var n,s;return null==e.children?{current:null}:t.status===d.ns&&e.mode===b?{status:d.ns}:t.current&&!((n=t.current)===(s=e.children)||l.isValidElement(n)&&l.isValidElement(s)&&null!=n.key&&n.key===s.key)&&1?{status:d.ze}:{current:l.cloneElement(e.children,{in:!0})}},n.render=function(){var e,t=this.props,n=t.children,s=t.mode,a=this.state,r=a.status,i=a.current,o={children:n,current:i,changeState:this.changeState,status:r};switch(r){case d.ns:e=w[s](o);break;case d.ze:e=k[s](o);break;case d._K:e=i}return l.createElement(N.A.Provider,{value:{isMounting:!this.appeared}},e)},t}(l.Component);A.propTypes={},A.defaultProps={mode:C};let L={leaf:"flyout-transition-left-to-right",root:"flyout-transition-right-to-left",lateral:"flyout-transition-up"},R=({direction:e,transitionKey:t,children:n})=>{let s=(0,l.useRef)(null);return(0,r.jsx)("div",{className:L[e],children:(0,r.jsx)(A,{mode:"out-in",children:(0,r.jsx)(m,{appear:!0,timeout:125,classNames:"flyout-transition",nodeRef:s,children:l.Children.only(n(s))},t??"nothing")})})};var S=n(30157),z=n(75016);let _=l.memo(({children:e,...t})=>{let{allowNavigation:n}=t;return(0,r.jsxs)(z.J,{...t,listItemClassNames:"items-start max-lg:border-b max-lg:border-b-color-grey",linkClassNames:"px-2 lg:px-0 lg:pl-1 py-1.5 lg:py-0 text-size-h3 justify-between transition-colors duration-200 hover:bg-color-background-base",children:[(0,r.jsx)("span",{className:"text-size-headline-base relative my-0.5",children:e}),!n&&(0,r.jsx)("span",{className:"icon-emp-arrow-medium-right size-4"})]})}),K=(0,g.YK)({currentCategoryLink:{id:"header.navigation.flyout.currentCategoryLink",defaultMessage:"Alles in {categoryName}"},moreCategories:{id:"header.navigation.flyout.moreCategories",defaultMessage:"Mehr ..."},secondaryNavigationCategoryList:{id:"secondary.navigation.categories.list.label",defaultMessage:"Unterkategorien"}}),M=(0,l.forwardRef)(({item:e,onItemClick:t,onNavigate:n,onItem:s},a)=>{let{formatMessage:l}=(0,h.A)(),i=e?.uri!==void 0,o=(e?.children?.length??0)>(i?24:25),c=o&&i?23:25;return(0,r.jsxs)("div",{children:[e?.image&&(0,r.jsx)("div",{className:`${e?.level===1?"block":"hidden"} bg-color-grey-light relative h-[8rem] self-stretch overflow-hidden lg:hidden`,children:(0,r.jsx)(S.Image,{src:e.image,alt:"",fill:!0,style:{objectFit:"contain",width:"100%",height:"100%"}})}),(0,r.jsxs)("ul",{className:"m-0 list-none items-stretch p-0 max-lg:flex max-lg:flex-col lg:grid lg:grid-flow-col lg:[grid-template-columns:repeat(5,1fr)] lg:[grid-template-rows:repeat(5,auto)] lg:gap-1.5",ref:a,"aria-label":l(K.secondaryNavigationCategoryList),children:[i&&(0,r.jsx)(_,{href:e.uri,allowNavigation:!0,onClick:()=>{s?.(!0),t?.(e)},onNavigate:()=>n?.(e),children:l(K.currentCategoryLink,{categoryName:e.displayName})}),e?.children?.slice(0,c)?.map(e=>(0,r.jsx)(_,{href:e.uri,allowNavigation:!!e.uri&&!e.children.length,onKeyDown:a=>{"Enter"===a.key&&(e.uri&&!e.children.length?n?.(e):(a.preventDefault(),s?.(!0),t?.(e)))},onClick:()=>{s?.(!0),t?.(e)},onNavigate:()=>n?.(e),children:e.displayName},e.uri)),o&&i&&(0,r.jsx)(_,{href:e.uri,allowNavigation:!0,onClick:()=>{s?.(!0),t?.(e)},onNavigate:()=>n?.(e),children:l(K.moreCategories)})]})]})}),D=({item:e,direction:t,onClose:n,onBack:s,onItemClick:a,onNavigate:i,shouldFocusCloseButton:o})=>{let[c,u]=(0,l.useState)(!1),d=(0,l.useRef)(null);(0,l.useEffect)(()=>{c&&(d.current?.focus(),u(!1))},[c]);let p=e&&(0,E.R)(e);return(0,r.jsx)("div",{className:"bg-color-background-base lg:bg-color-grey-light flex w-full flex-1 flex-col pb-4",children:(0,r.jsxs)("div",{className:"flex flex-1 flex-col gap-2",children:[(0,r.jsx)(y,{shouldFocusCloseButton:o,ref:d,title:e?.displayName,onBack:s,onClose:n}),(0,r.jsx)(R,{direction:t,transitionKey:p,children:t=>(0,r.jsx)(M,{ref:t,item:e,onItem:u,onItemClick:a,onNavigate:i})})]})})},B=D}}]);
2//# sourceMappingURL=4919.e69883fca3ce18d0.js.map