https://www.nivea.nl/_next/static/chunks/179.572de048426b0597.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[179],{4179:(e,t,a)=>{a.r(t),a.d(t,{GridFilterClient:()=>M,GridResultClient:()=>f,GridSearchClient:()=>L});var l=a(5155),r=a(2115),s=a(5346),i=a(4213),n=a(1340),c=a(4944);function o(e){let{initialTeaserCount:t,teaserSequence:a,highlightTeaserCount:s}=e,i=0;return(0,l.jsx)("div",{className:"xpadding-s bp:xpadding-l",children:(0,l.jsx)("div",{className:"max-scale-xl",children:(0,l.jsx)("div",{className:"bp:gap-2 masonry-grid mx-auto gap-1.5",children:Array.from({length:t}).map((e,t)=>{let n=t%a.sequenceLength,o=a.teaserTypeMap[n],d=Array.isArray(o)?o[0]:a.teaserType,u=Array.isArray(o)&&o[1]&&i<s,g="skeleton-".concat(t),f="one column"===d?(0,l.jsx)(c.S,{size:"large",className:"col-span-2 row-span-2"},g):(0,l.jsx)(c.S,{size:"small"},g);return u?(i++,(0,l.jsxs)(r.Fragment,{children:[f,(0,l.jsx)("div",{className:"rounded-1.5 bg-background-secondary col-span-2 row-span-1 aspect-[1.5] animate-pulse"},"highlight-".concat(g))]},"highlight-wrap-".concat(g))):f})})})})}var d=a(5699),u=a(6947),g=a(6676);function f(e){var t;let{initialState:a,gridResultConfig:c,context:f,component:x}=e,{isLoading:h,currentTeasers:m,nextSkip:p,hasMore:y,isLoadingMore:b,totalCount:v,loadMore:k}=function(e){let{initialState:t,context:a,gridResultConfig:l,fetchAndRenderTeasers:s}=e,[i,n]=(0,r.useState)(t.filterState),[c,o]=(0,r.useState)(!1),[d,f]=(0,r.useState)(t.teasers),[x,h]=(0,r.useState)(t.itemCount),[m,p]=(0,r.useState)(t.hasMore),[y,b]=(0,r.useState)(!1),[v,k]=(0,r.useState)(t.totalCount),j=(0,r.useCallback)(function(e,t){let a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];a?f(e=>[...e,...t]):f(t),h(e.nextSkip),p(e.hasMore),k(e.totalCount)},[]),N=(0,r.useCallback)(function(e,t){let a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];console.error("Error ".concat(t,":"),e),a&&p(!1)},[]);(0,r.useEffect)(()=>{let e=async e=>{let{filterState:t}=e.detail;n(t),o(!0);try{let e=await s(a,t,l.filterItemId,0,l.loadBatchCount,l.teaserSequence,l.highlightTeasers);e.success&&j(e,e.renderedTeasers,!1)}catch(e){N(e,"applying filters")}finally{o(!1)}};return window.addEventListener(g.s,e),()=>{window.removeEventListener(g.s,e)}},[a,s,l.filterItemId,l.loadBatchCount,l.teaserSequence,l.highlightTeasers,N,j]),(0,r.useEffect)(()=>{let e=(0,u.wt)();(0,u.Xm)(e,t.filterState)||(0,u.eM)(e)},[t.filterState]);let w=(0,r.useCallback)(async()=>{if(m&&!y){b(!0);try{let e=await s(a,i,l.filterItemId,x,l.loadBatchCount,l.teaserSequence,l.highlightTeasers);e.success?j(e,e.renderedTeasers,!0):(console.error("Load more failed"),p(!1))}catch(e){N(e,"loading more items",!0)}finally{b(!1)}}},[a,s,i,l.filterItemId,l.loadBatchCount,l.teaserSequence,l.highlightTeasers,m,y,x,N,j]);return{isLoading:c,currentTeasers:d,nextSkip:x,hasMore:m,isLoadingMore:y,totalCount:v,loadMore:w}}({initialState:a,context:f,gridResultConfig:c,fetchAndRenderTeasers:n.b});return h?(0,l.jsx)(o,{initialTeaserCount:c.loadBatchCount,teaserSequence:c.teaserSequence,highlightTeaserCount:c.highlightTeasers.value.length||0}):(0,l.jsx)("div",{className:"xpadding-s bp:xpadding-l",children:(0,l.jsx)("div",{className:"max-scale-xl",children:(0,l.jsxs)("div",{className:"bp:gap-2 masonry-grid mx-auto gap-1.5 [&>.teaser]:h-auto [&>.teaser]:max-h-none [&>.teaser]:w-full [&>.teaser]:max-w-none",children:[m,y?(0,l.jsxs)("div",{className:"bp:col-span-4 bp:pt-5 bp:pb-5 col-span-2 row-span-1 flex flex-col items-center justify-center gap-3 pt-3 pb-3",children:[(0,l.jsxs)("div",{children:[(0,l.jsx)(s.Progress,{value:v>0?p/v*100:0}),(()=>{var e,t;if(!(null==(e=c.loadMoreIndicatorText)?void 0:e.value))return null;let a=null==(t=c.loadMoreIndicatorText)?void 0:t.value.split(/(\{loadedItems\}|\{totalItems\})/).map((e,t)=>{let a="load-more-part-".concat(t);return"{loadedItems}"===e?(0,l.jsx)("b",{children:p},a):"{totalItems}"===e?(0,l.jsx)("b",{children:v},a):e});return(0,l.jsx)("span",{className:"text-text-primary font-body-2-regular",children:a})})()]}),(0,l.jsx)(d.A,{className:"w-full",type:"button",onClick:k,disabled:b,variant:"secondary",size:"medium",component:x,children:(0,l.jsx)("span",{className:"flex flex-auto justify-center",children:b?(0,l.jsx)(i.A,{}):null==(t=c.loadMore)?void 0:t.value})})]}):null]})})})}var x=a(5091),h=a(9426),m=a(3197),p=a(4219),y=a(5844),b=a(4033),v=a(9173);function k(e){let{id:t,variant:a="medium",confirmed:s=!1,error:i=!1,disabled:n=!1,checked:c,onChange:o}=e,[d,u]=(0,r.useState)(c),g=(0,x.cn)("m-0.5 justify-center items-center flex rounded-0.5 border relative bg-fill-quinary border-stroke-action-secondary-default overflow-visible focus-within:outline-stroke-action-secondary-focus focus-within:outline-1 focus-within:outline-offset-3 p-0.5",d?"bg-fill-action-primary-default border-fill-action-primary-default":"group-hover/checkbox:border-stroke-action-secondary-hover group-hover/checkbox:bg-fill-action-primary-hover",s&&"bg-functional-traffic-light-success border-functional-traffic-light-success",i&&"bg-functional-traffic-error-light border-functional-traffic-error-light",n&&"bg-fill-action-primary-disabled border-text-action-secondary-disabled"),f=(0,x.cn)("text-stroke-action-primary-focus size-2",s&&"text-functional-traffic-success",n&&"text-action-primary-primary-disabled");return(0,l.jsxs)("div",{className:(0,x.cn)({medium:"size-3",large:"size-4"}[a],g),children:[(0,l.jsx)("input",{type:"checkbox",id:t,checked:d,onChange:e=>{let t=e.target.checked;u(t),null==o||o(t)},disabled:n||i,className:"sr-only"}),d&&(0,l.jsx)(v.A,{className:(0,x.cn)(f)})]})}var j=a(3796);let N=e=>{let{categoryKey:t,tagKey:a,title:r,isSelected:s,previewCount:i,handleFilterChange:n}=e;return(i>0||s)&&(0,l.jsxs)("label",{htmlFor:a,className:"group/checkbox hover:bg-fill-secondary rounded-1.5 flex cursor-pointer flex-row items-center justify-between p-1",...(0,j.Gk)({filter_title:t,filter_detail:a}),children:[(0,l.jsx)("span",{className:"text-text-primary font-agnostic-body-1-regular",children:r}),i>0&&(0,l.jsx)("span",{className:"font-agnostic-body-4-regular text-fill-tertiary ms-auto px-2",children:"".concat(i)}),(0,l.jsx)(k,{id:a,checked:s,onChange:()=>{n(t,a)}})]})},w=e=>{let{count:t,className:a,isRtl:r=!1}=e;return 0===t?null:(0,l.jsx)("div",{className:(0,x.cn)("bg-fill-action-primary-default text-text-action-primary-default font-agnostic-detail

1s-1-bold size-2 rounded-full","flex items-center justify-center","absolute -top-0.5",r?"-left-0.5":"-right-0.5",a),children:(0,l.jsx)("span",{className:"text-text-action-primary-default text-center",children:t})})};function S(e){let{gridConfig:t,filterState:a,countingData:s,handleFilterChange:i,openCategory:n,removeTriggerPadding:c,isRtl:o=!1}=e,{isCategoryActive:d}={isCategoryActive:(0,r.useCallback)(e=>{let l=t.categories.find(t=>t.key===e);return!!l&&(!!l.tags.some(t=>(0,u.g)(a,e,t.key))||l.tags.some(t=>(0,u.cX)(s,a,e,t.key,l.useAndFilter)>0))},[s,a,t.categories])},g=(0,l.jsx)(b.A,{className:"text-fill-action-primary-default h-3 shrink-0 transition-transform duration-200"});return(0,l.jsx)(p.nD,{"data-test":"accordion",value:n,children:t.categories.map(e=>{var t;return(0,l.jsxs)(p.As,{"data-slot":"accordion-item","data-test":"accordion-item",className:(0,x.cn)("transition-colors [&:last-child>div]:border-b-0"),value:e.key,children:[d(e.key)?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(y.$,{className:(0,x.cn)("font-agnostic-header-lm text-fill-quaternary py-4",!c&&"px-1"),trigger:g,children:(0,l.jsxs)("div",{className:"flex items-center",children:[e.title||e.key,(0,l.jsx)(w,{count:(null==(t=a.tagSelection[e.key])?void 0:t.length)||0,className:"static ms-1",isRtl:o})]})}),(0,l.jsx)(p.ub,{className:"xpadding-s bp:xpadding-l flex flex-col gap-1 [&:last-child]:mb-4",children:e.tags.map(t=>{let r=(0,u.cX)(s,a,e.key,t.key,e.useAndFilter),n=(0,u.g)(a,e.key,t.key);return(0,l.jsx)(N,{categoryKey:e.key,title:t.title,tagKey:t.key,isSelected:n,previewCount:r,handleFilterChange:i},"".concat(e.key,"-").concat(t.key))})})]}):(0,l.jsxs)("div",{className:"font-agnostic-header-lm text-text-action-primary-disabled xpadding-s bp:xpadding-l flex w-full items-center justify-between py-4",children:[e.title||e.key,(0,l.jsx)(b.A,{className:"h-3 w-3"})]}),(0,l.jsx)("div",{className:"xpadding-s bp:xpadding-l",children:(0,l.jsx)("div",{className:"border-stroke-quaternary border-b"})})]},e.key)})})}var C=a(1722),A=a(609);function T(e){let{className:t,...a}=e;return(0,l.jsxs)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t,...a,children:[(0,l.jsx)("path",{d:"M24.456 10.2H7.546a.8.8 0 0 0 0 1.6h16.91a.8.8 0 0 0 0-1.6",fill:"currentColor"}),(0,l.jsx)("path",{d:"M20.937 15.022h-9.875a.8.8 0 0 0 0 1.6h9.875a.8.8 0 1 0 0-1.6",fill:"currentColor"}),(0,l.jsx)("path",{d:"M18.977 20.2h-5.95a.8.8 0 1 0 0 1.6h5.95a.8.8 0 0 0 0-1.6",fill:"currentColor"})]})}var _=a(8416);function F(e){let{className:t,...a}=e;return(0,l.jsx)(_.A,{className:(0,x.cn)(t,"rotate-90"),...a})}function I(e){let{activeFilters:t=0,icon:a,label:r,onClick:s,isActive:i,showIndicator:n,dataTest:c,isRtl:o=!1,...d}=e,u=(0,x.cn)("rounded-7 bg-fill-secondary mx-auto h-5 shrink-0 px-2 py-0.5 text-text-primary relative border-1 border-fill-secondary cursor-pointer","hover:bg-fill-primary hover:border-stroke-quaternary","focus-visible:shadow-[inset_0_0_0_4px] focus-visible:shadow-stroke-primary focus-visible:border-stroke-action-secondary-focus focus-visible:outline-none",i&&"text-text-action-secondary-default border-stroke-action-primary-default"),g=null;switch(a){case"filter":g=(0,l.jsx)(T,{});break;case"sort":g=(0,l.jsx)(A.A,{});break;case"arrow":g=(0,l.jsx)(F,{className:"h-2 w-1"})}return(0,l.jsxs)("button",{className:u,onClick:s,"data-test":"filter-".concat(c),...d,children:[(0,l.jsxs)("div",{className:"flex items-center gap-0.5",children:[(0,l.jsx)("span",{className:"font-agnostic-body-2-bold overflow-hidden text-center text-ellipsis whitespace-nowrap",children:r}),a?g:null]}),n&&t>0&&i&&(0,l.jsx)(w,{count:t,isRtl:o})]})}var q=a(7433);function K(e){var t;let{gridConfig:a,filterState:s,colorScheme:i,countingData:n,handleApplyFilters:c,clearFilters:o,handleFilterChangeAndApply:d,isRtl:g=!1}=e,{open:f,setOpen:x,openCategory:p,setOpenCategory:y,draftFilterState:b,appliedFiltersCount:v,hasFilterChanged:k,totalAppliedFilters:N,visibleQuickFiltersTagValues:w,visibleQuickFiltersCategories:A,handleModalClose:T,handleDraftFilterChange:_,handleFilterSubmitTracking:F,handleFilterRemoveTracking:K}=function(e,t,a){let{quickFiltersCategories:l,quickFiltersTagValues:s}=e,[i,n]=r.useState(!1),[c,o]=r.useState(void 0),[d,g]=r.useState({});r.useEffect(()=>{i&&g(JSON.parse(JSON.stringify(t.tagSelection)))},[i,t.tagSelection]);let f=r.useCallback(()=>{g(t.tagSelection),n(!1),o(void 0)},[t.tagSelection]),x=(0,u.L8)(a,d),h=r.useMemo(()=>(function(e,t){let a=Object.keys(e),l=Object.keys(t);if(a.length!==l.length)return!0;for(let l of a){let a=e[l]||[],r=t[l]||[];if(a.length!==r.length)return!0;for(let e of a)if(!r.includes(e))return!0}return!1})(t.tagSelection,d),[t.tagSelection,d]),m=r.useMemo(()=>Object.values(t.tagSelection).reduce((e,t)=>

1e+((null==t?void 0:t.length)||0),0),[t.tagSelection]),p=r.useMemo(()=>s.filter(l=>{var r;if((0,u.g)(t,l.categoryKey,l.tagKey))return!0;let s=e.categories.find(e=>e.key===l.categoryKey),i=null==(r=null==s?void 0:s.useAndFilter)||r;return(0,u.cX)(a,t,l.categoryKey,l.tagKey,i)>0}),[s,t,a,e.categories]),y=r.useMemo(()=>l.filter(e=>!!e.tags.some(a=>(0,u.g)(t,e.key,a.key))||e.tags.some(l=>(0,u.cX)(a,t,e.key,l.key,e.useAndFilter)>0)),[l,t,a]),b=r.useCallback((e,t)=>{g(a=>{let l=a[e]||[];if(l.includes(t)){let r=l.filter(e=>e!==t),s={...a};return 0===r.length?delete s[e]:s[e]=r,s}return{...a,[e]:[...l,t]}})},[]),v=r.useCallback((e,t)=>{t&&t.querySelectorAll('input[type="checkbox"]:checked').forEach(t=>{let a=t.closest("[data-tracking-params]");a&&(0,j.u6)(a,{eventName:e,source:"backend"})})},[]);return{open:i,setOpen:n,openCategory:c,setOpenCategory:o,draftFilterState:d,appliedFiltersCount:x,hasFilterChanged:h,totalAppliedFilters:m,visibleQuickFiltersTagValues:p,visibleQuickFiltersCategories:y,handleModalClose:f,handleDraftFilterChange:b,handleFilterSubmitTracking:r.useCallback(e=>{v("filter_submit",e)},[v]),handleFilterRemoveTracking:r.useCallback(e=>{v("filter_remove",e)},[v])}}(a,s,n),M={className:"bg-fill-primary elevation-primary rounded-t-1.5 bp:rounded-b-1.5 text-text-primary",colorScheme:i,icons:{closeIcon:(0,l.jsx)(m.A,{className:"fill-text-action-primary-default text-stroke-action-primary-default"})},scrollbar:{className:"block"},showBackdropBlur:f,title:a.filterOverlayTitle.value,titleClassName:"p-3 border-b border-stroke-quaternary bg-fill-primary text-text-primary font-agnostic-header-l",footer:(0,l.jsxs)("div",{className:"pb-content",children:[(0,l.jsx)("div",{className:"bg-fill-primary pt-content flex flex-col",children:(0,l.jsx)(C.$,{className:"font-agnostic-button-m-bold mx-auto block w-full text-center",variant:"primary",size:"medium",disabled:!k,onClick:e=>{c({tagSelection:b},!0),F(e.currentTarget.closest("dialog")),x(!1),y(void 0)},children:a.showResults.value.replace("{filteredItems}",v.toString())})}),(0,l.jsx)("div",{className:"bg-fill-primary pt-content flex flex-col",children:(0,l.jsx)(C.$,{className:"font-agnostic-button-m-bold mx-auto block w-full text-center",variant:"secondary",size:"medium",onClick:e=>{K(e.currentTarget.closest("dialog")),o(),y(void 0),x(!1)},disabled:!b||"object"!=typeof b||Array.isArray(b)||0===Object.keys(b).length,children:a.deleteAllLabel.value})})]})};return(0,l.jsxs)("div",{className:"pt-content bp:px-[calc(var(--global-component-xspacing-l)-var(--global-component-xspacing-s))]",children:[(0,l.jsx)(q.HorizontalScrollWrapper,{arrows:"offset",xdistance:!1,className:"mx-auto max-w-[calc(var(--global-component-width-max-scale-xl)+(var(--global-component-xspacing-s)*2))]",children:(0,l.jsxs)("div",{className:"flex gap-2",children:[(null==(t=a.categories)?void 0:t.length)>0&&(0,l.jsx)(I,{icon:"filter",label:a.filterLabel.value,activeFilters:N,isActive:N>0,onClick:()=>{x(!0),y(void 0)},showIndicator:!0,isRtl:g,dataTest:"main",...new j.Qs("filter_layer_open",{},"backend").dataAttributes},"filter"),A.map(e=>{var t,a;return(0,l.jsx)(I,{activeFilters:null==(t=s.tagSelection[e.key])?void 0:t.length,icon:"arrow",label:e.title,isActive:!!(null==(a=s.tagSelection[e.key])?void 0:a.length),onClick:()=>{y(e.key),x(!0)},showIndicator:!0,isRtl:g,dataTest:"category",...new j.Qs("quick_filter_open",{filter_title:e.key},"backend").dataAttributes},e.key)}),w.map(e=>{var t;let a=(0,u.g)(s,e.categoryKey,e.tagKey);return(0,l.jsx)(I,{activeFilters:null==(t=s.tagSelection[e.categoryKey])?void 0:t.length,isActive:a,label:e.title,onClick:()=>{d(e.categoryKey,e.tagKey)},dataTest:"tag-value","data-action":a?"remove":"submit",...new j.Qs("quick_filter_$action$",{filter_title:e.categoryKey,filter_detail:e.tagKey},"backend").dataAttributes},e.tagKey)})]})}),(0,l.jsx)(h.Y,{...M,open:f,onClose:T,children:(0,l.jsx)(S,{gridConfig:a,filterState:{...s,tagSelection:b},countingData:n,handleFilterChange:_,openCategory:p,removeTriggerPadding:!0,isRtl:g})})]})}function M(e){let{gridFilterConfig:t,countingData:a,initialState:s,context:i}=e,{filterState:n,isLoading:c,totalCount:o,handleFilterChangeAndApply:d,handleApplyFilters:f,clearFilters:h}=function(e,t){let[a,l]=(0,r.useState)(t.filterState),[s,i]=(0,r.useState)(!1),[n,c]=(0,r.useState)(t.totalCount),o=(0,r.useCallback)(async function(t){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=(0,u.vv)(t);i(!0),l(r);try{(0,u.eM)(r,{updateUrl:a}),c((0,u.L8)(e,r.tagSelection))}finally{i(!1)}},[e]),d=(0,r.useCallback)(async(e,t)=>{let r=(0,u.He)(a,e,t);l(r),await o(r,!0)},[a,o]),g=(0,r.useCallback)(async()=>{let e=(0,u._U)(a);l(e),await o(e,!0)},[a,o]);return{filterState:a,isLoading:s,totalCount:n,handleFilterChangeAndApply:d,handleApplyFilters:o,clearFilters:g}}(a,s),m="rtl"===(0,x.Ji)(i.page.language);return(0,l.jsx)("div",{"data-test":"grid",children:(t.categories.length>0||t.quickFiltersCategories.length>0||t.quickFiltersTagValues.length>0)&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(K,{gridConfig:t,filterState:n,colorScheme:x.Eu.LIGHT,countingData:a,handleApplyFilters:f,clearFilters:h,handleFilterChangeAndApply:d,isRtl:m}),(()=>{var e,r;let s=null==(e=t.filterIndicatorText)?void 0:e.value;if(s)return c?(0,l.jsx)(E,{}):(0,l.jsx)("div",{className:"xpadding-s bp:xpadding-l pt-content",children:(0,l.jsx)("div",{className:"max-scale-xl mx-auto",children:(0,l.jsx)("p",{"data-test":"result-indicator",className:"font-body-3-regular text-text-tertiary",children:(0,g.K)(s,o,null!=(r=null==a?void 0:a.totalNumberOfResults)?r:0)})})})})()]})})}function E(){return(0,l.jsx)("div",{className:"xpadding-s bp:xpadding-l",children:(0,l.jsx)("div",{className:"mx-1.5 my-1 h-2.5 w-[100px] animate-pulse rounded-lg bg-gray-100"})})}var R=a(1355),z=a(673);function L(e){var t,a;let{initialSearchText:r,config:s,disabled:i=!1}=e,{searchText:n,hasSearched:c,setSearchText:o,setHasSearched:d,onChange:g,onEdit:f}=(0,R.U)(r),x=e=>{d(!!e);let{tagSelection:t}=(0,u.wt)();(0,u.eM)({tagSelection:t,searchText:e||void 0},{updateUrl:!0})};return(0,l.jsx)("div",{className:"xpadding-s bp:xpadding-l pt-content",children:(0,l.jsx)("div",{className:"max-scale-l mx-auto",children:(0,l.jsx)(z.G,{searchText:n,hasSearched:c,placeholder:null!=(a=null==(t=s.searchPlaceholderText)?void 0:t.value)?a:"",disabled:i,onChange:g,onSearch:()=>x(n),onEdit:f,onClear:()=>{o(""),x("")}})})})}}}]);