@citygross/components 0.8.72 → 0.8.74

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.
Files changed (27) hide show
  1. package/build/@types/components/ListItem/ListItem.d.ts +5 -7
  2. package/build/@types/components/ListItem/ListItem.styles.d.ts +0 -1
  3. package/build/@types/components/SearchListItem/SearchListItem.d.ts +6 -4
  4. package/build/@types/components/SearchListItem/SearchListItem.styles.d.ts +6 -2
  5. package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +3 -3
  6. package/build/cjs/components/src/components/ListItem/ListItem.js +8 -4
  7. package/build/cjs/components/src/components/ListItem/ListItem.js.map +1 -1
  8. package/build/cjs/components/src/components/ListItem/ListItem.styles.js +2 -4
  9. package/build/cjs/components/src/components/ListItem/ListItem.styles.js.map +1 -1
  10. package/build/cjs/components/src/components/PriceTag/PriceTag.js +2 -2
  11. package/build/cjs/components/src/components/SearchListItem/SearchListItem.js +12 -4
  12. package/build/cjs/components/src/components/SearchListItem/SearchListItem.js.map +1 -1
  13. package/build/cjs/components/src/components/SearchListItem/SearchListItem.styles.js +118 -11
  14. package/build/cjs/components/src/components/SearchListItem/SearchListItem.styles.js.map +1 -1
  15. package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +3 -3
  16. package/build/es/components/src/components/AddressBlock/AddressBlock.js +3 -3
  17. package/build/es/components/src/components/ListItem/ListItem.js +8 -4
  18. package/build/es/components/src/components/ListItem/ListItem.js.map +1 -1
  19. package/build/es/components/src/components/ListItem/ListItem.styles.js +2 -4
  20. package/build/es/components/src/components/ListItem/ListItem.styles.js.map +1 -1
  21. package/build/es/components/src/components/PriceTag/PriceTag.js +2 -2
  22. package/build/es/components/src/components/SearchListItem/SearchListItem.js +13 -5
  23. package/build/es/components/src/components/SearchListItem/SearchListItem.js.map +1 -1
  24. package/build/es/components/src/components/SearchListItem/SearchListItem.styles.js +118 -12
  25. package/build/es/components/src/components/SearchListItem/SearchListItem.styles.js.map +1 -1
  26. package/build/es/components/src/components/WarningLabel/WarningLabel.js +3 -3
  27. package/package.json +2 -2
@@ -10,16 +10,14 @@ export declare enum EListItemAlignment {
10
10
  TOP = "flex-start"
11
11
  }
12
12
  export declare type TListItem = {
13
- item?: TItem;
14
- loading?: boolean;
13
+ alignment?: EListItemAlignment;
15
14
  children?: React.ReactNode;
16
15
  fallBackImage?: string;
17
16
  imageAutoHeight?: boolean;
18
- boldHeader?: boolean;
19
- smallSkeleton?: boolean;
17
+ item?: TItem;
20
18
  isSmall?: boolean;
21
- usedInSearch?: boolean;
22
- alignment?: EListItemAlignment;
23
- textColor?: string;
19
+ loading?: boolean;
20
+ showPriceStripe?: boolean;
21
+ smallSkeleton?: boolean;
24
22
  };
25
23
  export declare const ListItem: React.FunctionComponent<TListItem>;
@@ -1,6 +1,5 @@
1
1
  import { EListItemAlignment } from './ListItem';
2
2
  export declare type TListItem = {
3
- usedInSearch?: boolean;
4
3
  alignment?: EListItemAlignment;
5
4
  };
6
5
  export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TListItem, never>;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { TItem } from '../ListItem/ListItem';
3
+ import { TPriceTag } from '../PriceTag/PriceTag.types';
3
4
  export declare type TMarking = {
4
5
  image: React.ReactNode;
5
6
  tooltipText: string;
@@ -7,10 +8,11 @@ export declare type TMarking = {
7
8
  };
8
9
  export declare type TSearchListItem = {
9
10
  button?: React.ReactNode;
10
- loading?: boolean;
11
- price: React.ReactNode;
11
+ fallBackImage?: string;
12
12
  item: TItem;
13
+ loading?: boolean;
13
14
  markings?: TMarking[];
14
- fallBackImage?: string;
15
+ priceTag: TPriceTag;
16
+ showMax: boolean;
15
17
  };
16
- export declare const SearchListItem: ({ item, button, loading, price, markings, fallBackImage }: TSearchListItem) => JSX.Element;
18
+ export declare const SearchListItem: ({ button, fallBackImage, item, loading, markings, priceTag, showMax }: TSearchListItem) => JSX.Element;
@@ -2,11 +2,15 @@ export declare const SearchListItemWrapper: import("styled-components").StyledCo
2
2
  export declare const ListItemWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
3
  export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
4
  export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
- declare type Ttooltip = {
5
+ declare type TToolTip = {
6
6
  left: number;
7
7
  backgroundColor?: string;
8
8
  };
9
- export declare const ToolTip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Ttooltip, never>;
9
+ export declare const ToolTip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TToolTip, never>;
10
10
  export declare const MarkingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
11
11
  export declare const Marking: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
12
+ declare type TMaxWrapper = {
13
+ showMax: boolean;
14
+ };
15
+ export declare const MaxWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TMaxWrapper, never>;
12
16
  export {};
@@ -85,6 +85,9 @@ require('../SideModal/SideModal.styles.js');
85
85
  require('../IconText/IconText.styles.js');
86
86
  require('../Dropdown/Dropdown.styles.js');
87
87
  require('../SearchListItem/SearchListItem.styles.js');
88
+ require('../PriceTag/PriceTag.types.js');
89
+ require('../PriceStripe/PriceStripe.styles.js');
90
+ require('../PriceTag/PriceTag.styles.js');
88
91
  require('../MenuListItem/MenuListItem.styles.js');
89
92
  require('../SlideInOutContainer/SlideInOutContainer.styles.js');
90
93
  require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
@@ -95,9 +98,6 @@ require('../CartSubTotal/CartSubTotal.js');
95
98
  require('../CouponCode/CouponCode.js');
96
99
  require('../CartCardLabel/CartCardLabel.styles.js');
97
100
  require('../CartCard/CartCard.styles.js');
98
- require('../PriceTag/PriceTag.types.js');
99
- require('../PriceStripe/PriceStripe.styles.js');
100
- require('../PriceTag/PriceTag.styles.js');
101
101
  require('../Pill/Pill.styles.js');
102
102
  require('../SelectButton/SelectButton.styles.js');
103
103
  require('../ProductHeader/ProductHeader.js');
@@ -6,6 +6,8 @@ var React = require('react');
6
6
  var Skeleton = require('react-loading-skeleton');
7
7
  var ListItem_styles = require('./ListItem.styles.js');
8
8
  var ProductHeader = require('../ProductHeader/ProductHeader.js');
9
+ var PriceTag_types = require('../PriceTag/PriceTag.types.js');
10
+ var PriceStripe = require('../PriceStripe/PriceStripe.js');
9
11
 
10
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
13
 
@@ -18,9 +20,9 @@ exports.EListItemAlignment = void 0;
18
20
  EListItemAlignment["TOP"] = "flex-start";
19
21
  })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
20
22
  var ListItem = function (_a) {
21
- var item = _a.item, loading = _a.loading, isSmall = _a.isSmall, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, smallSkeleton = _a.smallSkeleton, children = _a.children, _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, usedInSearch = _a.usedInSearch;
23
+ var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
22
24
  return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
23
- React__default["default"].createElement(ListItem_styles.ListLeft, { usedInSearch: usedInSearch, alignment: alignment },
25
+ React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
24
26
  React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
25
27
  React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: item === null || item === void 0 ? void 0 : item.image, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall, onError: function (e) {
26
28
  if (fallBackImage) {
@@ -32,10 +34,12 @@ var ListItem = function (_a) {
32
34
  }
33
35
  }
34
36
  } })),
35
- React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { usedInSearch: usedInSearch, alignment: alignment },
37
+ React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { alignment: alignment },
36
38
  loading ? (React__default["default"].createElement(React__default["default"].Fragment, null,
37
39
  React__default["default"].createElement(Skeleton__default["default"], { height: 15, width: smallSkeleton ? 150 : 250 }),
38
- React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description })),
40
+ React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
41
+ showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
42
+ React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description }))),
39
43
  (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
40
44
  children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
41
45
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,15 +12,13 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: ", "px;\n"])), function (props) {
14
14
  var _a;
15
- return props.usedInSearch || props.alignment === ListItem.EListItemAlignment.TOP
15
+ return props.alignment === ListItem.EListItemAlignment.TOP
16
16
  ? 0
17
17
  : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs;
18
18
  });
19
19
  var ListItemContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n p {\n padding: 1px 0px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n p {\n padding: 1px 0px;\n }\n"])));
20
20
  var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n"])), function (props) {
21
- return props.usedInSearch || props.alignment === ListItem.EListItemAlignment.TOP
22
- ? 'inherit'
23
- : 'center';
21
+ return props.alignment === ListItem.EListItemAlignment.TOP ? 'inherit' : 'center';
24
22
  }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; });
25
23
  var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
26
24
  return props.alignment === ListItem.EListItemAlignment.TOP ? 'flex-start' : 'center';
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -21,7 +21,7 @@ var PriceTag = function (_a) {
21
21
  var priceBase = Math.floor(price$1);
22
22
  var priceDecimals = (price$1 % 1).toFixed(2).split('.')[1];
23
23
  var showPriceIndicator = priceDecimals === '00';
24
- var showUnit = pant || !(isMultiPrice && unit === 'st');
24
+ var showUnit = pant || (unit !== undefined && !(isMultiPrice && unit === 'st'));
25
25
  return (React__default["default"].createElement(PriceTag_styles.PriceTagWrapper, { fontColor: variantAttributes.fontColor },
26
26
  variant !== PriceTag_types.EPriceVariant.REGULAR && (React__default["default"].createElement(PriceTag_styles.PriceStripeContainer, null,
27
27
  React__default["default"].createElement(PriceStripe.PriceStripe, { multiPrice: multiPrice, size: size, variant: variant }))),
@@ -33,7 +33,7 @@ var PriceTag = function (_a) {
33
33
  : sizeAttributes.detailsNoPantWidth },
34
34
  showPriceIndicator ? (React__default["default"].createElement(PriceTag_styles.PriceIndicatorContainer, { isSmall: size === PriceTag_types.EPriceSize.SMALL, showUnit: showUnit },
35
35
  React__default["default"].createElement(icons.Icons.PriceIndicator, { fill: variantAttributes.fontColor, size: sizeAttributes.indicatorSize }))) : (React__default["default"].createElement(PriceTag_styles.PriceDecimals, { fontSize: sizeAttributes.decimalsFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL }, priceDecimals)),
36
- React__default["default"].createElement(PriceTag_styles.PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit)))))));
36
+ React__default["default"].createElement(PriceTag_styles.PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : unit ? "/".concat(unit) : ''))))));
37
37
  };
38
38
 
39
39
  exports.PriceTag = PriceTag;
@@ -2,24 +2,32 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _tslib = require('../../../../_virtual/_tslib.js');
5
6
  var React = require('react');
6
7
  var ListItem = require('../ListItem/ListItem.js');
7
8
  var SearchListItem_styles = require('./SearchListItem.styles.js');
9
+ var PriceTag = require('../PriceTag/PriceTag.js');
10
+ var PriceTag_types = require('../PriceTag/PriceTag.types.js');
8
11
 
9
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
13
 
11
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
15
 
13
16
  var SearchListItem = function (_a) {
14
- var item = _a.item, button = _a.button, loading = _a.loading, price = _a.price, markings = _a.markings, fallBackImage = _a.fallBackImage;
17
+ var _b;
18
+ var button = _a.button, fallBackImage = _a.fallBackImage, item = _a.item, _c = _a.loading, loading = _c === void 0 ? false : _c, markings = _a.markings, priceTag = _a.priceTag, _d = _a.showMax, showMax = _d === void 0 ? false : _d;
19
+ var showPriceStripe = ((_b = priceTag.multiPrice) !== null && _b !== void 0 ? _b : 0) > 1 && priceTag.variant === PriceTag_types.EPriceVariant.PRIO;
15
20
  return (React__default["default"].createElement(SearchListItem_styles.SearchListItemWrapper, null,
16
21
  markings && (React__default["default"].createElement(SearchListItem_styles.MarkingWrapper, null, markings === null || markings === void 0 ? void 0 : markings.map(function (marking, index) { return (React__default["default"].createElement(SearchListItem_styles.Marking, { key: index },
17
22
  React__default["default"].createElement(SearchListItem_styles.ToolTip, { backgroundColor: marking === null || marking === void 0 ? void 0 : marking.backgroundColor, left: (index + 1) * 25 }, marking.tooltipText),
18
23
  marking.image)); }))),
19
24
  React__default["default"].createElement(SearchListItem_styles.ListItemWrapper, null,
20
- React__default["default"].createElement(ListItem.ListItem, { usedInSearch: true, loading: loading, item: item, fallBackImage: fallBackImage })),
21
- React__default["default"].createElement(SearchListItem_styles.PriceTagWrapper, null, price),
22
- React__default["default"].createElement(SearchListItem_styles.ButtonWrapper, null, button)));
25
+ React__default["default"].createElement(ListItem.ListItem, { fallBackImage: fallBackImage, item: item, loading: loading, showPriceStripe: showPriceStripe })),
26
+ React__default["default"].createElement(SearchListItem_styles.PriceTagWrapper, null,
27
+ React__default["default"].createElement(PriceTag.PriceTag, _tslib.__assign({}, priceTag, { size: PriceTag_types.EPriceSize.SMALL }))),
28
+ React__default["default"].createElement(SearchListItem_styles.ButtonWrapper, null,
29
+ React__default["default"].createElement(SearchListItem_styles.MaxWrapper, { showMax: showMax }, "Max antal uppn\u00E5tt"),
30
+ button)));
23
31
  };
24
32
 
25
33
  exports.SearchListItem = SearchListItem;
@@ -1 +1 @@
1
- {"version":3,"file":"SearchListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -9,24 +9,131 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var SearchListItemWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper PriceTagWrapper'\n 'ListItemWrapper ButtonWrapper ButtonWrapper';\n\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n }\n"], ["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper PriceTagWrapper'\n 'ListItemWrapper ButtonWrapper ButtonWrapper';\n\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
12
+ var SearchListItemWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper'\n 'ButtonWrapper ButtonWrapper';\n\n gap: ", "px;\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr auto;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n gap: ", "px;\n }\n"], ["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper'\n 'ButtonWrapper ButtonWrapper';\n\n gap: ", "px;\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr auto;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n gap: ", "px;\n }\n"])), function (_a) {
13
+ var _b;
14
+ var theme = _a.theme;
15
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
16
+ }, function (_a) {
17
+ var _b;
18
+ var theme = _a.theme;
19
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
20
+ }, function (_a) {
21
+ var _b;
22
+ var theme = _a.theme;
23
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
24
+ }, function (_a) {
25
+ var _b;
26
+ var theme = _a.theme;
27
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
28
+ }, function (_a) {
29
+ var _b;
30
+ var theme = _a.theme;
31
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
32
+ }, function (_a) {
33
+ var _b;
34
+ var theme = _a.theme;
35
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2;
36
+ });
13
37
  var ListItemWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n grid-area: ListItemWrapper;\n"], ["\n grid-area: ListItemWrapper;\n"])));
14
- var PriceTagWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-start;\n }\n"], ["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-start;\n }\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
15
- var ButtonWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n grid-area: ButtonWrapper;\n min-width: ", "px;\n margin-top: ", "px;\n justify-self: end;\n @media (min-width: ", "px) {\n margin-top: 0;\n }\n"], ["\n grid-area: ButtonWrapper;\n min-width: ", "px;\n margin-top: ", "px;\n justify-self: end;\n @media (min-width: ", "px) {\n margin-top: 0;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonWrapperMinWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
16
- var ToolTip = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: #fff;\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"], ["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: #fff;\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tooltipMinWidth; }, function (props) {
17
- var _a;
18
- return props.backgroundColor
19
- ? props.backgroundColor
20
- : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipBackground;
21
- }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) { return props.left; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipArrowMarginTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipArrowBorderWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipBackground; });
22
- var MarkingWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"], ["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchListItemGridTemplateColumns; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.MarkingWrapperGridGap; });
38
+ var PriceTagWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-end;\n }\n"], ["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-end;\n }\n"])), function (_a) {
39
+ var _b;
40
+ var theme = _a.theme;
41
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
42
+ });
43
+ var ButtonWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n grid-area: ButtonWrapper;\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-self: end;\n min-width: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: column;\n gap: ", "px;\n margin-top: -", "px;\n }\n"], ["\n grid-area: ButtonWrapper;\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-self: end;\n min-width: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: column;\n gap: ", "px;\n margin-top: -", "px;\n }\n"])), function (_a) {
44
+ var _b;
45
+ var theme = _a.theme;
46
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
47
+ }, function (_a) {
48
+ var _b;
49
+ var theme = _a.theme;
50
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.buttonWrapperMinWidth;
51
+ }, function (_a) {
52
+ var _b;
53
+ var theme = _a.theme;
54
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
55
+ }, function (_a) {
56
+ var _b;
57
+ var theme = _a.theme;
58
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
59
+ }, function (_a) {
60
+ var _b;
61
+ var theme = _a.theme;
62
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2;
63
+ });
64
+ var ToolTip = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: ", ";\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"], ["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: ", ";\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"])), function (_a) {
65
+ var _b;
66
+ var theme = _a.theme;
67
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.tooltipMinWidth;
68
+ }, function (_a) {
69
+ var _b;
70
+ var backgroundColor = _a.backgroundColor, theme = _a.theme;
71
+ return backgroundColor || ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipBackground);
72
+ }, function (_a) {
73
+ var _b;
74
+ var theme = _a.theme;
75
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
76
+ }, function (_a) {
77
+ var _b;
78
+ var theme = _a.theme;
79
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
80
+ }, function (_a) {
81
+ var _b;
82
+ var theme = _a.theme;
83
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
84
+ }, function (_a) {
85
+ var _b, _c;
86
+ var theme = _a.theme;
87
+ return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s1;
88
+ }, function (_a) {
89
+ var _b;
90
+ var theme = _a.theme;
91
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.iconToolTipTop;
92
+ }, function (_a) {
93
+ var left = _a.left;
94
+ return left;
95
+ }, function (_a) {
96
+ var _b;
97
+ var theme = _a.theme;
98
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipArrowMarginTop;
99
+ }, function (_a) {
100
+ var _b;
101
+ var theme = _a.theme;
102
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipArrowBorderWidth;
103
+ }, function (_a) {
104
+ var _b;
105
+ var theme = _a.theme;
106
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipBackground;
107
+ });
108
+ var MarkingWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"], ["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"])), function (_a) {
109
+ var _b;
110
+ var theme = _a.theme;
111
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchListItemGridTemplateColumns;
112
+ }, function (_a) {
113
+ var _b;
114
+ var theme = _a.theme;
115
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.MarkingWrapperGridGap;
116
+ });
23
117
  var Marking = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n &:hover ", " {\n visibility: visible;\n opacity: 0.9;\n }\n"], ["\n &:hover ", " {\n visibility: visible;\n opacity: 0.9;\n }\n"])), ToolTip);
24
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
118
+ var MaxWrapper = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n opacity: ", ";\n white-space: nowrap;\n"], ["\n color: ", ";\n font-size: ", "px;\n opacity: ", ";\n white-space: nowrap;\n"])), function (_a) {
119
+ var _b;
120
+ var theme = _a.theme;
121
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed;
122
+ }, function (_a) {
123
+ var _b, _c;
124
+ var theme = _a.theme;
125
+ return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.xs;
126
+ }, function (_a) {
127
+ var showMax = _a.showMax;
128
+ return (showMax ? 1 : 0);
129
+ });
130
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
25
131
 
26
132
  exports.ButtonWrapper = ButtonWrapper;
27
133
  exports.ListItemWrapper = ListItemWrapper;
28
134
  exports.Marking = Marking;
29
135
  exports.MarkingWrapper = MarkingWrapper;
136
+ exports.MaxWrapper = MaxWrapper;
30
137
  exports.PriceTagWrapper = PriceTagWrapper;
31
138
  exports.SearchListItemWrapper = SearchListItemWrapper;
32
139
  exports.ToolTip = ToolTip;
@@ -1 +1 @@
1
- {"version":3,"file":"SearchListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -85,6 +85,9 @@ require('../SideModal/SideModal.styles.js');
85
85
  require('../IconText/IconText.styles.js');
86
86
  require('../Dropdown/Dropdown.styles.js');
87
87
  require('../SearchListItem/SearchListItem.styles.js');
88
+ require('../PriceTag/PriceTag.types.js');
89
+ require('../PriceStripe/PriceStripe.styles.js');
90
+ require('../PriceTag/PriceTag.styles.js');
88
91
  require('../MenuListItem/MenuListItem.styles.js');
89
92
  require('../SlideInOutContainer/SlideInOutContainer.styles.js');
90
93
  require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
@@ -95,9 +98,6 @@ require('../CartSubTotal/CartSubTotal.js');
95
98
  require('../CouponCode/CouponCode.js');
96
99
  require('../CartCardLabel/CartCardLabel.styles.js');
97
100
  require('../CartCard/CartCard.styles.js');
98
- require('../PriceTag/PriceTag.types.js');
99
- require('../PriceStripe/PriceStripe.styles.js');
100
- require('../PriceTag/PriceTag.styles.js');
101
101
  require('../Pill/Pill.styles.js');
102
102
  require('../SelectButton/SelectButton.styles.js');
103
103
  require('../ProductHeader/ProductHeader.js');
@@ -81,6 +81,9 @@ import '../SideModal/SideModal.styles.js';
81
81
  import '../IconText/IconText.styles.js';
82
82
  import '../Dropdown/Dropdown.styles.js';
83
83
  import '../SearchListItem/SearchListItem.styles.js';
84
+ import '../PriceTag/PriceTag.types.js';
85
+ import '../PriceStripe/PriceStripe.styles.js';
86
+ import '../PriceTag/PriceTag.styles.js';
84
87
  import '../MenuListItem/MenuListItem.styles.js';
85
88
  import '../SlideInOutContainer/SlideInOutContainer.styles.js';
86
89
  import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
@@ -91,9 +94,6 @@ import '../CartSubTotal/CartSubTotal.js';
91
94
  import '../CouponCode/CouponCode.js';
92
95
  import '../CartCardLabel/CartCardLabel.styles.js';
93
96
  import '../CartCard/CartCard.styles.js';
94
- import '../PriceTag/PriceTag.types.js';
95
- import '../PriceStripe/PriceStripe.styles.js';
96
- import '../PriceTag/PriceTag.styles.js';
97
97
  import '../Pill/Pill.styles.js';
98
98
  import '../SelectButton/SelectButton.styles.js';
99
99
  import '../ProductHeader/ProductHeader.js';
@@ -2,6 +2,8 @@ import React from 'react';
2
2
  import Skeleton from 'react-loading-skeleton';
3
3
  import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, ListRight } from './ListItem.styles.js';
4
4
  import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js';
5
+ import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
6
+ import { PriceStripe } from '../PriceStripe/PriceStripe.js';
5
7
 
6
8
  var EListItemAlignment;
7
9
  (function (EListItemAlignment) {
@@ -9,9 +11,9 @@ var EListItemAlignment;
9
11
  EListItemAlignment["TOP"] = "flex-start";
10
12
  })(EListItemAlignment || (EListItemAlignment = {}));
11
13
  var ListItem = function (_a) {
12
- var item = _a.item, loading = _a.loading, isSmall = _a.isSmall, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, smallSkeleton = _a.smallSkeleton, children = _a.children, _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, usedInSearch = _a.usedInSearch;
14
+ var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
13
15
  return (React.createElement(ListItemContainer, null,
14
- React.createElement(ListLeft, { usedInSearch: usedInSearch, alignment: alignment },
16
+ React.createElement(ListLeft, { alignment: alignment },
15
17
  React.createElement(ListImageContainer, { isSmall: isSmall },
16
18
  React.createElement(ListImage, { autoHeight: imageAutoHeight, src: item === null || item === void 0 ? void 0 : item.image, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall, onError: function (e) {
17
19
  if (fallBackImage) {
@@ -23,10 +25,12 @@ var ListItem = function (_a) {
23
25
  }
24
26
  }
25
27
  } })),
26
- React.createElement(ItemInformationContainer, { usedInSearch: usedInSearch, alignment: alignment },
28
+ React.createElement(ItemInformationContainer, { alignment: alignment },
27
29
  loading ? (React.createElement(React.Fragment, null,
28
30
  React.createElement(Skeleton, { height: 15, width: smallSkeleton ? 150 : 250 }),
29
- React.createElement(Skeleton, { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React.createElement(ProductHeader, { location: EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description })),
31
+ React.createElement(Skeleton, { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React.createElement(React.Fragment, null,
32
+ showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
33
+ React.createElement(ProductHeader, { location: EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description }))),
30
34
  (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
31
35
  children && (React.createElement(ListRight, { alignment: alignment }, children))));
32
36
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4,15 +4,13 @@ import { EListItemAlignment } from './ListItem.js';
4
4
 
5
5
  var ItemInformationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: ", "px;\n"])), function (props) {
6
6
  var _a;
7
- return props.usedInSearch || props.alignment === EListItemAlignment.TOP
7
+ return props.alignment === EListItemAlignment.TOP
8
8
  ? 0
9
9
  : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs;
10
10
  });
11
11
  var ListItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n p {\n padding: 1px 0px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n p {\n padding: 1px 0px;\n }\n"])));
12
12
  var ListLeft = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", "px;\n @media (min-width: ", "px) {\n gap: ", "px;\n }\n"])), function (props) {
13
- return props.usedInSearch || props.alignment === EListItemAlignment.TOP
14
- ? 'inherit'
15
- : 'center';
13
+ return props.alignment === EListItemAlignment.TOP ? 'inherit' : 'center';
16
14
  }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; });
17
15
  var ListRight = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: ", ";\n justify-content: space-between;\n text-align: right;\n"])), function (props) {
18
16
  return props.alignment === EListItemAlignment.TOP ? 'flex-start' : 'center';
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -13,7 +13,7 @@ var PriceTag = function (_a) {
13
13
  var priceBase = Math.floor(price);
14
14
  var priceDecimals = (price % 1).toFixed(2).split('.')[1];
15
15
  var showPriceIndicator = priceDecimals === '00';
16
- var showUnit = pant || !(isMultiPrice && unit === 'st');
16
+ var showUnit = pant || (unit !== undefined && !(isMultiPrice && unit === 'st'));
17
17
  return (React.createElement(PriceTagWrapper, { fontColor: variantAttributes.fontColor },
18
18
  variant !== EPriceVariant.REGULAR && (React.createElement(PriceStripeContainer, null,
19
19
  React.createElement(PriceStripe, { multiPrice: multiPrice, size: size, variant: variant }))),
@@ -25,7 +25,7 @@ var PriceTag = function (_a) {
25
25
  : sizeAttributes.detailsNoPantWidth },
26
26
  showPriceIndicator ? (React.createElement(PriceIndicatorContainer, { isSmall: size === EPriceSize.SMALL, showUnit: showUnit },
27
27
  React.createElement(Icons.PriceIndicator, { fill: variantAttributes.fontColor, size: sizeAttributes.indicatorSize }))) : (React.createElement(PriceDecimals, { fontSize: sizeAttributes.decimalsFontSize, isSmall: size === EPriceSize.SMALL }, priceDecimals)),
28
- React.createElement(PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit)))))));
28
+ React.createElement(PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : unit ? "/".concat(unit) : ''))))));
29
29
  };
30
30
 
31
31
  export { PriceTag };
@@ -1,17 +1,25 @@
1
+ import { __assign } from '../../../../_virtual/_tslib.js';
1
2
  import React from 'react';
2
3
  import { ListItem } from '../ListItem/ListItem.js';
3
- import { SearchListItemWrapper, MarkingWrapper, Marking, ToolTip, ListItemWrapper, PriceTagWrapper, ButtonWrapper } from './SearchListItem.styles.js';
4
+ import { SearchListItemWrapper, MarkingWrapper, Marking, ToolTip, ListItemWrapper, PriceTagWrapper, ButtonWrapper, MaxWrapper } from './SearchListItem.styles.js';
5
+ import { PriceTag } from '../PriceTag/PriceTag.js';
6
+ import { EPriceVariant, EPriceSize } from '../PriceTag/PriceTag.types.js';
4
7
 
5
8
  var SearchListItem = function (_a) {
6
- var item = _a.item, button = _a.button, loading = _a.loading, price = _a.price, markings = _a.markings, fallBackImage = _a.fallBackImage;
9
+ var _b;
10
+ var button = _a.button, fallBackImage = _a.fallBackImage, item = _a.item, _c = _a.loading, loading = _c === void 0 ? false : _c, markings = _a.markings, priceTag = _a.priceTag, _d = _a.showMax, showMax = _d === void 0 ? false : _d;
11
+ var showPriceStripe = ((_b = priceTag.multiPrice) !== null && _b !== void 0 ? _b : 0) > 1 && priceTag.variant === EPriceVariant.PRIO;
7
12
  return (React.createElement(SearchListItemWrapper, null,
8
13
  markings && (React.createElement(MarkingWrapper, null, markings === null || markings === void 0 ? void 0 : markings.map(function (marking, index) { return (React.createElement(Marking, { key: index },
9
14
  React.createElement(ToolTip, { backgroundColor: marking === null || marking === void 0 ? void 0 : marking.backgroundColor, left: (index + 1) * 25 }, marking.tooltipText),
10
15
  marking.image)); }))),
11
16
  React.createElement(ListItemWrapper, null,
12
- React.createElement(ListItem, { usedInSearch: true, loading: loading, item: item, fallBackImage: fallBackImage })),
13
- React.createElement(PriceTagWrapper, null, price),
14
- React.createElement(ButtonWrapper, null, button)));
17
+ React.createElement(ListItem, { fallBackImage: fallBackImage, item: item, loading: loading, showPriceStripe: showPriceStripe })),
18
+ React.createElement(PriceTagWrapper, null,
19
+ React.createElement(PriceTag, __assign({}, priceTag, { size: EPriceSize.SMALL }))),
20
+ React.createElement(ButtonWrapper, null,
21
+ React.createElement(MaxWrapper, { showMax: showMax }, "Max antal uppn\u00E5tt"),
22
+ button)));
15
23
  };
16
24
 
17
25
  export { SearchListItem };
@@ -1 +1 @@
1
- {"version":3,"file":"SearchListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,19 +1,125 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var SearchListItemWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper PriceTagWrapper'\n 'ListItemWrapper ButtonWrapper ButtonWrapper';\n\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n }\n"], ["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper PriceTagWrapper'\n 'ListItemWrapper ButtonWrapper ButtonWrapper';\n\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
4
+ var SearchListItemWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper'\n 'ButtonWrapper ButtonWrapper';\n\n gap: ", "px;\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr auto;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n gap: ", "px;\n }\n"], ["\n display: grid;\n grid-template-columns: 2fr 1fr;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n 'ListItemWrapper PriceTagWrapper'\n 'ButtonWrapper ButtonWrapper';\n\n gap: ", "px;\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n grid-template-columns: 2fr 1fr auto;\n grid-template-rows: 1fr;\n grid-auto-flow: row;\n grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n gap: ", "px;\n }\n"])), function (_a) {
5
+ var _b;
6
+ var theme = _a.theme;
7
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
8
+ }, function (_a) {
9
+ var _b;
10
+ var theme = _a.theme;
11
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
12
+ }, function (_a) {
13
+ var _b;
14
+ var theme = _a.theme;
15
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
16
+ }, function (_a) {
17
+ var _b;
18
+ var theme = _a.theme;
19
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
20
+ }, function (_a) {
21
+ var _b;
22
+ var theme = _a.theme;
23
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
24
+ }, function (_a) {
25
+ var _b;
26
+ var theme = _a.theme;
27
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2;
28
+ });
5
29
  var ListItemWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-area: ListItemWrapper;\n"], ["\n grid-area: ListItemWrapper;\n"])));
6
- var PriceTagWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-start;\n }\n"], ["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-start;\n }\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
7
- var ButtonWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-area: ButtonWrapper;\n min-width: ", "px;\n margin-top: ", "px;\n justify-self: end;\n @media (min-width: ", "px) {\n margin-top: 0;\n }\n"], ["\n grid-area: ButtonWrapper;\n min-width: ", "px;\n margin-top: ", "px;\n justify-self: end;\n @media (min-width: ", "px) {\n margin-top: 0;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonWrapperMinWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
8
- var ToolTip = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: #fff;\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"], ["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: #fff;\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tooltipMinWidth; }, function (props) {
9
- var _a;
10
- return props.backgroundColor
11
- ? props.backgroundColor
12
- : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipBackground;
13
- }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) { return props.left; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipArrowMarginTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipArrowBorderWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipBackground; });
14
- var MarkingWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"], ["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchListItemGridTemplateColumns; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.MarkingWrapperGridGap; });
30
+ var PriceTagWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-end;\n }\n"], ["\n grid-area: PriceTagWrapper;\n display: flex;\n justify-content: flex-end;\n\n @media (min-width: ", "px) {\n justify-content: flex-end;\n }\n"])), function (_a) {
31
+ var _b;
32
+ var theme = _a.theme;
33
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
34
+ });
35
+ var ButtonWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n grid-area: ButtonWrapper;\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-self: end;\n min-width: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: column;\n gap: ", "px;\n margin-top: -", "px;\n }\n"], ["\n grid-area: ButtonWrapper;\n display: flex;\n align-items: center;\n gap: ", "px;\n justify-self: end;\n min-width: ", "px;\n\n @media (min-width: ", "px) {\n flex-direction: column;\n gap: ", "px;\n margin-top: -", "px;\n }\n"])), function (_a) {
36
+ var _b;
37
+ var theme = _a.theme;
38
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
39
+ }, function (_a) {
40
+ var _b;
41
+ var theme = _a.theme;
42
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.buttonWrapperMinWidth;
43
+ }, function (_a) {
44
+ var _b;
45
+ var theme = _a.theme;
46
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
47
+ }, function (_a) {
48
+ var _b;
49
+ var theme = _a.theme;
50
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
51
+ }, function (_a) {
52
+ var _b;
53
+ var theme = _a.theme;
54
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2;
55
+ });
56
+ var ToolTip = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: ", ";\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"], ["\n visibility: hidden;\n position: absolute;\n min-width: ", "px;\n background-color: ", ";\n color: ", ";\n text-align: center;\n padding: ", "px;\n border-radius: ", "px;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: ", "px;\n\n top: ", "%;\n transform: translateY(-50%);\n left: ", "px;\n\n ::after {\n content: '';\n position: absolute;\n top: 50%;\n right: 100%;\n margin-top: ", "px;\n border-width: ", "px;\n border-style: solid;\n border-color: transparent\n ", " transparent\n transparent;\n }\n"])), function (_a) {
57
+ var _b;
58
+ var theme = _a.theme;
59
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.tooltipMinWidth;
60
+ }, function (_a) {
61
+ var _b;
62
+ var backgroundColor = _a.backgroundColor, theme = _a.theme;
63
+ return backgroundColor || ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipBackground);
64
+ }, function (_a) {
65
+ var _b;
66
+ var theme = _a.theme;
67
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
68
+ }, function (_a) {
69
+ var _b;
70
+ var theme = _a.theme;
71
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
72
+ }, function (_a) {
73
+ var _b;
74
+ var theme = _a.theme;
75
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
76
+ }, function (_a) {
77
+ var _b, _c;
78
+ var theme = _a.theme;
79
+ return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s1;
80
+ }, function (_a) {
81
+ var _b;
82
+ var theme = _a.theme;
83
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.iconToolTipTop;
84
+ }, function (_a) {
85
+ var left = _a.left;
86
+ return left;
87
+ }, function (_a) {
88
+ var _b;
89
+ var theme = _a.theme;
90
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipArrowMarginTop;
91
+ }, function (_a) {
92
+ var _b;
93
+ var theme = _a.theme;
94
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipArrowBorderWidth;
95
+ }, function (_a) {
96
+ var _b;
97
+ var theme = _a.theme;
98
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipBackground;
99
+ });
100
+ var MarkingWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"], ["\n display: grid;\n grid-template-columns: ", "px;\n justify-self: flex-start;\n align-self: start;\n position: relative;\n grid-column: 1;\n grid-row: 1;\n z-index: 5;\n grid-gap: ", "px;\n grid-auto-flow: column;\n"])), function (_a) {
101
+ var _b;
102
+ var theme = _a.theme;
103
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchListItemGridTemplateColumns;
104
+ }, function (_a) {
105
+ var _b;
106
+ var theme = _a.theme;
107
+ return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.MarkingWrapperGridGap;
108
+ });
15
109
  var Marking = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:hover ", " {\n visibility: visible;\n opacity: 0.9;\n }\n"], ["\n &:hover ", " {\n visibility: visible;\n opacity: 0.9;\n }\n"])), ToolTip);
16
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
110
+ var MaxWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n opacity: ", ";\n white-space: nowrap;\n"], ["\n color: ", ";\n font-size: ", "px;\n opacity: ", ";\n white-space: nowrap;\n"])), function (_a) {
111
+ var _b;
112
+ var theme = _a.theme;
113
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed;
114
+ }, function (_a) {
115
+ var _b, _c;
116
+ var theme = _a.theme;
117
+ return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.xs;
118
+ }, function (_a) {
119
+ var showMax = _a.showMax;
120
+ return (showMax ? 1 : 0);
121
+ });
122
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
17
123
 
18
- export { ButtonWrapper, ListItemWrapper, Marking, MarkingWrapper, PriceTagWrapper, SearchListItemWrapper, ToolTip };
124
+ export { ButtonWrapper, ListItemWrapper, Marking, MarkingWrapper, MaxWrapper, PriceTagWrapper, SearchListItemWrapper, ToolTip };
19
125
  //# sourceMappingURL=SearchListItem.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -81,6 +81,9 @@ import '../SideModal/SideModal.styles.js';
81
81
  import '../IconText/IconText.styles.js';
82
82
  import '../Dropdown/Dropdown.styles.js';
83
83
  import '../SearchListItem/SearchListItem.styles.js';
84
+ import '../PriceTag/PriceTag.types.js';
85
+ import '../PriceStripe/PriceStripe.styles.js';
86
+ import '../PriceTag/PriceTag.styles.js';
84
87
  import '../MenuListItem/MenuListItem.styles.js';
85
88
  import '../SlideInOutContainer/SlideInOutContainer.styles.js';
86
89
  import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
@@ -91,9 +94,6 @@ import '../CartSubTotal/CartSubTotal.js';
91
94
  import '../CouponCode/CouponCode.js';
92
95
  import '../CartCardLabel/CartCardLabel.styles.js';
93
96
  import '../CartCard/CartCard.styles.js';
94
- import '../PriceTag/PriceTag.types.js';
95
- import '../PriceStripe/PriceStripe.styles.js';
96
- import '../PriceTag/PriceTag.styles.js';
97
97
  import '../Pill/Pill.styles.js';
98
98
  import '../SelectButton/SelectButton.styles.js';
99
99
  import '../ProductHeader/ProductHeader.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.72",
3
+ "version": "0.8.74",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
76
76
  "react-slick": "^0.30.1",
77
77
  "slick-carousel": "^1.8.1"
78
78
  },
79
- "gitHead": "a4298a1e03299bbd713a152b1f723fc26a32b1cf"
79
+ "gitHead": "81095e84486838ae5831c60cbb7a864be61447b8"
80
80
  }