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

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a58c8b.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-7e00b810.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-6e78fda5.js');
+var Locale = require('./Locale-7ee8e404.js');
+var index$1 = require('./index-6bd135a6.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{LastPeriod-02438fc6.js → LastPeriod-4dd2abde.js}

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

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a58c8b.js');
 var React = require('react');
-var index = require('./index-684035ad.js');
+var index = require('./index-6bd135a6.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-3715c362.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

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

@@ -1,52 +1,52 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a58c8b.js');
 var React = require('react');
-var index$5 = require('./index-b9acc0e4.js');
+var index$5 = require('./index-a6d7af61.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-6e78fda5.js');
+require('./index-6e53d438.js');
+var index$b = require('./index-67300d62.js');
+require('./index-bfcd3c2c.js');
+var index$3 = require('./index-6bd135a6.js');
+var index$f = require('./index-ae0e8fd0.js');
+require('./index.styles-1a73b9fb.js');
+require('./translationsContext-9ae1945d.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-7e00b810.js');
+var utils = require('./utils-3715c362.js');
+require('./index-1b568f5c.js');
+var index$2 = require('./index-de1e0d24.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-cc1b430d.js');
+var index$4 = require('./index-157d0eb3.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-85d69cb2.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-6f3f398c.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-6bda32b6.js');
+var index$8 = require('./index-470edc19.js');
+var index$9 = require('./index-c56669a0.js');
+var index$c = require('./index-46e77e5d.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-978584b7.js');
+var index$d = require('./index-d140ad77.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-1cc7d00a.js');
+var Locale = require('./Locale-7ee8e404.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-015efd1e.js');
+var index$h = require('./index-2d14cecd.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,7 +5096,7 @@ 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)))));
 }
@@ -5107,6 +5107,133 @@ function ListQuickFilter(_a) {
     return (React__namespace["default"].createElement(QuickFilter, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: (value) => handleChangeFilter(value, filterOptions), activeFilter: filters })));
 }
 
+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);
+        }
+        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 ListQuickFilterWrapline(_a) {
+    var { filterOptions } = _a, restProps = tslib_es6.__rest(_a, ["filterOptions"]);
+    const { handleChangeFilter, filters } = useListContext();
+    return (React__namespace["default"].createElement(QuickFilterWrapLine, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: (value) => handleChangeFilter(value, filterOptions), activeFilter: filters })));
+}
+
 function LoadMore(_a) {
     var { renderLoadMore } = _a, restProps = tslib_es6.__rest(_a, ["renderLoadMore"]);
     const { loadingMore, handleLoadMore, pageSize, page, total } = useListContext();
@@ -5162,6 +5289,7 @@ const List = {
     Item,
     LoadMore,
     QuickFilter: ListQuickFilter,
+    QuickFilterWrapLine: ListQuickFilterWrapline,
 };
 
 const StyleCardItem = styled__default["default"].div `
@@ -5505,6 +5633,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-3d719ffa.js}

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7a91a740.js');
+var tslib_es6 = require('./tslib.es6-85a58c8b.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-6bda32b6.js');
+var index$1 = require('./index-f8f087d5.js');
+var index$2 = require('./index-70c44807.js');
+require('./tslib.es6-85a58c8b.js');
 require('react');
-require('./index-90ccc103.js');
+require('./index-ae0e8fd0.js');
 require('@mantine/core');
-require('./shared-430c9258.js');
-require('./text-0446adc7.js');
-require('./index-b9acc0e4.js');
+require('./shared-02104c88.js');
+require('./text-7e00b810.js');
+require('./index-a6d7af61.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./index-20aaac80.js');
+require('./index-67300d62.js');
 require('./constantsDomainLocales.js');
-require('./Locale-1cc7d00a.js');
+require('./Locale-7ee8e404.js');
 require('./constantsIsProduction.js');
-require('./index-5d500fbd.js');
-require('./utils-38bc0c39.js');
+require('./index-470edc19.js');
+require('./utils-3715c362.js');
 require('@emotion/styled');
 require('@mantine/carousel');
-require('./index-684035ad.js');
-require('./index-03fac4b2.js');
+require('./index-6bd135a6.js');
+require('./index-bfcd3c2c.js');
 require('dayjs');
-require('./index-91bc823d.js');
+require('./index-6e53d438.js');
 require('@mantine/notifications');
-require('./index-83c85aca.js');
+require('./index-6e78fda5.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./miscTheme.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-19836a22.js');
+require('./useUniqueId-84d5e030.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-1a73b9fb.js');
+require('./translationsContext-9ae1945d.js');
+require('./index-1b568f5c.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-54b77c53.js');
+var index$1 = require('./index-fb01670b.js');
+var index$2 = require('./index-6bda32b6.js');
+var index$3 = require('./index-157d0eb3.js');
+var index$4 = require('./index-ca0ff4c8.js');
+var index$5 = require('./index-c6c48932.js');
+var index$6 = require('./index-d140ad77.js');
+var index$7 = require('./index-a6d7af61.js');
+var index$8 = require('./index-70c44807.js');
+var index$9 = require('./index-b00390be.js');
+var index$a = require('./index-978584b7.js');
+var index$b = require('./index-85d69cb2.js');
+var index$c = require('./index-750611bf.js');
+var index$d = require('./index-f8f087d5.js');
+var index$e = require('./index-2dc78637.js');
+var index$f = require('./index-c0954f5e.js');
+var index$g = require('./index-6cd739a8.js');
+var index$h = require('./index-b484c76d.js');
+var index$i = require('./index-470edc19.js');
+var logoIcon = require('./logoIcon-30c68547.js');
+var index$j = require('./index-c090dd2f.js');
+var index$k = require('./index-2d14cecd.js');
+var index$l = require('./index-da960148.js');
+var InputDate = require('./InputDate-0865632b.js');
 require('react');
-require('./index-684035ad.js');
-require('./tslib.es6-7a91a740.js');
+require('./index-6bd135a6.js');
+require('./tslib.es6-85a58c8b.js');
 require('@mantine/core');
-require('./text-0446adc7.js');
+require('./text-7e00b810.js');
 require('@emotion/styled');
 require('./miscTheme.js');
-require('./utils-38bc0c39.js');
+require('./utils-3715c362.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./Close-65c2618c.js');
+require('./Close-42124800.js');
 require('@mantine/carousel');
-require('./index-90ccc103.js');
-require('./shared-430c9258.js');
+require('./index-ae0e8fd0.js');
+require('./shared-02104c88.js');
 require('@mantine/dates');
-require('./index-83c85aca.js');
+require('./index-6e78fda5.js');
 require('date-fns/locale');
-require('./index-91bc823d.js');
-require('./Locale-1cc7d00a.js');
+require('./index-6e53d438.js');
+require('./Locale-7ee8e404.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-20aaac80.js');
-require('./index-03fac4b2.js');
+require('./index-67300d62.js');
+require('./index-bfcd3c2c.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-4af7910f.js');
-require('./translationsContext-ae61f6b6.js');
-require('./index-b9434de4.js');
+require('./index.styles-1a73b9fb.js');
+require('./translationsContext-9ae1945d.js');
+require('./index-1b568f5c.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-6f361916.js');
+require('./animation-4e701023.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-19836a22.js');
+require('./useUniqueId-84d5e030.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-00a457cb.js');
+require('./Spinner-3d719ffa.js');
+require('./index-f1582bbe.js');
+require('./index-c56669a0.js');
+require('./paths-2de5d2ab.js');
+require('./constants-e987b5dd.js');
+require('./utils-42e8937d.js');
+require('./index-c7d12621.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-85f91be3.js');
+require('./constants-15214b3a.js');
 require('vaul');