@jetshop/template-trend 6.1.4 → 6.1.5

package/dist/src/components/CategoryPage/Filters/Mobile/SortOrderAccordion.js

@@ -0,0 +1,30 @@
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import React from 'react';
+import { filterName } from './shared/styles';
+import SortOrder from '@jetshop/ui/SortOrder/SortOrder';
+import t from '@jetshop/intl';
+import { filtersStyle } from './ListAccordion';
+import { ActiveCarot } from './ActiveCarot';
+export const SortOrderAccordion = ({ sortOrders, accordionProps, startingIdx = 0 }) => {
+    if (sortOrders.length === 0)
+        return null;
+    return (React.createElement(SortOrder, { sortOrders: sortOrders }, sortOrderOptions => (React.createElement(SortOrderComponent, { startingIdx: startingIdx, accordionProps: accordionProps, sortOrderOptions: sortOrderOptions }))));
+};
+function SortOrderComponent({ accordionProps, startingIdx, sortOrderOptions }) {
+    const idx = 0; // As there is only one sort order accordion, idx is 0
+    const { changeSortOrder, direction, sortOrder, mappedSortOrder } = sortOrderOptions;
+    const { AccordionContent } = accordionProps;
+    const accordionIsOpen = accordionProps.openIndexes.includes(idx + startingIdx);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: filterName, onClick: () => accordionProps.handleClick(idx + startingIdx) },
+            t('Sort by'),
+            React.createElement(ActiveCarot, { isOpen: accordionIsOpen })),
+        React.createElement(AccordionContent, { isOpen: accordionIsOpen },
+            React.createElement("ul", { className: filtersStyle }, mappedSortOrder.map(order => (React.createElement("li", { key: `${order.value}-${order.direction}` },
+                React.createElement("button", { onClick: () => {
+                        changeSortOrder(order.value, order.direction);
+                    } },
+                    order.text,
+                    direction === order.direction && sortOrder === order.value && (React.createElement(Check, null))))))))));
+}
+//# sourceMappingURL=SortOrderAccordion.js.map

package/dist/src/components/CategoryPage/Filters/Mobile/SortOrderAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortOrderAccordion.js","sourceRoot":"","sources":["../../../../../../src/components/CategoryPage/Filters/Mobile/SortOrderAccordion.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,UAAU,EACV,cAAc,EACd,WAAW,GAAG,CAAC,EAChB,EAAE,EAAE;IACH,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,UAAU,IAC9B,gBAAgB,CAAC,EAAE,CAAC,CACnB,oBAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,kBAAkB,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE;IAC3E,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,sDAAsD;IACrE,MAAM,EACJ,eAAe,EACf,SAAS,EACT,SAAS,EACT,eAAe,EAChB,GAAG,gBAAgB,CAAC;IACrB,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC;IAC5C,MAAM,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,QAAQ,CACzD,GAAG,GAAG,WAAW,CAClB,CAAC;IAEF,OAAO,CACL;QACE,6BACE,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC;YAE3D,CAAC,CAAC,SAAS,CAAC;YACb,oBAAC,WAAW,IAAC,MAAM,EAAE,eAAe,GAAI,CACpC;QACN,oBAAC,gBAAgB,IAAC,MAAM,EAAE,eAAe;YACvC,4BAAI,SAAS,EAAE,YAAY,IACxB,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,4BAAI,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE;gBAC1C,gCACE,OAAO,EAAE,GAAG,EAAE;wBACZ,eAAe,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;oBAChD,CAAC;oBAEA,KAAK,CAAC,IAAI;oBACV,SAAS,KAAK,KAAK,CAAC,SAAS,IAAI,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAC7D,oBAAC,KAAK,OAAG,CACV,CACM,CACN,CACN,CAAC,CACC,CACY,CAClB,CACJ,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/Mobile/shared/styles.js

@@ -0,0 +1,12 @@
+import { css } from 'linaria';
+export const filterName = css `
+  display: flex;
+  padding: 1em;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #dedede;
+  :first-of-type {
+    border-top: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/components/CategoryPage/Filters/Mobile/shared/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../src/components/CategoryPage/Filters/Mobile/shared/styles.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAE9B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;CAS5B,CAAC"}

package/dist/src/components/CategoryPage/Filters/MultiListFilters.js

@@ -0,0 +1,37 @@
+import { DropdownMenuButton as Button, DropdownMenuItem, DropdownMenuItems as Items } from '@jetshop/ui/DropdownMenu';
+import ErrorBoundary from '@jetshop/ui/ErrorBoundary/Generic';
+import PassThrough from '@jetshop/ui/ErrorBoundary/PassThrough';
+import { ReactComponent as Carot } from '@jetshop/ui/svg/Carrot.svg';
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import React from 'react';
+import { FilterDropdownMenu } from './FilterDropdownMenu';
+import { useMultiFilter } from '@jetshop/core/hooks/Filters/useMultiFilter';
+import t from '@jetshop/intl';
+export function MultiListFilters({ filters }) {
+    const multiListFilters = filters.filter(filter => filter.__typename === 'MultiListFilter');
+    return multiListFilters.map(multiListFilter => (React.createElement(ErrorBoundary, { component: PassThrough, key: multiListFilter.id }, multiListFilter.lists.map((listFilter, index) => (React.createElement(MultiListFilter, { filter: listFilter, multiListFilter: multiListFilter, index: index, key: listFilter.id }))))));
+}
+function MultiListFilter({ filter, multiListFilter, index }) {
+    const { apply, clearList } = useMultiFilter({
+        filter: multiListFilter
+    });
+    return (React.createElement(FilterDropdownMenu, null,
+        React.createElement(Button, { disabled: filter.items.length === 0 },
+            React.createElement("span", null, filter.name),
+            filter.hasActiveItems ? React.createElement(Check, null) : React.createElement(Carot, { className: "carot" })),
+        React.createElement(Items, { as: "ul" },
+            filter.items.map(item => (React.createElement(DropdownMenuItem, { key: item.id, onSelect: ({ setIsOpen }) => {
+                    apply({
+                        value: item.value,
+                        listIndex: index
+                    });
+                    setIsOpen(false);
+                } },
+                React.createElement("span", null, item.text),
+                item.isActive ? React.createElement(Check, null) : React.createElement("span", null, item.resultCount)))),
+            React.createElement(React.Fragment, null, filter.hasActiveItems && (React.createElement(DropdownMenuItem, { onSelect: ({ setIsOpen }) => {
+                    setIsOpen(false);
+                    clearList({ listIndex: index });
+                } }, t('Clear filter')))))));
+}
+//# sourceMappingURL=MultiListFilters.js.map

package/dist/src/components/CategoryPage/Filters/MultiListFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiListFilters.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/MultiListFilters.js"],"names":[],"mappings":"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"}

package/dist/src/components/CategoryPage/Filters/RangeFilters.js

@@ -0,0 +1,122 @@
+import { useRangeFilter } from '@jetshop/core/hooks/Filters/useRangeFilter';
+import t from '@jetshop/intl';
+import Button from '@jetshop/ui/Button';
+import { DropdownMenuButton, DropdownMenuItems } from '@jetshop/ui/DropdownMenu';
+import ErrorBoundary from '@jetshop/ui/ErrorBoundary/Generic';
+import PassThrough from '@jetshop/ui/ErrorBoundary/PassThrough';
+import { ReactComponent as Carrot } from '@jetshop/ui/svg/Carrot.svg';
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+import { css } from 'linaria';
+import React, { useState } from 'react';
+import { styled } from 'linaria/react';
+import ReactSlider from 'react-slider';
+import { FilterDropdownMenu } from './FilterDropdownMenu';
+export const RangeSliderContainer = styled('div') `
+  width: 100%;
+  padding: 1rem;
+  background: #f7f7f7;
+  z-index: 5;
+  border: 1px solid #dedede;
+  border-top: 0;
+
+  .slider {
+    height: 1rem;
+  }
+
+  .slider.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .track {
+    height: 1rem;
+    background: transparent;
+    padding-bottom: 1rem;
+    &:after {
+      height: 2px;
+      width: 100%;
+      position: absolute;
+      top: 7px;
+      background: silver;
+      content: '';
+    }
+    &-1:after {
+      /* The active bar section */
+      background: black;
+    }
+  }
+  .thumb {
+    height: 1rem;
+    width: 1rem;
+    background: black;
+  }
+`;
+const wrapper = css `
+  .active-vals {
+    display: flex;
+    margin-bottom: 0.5rem;
+    justify-content: space-between;
+  }
+  button {
+    margin-top: 0.5rem;
+  }
+`;
+export function RangeFilters({ filters }) {
+    const rangeFilters = filters.filter(filter => filter.__typename === 'NumericRangeFilter');
+    if (rangeFilters.length === 0)
+        return null;
+    return rangeFilters.map(filter => (React.createElement(ErrorBoundary, { component: PassThrough, key: filter.id },
+        React.createElement(RangeFilter, { filter: filter }))));
+}
+function RangeFilter({ filter }) {
+    return (React.createElement(FilterDropdownMenu, null,
+        React.createElement(DropdownMenuButton, null,
+            React.createElement("span", null, filter.name),
+            filter.isActive ? React.createElement(Check, null) : React.createElement(Carrot, { className: "carot" })),
+        React.createElement(DropdownMenuItems, { as: "div" },
+            React.createElement(RangeSlider, { filter: filter }))));
+}
+export function RangeSlider({ filter }) {
+    const { apply, clear } = useRangeFilter({ filter });
+    // Filter.value may be null (on first render). If it is, use the filter min/max as initial value
+    const [initialMin, initialMax] = filter.value
+        ? filter.value
+        : [filter.min, filter.max];
+    // // Make sure the selected min/max are never lower or higher than
+    // // the available min/max respectively.
+    const selectedVals = [
+        Math.max(initialMin, filter.min),
+        Math.min(initialMax, filter.max)
+    ];
+    // draftVal will be used to track the values from the slider
+    const [draftVal, setDraftVal] = useState({
+        min: selectedVals[0],
+        max: selectedVals[1]
+    });
+    const [touched, setTouched] = useState(false);
+    const handleUpdate = ([min, max]) => {
+        setTouched(true);
+        setDraftVal({ min, max });
+    };
+    const applyFilter = () => {
+        setTouched(false);
+        apply(draftVal);
+    };
+    const reset = () => {
+        setTouched(false);
+        const minMax = { min: filter.min, max: filter.max };
+        setDraftVal(minMax);
+        clear();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(RangeSliderContainer, { className: wrapper },
+            React.createElement("div", { className: "active-vals" },
+                React.createElement("span", null, draftVal.min),
+                React.createElement("span", null, draftVal.max)),
+            React.createElement(ReactSlider, { disabled: filter.min === filter.max, min: filter.min, max: filter.max, minDistance: 10, defaultValue: selectedVals, onChange: handleUpdate, value: [draftVal.min, draftVal.max], withBars: true }),
+            touched ? (React.createElement(Button, { onClick: applyFilter }, t('Apply'))) : (React.createElement(React.Fragment, null, filter.isActive ? (React.createElement(Button, { onClick: reset, className: "secondary" },
+                ' ',
+                t('Reset'),
+                ' ')) : (React.createElement(Button, { disabled: true }, t('Apply'))))))));
+}
+//# sourceMappingURL=RangeFilters.js.map

package/dist/src/components/CategoryPage/Filters/RangeFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeFilters.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/RangeFilters.js"],"names":[],"mappings":"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"}

package/dist/src/components/CategoryPage/Filters/SortOrders.js

@@ -0,0 +1,29 @@
+import t from '@jetshop/intl';
+import { DropdownMenuButton, DropdownMenuItem, DropdownMenuItems } from '@jetshop/ui/DropdownMenu';
+import { FilterDropdownMenu } from './FilterDropdownMenu';
+import { StyledCheck } from '@jetshop/ui/Select/Components';
+import * as React from 'react';
+import { useSortOrder } from '@jetshop/core/hooks/Filters/useSortOrder';
+import ErrorBoundary from '@jetshop/ui/ErrorBoundary/Generic';
+import PassThrough from '@jetshop/ui/ErrorBoundary/PassThrough';
+import { ReactComponent as Carot } from '@jetshop/ui/svg/Carrot.svg';
+export const SortOrders = ({ sortOrders }) => {
+    if (sortOrders.length === 0)
+        return null;
+    return (React.createElement(ErrorBoundary, { component: PassThrough },
+        React.createElement(SortOrderDropdown, { sortOrders: sortOrders })));
+};
+function SortOrderDropdown({ sortOrders }) {
+    const { mappedSortOrder, changeSortOrder, sortOrder, direction } = useSortOrder({ sortOrders });
+    const activeItem = mappedSortOrder.find(item => item.direction === direction && item.value === sortOrder);
+    return (React.createElement(FilterDropdownMenu, { style: { marginRight: 0 } },
+        React.createElement(DropdownMenuButton, null,
+            React.createElement("span", null, activeItem ? activeItem.text : t('Sort By')),
+            React.createElement(Carot, { className: "carot" })),
+        React.createElement(DropdownMenuItems, null, mappedSortOrder.map(sortItem => {
+            return (React.createElement(DropdownMenuItem, { onSelect: () => changeSortOrder(sortItem.value, sortItem.direction), key: `${sortItem.value}-${sortItem.direction}` },
+                sortItem.text,
+                activeItem === sortItem && React.createElement(StyledCheck, null)));
+        }))));
+}
+//# sourceMappingURL=SortOrders.js.map

package/dist/src/components/CategoryPage/Filters/SortOrders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortOrders.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/SortOrders.js"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAExE,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAErE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3C,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,OAAO,CACL,oBAAC,aAAa,IAAC,SAAS,EAAE,WAAW;QACnC,oBAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,GAAI,CAC/B,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EAAE,UAAU,EAAE;IACvC,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,GAC9D,YAAY,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CACrC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CACjE,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;QAC3C,oBAAC,kBAAkB;YACjB,kCAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAQ;YAC1D,oBAAC,KAAK,IAAC,SAAS,EAAC,OAAO,GAAG,CACR;QACrB,oBAAC,iBAAiB,QACf,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YAC9B,OAAO,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,GAAG,EAAE,CACb,eAAe,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,EAErD,GAAG,EAAE,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,SAAS,EAAE;gBAE7C,QAAQ,CAAC,IAAI;gBACb,UAAU,KAAK,QAAQ,IAAI,oBAAC,WAAW,OAAG,CAC1B,CACpB,CAAC;QACJ,CAAC,CAAC,CACgB,CACD,CACtB,CAAC;AACJ,CAAC"}

package/dist/src/components/CategoryPage/Filters/index.js

@@ -0,0 +1,2 @@
+export { default } from './Filter';
+//# sourceMappingURL=index.js.map

package/dist/src/components/CategoryPage/Filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/CategoryPage/Filters/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/src/components/CategoryPage/ProductCard.js

@@ -0,0 +1,98 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import t from '@jetshop/intl';
+import Image, { transparentDataImg } from '@jetshop/ui/Image/Image';
+import { Price } from '@jetshop/ui/Price';
+import ProductLink from '@jetshop/ui/ProductLink';
+import Badges from '@jetshop/ui/ProductList/Badges';
+import { css, cx } from 'linaria';
+import React from 'react';
+import { theme } from '../Theme';
+const wrapperStyling = css `
+  font-size: 1rem;
+  position: relative;
+  a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    background: white;
+    border: 1px solid ${theme.colors.tablegrey};
+  }
+
+  .product-card-detail {
+    background: white;
+    padding: 0.75em;
+    line-height: 1.35;
+    border-top: 1px solid ${theme.colors.tablegrey};
+    h3 {
+      font-weight: 600;
+      font-size: 1em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    h4 {
+      font-weight: normal;
+      font-size: 1em;
+      color: ${theme.colors.darkerGrey};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+  .package-badge {
+    background: black;
+    color: white;
+    font-size: 14px;
+    padding: 3px 6px;
+  }
+  .price-package-wrapper {
+    display: flex;
+    align-items: center;
+    .package-price-label {
+      font-size: 12px;
+      color: grey;
+      margin-left: 5px;
+    }
+  }
+
+  .badge-top-right {
+    top: 3em;
+  }
+`;
+export function ProductCard(_a) {
+    var { product, className, imageAspect = '1:1', imageSizes = [1 / 2, 1 / 2, 1 / 3, 1 / 4], forwardRef, as = 'li', children, loadImageEagerly = false } = _a, linkProps = __rest(_a, ["product", "className", "imageAspect", "imageSizes", "forwardRef", "as", "children", "loadImageEagerly"]);
+    const hasImages = product.images && product.images.length > 0;
+    const Tag = as;
+    let badges = [...(product.badges || [])];
+    product.isPackage &&
+        badges.push({
+            location: 'TOP_RIGHT',
+            name: 'Package',
+            text: t('Package'),
+            style: 'package-badge'
+        });
+    return (React.createElement(Tag, { className: cx('product-card', wrapperStyling, className), "data-testid": "product", "data-product-card": true, ref: forwardRef },
+        React.createElement(ProductLink, Object.assign({ product: product }, linkProps, { style: {
+                margin: '0 0.5em 1em'
+            } }),
+            hasImages ? (React.createElement(Image, { sizes: imageSizes, aspect: imageAspect, alt: product.images[0].alt, src: product.images[0].url, modifiedDate: product.images[0].modifiedDate, badges: React.createElement(Badges, { badges: badges }), critical: loadImageEagerly })) : (React.createElement(Image, { src: transparentDataImg })),
+            React.createElement("section", { className: "product-card-detail" },
+                React.createElement("header", null,
+                    React.createElement("h3", null, product.name),
+                    React.createElement("h4", { className: "sub-name" }, product.subName || '\u00A0')),
+                React.createElement("div", { className: "price-package-wrapper" },
+                    React.createElement(Price, { hidePrice: product.hidePrice, price: product.price, previousPrice: product.previousPrice })))),
+        children));
+}
+//# sourceMappingURL=ProductCard.js.map

package/dist/src/components/CategoryPage/ProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../../src/components/CategoryPage/ProductCard.js"],"names":[],"mappings":"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"}

package/dist/src/components/CategoryPage/ProductGrid.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useTracker } from '@jetshop/core/analytics/Analytics';
+import { trackListEvent } from '@jetshop/core/analytics/tracking';
+import React, { useEffect } from 'react';
+import { styled } from 'linaria/react';
+import { css, cx } from 'linaria';
+import { ProductCard } from './ProductCard';
+import { theme } from '../Theme';
+import { Favourite } from '../ProductList/Favourite';
+export const priceStyle = css `
+  [data-flight-price] {
+    display: flex;
+  }
+  .new-price {
+    color: #eb0000;
+    margin-right: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .old-price {
+    color: ${theme.colors.darkerGrey};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+`;
+export const Wrapper = styled('ul') `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin-right: -${theme.space[1]};
+  margin-left: -${theme.space[1]};
+
+  .product-card {
+    line-height: 19px;
+    min-width: 0;
+
+    width: 50%;
+    ${theme.above.md} {
+      width: 33.333%;
+    }
+    ${theme.above.lg} {
+      width: 25%;
+    }
+    a {
+      margin: 0 0.5em 2em 0.5em;
+    }
+  }
+`;
+export function isAboveFold(index) {
+    return index < 4;
+}
+export function ProductGrid(_a) {
+    var { products, listName, category = '', loading, className, categoryPath } = _a, rest = __rest(_a, ["products", "listName", "category", "loading", "className", "categoryPath"]);
+    const track = useTracker();
+    useEffect(() => {
+        // Dont track anything if there are no products to render
+        if (!products || products.length === 0)
+            return;
+        // Otherwise track a list view event
+        track(trackListEvent({ listName, products, category }));
+    }, [listName, products, track, category]);
+    if (!products)
+        return null;
+    return (React.createElement(Wrapper, { "data-testid": "product-grid", className: cx('product-grid', className, priceStyle) }, products.map((product, index) => {
+        return (React.createElement(ProductCard, Object.assign({ key: index + ':' + product.articleNumber, product: product, style: { opacity: loading ? 0.5 : 1 }, list: listName, categoryPath: categoryPath, loadImageEagerly: isAboveFold(index) }, rest),
+            React.createElement(Favourite, { product: product, style: {
+                    position: 'absolute',
+                    padding: '0.5em',
+                    fontSize: '1.5em',
+                    top: 0,
+                    right: '0.5em'
+                } })));
+    })));
+}
+export default ProductGrid;
+//# sourceMappingURL=ProductGrid.js.map

package/dist/src/components/CategoryPage/ProductGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGrid.js","sourceRoot":"","sources":["../../../../src/components/CategoryPage/ProductGrid.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;aAYhB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;CAKnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;mBAKhB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;kBACf,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;;;;;MAO1B,KAAK,CAAC,KAAK,CAAC,EAAE;;;MAGd,KAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;CAOnB,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,KAAK;IAC/B,OAAO,KAAK,GAAG,CAAC,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAQ3B;QAR2B,EAC1B,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,OAAO,EACP,SAAS,EACT,YAAY,OAEb,EADI,IAAI,cAPmB,4EAQ3B,CADQ;IAEP,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,SAAS,CAAC,GAAG,EAAE;QACb,yDAAyD;QACzD,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/C,oCAAoC;QACpC,KAAK,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,OAAO,CACL,oBAAC,OAAO,mBACM,cAAc,EAC1B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,UAAU,CAAC,IAEnD,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAC/B,OAAO,CACL,oBAAC,WAAW,kBACV,GAAG,EAAE,KAAK,GAAG,GAAG,GAAG,OAAO,CAAC,aAAa,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EACrC,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,WAAW,CAAC,KAAK,CAAC,IAChC,IAAI;YAER,oBAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,OAAO,EAAE,OAAO;oBAChB,QAAQ,EAAE,OAAO;oBACjB,GAAG,EAAE,CAAC;oBACN,KAAK,EAAE,OAAO;iBACf,GACD,CACU,CACf,CAAC;IACJ,CAAC,CAAC,CACM,CACX,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC"}

package/dist/src/components/CategoryPage/ProductGridWindow.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useTracker } from '@jetshop/core/analytics/Analytics';
+import { trackListEvent } from '@jetshop/core/analytics/tracking';
+import React, { useEffect, useMemo } from 'react';
+import { css, cx } from 'linaria';
+import { ProductCard } from './ProductCard';
+import { isAboveFold, priceStyle } from './ProductGrid';
+import { WindowGrid } from '@jetshop/ui/WindowGrid';
+const container = css `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 -0.5em 1em;
+`;
+const defaultStyle = css `
+  flex: 0 0 auto;
+  width: 25%;
+`;
+function ProductGridWindow(_a) {
+    var { id, products, listName, loading, className, prevOffset, itemsPerRow, categoryPath, category = '' } = _a, rest = __rest(_a, ["id", "products", "listName", "loading", "className", "prevOffset", "itemsPerRow", "categoryPath", "category"]);
+    // Track product listing
+    const track = useTracker();
+    useEffect(() => {
+        // Dont track anything if there are no products to render
+        if (!products || products.length === 0)
+            return;
+        // Otherwise track a list view event
+        track(trackListEvent({ listName, products, category }));
+    }, [listName, products, track, category]);
+    const renderProduct = useMemo(() => ({ item: product, style, innerRef }) => (React.createElement("div", { className: defaultStyle, style: style, ref: innerRef },
+        React.createElement(ProductCard, { key: product.articleNumber, product: product, as: "div", categoryPath: categoryPath, loadImageEagerly: isAboveFold(product.index) }))), [categoryPath]);
+    const items = useMemo(() => {
+        return products.map((product, index) => (Object.assign(Object.assign({}, product), { index })));
+    }, [products]);
+    return (React.createElement(WindowGrid, { id: id, itemsPerRow: [2, null, 3, 4], items: items, prevOffset: prevOffset, className: cx(container, priceStyle), component: renderProduct }));
+}
+export default ProductGridWindow;
+//# sourceMappingURL=ProductGridWindow.js.map

package/dist/src/components/CategoryPage/ProductGridWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGridWindow.js","sourceRoot":"","sources":["../../../../src/components/CategoryPage/ProductGridWindow.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;CAKpB,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,CAAA;;;CAGvB,CAAC;AAEF,SAAS,iBAAiB,CAAC,EAW1B;QAX0B,EACzB,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,WAAW,EACX,YAAY,EACZ,QAAQ,GAAG,EAAE,OAEd,EADI,IAAI,cAVkB,+GAW1B,CADQ;IAEP,wBAAwB;IACxB,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,SAAS,CAAC,GAAG,EAAE;QACb,yDAAyD;QACzD,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/C,oCAAoC;QACpC,KAAK,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CACrC,CACE,6BAAK,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ;QACvD,oBAAC,WAAW,IACV,GAAG,EAAE,OAAO,CAAC,aAAa,EAC1B,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,KAAK,EACR,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAC5C,CACE,CACP,EACL,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,iCAAM,OAAO,KAAE,KAAK,IAAG,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAC5B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EACpC,SAAS,EAAE,aAAa,GACxB,CACH,CAAC;AACJ,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/dist/src/components/CategoryPage/StandardCategoryPage.js

@@ -0,0 +1,51 @@
+import PaginationContext from '@jetshop/core/components/Pagination/PaginationContext';
+import t from '@jetshop/intl';
+import { PaginationBehaviour } from '@jetshop/ui/Pagination';
+import { styled } from 'linaria/react';
+import React from 'react';
+import CategoryHeader from '../CategoryPage/CategoryHeader';
+import MaxWidth from '../Layout/MaxWidth';
+import { Pagination } from '../Pagination/Pagination';
+import { theme } from '../Theme';
+import CategoryHeaderLoadingState from './CategoryHeaderLoadingState';
+import Filters from './Filters';
+import ProductGrid from './ProductGrid';
+const Container = styled(MaxWidth) `
+  padding-top: 2rem;
+  ${theme.above.sm} {
+    padding-top: 2rem;
+  }
+`;
+const CategoryWrapper = styled('div') ``;
+const ProductNumber = styled('p') `
+  text-transform: uppercase;
+  font-size: 12px;
+  color: #707070;
+  letter-spacing: 0.5px;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+`;
+const Category = ({ category, result }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!category) {
+        return (React.createElement(CategoryWrapper, null,
+            React.createElement(CategoryHeaderLoadingState, null),
+            ";"));
+    }
+    return (React.createElement(CategoryWrapper, null,
+        React.createElement(React.Fragment, null,
+            React.createElement(CategoryHeader, { category: category, parents: (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.route) === null || _b === void 0 ? void 0 : _b.parents, breadcrumbs: (_d = (_c = result === null || result === void 0 ? void 0 : result.data) === null || _c === void 0 ? void 0 : _c.route) === null || _d === void 0 ? void 0 : _d.breadcrumbs }),
+            React.createElement(Container, null,
+                React.createElement(Filters, { filters: ((_e = category.products) === null || _e === void 0 ? void 0 : _e.filters) || [], sortOrders: ((_f = category.products) === null || _f === void 0 ? void 0 : _f.sortOrders) || [], result: result }),
+                React.createElement("div", null,
+                    React.createElement(ProductNumber, null, t('{totalProducts} Products', {
+                        totalProducts: (_g = category.products) === null || _g === void 0 ? void 0 : _g.totalResults
+                    })),
+                    React.createElement(ProductGrid, { products: category.products.result, listName: category.name, categoryPath: category.isDynamic ? null : (_h = result === null || result === void 0 ? void 0 : result.data) === null || _h === void 0 ? void 0 : _h.route, category: ((_l = (_k = (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.route) === null || _k === void 0 ? void 0 : _k.breadcrumbs) === null || _l === void 0 ? void 0 : _l.join('/')) || '', loading: result.loading, imageSizes: [1 / 2, 1 / 2, 1 / 3, 1 / 4] })),
+                React.createElement(PaginationContext.Consumer, null, props => {
+                    var _a;
+                    return (React.createElement(PaginationBehaviour, Object.assign({}, props, { total: (_a = category.products) === null || _a === void 0 ? void 0 : _a.totalResults }), props => React.createElement(Pagination, Object.assign({}, props))));
+                })))));
+};
+export default Category;
+//# sourceMappingURL=StandardCategoryPage.js.map

package/dist/src/components/CategoryPage/StandardCategoryPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardCategoryPage.js","sourceRoot":"","sources":["../../../../src/components/CategoryPage/StandardCategoryPage.js"],"names":[],"mappings":"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"}