1/*! 2 * @version 3ea9a483c 3 * 4 */ 5(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{"8ZjK":function(n,e,t){"use strict" 6var o=t("denP"),i=t.n(o),a=t("JPst"),s=t.n(a)()(i.a) 7s.push([n.i,"@media only screen and (max-width: 767px ) {\n}@media only screen and (max-width: 767px ) {\n}@media only screen and (max-width: 767px ) {\n}@media only screen and (max-width: 767px ) {\n}.scanIcon__4ZLQ2 {\n fill: #000;\n}\n.clearInput__E1AYb {\n display: flex;\n align-items: center;\n align-self: center;\n}\n.clearInput__E1AYb:before {\n content: '\\e922';\n font-family: 'icomoon';\n font-size: 16px;\n color: #000;\n margin: 0;\n font-weight: 400;\n}\n.clearInput__E1AYb:before {\n content: '\\e922';\n font-family: 'icomoon';\n font-size: 16px;\n color: #000;\n margin: 0;\n font-weight: 400;\n}\n.searchIcon__FtI\\+a {\n display: flex;\n align-items: center;\n align-self: center;\n}\n.searchIcon__FtI\\+a:before {\n content: '\\e923';\n font-family: 'icomoon';\n font-size: 16px;\n color: #000;\n margin: 0;\n font-weight: 400;\n}\n.searchIcon__FtI\\+a:before {\n content: '\\e923';\n font-family: 'icomoon';\n font-size: 16px;\n color: #000;\n margin: 0;\n font-weight: 400;\n}\n.closeIcon__k1AfI {\n display: flex;\n align-items: center;\n align-self: center;\n}\n.closeIcon__k1AfI:before {\n content: '\\e924';\n font-family: 'icomoon';\n font-size: 16px;\n color: #000;\n margin: 0 0 0 8px;\n font-weight: 400;\n}\n.closeIcon__k1AfI:before {\n content: '\\e924';\n font-family: 'icomoon';\n font-size: 16px;\n color: #000;\n margin: 0 0 0 8px;\n font-weight: 400;\n}\n.container__vEoK7 {\n display: flex;\n}\n.container__vEoK7 button {\n height: 40px;\n}\n.results__container__G-5R\\+ {\n margin-top: 24px;\n margin-right: -16px;\n padding-right: 16px;\n max-height: calc(90vh - 170px);\n max-height: calc(90svh - 170px);\n display: flex;\n flex-direction: column;\n}\n.results__scroll__lf5Sf {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n.products__gt8cK .title__Hkg6I,\n.suggestions__maGhB .title__Hkg6I {\n font-weight: 700;\n margin-bottom: 8px;\n}\n.products__list__uAgJF,\n.suggestions__list__brun9 {\n background-color: #fff;\n margin-bottom: 24px;\n padding: 16px;\n}\n.suggestions__list__brun9 {\n padding: 8px 16px;\n}\n.suggestions__item__HZuSc {\n margin-bottom: 8px;\n color: #24272c;\n display: inline-block;\n line-height: 24px;\n}\n.suggestions__item__HZuSc:last-child {\n margin-bottom: 0;\n}\n.productImage__NSh4w {\n width: 50px;\n height: 50px;\n flex-shrink: 0;\n}\n.products__item__poUbl {\n border-bottom: 1px solid #dedede;\n padding-bottom: 16px;\n display: grid;\n grid-template-columns: 50px auto;\n gap: 40px;\n margin-bottom: 16px;\n color: #24272c;\n}\n.products__item__poUbl:last-child {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n}\n.products__item__info__xfpK1 {\n align-self: center;\n}\n.products__item__poUbl img {\n max-height: 100%;\n}\n.products__item__poUbl strong {\n margin-bottom: 2px;\n display: block;\n}\n.products__item__poUbl .variants__HJGWP {\n font-size: 12px;\n border-bottom: 1px solid #000;\n padding-bottom: 2px;\n display: inline-flex;\n}\n.actions__lNQIN {\n display: flex;\n justify-content: flex-end;\n flex-shrink: 0;\n}\n.actions__lNQIN a {\n font-size: 14px;\n justify-content: center;\n}\n@media only screen and (max-width: 767px ) {\n .results__container__G-5R\\+ {\n max-height: calc(100vh - 170px);\n max-height: calc(100svh - 170px);\n }\n}\n@media only screen and (max-width: 499px ) {\n .actions__lNQIN {\n display: block;\n width: 100%;\n background-color: #f7f7f7;\n padding-top: 8px;\n padding-bottom: 8px;\n }\n .actions__lNQIN button {\n width: 100%;\n }\n}\n","",{version:3,sources:["webpack://./src/web/typography.less","webpack://./src/pwastudio/@magento/venia-ui/lib/components/SearchBar/searchField.less","webpack://./src/web/icons.less"],names:[],mappings:"AA8EE;AC7EF,CDuFE;ACtFF,CD4EE;AC3EF,CDqFE;ACpFF,CAFA;EACE,UAAA;AAGF;AAAA;EC2EE,aAAA;EACA,mBAAA;EACA,kBAAA;ADxEF;AC0EE;EACE,gBAAA;EACA,sBAAA;EACA,eAAA;EACA,WAAA;EACA,SAAA;EACA,gBAAA;ADxEJ;ACkEE;EACE,gBAAA;EACA,sBAAA;EACA,eAAA;EACA,WAAA;EACA,SAAA;EACA,gBAAA;ADhEJ;AAjBA;ECuEE,aAAA;EACA,mBAAA;EACA,kBAAA;ADnDF;ACqDE;EACE,gBAAA;EACA,sBAAA;EACA,eAAA;EACA,WAAA;EACA,SAAA;EACA,gBAAA;ADnDJ;AC6CE;EACE,gBAAA;EACA,sBAAA;EACA,eAAA;EACA,WAAA;EACA,SAAA;EACA,gBAAA;AD3CJ;AAlCA;ECmEE,aAAA;EACA,mBAAA;EACA,kBAAA;AD9BF;ACgCE;EACE,gBAAA;EACA,sBAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,gBAAA;AD9BJ;ACwBE;EACE,gBAAA;EACA,sBAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,gBAAA;ADtBJ;AAnDA;EACE,aAAA;AAqDF;AAtDA;EAII,YAAA;AAqDJ;AA3CA;EACE,gBAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,+BAAA;EACA,aAAA;EACA,sBAAA;AA6CF;AAxCA;EACE,OAAA;EACA,aAAA;EACA,gBAAA;AA0CF;AAvCA;;EAGI,gBAAA;EACA,kBAAA;AAwCJ;AArCE;;EACE,sBAAA;EACA,mBAAA;EACA,aAAA;AAwCJ;AApCA;EACE,iBAAA;AAsCF;AAnCA;EACE,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,iBAAA;AAqCF;AAnCE;EACE,gBAAA;AAqCJ;AAjCA;EACE,WAAA;EACA,YAAA;EACA,cAAA;AAmCF;AAhCA;EACE,gCAAA;EACA,oBAAA;EACA,aAAA;EACA,gCAAA;EACA,SAAA;EACA,mBAAA;EACA,cAAA;AAkCF;AAhCE;EACE,gBAAA;EACA,iBAAA;EACA,mBAAA;AAkCJ;AA/BE;EACE,kBAAA;AAiCJ;AAjDA;EAoBI,gBAAA;AAgCJ;AApDA;EAwBI,kBAAA;EACA,cAAA;AA+BJ;AAxDA;EA6BI,eAAA;EACA,6BAAA;EACA,mBAAA;EACA,oBAAA;AA8BJ;AA1BA;EACE,aAAA;EACA,yBAAA;EACA,cAAA;AA4BF;AA/BA;EAMI,eAAA;EACA,uBAAA;AA4BJ;AAxBA;EACE;IACE,+BAAA;IACA,gCAAA;EA0BF;AACF;AAhBA;EACE;IACE,cAAA;IACA,WAAA;IAGA,yBAAA;IACA,gBAAA;IAQA,mBAAA;EASF;EAvBA;IAgBI,WAAA;EAUJ;AACF",sourcesContent:["@import './theme.less';\n\n@font-family__sans-serif: Sans-Serif;\n\n@font-family-name__base: FrutigerRoman;
7\n@font-family-name__light: FrutigerLight;\n@font-family-name__bold: FrutigerBlack;\n\n@font-family__base: @font-family-name__base, @font-family__sans-serif;\n@font-family__light: @font-family-name__light, @font-family__sans-serif;\n@font-family__bold: @font-family-name__bold, @font-family__sans-serif;\n\n@font-size__6xl: 28px;\n@font-size__5xl: 26px;\n@font-size__4xl: 24px;\n@font-size__3xl: 22px;\n@font-size__2xl: 20px;\n@font-size__xl: 18px;\n@font-size__l: 16px;\n@font-size__m: 14px;\n@font-size__base: @font-size__m;\n@font-size__s: 12px;\n@font-size__xs: 10px;\n@font-size__xxs: 8px;\n\n// [MOBILE] base font size â drives the mobile type scale via inheritance from body\n@font-size__base__mobile: 11px;\n\n@font-weight__bold: 700;\n@font-weight__regular: 400;\n@font-weight__light: 300;\n\n@line-height__default: 1.5;\n\n.line-height(@heightValue)\n when\n not\n (@heightValue = false)\n and\n not\n (@heightValue = normal)\n and\n not\n (ispercentage(@heightValue)) {\n .font-size-value(@heightValue);\n line-height: @fontValue;\n}\n\n.font-size-value(@_value) when not (@_value = false) and not (@_value = '') {\n // Exact-pixel output: emit the design token verbatim as px. No rem/ratio, so\n // sizes are never re-interpreted against the device/user root font-size.\n @fontValue: unit((@_value) * 1, px);\n}\n\nhtml,\nbody {\n font-size: @font-size__base;\n // Single source of truth for body copy. Elements with NO font-size of their\n // own inherit this, so they shift 14px -> 11px on mobile for free. Elements\n // that set an explicit size are exact px and do NOT auto-shrink â to make one\n // responsive, drop its declaration so it inherits.\n @media @mobileM {\n font-size: @font-size__base__mobile;\n }\n}\n\nh1,\nh2,\nh4,\nh5,\nh6 {\n font-weight: @font-weight__bold;\n margin: @spacing__base 0;\n}\n\nh1 {\n font-size: @font-size__6xl;\n .line-height(@font-size__6xl);\n @media @mobileM {\n font-size: @font-size__4xl;\n .line-height(@font-size__4xl);\n }\n}\n\nh2,\nh3 {\n font-size: @font-size__3xl;\n .line-height(@font-size__4xl);\n @media @mobileM {\n font-size: @font-size__xl;\n .line-height(@font-size__2xl);\n }\n}\n\nh3 {\n margin: @spacing__base 0;\n font-weight: @font-weight__regular;\n}\n\nh4,\nh5,\nh6 {\n font-size: inherit;\n}\n\n[class^='font-size__l'] {\n font-size: @font-size__l;\n}\n","@import (reference) 'src/web/theme.less';\n\n.scanIcon {\n fill: @color__black;\n}\n\n.clearInput {\n .icomoonBefore('delete', @font-size__l, 0, @color__black);\n}\n\n.searchIcon {\n .icomoonBefore('search', @font-size__l, 0, @color__black);\n}\n\n.closeIcon {\n .icomoonBefore('close', @font-size__l, 0 0 0 @spacing__base, @color__black);\n}\n\n.container {\n display: flex;\n\n button {\n height: 40px;\n }\n}\n\n// .actions (the \"View X results\" button) is a flex sibling of\n// .results__scroll below, not nested inside it â so it's always visible,\n// never part of what scrolls, at every breakpoint. .results__container\n// itself just frames the two (bounded by max-height here on\n// tablet/desktop; by flex:1 within the mobile full-screen .root_open at\n// @bp-mobile below).\n.results__container {\n margin-top: @spacing__m;\n margin-right: -@spacing__sm;\n padding-right: @spacing__sm;\n max-height: calc(90vh - 170px); //fallback\n max-height: calc(90svh - 170px);\n display: flex;\n flex-direction: column;\n}\n\n// The actual scrollable area â suggestions + products, everything except\n// the .actions button bar below it.\n.results__scroll {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n\n.products,\n.suggestions {\n .title {\n font-weight: @font-weight__bold;\n margin-bottom: @spacing__base;\n }\n\n &__list {\n background-color: @color__white;\n margin-bottom: @spacing__m;\n padding: @spacing__sm;\n }\n}\n\n.suggestions__list {\n padding: @spacing__base @spacing__sm;\n}\n\n.suggestions__item {\n margin-bottom: @spacing__base;\n color: @color__shades_black;\n display: inline-block;\n line-height: @font-size__4xl;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n.productImage {\n width: 50px;\n height: 50px;\n flex-shrink: 0;\n}\n\n.products__item {\n border-bottom: 1px solid @color__gray-medium;\n padding-bottom: @spacing__sm;\n display: grid;\n grid-template-columns: 50px auto;\n gap: @spacing__l;\n margin-bottom: @spacing__sm;\n color: @color__shades_black;\n\n &:last-child {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }
7\n\n &__info {\n align-self: center;\n }\n\n img {\n max-height: 100%;\n }\n\n strong {\n margin-bottom: @spacing__xxs;\n display: block;\n }\n\n .variants {\n font-size: @font-size__s;\n border-bottom: 1px solid @color__black;\n padding-bottom: @spacing__xxs;\n display: inline-flex;\n }\n}\n\n.actions {\n display: flex;\n justify-content: flex-end;\n flex-shrink: 0;\n\n a {\n font-size: @font-size__base;\n justify-content: center;\n }\n}\n\n@media @mobileM {\n .results__container {\n max-height: calc(100vh - 170px); //fallback\n max-height: calc(100svh - 170px);\n }\n}\n\n// Mobile only (<500px, @bp-mobile) â not tablet. Was @mobileL (<1024px,\n// mobile+tablet combined), which made the button full-width on tablet too;\n// tablet now falls through to the default right-aligned .actions above.\n// .results__container's height still comes from @mobileM's max-height\n// above (<500px is a subset of <768px) â .root_open (searchBar.less)\n// stays at its normal position: absolute; top: 50px, not full-screen, so\n// there's no flex ancestor here to fill against.\n@media @bp-mobile {\n .actions {\n display: block;\n width: 100%;\n // Matches .root_open's own background (searchBar.less) so this bar\n // blends into the rest of the overlay instead of standing out white.\n background-color: @color__gray-light-2;\n padding-top: @spacing__s;\n // No padding-left/right: .results__scroll (the suggestions/products\n // above) sits flush left and, via .results__container's own\n // margin-right/padding-right scrollbar-clearance trick, flush right\n // too â .actions matches that alignment instead of insetting the\n // button further than the rest of the dropdown.\n // 8px here + the 16px RESULTS_BOTTOM_GAP already reserved by\n // searchField.js's height measurement = 24px combined, not 24 + 16.\n padding-bottom: @spacing__s;\n button {\n width: 100%;\n }\n }\n}\n","@import '/src/web/fonts/icomoon/variables';\n\n@icon__folder: './icons/';\n\n@icon__width-default: 20px;\n@icon__height-default: 20px;\n@icon__indent-default: 10px;\n\n.icon(\n @name: '',\n @width: @icon__width-default,\n @height: @icon__height-default,\n @indent: 0\n) {\n display: flex;\n align-items: center;\n width: @width;\n min-width: @width;\n height: @height;\n margin: @indent;\n background-image: url(~'@{icon__folder}@{name}.svg');\n background-size: @width @height;\n background-repeat: no-repeat;\n}\n\n.iconSrc(@name) {\n background-image: url(~'@{icon__folder}@{name}.svg');\n}\n\n.iconBefore(\n @name: '',\n @width: @icon__width-default,\n @height: @icon__height-default,\n @indent: 0 @icon__indent-default 0 0\n) {\n display: flex;\n align-items: center;\n\n &:before {\n display: inline-block;\n width: @width;\n min-width: @width;\n height: @height;\n margin: @indent;\n background-image: url(~'@{icon__folder}@{name}.svg');\n background-size: @width @height;\n background-repeat: no-repeat;\n content: '';\n }\n}\n\n.iconBeforeSrc(@name) {\n &:before {\n background-image: url(~'@{icon__folder}@{name}.svg');\n }\n}\n\n.iconAfter(\n @name: '',\n @width: @icon__width-default,\n @height: @icon__height-default,\n @indent: 0 0 0 @icon__indent-default\n) {\n display: flex;\n align-items: center;\n\n &:after {\n display: inline-block;\n width: @width;\n min-width: @width;\n height: @height;\n margin: @indent;\n background-image: url(~'@{icon__folder}@{name}.svg');\n background-size: @width @height;\n background-repeat: no-repeat;\n content: '';\n }\n}\n\n.icomoonBefore(@name, @size, @margin: 0, @color: @color__primary) {\n @icon: 'icon-@{name}';\n display: flex;\n align-items: center;\n align-self: center;\n\n &:before {\n content: @@icon;\n font-family: 'icomoon';\n font-size: @size;\n color: @color;\n margin: @margin;\n font-weight: @font-weight__regular;\n }\n}\n\n.icomoonAfter(@name, @size, @margin: 0, @color: @color__primary) {\n @icon: 'icon-@{name}';\n display: flex;\n align-items: center;\n align-self: center;\n\n &:after {\n content: @@icon;\n font-family: 'icomoon';\n font-size: @size;\n color: @color;\n margin: @margin;\n font-weight: @font-weight__regular;
7\n }\n}\n\n.iconAfterSrc(@name) {\n &:after {\n background-image: url(~'@{icon__folder}@{name}.svg');\n }\n}\n"],sourceRoot:""}]),s.locals={scanIcon:"scanIcon__4ZLQ2",clearInput:"clearInput__E1AYb",searchIcon:"searchIcon__FtI+a",closeIcon:"closeIcon__k1AfI",container:"container__vEoK7",results__container:"results__container__G-5R+",results__scroll:"results__scroll__lf5Sf",products:"products__gt8cK",title:"title__Hkg6I",suggestions:"suggestions__maGhB",products__list:"products__list__uAgJF",suggestions__list:"suggestions__list__brun9",suggestions__item:"suggestions__item__HZuSc",productImage:"productImage__NSh4w",products__item:"products__item__poUbl",products__item__info:"products__item__info__xfpK1",variants:"variants__HJGWP",actions:"actions__lNQIN"},e.a=s},icrM:function(n,e,t){"use strict" 8t.r(e),t.d(e,"default",function(){return _n}) 9var o,i=t("q1tI"),a=t.n(i),s=t("17x9"),r=t("8UhI"),A=t("VkAN"),l=t.n(A),c=t("Ty5D"),_=t("d4eN"),d=t("Lm/n"),m=t("UYTu"),p=t("vNXh"),u=t("yDJ3"),h=t.n(u),g=t("vTCD"),f=t("n3cH") 10const b={search_query:""},E=Object(m.d)(o||(o=l()(["\n query SearchRedirectAndSuggestions(\n $currentPage: Int = 1\n $inputText: String!\n $pageSize: Int = 6\n $filters: ProductAttributeFilterInput!\n $sort: ProductAttributeSortInput\n ) {\n indexedProducts(\n currentPage: $currentPage\n pageSize: $pageSize\n search: $inputText\n filter: $filters\n sort: $sort\n ) {\n search_redirect\n total_count\n search_suggestions {\n search\n num_results\n type\n }\n }\n }\n"])))
11var x,C,y=t("T1X5"),w=t("lSNA"),v=t.n(w),z=t("0kCZ"),B=t("9/5/"),k=t.n(B),O=t("ZI9b"),I=t("+tb1"),j=t("+tay"),S=t("NTcL"),F=t("cTCs"),q=t("0tkz") 12function ownKeys(n,e){var t=Object.keys(n) 13if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n) 14e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{} 15e%2?ownKeys(Object(t),!0).forEach(function(e){v()(n,e,t[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))})}return n}const P=n=>{const{isSearchOpen:e,setIsAutoCompleteOpen:t}=n,o=Object(i.useRef)(),[a,s]=Object(i.useState)(!1),{value:A}=Object(z.a)("search_query"),l=Object(r.o)(),_=Object(c.g)(),m=Object(i.useCallback)(()=>{l.reset()},[l]),u=Object(i.useCallback)(()=>{l.setValue("search_query",""),o.current&&o.current.focus()},[l]) 16Object(i.useEffect)(()=>{e&&o.current&&o.current.focus()},[e]),Object(i.useEffect)(()=>{_.location.search.includes("query=")||m()},[_.location]) 17const{getDeliveryTimeInfo:g,mapStatusToInfo:b}=Object(q.a)(),[{deliveryPreferences:E}]=Object(p.b)(),{storeLocatorStoreList:x}=Object(S.a)(),[C]=Object(I.b)(),[{rootCategoryId:y}]=Object(j.b)(),w=Object(F.a)(x,E),v=E?{delivery_type:E.delivery_type,zip_code:E.zip_code,pickup_store:E.pickup_store}:null,[B,{data:P,loading:D}]=Object(d.a)(N,{fetchPolicy:"cache-and-network",onCompleted:n=>
17{s(!1),(n=>{const e=h()(n,"indexedProducts.items",null),t=h()(n,"indexedProducts.search_suggestions",null) 18let o=e 19null!=C&&C.isSignedIn&&e&&(o=e.map(n=>{const{status:e,message:t}=g(1,n.delivery_time,n.inventory_unit),o=b(e,t) 20return _objectSpread(_objectSpread({},n),o)})),f.a.search(Object(O.a)({s:"Search results for: %1",r:[A]}),A,null==t?void 0:t.map(n=>n.search)),f.a.itemlist({id:"search_".concat(A),name:"Search - ".concat(A)},o,{type:E?E.delivery_type:void 0,location:w},y)})(n)}}),T=Object(i.useMemo)(()=>h()(P,"indexedProducts.items",null),[P]),V=Object(i.useMemo)(()=>h()(P,"indexedProducts.search_suggestions",null),[P]),M=Object(i.useMemo)(()=>h()(P,"indexedProducts.total_count",null),[P]),R=Object(i.useCallback)(k()(n=>{B({variables:{currentPage:1,inputText:n,pageSize:3,filters:{},sort:{populariteit:"DESC"},deliveryTime:v,inStock:!1}})},1e3),[]),$=k()(n=>{const e=!!n,o=e&&n.length>1 21t(e),o&&(s(!0),R(n))},500) 22return{clearSearch:u,count:M,loading:D||a,inputRef:o,items:T,onValueChange:$,resetForm:m,suggestions:V,value:A}},N=Object(m.d)(x||(x=l()(["\n query ProductSearchInHeader(\n $currentPage: Int = 1\n $inputText: String!\n $pageSize: Int = 6\n $filters: ProductAttributeFilterInput!\n $sort: ProductAttributeSortInput\n ) {\n indexedProducts(\n currentPage: $currentPage\n pageSize: $pageSize\n search: $inputText\n filter: $filters\n sort: $sort\n ) {\n items {\n id\n name\n sku\n cdn_product_image\n url_key\n merk_com_text\n categories {\n id\n name\n breadcrumbs {\n category_id\n category_name\n }\n }\n }\n search_suggestions {\n search\n num_results\n type\n }\n total_count\n }\n }\n"]))) 23Object(m.d)(C||(C=l()(["\n query ProductSearchRedirectInHeader(\n $currentPage: Int = 1\n $inputText: String!\n $pageSize: Int = 6\n $filters: ProductAttributeFilterInput!\n $sort: ProductAttributeSortInput\n ) {\n indexedProducts(\n currentPage: $currentPage\n pageSize: $pageSize\n search: $inputText\n filter: $filters\n sort: $sort\n ) {\n search_redirect\n }\n }\n"]))) 24var D=t("anTo"),T=t("4Wgn"),V=t("oV75"),M=t("LboF"),R=t.n(M),$=t("8ZjK"),J={insert:"head",singleton:!1},W=(R()($.a,J),$.a.locals||{}),L=t("PkP7"),K=t("qNO5"),H=t("/2PA"),U=t("i8i4"),X=t("bUnI"),G=t("MRWl"),Q=t("KGTq") 25const Z=a.a.lazy(()=>Promise.all([t.e(0),t.e(45)]).then(t.bind(null,"rBiN"))),Y=n=>{const e=Object(y.a)(W,n.classes),t=a.a.createElement("svg",{className:e.scanIcon,viewBox:"0 0 1024 1028",width:"24px",height:"24px",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg"},a.a.createElement("path",{d:"M80 759H20v134q0 20 14 34t34 14h133v-61H80V759zm851 121H810v60h134q20 0 34-14t14-34V759h-61v121zm13-796H810v60h121v121h61V131q0-19-14-33t-34-14zM80 144h121V84H67q-20 0-34 14t-14 34v134h61V144zM20 602h972v32H20v-32zm128-357v345h88V245q0-7-4.5-11.5T220 229h-56q-7 0-11.5 4.5T148 245zm0 534q0 7 4.5 11.5T164 795h56q7 0 11.5-4.5T236 779V645h-88v134zm512 0q0 7 5 11.5t11 4.5h57q6 0 11-4.5t5-11.5V645h-89v134zm89-534q0-7-5-11.5t-11-4.5h-57q-6 0-11 4.5t-5 11.5v345h89V245zm-398 0q0-7-5-11.5t-11-4.5h-30q-6 0-11 4.5t-5 11.5v345h62V245zm-62 534q0 7 5 11.5t11 4.5h30q6 0 11-4.5t5-11.5V645h-62v134zm257 0q0 7 4.5 11.5T562 795h29q7 0 11.5-4.5T607 779V645h-61v134zm61-534q0-7-4.5-11.5T591 229h-29q-7 0-11.5 4.5T546 245v345h61V245zm257 0q0-7-4.5-11.5T848 229h-30q-7 0-11.5 4.5T802 245v345h62V245zm-16 550q7 0 11.5-4.5T864 779V645h-62v134q0 7 4.5 11.5T818 795h30zM513 245q0-7-4.5-11.5T497 229h-97q-7 0-11.5 4.5T384 245v345h130l-1-345zM384 779q0 7 4.5 11.5T400 795h98q7 0 11.5-4.5T514 779V645H384v134z"})),[o,s]=Object(i.useState)(!1),{isSearchOpen:A,onFocus:l,handleSubmit:_,isAutoCompleteOpen:d,setIsAutoCompleteOpen:m,handleBlur:p,redirectIsLoading:u}=n,{clearSearch:h,count:g,loading:b,inputRef:E,items:x,onValueChange:C,resetForm:w,suggestions:v,value:z}=P({isSearchOpen:A,setIsAutoCompleteOpen:m}),B=Object(r.m)("search_query"),[,{setModalIsOpen:k}]=Object(j.b)(),I=Object(c.g)(),S=new URLSearchParams(I.location.search),F=S?S.get("query"):"" 26Object(i.useEffect)(()=>{p(),E.current.blur()},[I.location.search]) 27const q=n=>{s(!1),B.setValue(n),_({search_query:n})},N=(()=>Object(D.c)()||"BarcodeDetector"in globalThis)()?a.a.createElement(V.a,{action:()=>void(Object(D.c)()?(window.document.dispatchEvent(new CustomEvent("native",{bubbles:!0,detail:{type:"barcodescanner"}})),window.addEventListener("app",n=>{"search"===n.detail.type&&n.detail.data.searchparam&&q(n.detail.data.searchparam)},{once:!0})):s(!0))},t):null,M=z&&d?a.a.createElement(V.a,{action:h},a.a.createElement("span",{className:e.clearInput})):null,R=d?a.a.createElement(V.a,{action:()=>{w(),p()}},a.a.createElement("span",{className:e.closeIcon})):null,$=a.a.createElement(V.a,{action:()=>sn(z),disabled:u},a.a.createElement("span",{className:e.searchIcon})),J=u?a.a.createElement("span",{className:G.a.loadingDots}):null,Y=a.a.createElement(a.a.Fragment,null,J,M,N,z?null:$),nn=z?a.a.createElement(a.a.Fragment,null,$):null 28Object(i.useEffect)(()=>{!d&&z&&w()},[d,z,w]),Object(i.useEffect)(()=>{k(d)},[d,k]) 29const en=Boolean(d&&z&&z.length>1&&z!==F),tn=Object(i.useRef)(null),[on,an]=Object(i.useState)(null) 30Object(i.useEffect)(()=>
30{if(!en)return 31const n=()=>{if(!tn.current)return 32const{top:n}=tn.current.getBoundingClientRect(),e=window.innerHeight-n-16 33an(Math.max(0,e))} 34return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[en]) 35const sn=Object(i.useCallback)(async n=>{E.current.blur(),await _({search_query:n}),p(),w()},[_,w,p,E]),rn=(n,e)=>{const t=new RegExp("(".concat(e,")"),"gi") 36let o=n 37if(n.match(t)){o=n.split(t).map((n,e)=>n.match(t)?a.a.createElement("strong",{key:"part-".concat(e)},n):n).concat("")}return o} 38return a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:e.container},a.a.createElement(T.a,{after:Y,before:nn,field:"search_query",initialValue:F,onFocus:l,onValueChange:C,forwardedRef:E,placeholder:Object(O.a)({s:"Search by name, brand, item no."})}),z&&d?a.a.createElement(L.g,{cssClass:"quartiary",disabled:u,onClick:()=>sn(z)},Object(O.a)({s:"Search"})):null,R),o&&Object(U.createPortal)(a.a.createElement(i.Suspense,null,a.a.createElement(Z,{onDetect:q,onClose:()=>s(!1)})),document.getElementById("root")),en?a.a.createElement("div",{ref:tn,className:e.results__container,style:on?{maxHeight:"".concat(on,"px")}:void 0},b?a.a.createElement(K.a,null,Object(O.a)({s:"Loading..."})):a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:e.results__scroll},a.a.createElement("div",{className:e.suggestions},a.a.createElement("p",{className:e.title},Object(O.a)({s:"Suggestions"}),": "),a.a.createElement("div",{className:e.suggestions__list},v&&v.length>0?v.map((n,t)=>{let{search:o,num_results:s}=n 39return a.a.createElement(i.Fragment,{key:"suggestion-".concat(t)},a.a.createElement(L.g,{type:L.d,className:e.suggestions__item,url:"/search?query=".concat(encodeURIComponent(o)),text:rn(o,z),title:o,onClick:()=>{f.a.search_suggestion(o,t,z),f.a.search_action(o,s,o)}}),t+1<v.length?a.a.createElement("br",null):null)}):a.a.createElement("p",null,Object(O.a)({s:"No results found"})))),a.a.createElement("div",{className:e.products},a.a.createElement("p",{className:e.title},Object(O.a)({s:"Products"}),": "),a.a.createElement("div",{className:e.products__list},x&&x.length>0?x.map((n,t)=>a.a.createElement("a",{href:"/".concat(n.url_key),key:"product-".concat(t),className:e.products__item},a.a.createElement(H.a,{alt:n.name,width:50,height:50,srcsetWidths:[50,100],resource:n.cdn_product_image,classes:{root:e.productImage}}),a.a.createElement("div",{className:e.products__item__info},a.a.createElement("strong",null,n.name),Object(X.b)(n)?a.a.createElement("p",{className:e.variants},Object(O.a)({s:"Available in multiple variants"})):a.a.createElement(Q.a,{data:[{[Object(O.a)({s:"SKU"})]:n.sku}]})))):a.a.createElement("p",null,Object(O.a)({s:"No results found"}))))),a.a.createElement("div",{className:e.actions},a.a.createElement(L.g,{onClick:()=>sn(z),cssClass:"primary"},Object(O.a)({s:"View %1 %2",r:[g,Object(O.a)({s:1===g?"result":"results"})]}))))):null)} 40var nn=Y 41Y.propTypes={onChange:s.func,onFocus:s.func,handleBlur:s.func,handleSubmit:s.func,isSearchOpen:s.bool,classes:Object(s.shape)({}),isAutoCompleteOpen:s.bool,setIsAutoCompleteOpen:s.func,redirectIsLoading:s.bool} 42var en=t("niNh"),tn={insert:"head",singleton:!1},on=(R()(en.a,tn),en.a.locals||{}),an=t("Alye"),sn=t("RdMJ"),rn=t("5Juy"),An=t("X7BR"),ln=t("ggSw") 43const cn=a.a.forwardRef((n,e)=>{const{isOpen:t}=n,o=(()=>{const[n,e]=Object(i.useState)(!1),[t,o]=Object(i.useState)(!1),{elementRef:a,expanded:s,setExpanded:r}=Object(_.a)(),A=Object(c.g)(),{push:l}=A,m=A.location.search.includes("query=")?A.location.search.split("&")[0].replace("?query=","").replace(/%20|\+/g," ").replace(/[^a-zA-Z0-9\s]/g,""):"",u=s&&!m||t,[{deliveryPreferences:x}]=Object(p.b)(),[C,{loading:y}]=Object(d.a)(E) 44return{containerRef:a,handleChange:Object(i.useCallback)(n=>{const t=!!n,o=t&&n.length>1 45e(o),r(t)},[r,e]),handleFocus:Object(i.useCallback)(()=>{r(!0),o(!0)},[r]),handleBlur:Object(i.useCallback)(()=>{r(!1),o(!1)},[r]),handleSubmit:Object(i.useCallback)(async n=>{let{search_query:e}=n 46const t={fetchPolicy:"cache-and-network",variables:{currentPage:1,inputText:e,pageSize:3,f
46ilters:{},sort:{populariteit:"DESC"},deliveryTime:x?{delivery_type:x.delivery_type,zip_code:x.zip_code,pickup_store:x.pickup_store}:null,inStock:!1}},{data:o}=await C(t),i=h()(o,"indexedProducts.total_count",0),a=h()(o,"indexedProducts.search_suggestions",null) 47f.a.search_action(e,i,a?a.map(n=>n.search):null) 48const s=h()(o,"indexedProducts.search_redirect",null) 49if(s){const n=Object(g.b)(s)?Object(g.c)(s):s 50Object(g.a)(n)?window.location.href=n:l(n)}else!y&&!s&&null!=e&&e.trim().length>0&&l("/search?query=".concat(encodeURIComponent(e))) 51r(!1)},[l,r]),initialValues:b,isAutoCompleteOpen:u,redirectIsLoading:y,setIsAutoCompleteOpen:r,setValid:e,valid:n}})(),{containerRef:s,handleChange:A,handleFocus:l,handleBlur:m,handleSubmit:u,initialValues:x,isAutoCompleteOpen:C,redirectIsLoading:w,setIsAutoCompleteOpen:v}=o,z=Object(y.a)(on,n.classes),B=C?z.root_open:z.root,[,{setShouldShowStickyFooter:k}]=Object(j.b)(),O=Object(rn.b)().innerWidth<=An.d 52return Object(sn.a)(e,()=>m()),Object(i.useEffect)(()=>{k(!t&&!C||!O)},[C,t,O,k]),Object(i.useEffect)(()=>{const n=C||t 53return n&&Object(ln.b)(),()=>{n&&Object(ln.a)()}},[C,t]),a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:B,ref:e},a.a.createElement("div",{ref:s,className:z.container},a.a.createElement(r.d,{autoComplete:"off",className:z.form,initialValues:x,onSubmit:u},a.a.createElement("div",{className:z.search},a.a.createElement(nn,{redirectIsLoading:w,handleSubmit:u,isSearchOpen:t,onChange:A,onFocus:l,handleBlur:m,isAutoCompleteOpen:C,setIsAutoCompleteOpen:v}))))),a.a.createElement(an.a,{isActive:C}))}) 54cn.displayName="SearchBar" 55var _n=cn 56cn.propTypes={classes:Object(s.shape)({autocomplete:s.string,container:s.string,form:s.string,root:s.string,root_open:s.string,
56search:s.string}),isOpen:s.bool}},niNh:function(n,e,t){"use strict" 57var o=t("denP"),i=t.n(o),a=t("JPst"),s=t.n(a)()(i.a) 58s.push([n.i,"@media only screen and (max-width: 767px ) {\n}@media only screen and (max-width: 767px ) {\n}@media only screen and (max-width: 767px ) {\n}@media only screen and (max-width: 767px ) {\n}.root__9CzpD {\n align-items: center;\n justify-items: center;\n width: 100%;\n display: block;\n padding: 0;\n}\n.form__OMMzq {\n align-items: center;\n display: grid;\n justify-items: stretch;\n width: 100%;\n}\n.container__KmXXq {\n align-items: center;\n display: inline-flex;\n justify-content: center;\n position: relative;\n width: 100%;\n max-width: 100%;\n padding-bottom: 0;\n}\n.container__KmXXq form input[name='search_query'] {\n transition: 0.2s all;\n background: #fff;\n border: 1px solid #838383;\n border-radius: 3px;\n color: #000;\n height: 40px;\n padding: 0 40px 0 16px;\n width: 100%;\n}\n.container__KmXXq form input[name='search_query']:not([value='']) {\n padding: 0 56px 0 40px;\n}\n.container__KmXXq form input[name='search_query']:focus {\n box-shadow: none;\n color: #000;\n border-color: var(--theme-color-primary);\n}\n.container__KmXXq form div span:nth-of-type(3) {\n display: grid;\n grid-auto-flow: column;\n gap: 6px;\n width: inherit;\n padding-right: 10px;\n}\n.root_open__cuDmM {\n display: grid;\n z-index: 3;\n background-color: #f7f7f7;\n padding: 16px;\n position: absolute;\n top: -34px;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.root_open__cuDmM .container__KmXXq form input[name='search_query'] {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.root_open__cuDmM .container__KmXXq form button[type='submit']:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.search__yWh8x {\n display: grid;\n position: relative;\n}\n.autocomplete__Vuo8t {\n display: grid;\n position: relative;\n z-index: 1;\n}\n@media only screen and (max-width: 1023px ) {\n .root__9CzpD {\n margin-top: 16px;\n }\n .root_open__cuDmM {\n top: 50px;\n left: 0;\n right: 0;\n width: 100%;\n }\n}\n@media only screen and (min-width: 1024px) and (max-width: 1439px ) {\n .root_open__cuDmM {\n left: 0;\n right: 0;\n width: 100%;\n }\n}\n","",{version:3,sources:["webpack://./src/web/typography.less","webpack://./src/pwastudio/@magento/venia-ui/lib/components/SearchBar/searchBar.less"],names:[],mappings:"AA8EE;AC7EF,CDuFE;ACtFF,CD4EE;AC3EF,CDqFE;ACpFF,CAFA;EAEE,mBAAA;EACA,qBAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;AAGF;AAAA;EACE,mBAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;AAEF;AACA;EACE,mBAAA;EACA,oBAAA;EACA,uBAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;AACF;AARA;EAWM,oBAAA;EACA,gBAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,WAAA;AAAN;AAEM;EACE,sBAAA;AAAR;AAGM;EACE,gBAAA;EACA,WAAA;EACA,wCAAA;AADR;AA1BA;EAgCQ,aAAA;EACA,sBAAA;EACA,QAAA;EACA,cAAA;EACA,mBAAA;AAHR;AASA;EAEE,aAAA;EACA,UAAA;EACA,yBAAA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;EACA,8BAAA;EACA,+BAAA;AAPF;AAFA;EAcQ,0BAAA;EACA,6BAAA;AATR;AANA;EAmBQ,yBAAA;EACA,4BAAA;AAVR;AAgBA;EACE,aAAA;EACA,kBAAA;AAdF;AAiBA;EACE,aAAA;EACA,kBAAA;EACA,UAAA;AAfF;AAkBA;EACE;IACE,gBAAA;EAhBF;EAmBA;IACE,SAAA;IACA,OAAA;IACA,QAAA;IACA,WAAA;EAjBF;AACF;AA2BA;EACE;IACE,OAAA;IACA,QAAA;IACA,WAAA;EAzBF;AACF",sourcesContent:["@import './theme.less';\n\n@font-family__sans-serif: Sans-Serif;\n\n@font-family-name__base: FrutigerRoman;\n@font-family-name__light: FrutigerLight;\n@font-family-name__bold: FrutigerBlack;\n\n@font-family__base: @font-family-name__base, @font-family__sans-serif;\n@font-family__light: @font-family-name__light, @font-family__sans-serif;\n@font-family__bold: @font-family-name__bold, @font-family__sans-serif;\n\n@font-size__6xl: 28px;\n@font-size__5xl: 26px;\n@font-size__4xl: 24px;\n@font-size__3xl: 22px;\n@font-size__2xl: 20px;\n@font-size__xl: 18px;\n@font-size__l: 16px;\n@font-size__m: 14px;\n@font-size__base: @font-size__m;\n@font-size__s: 12px;\n@font-size__xs: 10px;\n@font-size__xxs: 8px;\n\n// [MOBILE] base font size â drives the mobile type scale via inheritance from body\n@font-size__base__mobile: 11px;\n\n@font-weight__bold: 700;\n@font-weight__regular: 400;\n@font-weight__light: 300;\n\n@line-height__default: 1.5;\n\n.line-height(@heightValue)\n when\n not\n (@heightValue = false)\n and\n not\n (@heightValue = normal)\n and\n not\n (ispercentage(@heightValue)) {\n .font-size-value(@heightValue);\n line-height: @fontValue;\n}\n\n.font-size-value(@_value) when not (@_value = false) and not (@_value = '') {\n // Exact-pixel output: emit the design token verbatim as px. No rem/ratio, so\n // sizes are never re-interpreted against the device/user root font-size.\n @fontValue: unit((@_value) * 1, px);\n}\n\nhtml,\nbody {\n font-size: @font-size__base;\n // Single source of truth for body copy. Elements with NO font-size of their\n // own inherit this, so they shift 14px -> 11px on mobile for free. Elements\n // that set an explicit size are exact px and do NOT auto-shrink â to make one\n // responsive, drop its declaration so it inherits.\n @media @mobileM {\n font-size: @font-size__base__mobile;\n }\n}\n\nh1,\nh2,\nh4,\nh5,\nh6 {\n font-weight: @font-weight__bold;\n margin: @spacing__base 0;\n}\n\nh1 {\n font-size: @font-size__6xl;\n .line-height(@font-size__6xl);\n @media @mobileM {\n font-size: @font-size__4xl;\n .line-height(@font-size__4xl);\n }\n}\n\nh2,\nh3 {\n font-size: @font-size__3xl;\n .line-height(@font-size__4xl);\n @media @mobileM {\n font-size: @font-size__xl;\n .line-height(@font-size__2xl);\n }\n}\n\nh3 {\n margin: @spacing__base 0;\n font-weight: @font-weight__regular;
58\n}\n\nh4,\nh5,\nh6 {\n font-size: inherit;\n}\n\n[class^='font-size__l'] {\n font-size: @font-size__l;\n}\n","@import (reference) 'src/web/theme.less';\n\n.root {\n composes: justify-self-center from global;\n align-items: center;\n justify-items: center;\n width: 100%;\n display: block;\n padding: 0;\n}\n\n.form {\n align-items: center;\n display: grid;\n justify-items: stretch;\n width: 100%;\n}\n\n.container {\n align-items: center;\n display: inline-flex;\n justify-content: center;\n position: relative;\n width: 100%;\n max-width: 100%;\n padding-bottom: 0;\n\n form {\n input[name='search_query'] {\n transition: 0.2s all;\n background: @color__white;\n border: 1px solid @color__gray-medium-2;\n border-radius: @border-radius__default;\n color: @color__black;\n height: 40px;\n padding: 0 @spacing__l 0 @spacing__sm;\n width: 100%;\n\n &:not([value='']) {\n padding: 0 @spacing__2xl 0 @spacing__l;\n }\n\n &:focus {\n box-shadow: none;\n color: @color__black;\n border-color: @color__primary;\n }\n }\n div {\n span:nth-of-type(3) {\n display: grid;\n grid-auto-flow: column;\n gap: 6px;\n width: inherit;\n padding-right: 10px;\n }\n }\n }\n}\n\n.root_open {\n composes: root;\n display: grid;\n z-index: 3;\n background-color: @color__gray-light-2;\n padding: @spacing__sm;\n position: absolute;\n top: -34px;\n border-bottom-left-radius: @border-radius__medium;\n border-bottom-right-radius: @border-radius__medium;\n\n .container {\n form {\n input[name='search_query'] {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n button[type='submit']:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n }\n}\n\n.search {\n display: grid;\n position: relative;\n}\n\n.autocomplete {\n display: grid;\n position: relative;\n z-index: 1;\n}\n\n@media @bp-tablet-and-below {\n .root {\n margin-top: @spacing__sm;\n }\n\n .root_open {\n top: 50px;\n left: 0;\n right: 0;\n width: 100%;\n }\n}\n\n// Ticket's \"tablet\" (1024-1439px, @bp-desktop) keeps the normal top-row\n// search input position (unlike @bp-tablet-and-below, which moves it below\n// the row) â only the expanded/focused autocomplete panel goes full-width.\n// top deliberately isn't touched here: .root_open wraps the input row and\n// the dropdown together, and overriding top: 50px (copied from the\n// tablet-and-below block above) moved the *input* down with it, not just\n// the dropdown â the base rule's top: -34px already keeps it in place.\n@media @bp-desktop {\n .root_open {\n left: 0;\n right: 0;\n width: 100%;\n }\n}\n"],sourceRoot:""}]),s.locals={root:"root__9CzpD justify-self-center",form:"form__OMMzq",container:"container__KmXXq",root_open:"root_open__cuDmM root__9CzpD justify-self-center",search:"search__yWh8x",autocomplete:"autocomplete__Vuo8t"},e.a=s}}])
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.