@citygross/components 0.7.204 → 0.7.205

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.
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  import { TButtonColor } from '../Button/Button';
3
3
  import { Settings } from 'react-slick';
4
4
  export declare type TSlider = {
5
- customSlideAmount: number;
6
5
  children: React.ReactNode;
7
6
  itemGap?: number;
8
7
  iconHeight?: number;
@@ -43,7 +43,7 @@ function DeliverySlotItem(_a) {
43
43
  3;
44
44
  // if no observer cant find height of element
45
45
  if (entry.intersectionRect.height === 0) {
46
- setIsVisible(true);
46
+ setIsVisible(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
47
47
  return;
48
48
  }
49
49
  // check if intersecting when slot is in 3px of viewHeight
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
12
+ var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
13
13
  var _a, _b;
14
14
  return props.selected
15
15
  ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
13
- var LeftIconButtonContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
14
- var RightIconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"], ["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
12
+ var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n\n .slick-track {\n display: flex;\n overflow: hidden;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: ", "px;\n }\n .slick-list {\n @media (min-width: ", "px) {\n overflow: hidden;\n }\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n .slick-track {\n display: flex;\n overflow: hidden;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: ", "px;\n }\n .slick-list {\n @media (min-width: ", "px) {\n overflow: hidden;\n }\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
13
+ var LeftIconButtonContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
14
+ var RightIconButtonContainer = styled__default["default"](LeftIconButtonContainer)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n left: unset;\n right: -", "px;\n"], ["\n left: unset;\n right: -", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; });
15
15
  styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, 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.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
16
16
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
17
17
 
@@ -35,7 +35,7 @@ function DeliverySlotItem(_a) {
35
35
  3;
36
36
  // if no observer cant find height of element
37
37
  if (entry.intersectionRect.height === 0) {
38
- setIsVisible(true);
38
+ setIsVisible(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
39
39
  return;
40
40
  }
41
41
  // check if intersecting when slot is in 3px of viewHeight
@@ -1,7 +1,7 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
4
+ var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
5
5
  var _a, _b;
6
6
  return props.selected
7
7
  ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
@@ -1,9 +1,9 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
5
- var LeftIconButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
6
- var RightIconButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"], ["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
4
+ var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n .slick-track {\n display: flex;\n overflow: hidden;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: ", "px;\n }\n .slick-list {\n @media (min-width: ", "px) {\n overflow: hidden;\n }\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n .slick-track {\n display: flex;\n overflow: hidden;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: ", "px;\n }\n .slick-list {\n @media (min-width: ", "px) {\n overflow: hidden;\n }\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
5
+ var LeftIconButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
6
+ var RightIconButtonContainer = styled(LeftIconButtonContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: unset;\n right: -", "px;\n"], ["\n left: unset;\n right: -", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; });
7
7
  styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, 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.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
8
8
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.204",
3
+ "version": "0.7.205",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "bdb638c770f7e3ebed6b0755346b100b0a0227fd"
77
+ "gitHead": "1176bb26b6f4aa9f11b0cb027deb70efb4bb9e35"
78
78
  }