https://www.kvik.fi/_next/static/chunks/pages/range-screen/inspiration/kitchen/[design]-62db96d04a73e5a0.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2410,3641],{1562:(e,t,r)=>{"use strict";r.d(t,{F:()=>n,U:()=>i});var a=r(37876),l=r(69241),s=r(51420);let n=e=>{let{className:t,...r}=e;return(0,a.jsx)("div",{className:(0,l.A)("mx-auto grid gap-4 w-full grid-cols-4 mb-3xl grid-flow-dense auto-rows-[420px]",t),...r})},i=e=>{let{image:t,className:r,...n}=e,i=(e=>{let{height:t,width:r}=e;return r&&t?t/r>1.5?"portrait":r/t>1.5?"landscape":"square":"square"})(t);return(0,a.jsx)("div",{className:(0,l.A)("relative","landscape"===i&&"col-span-2","portrait"===i&&"row-span-2",r),...n,children:(0,a.jsx)(s.K,{src:t.url,alt:t.altText,fill:!0,className:"object-cover",sizes:"square"===i?"calc(1920px / 4)":"calc(1920px / 2)"})})}},10243:(e,t,r)=>{"use strict";r.d(t,{T:()=>o});var a=r(37876),l=r(69241),s=r(72499),n=r(40902),i=r(22033);let o=e=>{let{color:t,size:r=30,className:o,conicGradient:u,active:m,onClick:x,name:b,activeStyle:h="innerDot",children:g,noHoverEffect:v,...p}=e,j=(0,i.t)()?2*r:r,{trackEvent:f}=(0,n.z)(),N=(0,s.U)(t),k=d(N,u),_="radial-gradient(circle, transparent ".concat(62,"%, black ",66,"%)"),y=Math.floor(j/15);return(0,a.jsxs)("button",{className:(0,l.A)("relative transition-colors border rounded-full border-solid flex justify-center items-center group",m&&"outline"===h?"border-gray":"border-transparent","outline"===h&&"hover:border-gray",o),style:{padding:y},onClick:e=>{f({button_text:b,tealium_event:"color_chooser",color_value:N[0],color_name:b}),null==x||x(e)},"aria-label":"".concat(b,"-colorDot"),...p,children:[(0,a.jsx)("div",{className:"rounded-full rotate-45",style:{width:j,height:j,background:k}}),(0,a.jsx)("div",{className:"absolute rounded-full pointer-events-none",style:{width:j,height:j,background:"linear-gradient(135deg, #ffffff80, #74747466)",WebkitMaskImage:_,maskImage:_,inset:y}}),"innerDot"===h&&(0,a.jsx)("div",{style:{width:c(j),height:c(j)},className:(0,l.A)("absolute duration-300 rounded-full transition-opacity bg-white border-gray-tint border border-solid",v?"":"group-hover:opacity-100",m?"opacity-100":"opacity-0")}),g&&(0,a.jsx)("div",{className:"absolute h-full inset-0 flex items-center justify-center",children:g})]})},c=e=>{let t=Math.floor(e/2);return t%2==0?t:t+1},d=(e,t)=>{let r=e.length;if(0===r)return"none";if(1===r)return e[0];if(t)return"conic-gradient(".concat(e.join(","),")");let a=100/r,l=e.flatMap((e,t)=>["".concat(e," ").concat(a*t,"%"),"".concat(e," ").concat(a*(t+1),"%")]);return"linear-gradient(to right, ".concat(l.join(", "),")")}},14816:(e,t,r)=>{"use strict";r.d(t,{t:()=>f});var a=r(37876),l=r(14232),s=r(54882),n=r(74078);let i=e=>{let{visible:t,text:r,onClick:l}=e;return t?(0,a.jsx)("button",{className:"text text-small text-black ml-sm rounded border border-solid border-black py-3xs px-2xs",onClick:l,children:r}):null};var o=r(42410),c=r(82405),d=r(1562),u=r(40902),m=r(69241),x=r(16878),b=r(51420),h=r(26756),g=r(17269),v=r(99012),p=r(10243);let j=e=>{let{className:t,onClick:r,...l}=e,{trackButtonClick:s}=(0,u.z)();return(0,a.jsx)("button",{className:(0,m.A)("p-xs border-y border-solid border-black",t),onClick:e=>{s({button_text:"image_scroll"}),null==r||r(e)},...l})},f=e=>{let{contentBlocks:t,variants:r,designType:u,colorFilterLabelText:m,resetColorFilterText:f}=e,{t:N}=(0,g.Bd)(),[k,_]=(0,l.useState)(),[y,w]=(0,l.useState)(),C=(0,l.useMemo)(()=>r.map(e=>{var t;return{name:e.variantName,value:null==(t=e.frontColor)?void 0:t.hexValue}}),[r]),A=(0,l.useMemo)(()=>((e,t)=>e.reduce((e,r)=>t&&t.name!==r.variantName?e:[...e,...r.images],[]))(r,k),[r,k]),E=(0,l.useCallback)(e=>{_(t=>(null==t?void 0:t.value)===e.value?void 0:e)},[_]),M=(0,l.useMemo)(()=>(0,a.jsxs)("div",{className:"flex items-center",children:[(0,a.jsxs)("div",{className:"flex items-center",children:[(0,a.jsx)("span",{className:"text-sm text-gray border-r pr-4 mr-4",children:N("FilterByColor")}),C.map(e=>{var t,r;return(0,a.jsx)(v.S,{content:e.name,children:(0,a.jsx)(p.T,{color:null!=(t=e.value)?t:"",name:null!=(r=e.name)?r:"",active:e.name===(null==k?void 0:k.name),onClick:()=>E({...e})})},e.name)})]}),(0,a.jsx)(i,{visible:!!k,onClick:()=>_(void 0),text:f})]}),[m,C,k,E,f]),T=(0,l.useCallback)(e=>{w(e)},[w]),z=(0,l.useCallback)(e=>()=>((e,t,r,a)=>{let l=t.findIndex(e=>e.id===a)+("prev"===e?-1:1);l>t.length-1&&(l=0),l<0&&(l=t.length-1);let s=t[l];if(!s)return void console.error("Error during getting new selected image id");r(s.id)})(e,A,w,y),[A,w,y]),F=(0,l.useMemo)(()=>r.find(e=>e.images.some(e=>{let{id:t}=e;return t===y}

1)),[r,y]),O=(0,l.useMemo)(()=>y&&F?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.JumboWithFavorite,{header:F.variantName}),(0,a.jsxs)("div",{className:"flex justify-between items-center my-2xl",children:[(0,a.jsx)(j,{className:"border-r border-l-0 rounded-r",onClick:z("prev"),children:(0,a.jsx)(x.A,{className:"rotate-180"})}),(0,a.jsx)("div",{className:"relative w-[70vw] h-[70vw]",children:(0,a.jsx)(b.K,{image:A.find(e=>e.id===y),fill:!0,className:"object-contain",priority:!0})}),(0,a.jsx)(j,{className:"border-l border-r-0 rounded-l",onClick:z("next"),children:(0,a.jsx)(x.A,{})})]})]}):(0,a.jsxs)(a.Fragment,{children:[(0,c.K)(t,{},!0),(0,a.jsxs)(h.m,{padding:"both",children:[(0,a.jsx)("div",{className:"mb-md",children:M}),(0,a.jsx)(d.F,{children:A.map((e,t)=>(0,a.jsx)(d.U,{image:e,onClick:()=>{var t;return T(null!=(t=e.id)?t:-1)}},t))})]})]}),[y,F,A,M,t,z,T]);return(0,a.jsxs)(s.hA,{moduleName:"Rangescreen ".concat(u," design page"),moduleIndex:1,children:[O,(0,a.jsx)(n.C,{customBack:(()=>{if(y)return()=>{w(void 0)}})()})]})}},20725:(e,t,r)=>{"use strict";r.r(t),r.d(t,{__N_SSG:()=>s,default:()=>n});var a=r(37876),l=r(14816),s=!0;let n=e=>(0,a.jsx)(l.t,{...e,designType:"Kitchen"})},31336:(e,t,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/range-screen/inspiration/kitchen/[design]",function(){return r(20725)}])},42410:(e,t,r)=>{"use strict";r.r(t),r.d(t,{JumboWithFavorite:()=>i});var a=r(37876),l=r(26756),s=r(22033);let n={"--font-size-4xl":"7rem"},i=e=>{let{header:t}=e,r=(0,s.t)();return(0,a.jsx)(l.m,{padding:"both",className:"rs:pb-0",children:(0,a.jsx)("h1",{className:"text text-jumbo text-left",style:r?n:void 0,children:t})})}},65707:(e,t,r)=>{"use strict";r.d(t,{E:()=>a});let a={HOME:"/range-screen",NOT_FOUND:"/range-screen/404",TEST_PAGE:"/range-screen/test-page",NOT_IMPLEMENTED_PAGE:"/range-screen/not-implemented-page"}},72499:(e,t,r)=>{"use strict";r.d(t,{U:()=>a});let a=e=>Array.isArray(e)?e:[e]},74078:(e,t,r)=>{"use strict";r.d(t,{C:()=>u});var a=r(37876),l=r(89099),s=r(65707),n=r(17269),i=r(40902),o=r(5259),c=r(69241);let d=e=>{let{className:t,...r}=e;return(0,a.jsx)("button",{className:(0,c.A)("p-sm rounded text-white bg-black text text-h3 min-w-[600px] flex items-center justify-center gap-xs pointer-events-auto",t),...r})},u=e=>{let{customBack:t}=e,{t:r}=(0,n.Bd)(),{push:c,back:u}=(0,l.useRouter)(),{trackButtonClick:m}=(0,i.z)(),x=null!=t?t:u;return(0,a.jsxs)("div",{className:"fixed left-0 right-0 bottom-0 flex pb-16 justify-center gap-12 z-10 pointer-events-none bg-gradient-to-t from-white/100 to-white/0",children:[(0,a.jsxs)(d,{onClick:()=>{m({button_text:"Back"}),x()},children:[(0,a.jsx)(o.A60,{"aria-label":"Arrow left icon",className:"size-16"}),r("Back")]}),(0,a.jsxs)(d,{onClick:()=>{m({button_text:"Home"}),c(s.E.HOME)},children:[(0,a.jsx)(o.fAJ,{"aria-label":"Home icon",className:"size-16"}),r("Home")]})]})}}},e=>{e.O(0,[2405,636,6593,8792],()=>e(e.s=31336)),_N_E=e.O()}]);