@citygross/components 0.7.113 → 0.7.114

package/build/@types/index.d.ts

@@ -71,3 +71,4 @@ export * from './components/MenuListItem/MenuListHeader';
 export * from './components/MenuListItem/MenuListItem';
 export * from './components/SlideInOutContainer/SlideInOutContainer';
 export * from './components/SearchSuggestionChip/SearchSuggestionChip';
+export * from './components/ZipCodeInput/ZipCodeInput';

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -85,6 +85,7 @@ require('../SearchListItem/SearchListItem.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
 require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
+require('../ZipCodeInput/ZipCodeInput.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js

@@ -85,6 +85,7 @@ require('../SearchListItem/SearchListItem.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
 require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
+require('../ZipCodeInput/ZipCodeInput.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ZipCodeInput_styles = require('./ZipCodeInput.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ZipCodeInput = function (_a) {
+    var setZipCode = _a.setZipCode, verified = _a.verified, setVerified = _a.setVerified, backgroundColor = _a.backgroundColor, verifiedBackground = _a.verifiedBackground;
+    var inputRefs = React.useRef([]);
+    var createZipCode = function () {
+        var zipCode = 0;
+        inputRefs.current.forEach(function (i) {
+            if (zipCode === 0) {
+                zipCode = i.value;
+            }
+            else {
+                zipCode += i.value;
+            }
+        });
+        return zipCode;
+    };
+    var clamp = function (min, max, val) {
+        return Math.max(min, Math.min(val, max));
+    };
+    var handleInput = function (index, e) {
+        var nextIndex = clamp(0, 5 - 1, index + 1);
+        var prevIndex = clamp(0, 5 - 1, index - 1);
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            inputRefs.current[index].value = null;
+            setVerified(false);
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowLeft') {
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowRight') {
+            inputRefs.current[nextIndex].focus();
+        }
+        else {
+            if (inputRefs.current[index].value) {
+                if (e.key >= '1' && e.key <= '9') {
+                    inputRefs.current[index].value = e.key;
+                    inputRefs.current[nextIndex].focus();
+                }
+            }
+        }
+        var counter = 0;
+        inputRefs.current.forEach(function (ref) {
+            if (ref.value) {
+                counter++;
+            }
+        });
+        if (counter === 5) {
+            setVerified(true);
+            setZipCode(createZipCode());
+            inputRefs.current[index].blur();
+        }
+    };
+    return (React__default["default"].createElement(ZipCodeInput_styles.InputWrapper, null, Array.from(Array(5).keys()).map(function (index) { return (React__default["default"].createElement("div", { key: index },
+        React__default["default"].createElement(ZipCodeInput_styles.ZipCodeInputBox, { type: "number", onInput: function (e) { return (e.currentTarget.value = e.currentTarget.value.slice(0, 1)); }, onKeyUp: function (e) { return handleInput(index, e); }, verified: verified, backgroundColor: backgroundColor, verifiedBackground: verifiedBackground, marginLeft: index === 3, ref: function (ref) { return (inputRefs.current[index] = ref); } }))); })));
+};
+
+exports.ZipCodeInput = ZipCodeInput;
+//# sourceMappingURL=ZipCodeInput.js.map

package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZipCodeInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.styles.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var InputWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var ZipCodeInputBox = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenMedium;
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? props.backgroundColor
+            ? props.backgroundColor
+            : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white
+        : props.verifiedBackground
+            ? props.verifiedBackground
+            : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight;
+}, function (props) { var _a; return props.marginLeft ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px") : 0; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; });
+var templateObject_1, templateObject_2;
+
+exports.InputWrapper = InputWrapper;
+exports.ZipCodeInputBox = ZipCodeInputBox;
+//# sourceMappingURL=ZipCodeInput.styles.js.map

package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZipCodeInput.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -76,6 +76,7 @@ var MenuListHeader = require('./components/MenuListItem/MenuListHeader.js');
 var MenuListItem = require('./components/MenuListItem/MenuListItem.js');
 var SlideInOutContainer = require('./components/SlideInOutContainer/SlideInOutContainer.js');
 var SearchSuggestionChip = require('./components/SearchSuggestionChip/SearchSuggestionChip.js');
+var ZipCodeInput = require('./components/ZipCodeInput/ZipCodeInput.js');
 
 
 
@@ -184,4 +185,5 @@ exports.MenuListHeader = MenuListHeader.MenuListHeader;
 exports.MenuListItem = MenuListItem.MenuListItem;
 exports.SlideInOutContainer = SlideInOutContainer.SlideInOutContainer;
 exports.SearchSuggestionChip = SearchSuggestionChip.SearchSuggestionChip;
+exports.ZipCodeInput = ZipCodeInput.ZipCodeInput;
 //# sourceMappingURL=index.js.map

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/AddressBlock/AddressBlock.js

@@ -81,6 +81,7 @@ import '../SearchListItem/SearchListItem.styles.js';
 import '../MenuListItem/MenuListItem.styles.js';
 import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
+import '../ZipCodeInput/ZipCodeInput.styles.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

package/build/es/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/WarningLabel/WarningLabel.js

@@ -81,6 +81,7 @@ import '../SearchListItem/SearchListItem.styles.js';
 import '../MenuListItem/MenuListItem.styles.js';
 import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
+import '../ZipCodeInput/ZipCodeInput.styles.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

package/build/es/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.js

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import { InputWrapper, ZipCodeInputBox } from './ZipCodeInput.styles.js';
+
+var ZipCodeInput = function (_a) {
+    var setZipCode = _a.setZipCode, verified = _a.verified, setVerified = _a.setVerified, backgroundColor = _a.backgroundColor, verifiedBackground = _a.verifiedBackground;
+    var inputRefs = useRef([]);
+    var createZipCode = function () {
+        var zipCode = 0;
+        inputRefs.current.forEach(function (i) {
+            if (zipCode === 0) {
+                zipCode = i.value;
+            }
+            else {
+                zipCode += i.value;
+            }
+        });
+        return zipCode;
+    };
+    var clamp = function (min, max, val) {
+        return Math.max(min, Math.min(val, max));
+    };
+    var handleInput = function (index, e) {
+        var nextIndex = clamp(0, 5 - 1, index + 1);
+        var prevIndex = clamp(0, 5 - 1, index - 1);
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            inputRefs.current[index].value = null;
+            setVerified(false);
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowLeft') {
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowRight') {
+            inputRefs.current[nextIndex].focus();
+        }
+        else {
+            if (inputRefs.current[index].value) {
+                if (e.key >= '1' && e.key <= '9') {
+                    inputRefs.current[index].value = e.key;
+                    inputRefs.current[nextIndex].focus();
+                }
+            }
+        }
+        var counter = 0;
+        inputRefs.current.forEach(function (ref) {
+            if (ref.value) {
+                counter++;
+            }
+        });
+        if (counter === 5) {
+            setVerified(true);
+            setZipCode(createZipCode());
+            inputRefs.current[index].blur();
+        }
+    };
+    return (React.createElement(InputWrapper, null, Array.from(Array(5).keys()).map(function (index) { return (React.createElement("div", { key: index },
+        React.createElement(ZipCodeInputBox, { type: "number", onInput: function (e) { return (e.currentTarget.value = e.currentTarget.value.slice(0, 1)); }, onKeyUp: function (e) { return handleInput(index, e); }, verified: verified, backgroundColor: backgroundColor, verifiedBackground: verifiedBackground, marginLeft: index === 3, ref: function (ref) { return (inputRefs.current[index] = ref); } }))); })));
+};
+
+export { ZipCodeInput };
+//# sourceMappingURL=ZipCodeInput.js.map

package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZipCodeInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.styles.js

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var InputWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var ZipCodeInputBox = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenMedium;
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? props.backgroundColor
+            ? props.backgroundColor
+            : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white
+        : props.verifiedBackground
+            ? props.verifiedBackground
+            : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight;
+}, function (props) { var _a; return props.marginLeft ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px") : 0; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; });
+var templateObject_1, templateObject_2;
+
+export { InputWrapper, ZipCodeInputBox };
+//# sourceMappingURL=ZipCodeInput.styles.js.map

package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZipCodeInput.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/index.js

@@ -72,4 +72,5 @@ export { MenuListHeader } from './components/MenuListItem/MenuListHeader.js';
 export { MenuListItem } from './components/MenuListItem/MenuListItem.js';
 export { SlideInOutContainer } from './components/SlideInOutContainer/SlideInOutContainer.js';
 export { SearchSuggestionChip } from './components/SearchSuggestionChip/SearchSuggestionChip.js';
+export { ZipCodeInput } from './components/ZipCodeInput/ZipCodeInput.js';
 //# sourceMappingURL=index.js.map

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.113",
+  "version": "0.7.114",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "b535dbca9f84e565b1840ec3b224cf0ab5d06e05"
+  "gitHead": "653a9a391aca85f24aa635bf55b8dffd4b0acc09"
 }