@hhgtech/hhg-components 1.29.434-beta-13 → 1.29.434-beta-14

package/build/{InputDate-1b1959db.js → InputDate-c679bff5.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a2c8e0.js');
 var React = require('react');
 var core = require('@mantine/core');
 var cn = require('classnames');
 var dayjs = require('dayjs');
-var text = require('./text-0446adc7.js');
+var text = require('./text-7977b0a8.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-83c85aca.js');
-var Locale = require('./Locale-1cc7d00a.js');
-var index$1 = require('./index-684035ad.js');
+var index = require('./index-eac3ab1a.js');
+var Locale = require('./Locale-3b1932db.js');
+var index$1 = require('./index-d265088b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{LastPeriod-02438fc6.js → LastPeriod-36ec3f12.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a2c8e0.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{MobileBottomNavigationIcon-dffe4aa3.js → MobileBottomNavigationIcon-efca7b24.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a2c8e0.js');
 var React = require('react');
-var index = require('./index-684035ad.js');
+var index = require('./index-d265088b.js');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-38bc0c39.js');
+var utils = require('./utils-ad01fd80.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{RatingStarsInput-859bc0a4.js → RatingStarsInput-b2d3df35.js}

@@ -1,52 +1,52 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a2c8e0.js');
 var React = require('react');
-var index$5 = require('./index-b9acc0e4.js');
+var index$5 = require('./index-73bd5c93.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$7 = require('./index-83c85aca.js');
-require('./index-91bc823d.js');
-var index$b = require('./index-20aaac80.js');
-require('./index-03fac4b2.js');
-var index$3 = require('./index-684035ad.js');
-var index$f = require('./index-90ccc103.js');
-require('./index.styles-4af7910f.js');
-require('./translationsContext-ae61f6b6.js');
+var index$7 = require('./index-eac3ab1a.js');
+require('./index-16ca8115.js');
+var index$b = require('./index-636beb06.js');
+require('./index-347f20c0.js');
+var index$3 = require('./index-d265088b.js');
+var index$f = require('./index-95f41961.js');
+require('./index.styles-7a125a73.js');
+require('./translationsContext-2a67ce91.js');
 require('@mantine/hooks');
-require('./text-0446adc7.js');
-var utils = require('./utils-38bc0c39.js');
-require('./index-b9434de4.js');
-var index$2 = require('./index-e8690664.js');
+require('./text-7977b0a8.js');
+var utils = require('./utils-ad01fd80.js');
+require('./index-4aa587a0.js');
+var index$2 = require('./index-9e4278fa.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-cc1b430d.js');
+var index$4 = require('./index-2bfbf974.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
-var index$6 = require('./index-0c22fee7.js');
+var index$6 = require('./index-157c5cf3.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var useOutsideClick = require('./useOutsideClick-c69afe7f.js');
+var useOutsideClick = require('./useOutsideClick-5ab9fbcf.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$a = require('./index-a23cd4f3.js');
-var index$8 = require('./index-5d500fbd.js');
-var index$9 = require('./index-4f5dd6de.js');
-var index$c = require('./index-bc33e250.js');
+var index$a = require('./index-d674ff74.js');
+var index$8 = require('./index-2abd2ae7.js');
+var index$9 = require('./index-33434f47.js');
+var index$c = require('./index-ec0a57cf.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$e = require('./index-b692fae9.js');
-var index$d = require('./index-60602c1b.js');
+var index$e = require('./index-ea8a2035.js');
+var index$d = require('./index-6fd25e06.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-1cc7d00a.js');
+var Locale = require('./Locale-3b1932db.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
-var index$g = require('./index-1241c87f.js');
-var index$h = require('./index-2f01358a.js');
+var index$g = require('./index-ee64c0e8.js');
+var index$h = require('./index-3c1c4bfa.js');
 var get = require('lodash/get');
 var debounce = require('lodash/debounce');
 
@@ -4804,9 +4804,9 @@ const StyledTextButton = styled__default["default"].div `
 `;
 
 //12M: Add props later
-const HPVScreener = ({ onClick, className }) => {
+const HPVScreener = ({ onClick, className, style }) => {
     const { t } = index$9.useTranslations();
-    return (React__namespace["default"].createElement("div", { className: className },
+    return (React__namespace["default"].createElement("div", { className: className, style: style },
         React__namespace["default"].createElement(StyledBox, null,
             React__namespace["default"].createElement(StyledContentBox, null,
                 React__namespace["default"].createElement(StyledContent, null,
@@ -5046,7 +5046,7 @@ function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSi
     return React__namespace["default"].createElement(ListContext.Provider, { value: value }, children);
 }
 
-const StyledFilterItem = styled__default["default"].div `
+const StyledFilterItem$1 = styled__default["default"].div `
   display: inline-flex;
   border: 1px solid ${miscTheme.theme.colors.neutral100};
   padding: 0.5rem 0.75rem;
@@ -5065,7 +5065,7 @@ const StyledFilterItem = styled__default["default"].div `
   }
 `;
 
-const StyledVaccineFilter = styled__default["default"].div `
+const StyledVaccineFilter$1 = styled__default["default"].div `
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -5096,14 +5096,140 @@ function QuickFilter(_a) {
             }
         });
     };
-    return (React__namespace["default"].createElement(StyledVaccineFilter, { className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, filterOptions.map((item, index) => (React__namespace["default"].createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: core.clsx('snap-center', {
+    return (React__namespace["default"].createElement(StyledVaccineFilter$1, { className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, filterOptions.map((item, index) => (React__namespace["default"].createElement(StyledFilterItem$1, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: core.clsx('snap-center', {
             active: activeFilter[item.filterKey] === item.value,
         }), "data-event-label": item.label }), item.label)))));
 }
 
+const splitArrayByRowSizes = (items, rowSize) => {
+    const result = [];
+    const row1 = items.slice(0, rowSize);
+    if (row1.length > 0) {
+        result.push(row1);
+    }
+    const row2 = items.slice(rowSize);
+    if (row2.length > 0) {
+        result.push(row2);
+    }
+    return result;
+};
+
+const StyledFilterItem = styled__default["default"].div `
+  display: inline-flex;
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
+  padding: 0.5rem 0.75rem;
+  color: ${miscTheme.theme.colors.gray800};
+  text-align: center;
+  font-size: 0.8125rem;
+  border-radius: ${core.rem(18)};
+  line-height: 1.25rem;
+  background-color: ${miscTheme.theme.colors.white};
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid ${miscTheme.theme.colors.blue100};
+    background-color: ${miscTheme.theme.colors.blue50};
+  }
+`;
+const StyledGapColumn = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const StyledGapRow = styled__default["default"].div `
+  display: flex;
+  gap: 8px;
+`;
+const StyledVaccineFilter = styled__default["default"].div `
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+`;
+
+function QuickFilterWrapLine(_a) {
+    var { filterOptions, activeFilter, onChange } = _a, restProps = tslib_es6.__rest(_a, ["filterOptions", "activeFilter", "onChange"]);
+    const containerOfFilter = React.useRef(null);
+    const [widthOfFilter, setWidthOfFilter] = React.useState(0);
+    const [widthOfWindow, setWidthOfWindow] = React.useState(0);
+    const [conditionForWrapItem, setConditionForWrapItem] = React.useState(false);
+    const [itemsForWrap, setItemsForWrap] = React.useState([]);
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setWidthOfWindow(window.innerWidth);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (containerOfFilter.current) {
+            const filterWidth = containerOfFilter.current.scrollWidth;
+            setWidthOfFilter(filterWidth);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (widthOfFilter > widthOfWindow) {
+            setConditionForWrapItem(true);
+        }
+        else {
+            setConditionForWrapItem(false);
+        }
+    }, [widthOfFilter, widthOfWindow]);
+    React.useEffect(() => {
+        if (conditionForWrapItem) {
+            const lenPerRow = Math.round(filterOptions.length / 2);
+            const items = splitArrayByRowSizes(filterOptions, lenPerRow);
+            setItemsForWrap(items);
+        }
+    }, [conditionForWrapItem]);
+    const handleRenderItem = () => {
+        var _a, _b;
+        if (!(filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length))
+            return null;
+        if (conditionForWrapItem) {
+            return (React__namespace["default"].createElement(StyledGapColumn, null,
+                React__namespace["default"].createElement(StyledGapRow, null, (_a = itemsForWrap[0]) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React__namespace["default"].createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_row_1_${index}`, onClick: handleChange(item), className: core.clsx('snap-center', {
+                        active: activeFilter[item.filterKey] === item.value,
+                    }), "data-event-label": item.label }), item.label)))),
+                React__namespace["default"].createElement(StyledGapRow, null, (_b = itemsForWrap[1]) === null || _b === void 0 ? void 0 : _b.map((item, index) => (React__namespace["default"].createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_row_2_${index}`, onClick: handleChange(item), className: core.clsx('snap-center', {
+                        active: activeFilter[item.filterKey] === item.value,
+                    }), "data-event-label": item.label }), item.label))))));
+        }
+        if (!conditionForWrapItem) {
+            return filterOptions.map((item, index) => (React__namespace["default"].createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: core.clsx('snap-center', {
+                    active: activeFilter[item.filterKey] === item.value,
+                }), "data-event-label": item.label }), item.label)));
+        }
+    };
+    const handleChange = (item) => {
+        return ((e) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(item);
+            const target = e.target;
+            if (target) {
+                target.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'center',
+                    behavior: 'auto',
+                });
+            }
+        });
+    };
+    return (React__namespace["default"].createElement(StyledVaccineFilter, { ref: containerOfFilter, className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, handleRenderItem()));
+}
+
 function ListQuickFilter(_a) {
-    var { filterOptions } = _a, restProps = tslib_es6.__rest(_a, ["filterOptions"]);
+    var { filterOptions, service_type } = _a, restProps = tslib_es6.__rest(_a, ["filterOptions", "service_type"]);
     const { handleChangeFilter, filters } = useListContext();
+    if (service_type === index$7.SERVICE_TYPE.VACCINE) {
+        return (React__namespace["default"].createElement(QuickFilterWrapLine, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: (value) => handleChangeFilter(value, filterOptions), activeFilter: filters })));
+    }
     return (React__namespace["default"].createElement(QuickFilter, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: (value) => handleChangeFilter(value, filterOptions), activeFilter: filters })));
 }
 
@@ -5505,6 +5631,7 @@ exports.List = List;
 exports.ListContext = ListContext;
 exports.MAX_RATING = MAX_RATING;
 exports.QuickFilter = QuickFilter;
+exports.QuickFilterWrapLine = QuickFilterWrapLine;
 exports.RadioGroup = RadioGroup;
 exports.RatingStars = RatingStars;
 exports.RatingStarsInput = RatingStarsInput;

package/build/{Spinner-4f5954a7.js → Spinner-a39af7c6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a2c8e0.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{WhatsApp-67e80091.js → WhatsApp-d55525a8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a2c8e0.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/adapters.js

@@ -2,45 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-a23cd4f3.js');
-var index$1 = require('./index-14225778.js');
-var index$2 = require('./index-72d1245a.js');
-require('./tslib.es6-7a91a740.js');
+var index = require('./index-d674ff74.js');
+var index$1 = require('./index-f437305f.js');
+var index$2 = require('./index-e284a81f.js');
+require('./tslib.es6-85a2c8e0.js');
 require('react');
-require('./index-90ccc103.js');
+require('./index-95f41961.js');
 require('@mantine/core');
-require('./shared-430c9258.js');
-require('./text-0446adc7.js');
-require('./index-b9acc0e4.js');
+require('./shared-763aa8db.js');
+require('./text-7977b0a8.js');
+require('./index-73bd5c93.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./index-20aaac80.js');
+require('./index-636beb06.js');
 require('./constantsDomainLocales.js');
-require('./Locale-1cc7d00a.js');
+require('./Locale-3b1932db.js');
 require('./constantsIsProduction.js');
-require('./index-5d500fbd.js');
-require('./utils-38bc0c39.js');
+require('./index-2abd2ae7.js');
+require('./utils-ad01fd80.js');
 require('@emotion/styled');
 require('@mantine/carousel');
-require('./index-684035ad.js');
-require('./index-03fac4b2.js');
+require('./index-d265088b.js');
+require('./index-347f20c0.js');
 require('dayjs');
-require('./index-91bc823d.js');
+require('./index-16ca8115.js');
 require('@mantine/notifications');
-require('./index-83c85aca.js');
+require('./index-eac3ab1a.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./miscTheme.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-19836a22.js');
+require('./useUniqueId-4cf645c4.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-4af7910f.js');
-require('./translationsContext-ae61f6b6.js');
-require('./index-b9434de4.js');
+require('./index.styles-7a125a73.js');
+require('./translationsContext-2a67ce91.js');
+require('./index-4aa587a0.js');
 
 
 

package/build/atoms.js

@@ -2,81 +2,81 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-9cd0e316.js');
-var index$1 = require('./index-751879aa.js');
-var index$2 = require('./index-a23cd4f3.js');
-var index$3 = require('./index-cc1b430d.js');
-var index$4 = require('./index-5defa8f1.js');
-var index$5 = require('./index-4fac7693.js');
-var index$6 = require('./index-60602c1b.js');
-var index$7 = require('./index-b9acc0e4.js');
-var index$8 = require('./index-72d1245a.js');
-var index$9 = require('./index-d916ebd1.js');
-var index$a = require('./index-b692fae9.js');
-var index$b = require('./index-0c22fee7.js');
-var index$c = require('./index-263f473f.js');
-var index$d = require('./index-14225778.js');
-var index$e = require('./index-87af6118.js');
-var index$f = require('./index-ff870917.js');
-var index$g = require('./index-0b68fdfc.js');
-var index$h = require('./index-565a43c8.js');
-var index$i = require('./index-5d500fbd.js');
-var logoIcon = require('./logoIcon-22591085.js');
-var index$j = require('./index-2e9845bc.js');
-var index$k = require('./index-2f01358a.js');
-var index$l = require('./index-f20dfec1.js');
-var InputDate = require('./InputDate-1b1959db.js');
+var index = require('./index-5fe3afd8.js');
+var index$1 = require('./index-91ce1cb6.js');
+var index$2 = require('./index-d674ff74.js');
+var index$3 = require('./index-2bfbf974.js');
+var index$4 = require('./index-e4ba57fb.js');
+var index$5 = require('./index-01afc1b7.js');
+var index$6 = require('./index-6fd25e06.js');
+var index$7 = require('./index-73bd5c93.js');
+var index$8 = require('./index-e284a81f.js');
+var index$9 = require('./index-6d41ca23.js');
+var index$a = require('./index-ea8a2035.js');
+var index$b = require('./index-157c5cf3.js');
+var index$c = require('./index-5442725f.js');
+var index$d = require('./index-f437305f.js');
+var index$e = require('./index-90acf4bd.js');
+var index$f = require('./index-13308057.js');
+var index$g = require('./index-f965fb44.js');
+var index$h = require('./index-4296d57b.js');
+var index$i = require('./index-2abd2ae7.js');
+var logoIcon = require('./logoIcon-085bb5b8.js');
+var index$j = require('./index-233c15aa.js');
+var index$k = require('./index-3c1c4bfa.js');
+var index$l = require('./index-6d44f43f.js');
+var InputDate = require('./InputDate-c679bff5.js');
 require('react');
-require('./index-684035ad.js');
-require('./tslib.es6-7a91a740.js');
+require('./index-d265088b.js');
+require('./tslib.es6-85a2c8e0.js');
 require('@mantine/core');
-require('./text-0446adc7.js');
+require('./text-7977b0a8.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-38bc0c39.js');
+require('./utils-ad01fd80.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./Close-65c2618c.js');
+require('./Close-eab9c42a.js');
 require('@mantine/carousel');
-require('./index-90ccc103.js');
-require('./shared-430c9258.js');
+require('./index-95f41961.js');
+require('./shared-763aa8db.js');
 require('@mantine/dates');
-require('./index-83c85aca.js');
+require('./index-eac3ab1a.js');
 require('date-fns/locale');
-require('./index-91bc823d.js');
-require('./Locale-1cc7d00a.js');
+require('./index-16ca8115.js');
+require('./Locale-3b1932db.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-20aaac80.js');
-require('./index-03fac4b2.js');
+require('./index-636beb06.js');
+require('./index-347f20c0.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-4af7910f.js');
-require('./translationsContext-ae61f6b6.js');
-require('./index-b9434de4.js');
+require('./index.styles-7a125a73.js');
+require('./translationsContext-2a67ce91.js');
+require('./index-4aa587a0.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-6f361916.js');
+require('./animation-82ef22bc.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-19836a22.js');
+require('./useUniqueId-4cf645c4.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-67e80091.js');
-require('./Spinner-4f5954a7.js');
-require('./index-d18f30df.js');
-require('./index-4f5dd6de.js');
-require('./paths-7841f285.js');
-require('./constants-50fc4f7d.js');
-require('./utils-04bc1a26.js');
-require('./index-2ee3a62f.js');
+require('./WhatsApp-d55525a8.js');
+require('./Spinner-a39af7c6.js');
+require('./index-030b763d.js');
+require('./index-33434f47.js');
+require('./paths-97f76c39.js');
+require('./constants-4dab94eb.js');
+require('./utils-97258aec.js');
+require('./index-d0639df0.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-85f91be3.js');
+require('./constants-6941f213.js');
 require('vaul');