https://www.benjaminmoore.com/_next/static/chunks/1172.1ede372ec3c90ef0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1172],{59947:function(e,t,i){i.d(t,{DV:function(){return l},G_:function(){return d},Wy:function(){return c},a_:function(){return s}});var a=i(87379),r=i(51815),n=i(52105),o=i(22480),p=i(23928);let l=a.ZP.div.withConfig({displayName:"colorSearchstyles__ColorSearchWrapper",componentId:"sc-lg6ycb-0"})(["position:relative;background-color:",";min-height:calc(100vh - ","px - 32px);padding-bottom:32px;.gridBackgroundContainer{min-width:unset !important;}.displayFiltersBtn{display:flex;align-items:center;gap:4px;border-radius:6px;padding:0px 8px;height:32px;background:",";color:",";border:1px solid ",";font-family:inherit;p{text-align:left;white-space:nowrap;}&[aria-pressed='true']{border:1px solid ",";background:",";}&:hover{cursor:pointer;}&:focus{outline:2px solid ",";}}.selectedFilterContainer .displayFiltersBtn{background:",";border:none;}.filtersSelected,.sortSelected{border:1px solid ",";background:",";}.grid{grid-column-gap:24px;grid-row-gap:0px;padding-bottom:2px;}.colorSearchTitleContainer{padding:32px 24px 16px 24px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;}.colorSearchInputContainer{display:flex;align-items:flex-end;gap:8px;padding:0px 24px 0px 24px;}.colorSearchFilterContainer{display:flex;align-items:flex-start;gap:12px;",";.filterContainer{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;padding:16px 24px 16px 24px;.quickFilterContainer{display:flex;gap:16px;.quickFilterOptionWrapper{display:flex;flex-direction:column;gap:8px;}}}}.contentWrapperCenterAligned{text-align:center;display:flex;flex-direction:column;align-items:center;margin:0px 24px;}.contentWrapper{text-align:left;display:flex;flex-direction:column;align-items:flex-start;margin:0px 24px;}.contentWrapper > *,.contentWrapperCenterAligned > *{margin-bottom:16px;}.contentWrapper >:last-child,.contentWrapperCenterAligned >:last-child{margin-bottom:8px;}.spellingText{.spellingTextLabel{display:inline;}.spellingButton{margin-left:8px;&:focus{outline:2px solid ",";}.spellingButtonText{text-decoration:underline;text-underline-offset:2px;}}}.errorMsgContainer{display:flex;flex-direction:column;align-items:center;gap:16px;}.selectedFilterContainer{display:flex;margin:0px;padding:0px;list-style:none;gap:12px;align-items:flex-start;flex-wrap:wrap;}.clearAllAndSelectedFiltersWrapper,.clearFilterContainer{display:flex;align-items:center;justify-content:flex-start;gap:20px;flex-wrap:wrap;.clearSearchButtonContainer{display:flex;gap:",";}}.clearSearchText{& a:focus{","}}.divider{margin:0 8px;color:",";}.clearSearch{color:",";text-decoration-line:underline;}.clearFilterButton{color:",";text-decoration-line:underline;}.spinner{position:fixed;z-index:22;}.infinityScrollLoader{position:relative;.inlineSpinner{position:unset;background-color:",";}}.backToTopFloatingBtnWrapper{position:fixed;bottom:0;left:0;z-index:2;padding:16px 35px;width:fit-content;.backToTopFloatingBtn{& > span{padding:16px;}&:focus{",";}}}","{min-height:calc(100vh - ","px - 48px);padding-bottom:48px;.searchInputWrapper{padding-top:70px;}.colorSearchTitleContainer{padding:48px 45px 24px 45px;}.colorSearchInputContainer{padding:0px 45px 0px 45px;}.contentWrapperCenterAligned{margin:0px 45px;}.contentWrapper{margin:0px 45px;}.colorSearchFilterContainer{.filterContainer{padding:"," 45px;}}}","{padding-bottom:48px;.searchInputWrapper{padding-top:60px;}.colorSearchInputContainer{grid-column-start:8;padding:48px 45px 0px 0px;}.colorSearchFilterContainer{.filterContainer{padding:24px 45px 24px 45px;}}.contentWrapperCenterAligned{margin:0px 45px;}.contentWrapper{margin:0px 45px;}.backToTopFloatingBtnWrapper{padding:24px 32px;}}","{min-height:calc(100vh - ","px - 72px);padding-bottom:72px;.searchInputWrapper{padding-top:70px;}.colorSearchTitleContainer{padding:72px 72px 0px 72px;}.colorSearchInputContainer{grid-column-start:8;padding:72px 72px 0px 0px;}.colorSearchFilterContainer{.filterContainer,.selectedFilterContainer{padding:"," ",";gap:16px;}}.contentWrapperCenterAligned{margin:0px 72px;}.contentWrapper{margin:0px 72px;}}","{min-height:calc(100vh - ","px - 96px);padding-bottom:96px;.searchInputWrapper{padding-top:60px;}.colorSearchTitleContainer{padding:96px 96px 0px 96px;}.colorSearchInputContainer{grid-column-start:8;padding:96px 96px 0px 0px;}.colorSearchFilterContainer{.filterContainer{padding:32px 96px 32px 96px;}}.contentWrapperCenterAligned{margin:0px 96px;}.contentWrapper{margin:0px 96px;}}"],({theme:e})=>e.colors.white,({topHeight:e})=>e,({theme:e})=>e.colors.white,({theme:e})=>e.colors.dark_grey_1,({theme:e})=>e.colors.medium_grey_3,({theme:e})=>e.colors.dark_grey_1,({theme:e})=>e.colors.off_white,({theme:e})=>e.colors.focus_color,({theme:e})=>e.colors.off_white,({theme:e})=>e.colors.dark_grey_1,({theme:e})=>e.colors.off_white,({headerHeight:e,isHeaderVisible:t})=>(0,a.iv)(["position:sticky;background-color:",";top:",";transition:top ",";z-index:20;"],({theme:e})=>e.colors.white,t?`${e}px`:"0px",t?"0.7s ease-out 0.3s":"0.35s ease-out"),({theme:e})=>e.colors.focus_color,p.A6,p.zu,({theme:e})=>e.colors.placeHolder_color,({theme:e})=>e.colors.placeHolder_color,({theme:e})=>e.colors.placeHolder_color,p.ix,p.zu,r.Ri.md,({topHeight:e})=>e,o.spacing.spacing_24,r.Ri.lg,r.Ri.xl,({topHeight:e})=>e,o.spacing.spacing_32,o.spacing.spacing_72,r.Ri.xxl,({topHeight:e})=>e),d=a.ZP.div.withConfig({displayName:"colorSearchstyles__FacetValuesContainer",componentId:"sc-lg6ycb-1"})(["padding-top:16px;",";"],({$isGridView:e})=>e?`
2          display: grid;
3          grid-template-columns: repeat(4, 1fr);
4          gap: 12px;
5          align-items: start;
6          ${r.Ri.xl} {
7            grid-template-columns: repeat(5, 1fr);
8          }
9          ${r.Ri.xxl} {
10            grid-template-columns: repeat(6, 1fr);
11          }
12        `:`
13          display: flex;
14          flex-wrap: wrap;
15          gap: 8px;
16        `),s=a.ZP.div.withConfig({displayName:"colorSearchstyles__ColorSearchFacetsWrapper",componentId:"sc-lg6ycb-2"})(["width:100%;","{width:396px;}","{width:349px;}","{width:488px;}","{width:648px;}height:100%;overflow:hidden;background:",";display:flex;flex-direction:column;.overlayHeader{position:relative;display:flex;align-items:center;justify-content:space-between;padding:28px 24px;box-shadow:0px 2px 2px 0px rgba(0,0,0,0.25);.filterTitle{display:flex;align-items:baseline;justify-content:center;gap:8px;.clearFilterTxt{text-underline-offset:3px;}button{:focus{outline:2px solid ",";}align-items:flex-end;}p{text-decoration:underline;}}.closeBtn{:focus{outline:2px solid ",";outline-offset:-2px;}}}.applyBtnWrapper{display:flex;margin:24px;button{flex:1;&:focus{outline:2px solid ",";}}}.facetsContainer{display:flex;flex-direction:column;gap:24px;flex:1;padding-left:24px;padding-right:24px;padding-top:24px;overflow-y:auto;}.searchFacet{width:100%;padding-bottom:16px;border-bottom:1px solid ",";}.accordionBtn{width:100%;&:focus{outline:2px solid ",";outline-offset:4px;}> div{width:100%;display:flex;flex-direction:row;justify-content:space-between;}}.selectedFacetsList{margin-top:8px;text-align:left;}","{.overlayHeader{.filterTitle{gap:10px;}padding:24px;}.applyBtnWrapper{margin:16px;}.selectedFacetsList{margin-top:10px;}}","{.overlayHeader{.filterTitle{gap:16px;}padding:27px 24px;}}","{.overlayHeader{padding:20px 24px;}}","{.overlayHeader{padding:16px 24px;}}"],r.Ri.md,r.Ri.lg,r.Ri.xl,r.Ri.xxl,({theme:e})=>e.colors.white,({theme:e})=>e.colors.focus_color,({theme:e})=>e.colors.focus_color,({theme:e})=>e.colors.focus_color,({theme:e})=>e.colors.light_grey_1,({theme:e})=>e.colors.focus_color,r.Ri.md,r.Ri.lg,r.Ri.xl,r.Ri.xxl),c=(0,a.ZP)(n.Dr).withConfig({displayName:"colorSearchstyles__ClearSelectionsButton",componentId:"sc-lg6ycb-3"})(["text-align:center;&:focus{outline:2px solid ",";transform:none;}&:hover{transform:none;}"],({theme:e})=>e.colors.focus_color)},44577:function(e,t,i){i.r(t),i.d(t,{SORT_ORDER:function(){return R},compTestId:function(){return T},default:function(){return A}});var a=i(67294),r=i(78715),n=i(84092),o=i(89920),p=i(9402),l=i(87379),d=i(33144),s=i(51815),c=i(23928);let x=(0,l.iv)(["display:flex;align-items:center;gap:",";border-radius:6px;font-family:inherit;background:",";color:",";border:1px solid ",";p{text-align:left;white-space:nowrap;}&:hover{cursor:pointer;}&:focus{","}"],c.A6,c.ix,c.oK,c.EW,c.zu),g=l.ZP.div.withConfig({displayName:"productCategorystyles__ProductCategoryWrapper",componentId:"sc-1bsakfn-0"})(["background-color:",";padding-bottom:32px;.spinner{position:fixed;z-index:",";}.productFilterContainer{display:flex;align-items:flex-start;gap:",";",";.filterContainer{display:flex;align-items:flex-start;gap:",";padding:16px 35px;overflow-x:auto;.displayFiltersBtn{"," padding:0px ",";height:32px;}.filtersSelected{border:1px solid ",";background:",";}}}.contentWrapper{padding:0px 35px;.clearAllAndSelectedFiltersWrapper{display:flex;align-items:center;justify-content:flex-start;gap:",";flex-wrap:wrap;.selectedFilterContainer{display:flex;margin:0px;padding:",";list-style:none;gap:",";align-items:flex-start;flex-wrap:wrap;

16.displayFiltersBtn{"," background:",";border:none;padding:0px 8px;height:32px;}}.clearFilterBtn{color:",";text-decoration-line:underline;}}& >:last-child{margin-bottom:8px;}}.filterBox{margin-left:-35px;margin-right:-35px;.filterContainer{padding:0px 35px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;background-color:",";margin-bottom:32px;.displayFiltersBtn{"," gap:8px;padding:16px;height:54px;}.clearFilterBtn{border:none;padding-left:0;padding-right:0;}:not(:has(.clearFilterBtn)){justify-content:flex-end;}}}.viewMoreBtnWrapper{display:flex;justify-content:center;padding-top:38px;padding-bottom:35px;.viewMoreBtn{background:",";color:",";border-radius:6px;padding:16px;width:100%;max-width:300px;&[aria-disabled='true']{opacity:0.5;}&:focus{outline:2px solid ",";}}}.backToTopFloatingBtnWrapper{position:fixed;bottom:0;left:0;z-index:2;padding:16px 35px;width:fit-content;z-index:20;.backToTopFloatingBtn{& > span{padding:16px;}&:focus{",";}}}","{padding-bottom:48px;.productFilterContainer{.filterContainer{padding:24px 45px;}}.contentWrapper{padding:0px 45px;}.filterBox{margin-left:-45px;margin-right:-45px;.filterContainer{padding-left:45px;padding-right:45px;margin-bottom:24px;justify-content:flex-end;.clearFilterBtn{padding:16px;}}.viewMoreBtnWrapper{padding-bottom:48px;}}}","{padding-bottom:24px;.viewMoreBtnWrapper{padding-bottom:46px;}.backToTopFloatingBtnWrapper{padding:24px 32px;}.filterBox{.filterContainer{margin-bottom:24px;}}.contentWrapper{padding:0px 45px;}}","{padding-bottom:36px;.filterBox{margin-left:-72px;margin-right:-72px;.filterContainer{padding-left:72px;padding-right:72px;margin-bottom:36px;}}.productFilterContainer{.filterContainer{padding:32px 72px;gap:",";}}.contentWrapper{padding:0px ",";}.viewMoreBtnWrapper{padding-top:50px;padding-bottom:72px;}}","{padding-bottom:48px;.productCategoryGrid{padding-left:96px;padding-right:96px;}.filterBox{margin-left:-96px;margin-right:-96px;.filterContainer{padding-left:96px;padding-right:96px;margin-bottom:48px;}}.productFilterContainer{.filterContainer{padding-left:96px;padding-right:96px;}}.contentWrapper{padding:0px 96px;}.viewMoreBtnWrapper{padding-top:54px;padding-bottom:96px;}}"],({theme:e})=>e.colors.white,d.jM,c.E_,({headerHeight:e,isHeaderVisible:t})=>(0,l.iv)(["position:sticky;background-color:",";top:",";transition:top ",";z-index:20;"],({theme:e})=>e.colors.white,t?`${e}px`:"0px",t?"0.7s ease-out 0.3s":"0.35s ease-out"),c.E_,x,c._z,c.oK,c.Fl,c.$W,c.JF,c.E_,x,c.Fl,c.yf,({theme:e})=>e.colors.white,x,({theme:e})=>e.colors.dark_grey_1,({theme:e})=>e.colors.white,({theme:e})=>e.colors.focus_color,c.zu,s.Ri.md,s.Ri.lg,s.Ri.xl,c.Tv,c.RQ,s.Ri.xxl),u=e=>{let t=new URL(window.location.toString()),i=new URLSearchParams(t.search);if(e?.length){let t=e?.join(":");i.set("filters",t)}else i.delete("filters");t.search=i.toString(),window.history.replaceState({},"",t)};var f=i(25379),m=i(53045),h=i(41992),y=i(59947),b=i(15853),C=i(88169),w=i(25031),F=i(99072),_=i(93002),S=i(59491),k=i(52105),B=i(53351),v=i(99192),W=i(70954),j=i(85893);let T="ProductCategory",R="relevance",N=(0,r.G)();var A=e=>{let{content_data:t,dictionaryData:i}=e,{color_data:r,fields:l}=t??{},{product_code:d,product_code_collection:s,show_filter:c,filters:x}=l??{},{products:A,facets:M}=r??{},{view_more_button:$}=i??{},{globalSettings:P}=(0,v.bN)(),{global:I,storeLocator:Z,productListPage:z}=P?.globalDictionaries??{},{filters:D,clear_filters:O}=I??{},{filter_count:H}=Z??{},{back_to_top_label:L}=z??{},{searchProducts:q}=(0,f.Z)(),E=(0,a.useRef)(null),Q=(0,m.Z)(E,{offset:1500}),{isHeaderVisible:G,headerHeight:V}=(0,b.$)(),{0:U,1:K}=(0,a.useState)(!1),{0:J,1:X}=(0,a.useState)(A),{0:Y,1:ee}=(0,a.useState)(!(r?.pagination?.totalPages>1)),{0:et,1:ei}=(0,a.useState)(0),{0:ea,1:er}=(0,a.useState)(!1),{0:en,1:eo}=(0,a.useState)(M),{0:ep,1:el}=(0,a.useState)(""),ed=(0,a.useMemo)(()=>d?.split(":")?.slice(2)||[],[d]),{0:es,1:ec}=(0,a.useState)(ed),{0:ex,1:eg}=(0,a.useState)(!1),eu=(0,a.useMemo)(()=>en?.filter(({code:e})=>!d?.includes(e)),[en,d]),ef=(0,a.useMemo)(()=>(0,w.iW)(x,eu),[eu,x]),em=(0,a.useMemo)(()=>(0,w.Zg)(eu),[eu]),eh=(0,a.useMemo)(()=>N(H||"")({count:em}),[em,H]),ey=(0,a.useMemo)(()=>(0,w.ne)(eu),[eu]),eb=(0,a.useCallback)(()=>{K(!0)},[]),eC=(0,a.useCallback)(()=>{K(!1)},[]),ew=(0,a.useCallback)(()=>Object.entries((0,w.jo)(en)??{}).flatMap(([e,t])=>{let i=ey?.[e];return i&&t.length?t.map(e=>{let t=i.values.find(t=>t.name===e);return{facetCode:i.code,label:e,query:t?.query?.query?.value||""}}):[]}),[en,ey]),eF=(0,a.useCallback)(async e=>{let{facetsQuery:t,page:i}=e;ei(i);let a=new Set(ed);u(t?.filter(e=>!a.has(e)));let[r,n]=await q({query:{sortOrder:R,facets:t},currentPage:i,pageSize:100});if(n||!r?.products?.length){ee(!0),X(null);return}return ee(r.pagination.currentPage===r.pagination.totalPages-1),X(e=>{let t=[...r.products];return e&&r.pagination.currentPage>0&&t.unshift(...e),t}),{success:!0,productSearchRes:r}},[ed,q]),e_=(0,a.useCallback)(async e=>{e?.length||(e=ed),er(!0),ec(e);let[t,i]=await q({currentPage:0,pageSize:0,query:{searchText:"",facets:e}});if(i){er(!1);return}eo(t?.facets),er(!1)},[ed,q]),eS=(0,a.useCallback)(async e=>{eg(!0),ec(e),await eF({facetsQuery:e,page:0}),eg(!1),eC()},[eC,eF]),ek=(0,a.useCallback)(()=>{eS(es)},[es,eS]),eB=(0,a.useCallback)(async()=>{eg(!0);let e=await eF({facetsQuery:es,page:et+1});if(e?.success){let t=E?.current?.getElementsByClassName("productGridContainer")?.[0],i=t?.children[e.productSearchRes.pagination.currentPage*e.productSearchRes.pagination.pageSize],a=i?.getElementsByTagName("a")?.[0];a?.focus(),i?.scrollIntoView({behavior:"smooth"})}eg(!1)},[es,et,eF]),ev=(0,a.useCallback)(async()=>{ec(ed),eg(!0);let e=await eF({facetsQuery:ed,page:0});e?.success&&eo(e?.productSearchRes?.facets),eg(!1)},[ed,eF]),eW=(0,a.useCallback)(()=>{(0,W.Zu)(E.current,0)},[]);(0,a.useEffect)(()=>{(async()=>{let e=new URLSearchParams(window.location.search),t=e.get("filters")?.trim();if(t){eg(!0);let e=[...t.split(":"),...es],i=await eF({facetsQuery:e,page:0});i?.success&&(ec(e),eo(i?.productSearchRes?.facets)),eg(!1)}})()},[]);let ej=(0,a.useCallback)(()=>{el(""),eb()},[eb]);return(0,j.jsxs)(g,{"data-testid":T,isHeaderVisible:G,headerHeight:V,children:[c?(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)("div",{className:"productFilterContainer",children:(0,j.jsx)("div",{className:"filterContainer",children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsxs)("button",{className:em>0?"displayFiltersBtn filtersSelected":"displayFiltersBtn","data-testid":`${T}_FilterButton`,onClick:ej,"aria-label":eh,children:[(0,j.jsx)(F.Z,{icon:"filter",size:24,"data-testid":`${T}_Icon`}),(0,j.jsxs)(B.wM,{$fontWeight:"medium","data-testid":`${T}_Text`,children:[D," ",em>0?`(${em})`:""]})]}),(0,j.jsx)(o.Z,{quickFiltersData:ef,facetData:en,openOverlay:eb,setSelectedOption:el})]})})}),(0,j.jsx)("div",{className:"contentWrapper",children:(0,j.jsx)("div",{className:"clearAllAndSelectedFiltersWrapper",children:em>0&&(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(y.Wy,{className:"clearFilterBtn",onClick:ev,"data-testid":`${T}_ClearFilterBtn`,"aria-label":O,children:(0,j.jsx)(B.i1,{$fontWeight:"regular",children:O})}),(0,j.jsx)(p.Z,{selectedFilters:ew(),isProductsDataLoading:ex,handleApplyFacets:eS,handleSearchFacetsByQuery:e_})]})})})]}):null,(0,j.jsx)(C.Z,{productsData:J,sortProductCodes:s,dictionaryData:i,"data-testid":`${T}_Grid`,ref:E}),Y?null:(0,j.jsx)("div",{className:"viewMoreBtnWrapper",children:(0,j.jsx)(k.Dr,{className:"viewMoreBtn",onClick:eB,"data-testid":`${T}_ViewMoreBtn`,children:(0,j.jsx)(B.pA,{children:$})})}),c?(0,j.jsx)(S.Z,{isOpen:U,showCloseButton:!1,animationDirection:["bottom","right"],contentLabel:D,onRequestClose:eC,onAfterClose:ek,children:(0,j.jsx)(n.Z,{facetData:eu,filterCount:em,isFacetLoading:ea,searchFacetsByQuery:e_,handleOnApplyFacets:eS,handleOnRequestClose:eC,selectedFacetOption:ep})}):null,Q&&(0,j.jsx)("div",{className:"backToTopFloatingBtnWrapper",children:(0,j.jsx)(h.Z,{"data-testid":`${T}_BackToTopFloatingBtn`,className:"backToTopFloatingBtn","aria-label":L,icon:"upArrow",iconOnly:!0,onClick:eW})}),(0,j.jsx)(_.Z,{className:"spinner",$display:ex,$color:"black",$background:"rgba(0,0,0,0.2)"})]})}}}]);