@dropins/storefront-product-discovery 2.0.0-alpha005 → 2.0.0-alpha006

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- import{jsxs as Z,jsx as n}from"@dropins/tools/preact-jsx-runtime.js";import*as d from"@dropins/tools/preact-compat.js";import{useState as v,useEffect as q}from"@dropins/tools/preact-compat.js";import{VComponent as W,classes as G,Slot as g}from"@dropins/tools/lib.js";import{events as y}from"@dropins/tools/event-bus.js";import{InLineAlert as J,Icon as K,ProductItemCard as L,PriceRange as S,Image as Q}from"@dropins/tools/components.js";/* empty css */import{s as X,c as Y,a as $,S as ee,P as re}from"../chunks/acdlEvents.js";import{useText as ne}from"@dropins/tools/i18n.js";const E=a=>new DOMParser().parseFromString(a,"text/html").documentElement.textContent,R=({productList:a,header:o,footer:r,imageWidth:h,imageHeight:f})=>Z("div",{className:"product-discovery-product-list",style:{"--imageWidth":h,"--imageHeight":f},children:[o&&n("div",{className:"product-discovery-product-list__header",children:o}),n("div",{className:"product-discovery-product-list__grid",children:a&&n(W,{node:a})}),r&&n("div",{className:"product-discovery-product-list__footer",children:r})]}),te=a=>d.createElement("svg",{id:"Icon_Warning_Base",width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...a},d.createElement("g",{clipPath:"url(#clip0_841_1324)"},d.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M11.9949 2.30237L0.802734 21.6977H23.1977L11.9949 2.30237Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"}),d.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M12.4336 10.5504L12.3373 14.4766H11.6632L11.5669 10.5504V9.51273H12.4336V10.5504ZM11.5883 18.2636V17.2687H12.4229V18.2636H11.5883Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"})),d.createElement("defs",null,d.createElement("clipPath",{id:"clip0_841_1324"},d.createElement("rect",{width:24,height:21,fill:"white",transform:"translate(0 1.5)"})))),ae=({alertMessage:a=""})=>n("div",{className:G(["product-discovery-search-alert-message__wrapper"]),children:n("div",{className:"product-discovery-search-alert-message__content",children:n(J,{heading:a,type:"warning",icon:n(K,{source:te,size:"24"}),onDismiss:void 0})})}),he=({routeProduct:a,scope:o,slots:r,imageWidth:h=400,imageHeight:f=450,skeletonCount:A=8,onSearchResult:_})=>{const x=o==="popover"?ee:re,I=ne({noResults:"Search.PLP.Warning.noResults",searchError:"Search.PLP.Warning.searchError"}),[u,V]=v(null),[k,H]=v([]),[D,M]=v(!1),[P,N]=v(null);q(()=>{const e=y.on("search/loading",M,{eager:!0,scope:o}),t=y.on("search/error",()=>{N(I.searchError)},{eager:!0,scope:o}),i=y.on("search/result",c=>{var m,s,l;N(((m=c.result)==null?void 0:m.items.length)<1?I.noResults:null),V(c.request),H((s=c.result)==null?void 0:s.items),_==null||_((l=c.result)==null?void 0:l.items),c.request.phrase?X(x):Y(x)},{eager:!0,scope:o});return()=>{e==null||e.off(),t==null||t.off(),i==null||i.off()}},[]);const w=e=>{$(e.sku,x)},b=(e,t)=>{var s,l,p,C;const i={loading:t<8?"eager":"lazy",src:((l=(s=e.images)==null?void 0:s[0])==null?void 0:l.url)||"",alt:((C=(p=e.images)==null?void 0:p[0])==null?void 0:C.label)||"",width:h,height:f,params:{width:h}},c=e.name!==null?E(e.name):e.sku,m=n(Q,{class:"product-discovery-product-item__image",...i,"aria-label":c});return n(g,{name:"ProductImage",slot:r==null?void 0:r.ProductImage,context:{product:e,defaultImageProps:i,variables:u},children:a?n("a",{href:a(e),onClick:()=>w(e),children:m}):m})},j=e=>{const t=e.name!==null?E(e.name):"";return n(g,{name:"ProductName",slot:r==null?void 0:r.ProductName,context:{product:e,variables:u},children:a?n("a",{href:a(e),onClick:()=>w(e),children:t}):t})},z=e=>{var c,m,s,l,p;let t=e.typename==="ComplexProductView"?(c=e.priceRange)==null?void 0:c.minimum.regular.amount.currency:(m=e.price)==null?void 0:m.regular.amount.currency;Intl.supportedValuesOf("currency").indexOf(t||"")===-1&&(t="USD");const i=e.typename==="ComplexProductView"?n(S,{display:"from to",minimumAmount:(s=e.priceRange)==null?void 0:s.minimum.regular.amount.value,maximumAmount:(l=e.priceRange)==null?void 0:l.maximum.regular.amount.value,currency:t}):n(S,{amount:(p=e.price)==null?void 0:p.regular.amount.value,currency:t});return n(g,{name:"ProductPrice",slot:r==null?void 0:r.ProductPrice,context:{product:e,variables:u},children:a?n("a",{href:a(e),onClick:()=>w(e),children:i}):i})},F=e=>n(g,{name:"ProductActions",slot:r==null?void 0:r.ProductActions,context:{product:e,variables:u}}),U=()=>n(g,{name:"NoResults",slot:r==null?void 0:r.NoResults,context:{error:P,variables:u},children:P&&n(ae,{alertMessage:P})}),B=()=>n(R,{imageWidth:h,imageHeight:f,productList:Array.from({length:A}).map((e,t)=>n(L,{initialized:!1},t))}),O=()=>n(g,{name:"Header",slot:r==null?void 0:r.Header,context:{products:k,variables:u}}),T=()=>n(g,{name:"Footer",slot:r==null?void 0:r.Footer,context:{products:k,variables:u}});return n("div",{children:D?B():P?U():n(R,{header:O(),footer:T(),imageWidth:h,imageHeight:f,productList:k.map((e,t)=>n(L,{image:b(e,t),titleNode:j(e),price:z(e),actionButton:r!=null&&r.ProductActions?F(e):void 0,initialized:!0},e.id||e.sku||t))})})};export{he as SearchResults,he as default};
3
+ import{jsxs as Z,jsx as n}from"@dropins/tools/preact-jsx-runtime.js";import*as d from"@dropins/tools/preact-compat.js";import{useState as v,useEffect as q}from"@dropins/tools/preact-compat.js";import{VComponent as W,classes as G,Slot as h}from"@dropins/tools/lib.js";import{events as y}from"@dropins/tools/event-bus.js";import{InLineAlert as J,Icon as K,ProductItemCard as k,PriceRange as R,Image as Q}from"@dropins/tools/components.js";/* empty css */import{s as X,c as Y,a as $,S as ee,P as re}from"../chunks/acdlEvents.js";import{useText as ne}from"@dropins/tools/i18n.js";const S=a=>new DOMParser().parseFromString(a,"text/html").documentElement.textContent,C=({productList:a,header:s,footer:r,imageWidth:g,imageHeight:f})=>Z("div",{className:"product-discovery-product-list",style:{"--imageWidth":g,"--imageHeight":f},children:[s&&n("div",{className:"product-discovery-product-list__header",children:s}),n("div",{className:"product-discovery-product-list__grid",children:a&&n(W,{node:a})}),r&&n("div",{className:"product-discovery-product-list__footer",children:r})]}),te=a=>d.createElement("svg",{id:"Icon_Warning_Base",width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...a},d.createElement("g",{clipPath:"url(#clip0_841_1324)"},d.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M11.9949 2.30237L0.802734 21.6977H23.1977L11.9949 2.30237Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"}),d.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M12.4336 10.5504L12.3373 14.4766H11.6632L11.5669 10.5504V9.51273H12.4336V10.5504ZM11.5883 18.2636V17.2687H12.4229V18.2636H11.5883Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"})),d.createElement("defs",null,d.createElement("clipPath",{id:"clip0_841_1324"},d.createElement("rect",{width:24,height:21,fill:"white",transform:"translate(0 1.5)"})))),ae=({alertMessage:a=""})=>n("div",{className:G(["product-discovery-search-alert-message__wrapper"]),children:n("div",{className:"product-discovery-search-alert-message__content",children:n(J,{heading:a,type:"warning",icon:n(K,{source:te,size:"24"}),onDismiss:void 0})})}),ge=({routeProduct:a,scope:s,slots:r,imageWidth:g=400,imageHeight:f=450,skeletonCount:E=8,onSearchResult:_})=>{const w=s==="popover"?ee:re,L=ne({noResults:"Search.PLP.Warning.noResults",searchError:"Search.PLP.Warning.searchError"}),[u,A]=v(null),[x,V]=v([]),[H,U]=v(!1),[P,I]=v(null);q(()=>{const e=y.on("search/loading",U,{eager:!0,scope:s}),t=y.on("search/error",()=>{I(L.searchError)},{eager:!0,scope:s}),c=y.on("search/result",i=>{var o,m,l;I(((o=i.result)==null?void 0:o.items.length)<1?L.noResults:null),A(i.request),V((m=i.result)==null?void 0:m.items),_==null||_((l=i.result)==null?void 0:l.items),i.request.phrase?X(w):Y(w)},{eager:!0,scope:s});return()=>{e==null||e.off(),t==null||t.off(),c==null||c.off()}},[]);const D=(e,t)=>{var m;const c=(m=e.target)==null?void 0:m.closest("a");if(!c||!a)return;const i=new URL(c.href),o=new URL(a(t),window.location.origin);i.pathname===o.pathname&&i.hostname===o.hostname&&$(t.sku,w)},M=(e,t)=>{var m,l,p,N;const c={loading:t<8?"eager":"lazy",src:((l=(m=e.images)==null?void 0:m[0])==null?void 0:l.url)||"",alt:((N=(p=e.images)==null?void 0:p[0])==null?void 0:N.label)||"",width:g,height:f,params:{width:g}},i=e.name!==null?S(e.name):e.sku,o=n(Q,{class:"product-discovery-product-item__image",...c,"aria-label":i||""});return n(h,{name:"ProductImage",slot:r==null?void 0:r.ProductImage,context:{product:e,defaultImageProps:c,variables:u},children:a?n("a",{href:a(e),children:o}):o})},b=e=>{const t=e.name!==null?S(e.name):"";return n(h,{name:"ProductName",slot:r==null?void 0:r.ProductName,context:{product:e,variables:u},children:a?n("a",{href:a(e),children:t}):t})},j=e=>{var i,o,m,l,p;let t=e.typename==="ComplexProductView"?(i=e.priceRange)==null?void 0:i.minimum.regular.amount.currency:(o=e.price)==null?void 0:o.regular.amount.currency;Intl.supportedValuesOf("currency").indexOf(t||"")===-1&&(t="USD");const c=e.typename==="ComplexProductView"?n(R,{display:"from to",minimumAmount:(m=e.priceRange)==null?void 0:m.minimum.regular.amount.value,maximumAmount:(l=e.priceRange)==null?void 0:l.maximum.regular.amount.value,currency:t}):n(R,{amount:(p=e.price)==null?void 0:p.regular.amount.value,currency:t});return n(h,{name:"ProductPrice",slot:r==null?void 0:r.ProductPrice,context:{product:e,variables:u},children:a?n("a",{href:a(e),children:c}):c})},z=e=>n(h,{name:"ProductActions",slot:r==null?void 0:r.ProductActions,context:{product:e,variables:u}}),F=()=>n(h,{name:"NoResults",slot:r==null?void 0:r.NoResults,context:{error:P,variables:u},children:P&&n(ae,{alertMessage:P})}),B=()=>n(C,{imageWidth:g,imageHeight:f,productList:Array.from({length:E}).map((e,t)=>n(k,{initialized:!1},t))}),O=()=>n(h,{name:"Header",slot:r==null?void 0:r.Header,context:{products:x,variables:u}}),T=()=>n(h,{name:"Footer",slot:r==null?void 0:r.Footer,context:{products:x,variables:u}});return n("div",{children:H?B():P?F():n(C,{header:O(),footer:T(),imageWidth:g,imageHeight:f,productList:x.map((e,t)=>n(k,{image:M(e,t),titleNode:b(e),price:j(e),actionButton:r!=null&&r.ProductActions?z(e):void 0,onClick:c=>D(c,e),initialized:!0},e.id||e.sku||t))})})};export{ge as SearchResults,ge as default};
4
4
  //# sourceMappingURL=SearchResults.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchResults.js","sources":["/@dropins/storefront-product-discovery/src/utils/htmlStringDecode.ts","/@dropins/storefront-product-discovery/src/components/ProductList/ProductList.tsx","../../node_modules/@adobe-commerce/elsie/src/icons/Warning.svg","/@dropins/storefront-product-discovery/src/components/SearchAlertMessage/SearchAlertMessage.tsx","/@dropins/storefront-product-discovery/src/containers/SearchResults/SearchResults.tsx"],"sourcesContent":["/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nconst htmlStringDecode = (input: string): string | null => {\n const doc = new DOMParser().parseFromString(input, 'text/html');\n return doc.documentElement.textContent;\n};\n\nexport { htmlStringDecode };\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\nimport '@/plp/components/ProductList/ProductList.css';\n\nexport interface ProductListProps extends HTMLAttributes<HTMLDivElement> {\n productList?: VNode[];\n header?: VNode;\n footer?: VNode;\n imageWidth?: number;\n imageHeight?: number;\n}\n\nexport const ProductList: FunctionComponent<ProductListProps> = ({ productList, header, footer, imageWidth, imageHeight }) => {\n return (\n <div className={'product-discovery-product-list'} style={{ '--imageWidth': imageWidth, '--imageHeight': imageHeight }}>\n {header && <div className=\"product-discovery-product-list__header\">{header}</div>}\n <div className=\"product-discovery-product-list__grid\">{productList && <VComponent node={productList} />}</div>\n {footer && <div className=\"product-discovery-product-list__footer\">{footer}</div>}\n </div>\n );\n};\n","import * as React from \"react\";\nconst SvgWarning = (props) => /* @__PURE__ */ React.createElement(\"svg\", { id: \"Icon_Warning_Base\", width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", ...props }, /* @__PURE__ */ React.createElement(\"g\", { clipPath: \"url(#clip0_841_1324)\" }, /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M11.9949 2.30237L0.802734 21.6977H23.1977L11.9949 2.30237Z\", stroke: \"currentColor\", strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M12.4336 10.5504L12.3373 14.4766H11.6632L11.5669 10.5504V9.51273H12.4336V10.5504ZM11.5883 18.2636V17.2687H12.4229V18.2636H11.5883Z\", stroke: \"currentColor\", strokeLinecap: \"round\", strokeLinejoin: \"round\" })), /* @__PURE__ */ React.createElement(\"defs\", null, /* @__PURE__ */ React.createElement(\"clipPath\", { id: \"clip0_841_1324\" }, /* @__PURE__ */ React.createElement(\"rect\", { width: 24, height: 21, fill: \"white\", transform: \"translate(0 1.5)\" }))));\nexport default SvgWarning;\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport '@/plp/components/SearchAlertMessage/SearchAlertMessage.css';\nimport { Icon, InLineAlert } from '@adobe-commerce/elsie/components';\nimport { Warning } from '@adobe-commerce/elsie/icons';\n\nexport interface SearchAlertMessageProps extends HTMLAttributes<HTMLDivElement> {\n alertMessage?: string;\n}\n\nexport const SearchAlertMessage: FunctionComponent<SearchAlertMessageProps> = ({ alertMessage = '' }) => {\n return (\n <div className={classes(['product-discovery-search-alert-message__wrapper'])}>\n <div className=\"product-discovery-search-alert-message__content\">\n <InLineAlert\n heading={alertMessage}\n type={'warning'}\n icon={<Icon source={Warning} size=\"24\" />}\n onDismiss={undefined}\n />\n </div>\n </div>\n );\n};\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this \n * file in accordance with the terms of the Adobe license agreement \n * accompanying it. \n *******************************************************************/\n\nimport { HTMLAttributes, useEffect, useState } from 'preact/compat';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ImageProps, Image, ProductItemCard, PriceRange } from '@adobe-commerce/elsie/components';\nimport { htmlStringDecode } from '@/plp/utils/htmlStringDecode';\nimport { Scope, SearchVariables } from '@/plp/data/models';\nimport { Product } from '@/plp/data/models/product';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { ProductList, SearchAlertMessage } from '@/plp/components'\nimport {\n searchProductClick,\n searchResultsView,\n categoryResultsView,\n PLP_UNIT_ID,\n SEARCH_UNIT_ID\n} from '@/plp/utils/acdlEvents';\n\ntype SlotDefaultContext = {\n product: Product;\n variables: SearchVariables | null;\n}\n\nexport interface SearchResultsProps extends HTMLAttributes<HTMLDivElement> {\n routeProduct?: (product: Product) => string;\n scope?: Scope;\n imageWidth?: number;\n imageHeight?: number;\n skeletonCount?: number;\n onSearchResult?: (payload: Product[]) => void;\n slots?: {\n ProductActions?: SlotProps<SlotDefaultContext>;\n ProductPrice?: SlotProps<SlotDefaultContext>;\n ProductName?: SlotProps<SlotDefaultContext>;\n ProductImage?: SlotProps<SlotDefaultContext & { defaultImageProps: ImageProps }>;\n NoResults?: SlotProps<{ error: string | null; variables: SearchVariables | null }>;\n Header?: SlotProps<{ products: Product[]; variables: SearchVariables | null }>;\n Footer?: SlotProps<{ products: Product[]; variables: SearchVariables | null }>;\n },\n}\n\nexport const SearchResults: Container<SearchResultsProps> = ({\n routeProduct,\n scope,\n slots,\n imageWidth = 400,\n imageHeight = 450,\n skeletonCount = 8,\n onSearchResult,\n}) => {\n const acdlUnitId = scope === 'popover' ? SEARCH_UNIT_ID : PLP_UNIT_ID;\n\n const labels = useText({\n noResults: 'Search.PLP.Warning.noResults',\n searchError: 'Search.PLP.Warning.searchError',\n });\n\n const [variables, setVariables] = useState<SearchVariables | null>(null);\n const [items, setItems] = useState<any[]>([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n const loadingEvent = events.on('search/loading', setLoading, { eager: true, scope });\n\n const errorEvent = events.on('search/error', () => {\n setError(labels.searchError!);\n }, { eager: true, scope });\n\n const searchEvent = events.on('search/result', (payload) => {\n setError(payload.result?.items.length < 1 ? labels.noResults! : null);\n\n setVariables(payload.request);\n setItems(payload.result?.items);\n onSearchResult?.(payload.result?.items);\n\n // Publish search results view event to ACDL\n if (payload.request.phrase) {\n searchResultsView(acdlUnitId);\n } else {\n categoryResultsView(acdlUnitId);\n }\n }, { eager: true, scope });\n\n return () => {\n loadingEvent?.off();\n errorEvent?.off();\n searchEvent?.off();\n };\n }, []);\n\n const handleProductClick = (product: Product): void => {\n searchProductClick(product.sku, acdlUnitId);\n };\n\n const renderProductImageSlot = (product: Product, index: number) => {\n const defaultImageProps: ImageProps = {\n loading: index < 8 ? 'eager' : 'lazy',\n src: product.images?.[0]?.url || '',\n alt: product.images?.[0]?.label || '',\n width: imageWidth,\n height: imageHeight,\n params: { width: imageWidth },\n };\n const productName = product.name !== null ? htmlStringDecode(product.name) : product.sku;\n const imageComponent = (\n <Image class=\"product-discovery-product-item__image\" {...defaultImageProps} aria-label={productName} />\n );\n\n return (\n <Slot name=\"ProductImage\" slot={slots?.ProductImage} context={{ product, defaultImageProps, variables }}>\n {routeProduct ? (\n <a href={routeProduct(product)} onClick={() => handleProductClick(product)}>\n {imageComponent}\n </a>\n ) : (\n imageComponent\n )}\n </Slot>\n );\n };\n\n const renderProductNameSlot = (product: Product) => {\n const productName = product.name !== null ? htmlStringDecode(product.name) : '';\n return (\n <Slot name=\"ProductName\" slot={slots?.ProductName} context={{ product, variables }}>\n {routeProduct ? (\n <a href={routeProduct(product)} onClick={() => handleProductClick(product)}>\n {productName}\n </a>\n ) : (\n productName\n )}\n </Slot>\n );\n };\n\n const renderProductPriceSlot = (product: Product) => {\n let productCurrency =\n product.typename === 'ComplexProductView'\n ? product.priceRange?.minimum.regular.amount.currency\n : product.price?.regular.amount.currency;\n if (Intl.supportedValuesOf('currency').indexOf(productCurrency || '') === -1) {\n productCurrency = 'USD'; // Fallback to USD if the currency is not supported\n }\n const productPrice =\n product.typename === 'ComplexProductView' ? (\n <PriceRange\n display=\"from to\"\n minimumAmount={product.priceRange?.minimum.regular.amount.value}\n maximumAmount={product.priceRange?.maximum.regular.amount.value}\n currency={productCurrency}\n />\n ) : (\n <PriceRange amount={product.price?.regular.amount.value} currency={productCurrency} />\n );\n return (\n <Slot name=\"ProductPrice\" slot={slots?.ProductPrice} context={{ product, variables }}>\n {routeProduct ? (\n <a href={routeProduct(product)} onClick={() => handleProductClick(product)}>\n {productPrice}\n </a>\n ) : (\n productPrice\n )}\n </Slot>\n );\n };\n\n const renderActionsSlot = (product: Product) => {\n return <Slot name=\"ProductActions\" slot={slots?.ProductActions} context={{ product, variables }} />;\n };\n\n const renderAlertSlot = () => {\n return <Slot name=\"NoResults\" slot={slots?.NoResults} context={{ error, variables }}>\n {error && <SearchAlertMessage alertMessage={error} />}\n </Slot>;\n }\n\n const renderSkeleton = () => {\n return <ProductList\n imageWidth={imageWidth}\n imageHeight={imageHeight}\n productList={Array.from({ length: skeletonCount }).map((_, index) => (\n <ProductItemCard key={index} initialized={false} />\n ))}\n />\n }\n\n const renderHeader = () => {\n return <Slot name=\"Header\" slot={slots?.Header} context={{ products: items, variables }} />;\n }\n\n const renderFooter = () => {\n return <Slot name=\"Footer\" slot={slots?.Footer} context={{ products: items, variables }} />;\n }\n\n const renderResults = () => {\n if (error) return renderAlertSlot();\n\n return <ProductList\n header={renderHeader()}\n footer={renderFooter()}\n imageWidth={imageWidth}\n imageHeight={imageHeight}\n productList={items.map((product, index) => (\n <ProductItemCard key={product.id || product.sku || index}\n image={renderProductImageSlot(product, index)}\n titleNode={renderProductNameSlot(product)}\n price={renderProductPriceSlot(product)}\n actionButton={slots?.ProductActions ? renderActionsSlot(product) : undefined}\n initialized\n />\n ))}\n />\n }\n\n return (\n <div>\n {loading ? renderSkeleton() : renderResults()}\n </div>\n );\n};\n"],"names":["htmlStringDecode","input","ProductList","productList","header","footer","imageWidth","imageHeight","jsxs","jsx","VComponent","SvgWarning","props","React","SearchAlertMessage","alertMessage","classes","InLineAlert","Icon","Warning","SearchResults","routeProduct","scope","slots","skeletonCount","onSearchResult","acdlUnitId","SEARCH_UNIT_ID","PLP_UNIT_ID","labels","useText","variables","setVariables","useState","items","setItems","loading","setLoading","error","setError","useEffect","loadingEvent","events","errorEvent","searchEvent","payload","_a","_b","_c","searchResultsView","categoryResultsView","handleProductClick","product","searchProductClick","renderProductImageSlot","index","defaultImageProps","_d","productName","imageComponent","Image","Slot","renderProductNameSlot","renderProductPriceSlot","productCurrency","productPrice","PriceRange","_e","renderActionsSlot","renderAlertSlot","renderSkeleton","_","ProductItemCard","renderHeader","renderFooter"],"mappings":"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","x_google_ignoreList":[2]}
1
+ {"version":3,"file":"SearchResults.js","sources":["/@dropins/storefront-product-discovery/src/utils/htmlStringDecode.ts","/@dropins/storefront-product-discovery/src/components/ProductList/ProductList.tsx","../../node_modules/@adobe-commerce/elsie/src/icons/Warning.svg","/@dropins/storefront-product-discovery/src/components/SearchAlertMessage/SearchAlertMessage.tsx","/@dropins/storefront-product-discovery/src/containers/SearchResults/SearchResults.tsx"],"sourcesContent":["/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nconst htmlStringDecode = (input: string): string | null => {\n const doc = new DOMParser().parseFromString(input, 'text/html');\n return doc.documentElement.textContent;\n};\n\nexport { htmlStringDecode };\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\nimport '@/plp/components/ProductList/ProductList.css';\n\nexport interface ProductListProps extends HTMLAttributes<HTMLDivElement> {\n productList?: VNode[];\n header?: VNode;\n footer?: VNode;\n imageWidth?: number;\n imageHeight?: number;\n}\n\nexport const ProductList: FunctionComponent<ProductListProps> = ({ productList, header, footer, imageWidth, imageHeight }) => {\n return (\n <div className={'product-discovery-product-list'} style={{ '--imageWidth': imageWidth, '--imageHeight': imageHeight }}>\n {header && <div className=\"product-discovery-product-list__header\">{header}</div>}\n <div className=\"product-discovery-product-list__grid\">{productList && <VComponent node={productList} />}</div>\n {footer && <div className=\"product-discovery-product-list__footer\">{footer}</div>}\n </div>\n );\n};\n","import * as React from \"react\";\nconst SvgWarning = (props) => /* @__PURE__ */ React.createElement(\"svg\", { id: \"Icon_Warning_Base\", width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", ...props }, /* @__PURE__ */ React.createElement(\"g\", { clipPath: \"url(#clip0_841_1324)\" }, /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M11.9949 2.30237L0.802734 21.6977H23.1977L11.9949 2.30237Z\", stroke: \"currentColor\", strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M12.4336 10.5504L12.3373 14.4766H11.6632L11.5669 10.5504V9.51273H12.4336V10.5504ZM11.5883 18.2636V17.2687H12.4229V18.2636H11.5883Z\", stroke: \"currentColor\", strokeLinecap: \"round\", strokeLinejoin: \"round\" })), /* @__PURE__ */ React.createElement(\"defs\", null, /* @__PURE__ */ React.createElement(\"clipPath\", { id: \"clip0_841_1324\" }, /* @__PURE__ */ React.createElement(\"rect\", { width: 24, height: 21, fill: \"white\", transform: \"translate(0 1.5)\" }))));\nexport default SvgWarning;\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport '@/plp/components/SearchAlertMessage/SearchAlertMessage.css';\nimport { Icon, InLineAlert } from '@adobe-commerce/elsie/components';\nimport { Warning } from '@adobe-commerce/elsie/icons';\n\nexport interface SearchAlertMessageProps extends HTMLAttributes<HTMLDivElement> {\n alertMessage?: string;\n}\n\nexport const SearchAlertMessage: FunctionComponent<SearchAlertMessageProps> = ({ alertMessage = '' }) => {\n return (\n <div className={classes(['product-discovery-search-alert-message__wrapper'])}>\n <div className=\"product-discovery-search-alert-message__content\">\n <InLineAlert\n heading={alertMessage}\n type={'warning'}\n icon={<Icon source={Warning} size=\"24\" />}\n onDismiss={undefined}\n />\n </div>\n </div>\n );\n};\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this \n * file in accordance with the terms of the Adobe license agreement \n * accompanying it. \n *******************************************************************/\n\nimport { HTMLAttributes, useEffect, useState } from 'preact/compat';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ImageProps, Image, ProductItemCard, PriceRange } from '@adobe-commerce/elsie/components';\nimport { htmlStringDecode } from '@/plp/utils/htmlStringDecode';\nimport { Scope, SearchVariables } from '@/plp/data/models';\nimport { Product } from '@/plp/data/models/product';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { ProductList, SearchAlertMessage } from '@/plp/components'\nimport {\n searchProductClick,\n searchResultsView,\n categoryResultsView,\n PLP_UNIT_ID,\n SEARCH_UNIT_ID\n} from '@/plp/utils/acdlEvents';\n\ntype SlotDefaultContext = {\n product: Product;\n variables: SearchVariables | null;\n}\n\nexport interface SearchResultsProps extends HTMLAttributes<HTMLDivElement> {\n routeProduct?: (product: Product) => string;\n scope?: Scope;\n imageWidth?: number;\n imageHeight?: number;\n skeletonCount?: number;\n onSearchResult?: (payload: Product[]) => void;\n slots?: {\n ProductActions?: SlotProps<SlotDefaultContext>;\n ProductPrice?: SlotProps<SlotDefaultContext>;\n ProductName?: SlotProps<SlotDefaultContext>;\n ProductImage?: SlotProps<SlotDefaultContext & { defaultImageProps: ImageProps }>;\n NoResults?: SlotProps<{ error: string | null; variables: SearchVariables | null }>;\n Header?: SlotProps<{ products: Product[]; variables: SearchVariables | null }>;\n Footer?: SlotProps<{ products: Product[]; variables: SearchVariables | null }>;\n },\n}\n\nexport const SearchResults: Container<SearchResultsProps> = ({\n routeProduct,\n scope,\n slots,\n imageWidth = 400,\n imageHeight = 450,\n skeletonCount = 8,\n onSearchResult,\n}) => {\n const acdlUnitId = scope === 'popover' ? SEARCH_UNIT_ID : PLP_UNIT_ID;\n\n const labels = useText({\n noResults: 'Search.PLP.Warning.noResults',\n searchError: 'Search.PLP.Warning.searchError',\n });\n\n const [variables, setVariables] = useState<SearchVariables | null>(null);\n const [items, setItems] = useState<any[]>([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n const loadingEvent = events.on('search/loading', setLoading, { eager: true, scope });\n\n const errorEvent = events.on('search/error', () => {\n setError(labels.searchError!);\n }, { eager: true, scope });\n\n const searchEvent = events.on('search/result', (payload) => {\n setError(payload.result?.items.length < 1 ? labels.noResults! : null);\n\n setVariables(payload.request);\n setItems(payload.result?.items);\n onSearchResult?.(payload.result?.items);\n\n // Publish search results view event to ACDL\n if (payload.request.phrase) {\n searchResultsView(acdlUnitId);\n } else {\n categoryResultsView(acdlUnitId);\n }\n }, { eager: true, scope });\n\n return () => {\n loadingEvent?.off();\n errorEvent?.off();\n searchEvent?.off();\n };\n }, []);\n\n const handleProductClick = (event: MouseEvent, product: Product): void => {\n const anchor = (event.target as HTMLElement)?.closest('a');\n\n if (!anchor || !routeProduct) return;\n\n const anchorUrl = new URL(anchor.href);\n const routeUrl = new URL(routeProduct(product), window.location.origin);\n\n // Compare both pathname and hostname to ensure same path under same host\n if (anchorUrl.pathname === routeUrl.pathname && anchorUrl.hostname === routeUrl.hostname) { \n searchProductClick(product.sku, acdlUnitId);\n }\n };\n\n const renderProductImageSlot = (product: Product, index: number) => {\n const defaultImageProps: ImageProps = {\n loading: index < 8 ? 'eager' : 'lazy',\n src: product.images?.[0]?.url || '',\n alt: product.images?.[0]?.label || '',\n width: imageWidth,\n height: imageHeight,\n params: { width: imageWidth },\n };\n const productName = product.name !== null ? htmlStringDecode(product.name) : product.sku;\n const imageComponent = (\n <Image class=\"product-discovery-product-item__image\" {...defaultImageProps} aria-label={productName || ''} />\n );\n\n return (\n <Slot name=\"ProductImage\" slot={slots?.ProductImage} context={{ product, defaultImageProps, variables }}>\n {routeProduct ? (\n <a href={routeProduct(product)}>\n {imageComponent}\n </a>\n ) : (\n imageComponent\n )}\n </Slot>\n );\n };\n\n const renderProductNameSlot = (product: Product) => {\n const productName = product.name !== null ? htmlStringDecode(product.name) : '';\n return (\n <Slot name=\"ProductName\" slot={slots?.ProductName} context={{ product, variables }}>\n {routeProduct ? (\n <a href={routeProduct(product)}>\n {productName}\n </a>\n ) : (\n productName\n )}\n </Slot>\n );\n };\n\n const renderProductPriceSlot = (product: Product) => {\n let productCurrency =\n product.typename === 'ComplexProductView'\n ? product.priceRange?.minimum.regular.amount.currency\n : product.price?.regular.amount.currency;\n if (Intl.supportedValuesOf('currency').indexOf(productCurrency || '') === -1) {\n productCurrency = 'USD'; // Fallback to USD if the currency is not supported\n }\n const productPrice =\n product.typename === 'ComplexProductView' ? (\n <PriceRange\n display=\"from to\"\n minimumAmount={product.priceRange?.minimum.regular.amount.value}\n maximumAmount={product.priceRange?.maximum.regular.amount.value}\n currency={productCurrency}\n />\n ) : (\n <PriceRange amount={product.price?.regular.amount.value} currency={productCurrency} />\n );\n return (\n <Slot name=\"ProductPrice\" slot={slots?.ProductPrice} context={{ product, variables }}>\n {routeProduct ? (\n <a href={routeProduct(product)}>\n {productPrice}\n </a>\n ) : (\n productPrice\n )}\n </Slot>\n );\n };\n\n const renderActionsSlot = (product: Product) => {\n return <Slot name=\"ProductActions\" slot={slots?.ProductActions} context={{ product, variables }} />;\n };\n\n const renderAlertSlot = () => {\n return <Slot name=\"NoResults\" slot={slots?.NoResults} context={{ error, variables }}>\n {error && <SearchAlertMessage alertMessage={error} />}\n </Slot>;\n }\n\n const renderSkeleton = () => {\n return <ProductList\n imageWidth={imageWidth}\n imageHeight={imageHeight}\n productList={Array.from({ length: skeletonCount }).map((_, index) => (\n <ProductItemCard key={index} initialized={false} />\n ))}\n />\n }\n\n const renderHeader = () => {\n return <Slot name=\"Header\" slot={slots?.Header} context={{ products: items, variables }} />;\n }\n\n const renderFooter = () => {\n return <Slot name=\"Footer\" slot={slots?.Footer} context={{ products: items, variables }} />;\n }\n\n const renderResults = () => {\n if (error) return renderAlertSlot();\n\n return <ProductList\n header={renderHeader()}\n footer={renderFooter()}\n imageWidth={imageWidth}\n imageHeight={imageHeight}\n productList={items.map((product, index) => (\n <ProductItemCard key={product.id || product.sku || index}\n image={renderProductImageSlot(product, index)}\n titleNode={renderProductNameSlot(product)}\n price={renderProductPriceSlot(product)}\n actionButton={slots?.ProductActions ? renderActionsSlot(product) : undefined}\n onClick={(event) => handleProductClick(event, product)}\n initialized\n />\n ))}\n />\n }\n\n return (\n <div>\n {loading ? renderSkeleton() : renderResults()}\n </div>\n );\n};\n"],"names":["htmlStringDecode","input","ProductList","productList","header","footer","imageWidth","imageHeight","jsxs","jsx","VComponent","SvgWarning","props","React","SearchAlertMessage","alertMessage","classes","InLineAlert","Icon","Warning","SearchResults","routeProduct","scope","slots","skeletonCount","onSearchResult","acdlUnitId","SEARCH_UNIT_ID","PLP_UNIT_ID","labels","useText","variables","setVariables","useState","items","setItems","loading","setLoading","error","setError","useEffect","loadingEvent","events","errorEvent","searchEvent","payload","_a","_b","_c","searchResultsView","categoryResultsView","handleProductClick","event","product","anchor","anchorUrl","routeUrl","searchProductClick","renderProductImageSlot","index","defaultImageProps","_d","productName","imageComponent","Image","Slot","renderProductNameSlot","renderProductPriceSlot","productCurrency","productPrice","PriceRange","_e","renderActionsSlot","renderAlertSlot","renderSkeleton","_","ProductItemCard","renderHeader","renderFooter"],"mappings":"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","x_google_ignoreList":[2]}
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name": "@dropins/storefront-product-discovery", "version": "2.0.0-alpha005", "@dropins/tools": "1.4.1-alpha007", "license": "SEE LICENSE IN LICENSE.md"}
1
+ {"name": "@dropins/storefront-product-discovery", "version": "2.0.0-alpha006", "@dropins/tools": "1.4.1-alpha007", "license": "SEE LICENSE IN LICENSE.md"}
package/render.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- (function(d,r){try{if(typeof document<"u"){const t=document.createElement("style"),o=r.styleId;for(const e in r.attributes)t.setAttribute(e,r.attributes[e]);t.setAttribute("data-dropin",o),t.appendChild(document.createTextNode(d));const i=document.querySelector('style[data-dropin="sdk"]');if(i)i.after(t);else{const e=document.querySelector('link[rel="stylesheet"], style');e?e.before(t):document.head.append(t)}}}catch(t){console.error("dropin-styles (injectCodeFunction)",t)}})(".product-discovery-product-list{container-type:inline-size;display:flex;flex-direction:column;width:100%}.product-discovery-product-list__container{display:flex;flex-direction:column;width:100%}.product-discovery-product-list__grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-small)}.product-discovery-product-list__grid .dropin-product-item-card{border:unset;margin:unset;width:100%}.product-discovery-product-list__grid .dropin-product-item-card img,.product-discovery-product-list__grid .dropin-product-item-card__skeleton__image{aspect-ratio:var(--imageWidth) / var(--imageHeight);max-height:unset;height:unset}@container (min-width: 600px){.product-discovery-product-list__grid{grid-template-columns:repeat(2,1fr)}}@container (min-width: 900px){.product-discovery-product-list__grid{grid-template-columns:repeat(3,1fr)}}@container (min-width: 1200px){.product-discovery-product-list__grid{grid-template-columns:repeat(4,1fr)}}.product-discovery-search-alert-message__wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:300px}.product-discovery-search-alert-message__content{display:flex;justify-content:center}.product-discovery-facet{padding-block:var(--spacing-small)}.product-discovery-facet:not(.product-discovery-facet--last){border-bottom:1px solid var(--color-neutral-400)}.product-discovery-facet__header{display:block;margin-block-end:var(--spacing-xsmall)}.product-discovery-facet__bucket .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-body-2-default-font)}.product-discovery-facet__bucket .dropin-radio-button__label:before{margin-right:var(--spacing-xsmall)}.product-discovery-facet-list{display:flex;flex-direction:column;width:100%}.product-discovery-facet-list__selected-filters{display:flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--spacing-xxsmall);padding:0 0 var(--spacing-xxsmall) 0}.product-discovery-facet-list__selected-filters button{padding:0 var(--spacing-xxsmall);margin:0 var(--spacing-xxsmall);border-radius:var(--shape-border-radius-2)}.product-discovery-facet-list__selected-filters .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-button-2-font)}.product-discovery-facet-list__facet-options{text-align:left}.product-discovery-facet-list__facet-options button{padding:0}.product-discovery-facet-list__facet-options .dropin-radio-button{padding:var(--spacing-xxsmall) 0}.product-discovery-facet-list__facet-options--hidden{display:none}.product-discovery-facet-list .dropin-divider{margin:var(--spacing-xsmall) 0 var(--spacing-xsmall) 0}",{styleId:"storefront-product-discovery"});
3
+ (function(d,r){try{if(typeof document<"u"){const t=document.createElement("style"),o=r.styleId;for(const e in r.attributes)t.setAttribute(e,r.attributes[e]);t.setAttribute("data-dropin",o),t.appendChild(document.createTextNode(d));const i=document.querySelector('style[data-dropin="sdk"]');if(i)i.after(t);else{const e=document.querySelector('link[rel="stylesheet"], style');e?e.before(t):document.head.append(t)}}}catch(t){console.error("dropin-styles (injectCodeFunction)",t)}})(".product-discovery-product-list{container-type:inline-size;display:flex;flex-direction:column;width:100%}.product-discovery-product-list__container{display:flex;flex-direction:column;width:100%}.product-discovery-product-list__grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-small)}.product-discovery-product-list__grid .dropin-product-item-card{margin:unset;width:100%}.product-discovery-product-list__grid .dropin-product-item-card img,.product-discovery-product-list__grid .dropin-product-item-card__skeleton__image{aspect-ratio:var(--imageWidth) / var(--imageHeight);max-height:unset;height:unset}@container (min-width: 600px){.product-discovery-product-list__grid{grid-template-columns:repeat(2,1fr)}}@container (min-width: 900px){.product-discovery-product-list__grid{grid-template-columns:repeat(3,1fr)}}@container (min-width: 1200px){.product-discovery-product-list__grid{grid-template-columns:repeat(4,1fr)}}.product-discovery-search-alert-message__wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:300px}.product-discovery-search-alert-message__content{display:flex;justify-content:center}.product-discovery-facet{padding-block:var(--spacing-small)}.product-discovery-facet:not(.product-discovery-facet--last){border-bottom:1px solid var(--color-neutral-400)}.product-discovery-facet__header{display:block;margin-block-end:var(--spacing-xsmall)}.product-discovery-facet__bucket .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-body-2-default-font)}.product-discovery-facet__bucket .dropin-radio-button__label:before{margin-right:var(--spacing-xsmall)}.product-discovery-facet-list{display:flex;flex-direction:column;width:100%}.product-discovery-facet-list__selected-filters{display:flex;flex-direction:row;flex-wrap:wrap;row-gap:var(--spacing-xxsmall);padding:0 0 var(--spacing-xxsmall) 0}.product-discovery-facet-list__selected-filters button{padding:0 var(--spacing-xxsmall);margin:0 var(--spacing-xxsmall);border-radius:var(--shape-border-radius-2)}.product-discovery-facet-list__selected-filters .dropin-price-range .dropin-price--small.dropin-price--bold{font:var(--type-button-2-font)}.product-discovery-facet-list__facet-options{text-align:left}.product-discovery-facet-list__facet-options button{padding:0}.product-discovery-facet-list__facet-options .dropin-radio-button{padding:var(--spacing-xxsmall) 0}.product-discovery-facet-list__facet-options--hidden{display:none}.product-discovery-facet-list .dropin-divider{margin:var(--spacing-xsmall) 0 var(--spacing-xsmall) 0}",{styleId:"storefront-product-discovery"});
4
4
  import{jsx as e}from"@dropins/tools/preact-jsx-runtime.js";import{Render as c}from"@dropins/tools/lib.js";import{useState as a,useEffect as i}from"@dropins/tools/preact-hooks.js";import{UIProvider as l}from"@dropins/tools/components.js";import{events as f}from"@dropins/tools/event-bus.js";const m={PLP:{Warning:{noResults:"Your search returned no results.",searchError:"An error occurred while searching."},SortDropdown:{title:"Sort by"}},Facet:{showMore:"Show more",showLess:"Show less",clearAll:"Clear all"}},u={Search:m},h={default:u},S=({children:o})=>{const[t,n]=a("en_US");return i(()=>{const r=f.on("locale",s=>{n(s)},{eager:!0});return()=>{r==null||r.off()}},[]),e(l,{lang:t,langDefinitions:h,children:o})},L=new c(e(S,{}));export{L as render};
5
5
  //# sourceMappingURL=render.js.map