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

package/build/esm/{RatingStarsInput-4f140be5.js → RatingStarsInput-837b526e.js}

@@ -1,51 +1,51 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-c54295c0.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7dc738a8.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio } from './index-7e524308.js';
+import { R as Radio } from './index-bef2476e.js';
 import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-98a15aa4.js';
-import './index-617330b0.js';
-import { C as CommonGAssets } from './index-d85c046c.js';
-import './index-4915e15b.js';
-import { T as Text } from './index-c066e80e.js';
-import { B as Button$1 } from './index-88b671be.js';
-import './index.styles-63bb2e40.js';
-import './translationsContext-a36f1aaf.js';
+import { L as LOCALE_SPECS, F as FAVICONS, S as SERVICE_TYPE } from './index-3c7563c8.js';
+import './index-f236c016.js';
+import { C as CommonGAssets } from './index-22aceaf1.js';
+import './index-f1659a8b.js';
+import { T as Text } from './index-050c8079.js';
+import { B as Button$1 } from './index-5776df51.js';
+import './index.styles-81832242.js';
+import './translationsContext-29e00b5f.js';
 import '@mantine/hooks';
-import './text-6b093211.js';
-import { M as MediaQueries } from './utils-5534832b.js';
-import './index-10fae33b.js';
-import { i as isInternalLink } from './index-b29872d9.js';
+import './text-c332b95d.js';
+import { M as MediaQueries } from './utils-04755003.js';
+import './index-a7db9b0e.js';
+import { i as isInternalLink } from './index-1084ecee.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-f5b11ea1.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-1bc3df6e.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-42b25b2f.js';
+import { L as Logo } from './index-cea82db5.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-3d669ced.js';
+import { a as useOutsideClick } from './useOutsideClick-6ac1da95.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-6a1a5886.js';
-import { u as useScreenSize, I as ImageWrap } from './index-6228610a.js';
-import { u as useTranslations } from './index-3c0a7f2c.js';
-import { D as Dropdown } from './index-1ed4269d.js';
+import { B as Button } from './index-ada29708.js';
+import { u as useScreenSize, I as ImageWrap } from './index-aee23f2a.js';
+import { u as useTranslations } from './index-e2bfbb7c.js';
+import { D as Dropdown } from './index-ea980afa.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-99414d3f.js';
-import { D as Drawer } from './index-875082c1.js';
+import { I as Input } from './index-99e947cf.js';
+import { D as Drawer } from './index-c4f932dc.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-c8ed89fc.js';
+import { L as LOCALE } from './Locale-09c4a41f.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-5c7dc757.js';
-import { L as Loading } from './index-3305e967.js';
+import { A as ArrowRightBlue } from './index-cfd4a759.js';
+import { L as Loading } from './index-f627ee51.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -4770,9 +4770,9 @@ const StyledTextButton = styled.div `
 `;
 
 //12M: Add props later
-const HPVScreener = ({ onClick, className }) => {
+const HPVScreener = ({ onClick, className, style }) => {
     const { t } = useTranslations();
-    return (React__default.createElement("div", { className: className },
+    return (React__default.createElement("div", { className: className, style: style },
         React__default.createElement(StyledBox, null,
             React__default.createElement(StyledContentBox, null,
                 React__default.createElement(StyledContent, null,
@@ -5012,7 +5012,7 @@ function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSi
     return React__default.createElement(ListContext.Provider, { value: value }, children);
 }
 
-const StyledFilterItem = styled.div `
+const StyledFilterItem$1 = styled.div `
   display: inline-flex;
   border: 1px solid ${theme.colors.neutral100};
   padding: 0.5rem 0.75rem;
@@ -5031,7 +5031,7 @@ const StyledFilterItem = styled.div `
   }
 `;
 
-const StyledVaccineFilter = styled.div `
+const StyledVaccineFilter$1 = styled.div `
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -5062,14 +5062,140 @@ function QuickFilter(_a) {
             }
         });
     };
-    return (React__default.createElement(StyledVaccineFilter, { className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, filterOptions.map((item, index) => (React__default.createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: clsx('snap-center', {
+    return (React__default.createElement(StyledVaccineFilter$1, { className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, filterOptions.map((item, index) => (React__default.createElement(StyledFilterItem$1, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: 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.div `
+  display: inline-flex;
+  border: 1px solid ${theme.colors.neutral100};
+  padding: 0.5rem 0.75rem;
+  color: ${theme.colors.gray800};
+  text-align: center;
+  font-size: 0.8125rem;
+  border-radius: ${rem(18)};
+  line-height: 1.25rem;
+  background-color: ${theme.colors.white};
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid ${theme.colors.blue100};
+    background-color: ${theme.colors.blue50};
+  }
+`;
+const StyledGapColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const StyledGapRow = styled.div `
+  display: flex;
+  gap: 8px;
+`;
+const StyledVaccineFilter = styled.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 = __rest(_a, ["filterOptions", "activeFilter", "onChange"]);
+    const containerOfFilter = useRef(null);
+    const [widthOfFilter, setWidthOfFilter] = useState(0);
+    const [widthOfWindow, setWidthOfWindow] = useState(0);
+    const [conditionForWrapItem, setConditionForWrapItem] = useState(false);
+    const [itemsForWrap, setItemsForWrap] = useState([]);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setWidthOfWindow(window.innerWidth);
+        }
+    }, []);
+    useEffect(() => {
+        if (containerOfFilter.current) {
+            const filterWidth = containerOfFilter.current.scrollWidth;
+            setWidthOfFilter(filterWidth);
+        }
+    }, []);
+    useEffect(() => {
+        if (widthOfFilter > widthOfWindow) {
+            setConditionForWrapItem(true);
+        }
+        else {
+            setConditionForWrapItem(false);
+        }
+    }, [widthOfFilter, widthOfWindow]);
+    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__default.createElement(StyledGapColumn, null,
+                React__default.createElement(StyledGapRow, null, (_a = itemsForWrap[0]) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React__default.createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_row_1_${index}`, onClick: handleChange(item), className: clsx('snap-center', {
+                        active: activeFilter[item.filterKey] === item.value,
+                    }), "data-event-label": item.label }), item.label)))),
+                React__default.createElement(StyledGapRow, null, (_b = itemsForWrap[1]) === null || _b === void 0 ? void 0 : _b.map((item, index) => (React__default.createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_row_2_${index}`, onClick: handleChange(item), className: clsx('snap-center', {
+                        active: activeFilter[item.filterKey] === item.value,
+                    }), "data-event-label": item.label }), item.label))))));
+        }
+        if (!conditionForWrapItem) {
+            return filterOptions.map((item, index) => (React__default.createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: 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__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 = __rest(_a, ["filterOptions"]);
+    var { filterOptions, service_type } = _a, restProps = __rest(_a, ["filterOptions", "service_type"]);
     const { handleChangeFilter, filters } = useListContext();
+    if (service_type === SERVICE_TYPE.VACCINE) {
+        return (React__default.createElement(QuickFilterWrapLine, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: (value) => handleChangeFilter(value, filterOptions), activeFilter: filters })));
+    }
     return (React__default.createElement(QuickFilter, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: (value) => handleChangeFilter(value, filterOptions), activeFilter: filters })));
 }
 
@@ -5452,4 +5578,4 @@ const RatingStarsInput = ({ value, max = MAX_RATING, onChange, readOnly = false,
         error && (React__default.createElement(Text, { className: "error-text", size: "c1", color: theme.colors.red600 }, error))));
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, List as L, MAX_RATING as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, CardListItem as n, CertificateItem as o, RatingStars as p, RatingStarsInput as q, StarFull as r, StarHalf as s, useListContext as u };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, GeneralInfo as G, HPVScreener as H, IconText as I, List as L, MAX_RATING as M, QuickFilter as Q, RadioGroup as R, ScrollList as S, Tabs as T, VoucherItem as V, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, DoctorInfo as d, CookieAcceptConfirm as e, SeoHead as f, DateRangePicker as g, ShareContainer as h, index$1 as i, ShareDrawer as j, FixedBottomAdBlock as k, SummaryInfo as l, ListContext as m, QuickFilterWrapLine as n, CardListItem as o, CertificateItem as p, RatingStars as q, RatingStarsInput as r, StarFull as s, StarHalf as t, useListContext as u };

package/build/esm/{Spinner-62b3b870.js → Spinner-c6f3b92d.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-c54295c0.js';
+import { _ as __rest } from './tslib.es6-7dc738a8.js';
 import React__default from 'react';
 
 const Spinner = (_a) => {

package/build/esm/{WhatsApp-9e13a87b.js → WhatsApp-3a990d9c.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-c54295c0.js';
+import { _ as __rest } from './tslib.es6-7dc738a8.js';
 import React__default from 'react';
 
 const Instagram = (_a) => {

package/build/esm/adapters.js

@@ -1,39 +1,39 @@
-export { B as Button } from './index-6a1a5886.js';
-export { T as Text } from './index-628ed99a.js';
-export { H as Heading } from './index-3478dfb8.js';
-import './tslib.es6-c54295c0.js';
+export { B as Button } from './index-ada29708.js';
+export { T as Text } from './index-6da63aea.js';
+export { H as Heading } from './index-ef7c13d2.js';
+import './tslib.es6-7dc738a8.js';
 import 'react';
-import './index-88b671be.js';
+import './index-5776df51.js';
 import '@mantine/core';
-import './shared-99aa74fd.js';
-import './text-6b093211.js';
-import './index-7e524308.js';
+import './shared-296f18d9.js';
+import './text-c332b95d.js';
+import './index-bef2476e.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-d85c046c.js';
+import './index-22aceaf1.js';
 import './constantsDomainLocales.js';
-import './Locale-c8ed89fc.js';
+import './Locale-09c4a41f.js';
 import './constantsIsProduction.js';
-import './index-6228610a.js';
-import './utils-5534832b.js';
+import './index-aee23f2a.js';
+import './utils-04755003.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-c066e80e.js';
-import './index-4915e15b.js';
+import './index-050c8079.js';
+import './index-f1659a8b.js';
 import 'dayjs';
-import './index-617330b0.js';
+import './index-f236c016.js';
 import '@mantine/notifications';
-import './index-98a15aa4.js';
+import './index-3c7563c8.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-50df37b0.js';
+import './useUniqueId-456e3951.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-63bb2e40.js';
-import './translationsContext-a36f1aaf.js';
-import './index-10fae33b.js';
+import './index.styles-81832242.js';
+import './translationsContext-29e00b5f.js';
+import './index-a7db9b0e.js';

package/build/esm/atoms.js

@@ -1,76 +1,76 @@
-export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-dbd074c5.js';
-export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-b59573db.js';
-export { B as Button } from './index-6a1a5886.js';
-export { C as Checkbox, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-f5b11ea1.js';
-export { C as Container } from './index-becabd40.js';
-export { D as Divider } from './index-95d4b754.js';
-export { D as Drawer } from './index-875082c1.js';
-export { F as Flag } from './index-7e524308.js';
-export { H as Heading } from './index-3478dfb8.js';
-export { I as Icon } from './index-1590841b.js';
-export { I as Input, L as Label } from './index-99414d3f.js';
-export { L as Logo } from './index-42b25b2f.js';
-export { R as RadioImageGroup } from './index-50d4e649.js';
-export { T as Text } from './index-628ed99a.js';
-export { T as TextArea } from './index-6213ec6c.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-6c1777d9.js';
-export { B as BtnChoice } from './index-2e5204f1.js';
-export { C as CustomReferenceDot } from './index-bc0f366f.js';
-export { I as ImageWrap } from './index-6228610a.js';
-export { L as LogoIcon } from './logoIcon-39800004.js';
-export { G as GenderOptionControl } from './index-63c61315.js';
-export { L as Loading } from './index-3305e967.js';
-export { D as DrawerComponent } from './index-71afc51a.js';
-export { I as InputDate } from './InputDate-5e9ee779.js';
+export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-26a98bee.js';
+export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-49c71e1f.js';
+export { B as Button } from './index-ada29708.js';
+export { C as Checkbox, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-1bc3df6e.js';
+export { C as Container } from './index-d436d8d3.js';
+export { D as Divider } from './index-fd0f26ba.js';
+export { D as Drawer } from './index-c4f932dc.js';
+export { F as Flag } from './index-bef2476e.js';
+export { H as Heading } from './index-ef7c13d2.js';
+export { I as Icon } from './index-b31d1aac.js';
+export { I as Input, L as Label } from './index-99e947cf.js';
+export { L as Logo } from './index-cea82db5.js';
+export { R as RadioImageGroup } from './index-9a0c85d2.js';
+export { T as Text } from './index-6da63aea.js';
+export { T as TextArea } from './index-d37a1788.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-cef3755a.js';
+export { B as BtnChoice } from './index-85559e1a.js';
+export { C as CustomReferenceDot } from './index-23f62610.js';
+export { I as ImageWrap } from './index-aee23f2a.js';
+export { L as LogoIcon } from './logoIcon-066902be.js';
+export { G as GenderOptionControl } from './index-4ab850b4.js';
+export { L as Loading } from './index-f627ee51.js';
+export { D as DrawerComponent } from './index-8af61b37.js';
+export { I as InputDate } from './InputDate-dcf1338b.js';
 import 'react';
-import './index-c066e80e.js';
-import './tslib.es6-c54295c0.js';
+import './index-050c8079.js';
+import './tslib.es6-7dc738a8.js';
 import '@mantine/core';
-import './text-6b093211.js';
+import './text-c332b95d.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-5534832b.js';
+import './utils-04755003.js';
 import '@mantine/hooks';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
-import './Close-b81063d5.js';
+import './Close-e0504985.js';
 import '@mantine/carousel';
-import './index-88b671be.js';
-import './shared-99aa74fd.js';
+import './index-5776df51.js';
+import './shared-296f18d9.js';
 import '@mantine/dates';
-import './index-98a15aa4.js';
+import './index-3c7563c8.js';
 import 'date-fns/locale';
-import './index-617330b0.js';
-import './Locale-c8ed89fc.js';
+import './index-f236c016.js';
+import './Locale-09c4a41f.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-d85c046c.js';
-import './index-4915e15b.js';
+import './index-22aceaf1.js';
+import './index-f1659a8b.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index.styles-63bb2e40.js';
-import './translationsContext-a36f1aaf.js';
-import './index-10fae33b.js';
+import './index.styles-81832242.js';
+import './translationsContext-29e00b5f.js';
+import './index-a7db9b0e.js';
 import '@hhgtech/icons/other';
 import '@emotion/react';
-import './animation-9cb1ffe1.js';
+import './animation-756f56db.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-50df37b0.js';
+import './useUniqueId-456e3951.js';
 import '@hhgtech/icons/core';
-import './WhatsApp-9e13a87b.js';
-import './Spinner-62b3b870.js';
-import './index-774a2e7e.js';
-import './index-3c0a7f2c.js';
-import './paths-60a09d66.js';
-import './constants-553491fe.js';
-import './utils-cc75ac70.js';
-import './index-f042a6e9.js';
+import './WhatsApp-3a990d9c.js';
+import './Spinner-c6f3b92d.js';
+import './index-6c31b237.js';
+import './index-e2bfbb7c.js';
+import './paths-748e4a3f.js';
+import './constants-2c842bba.js';
+import './utils-c19457de.js';
+import './index-5aedd6bc.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-afc17900.js';
+import './constants-6890d2d4.js';
 import 'vaul';