@hhgtech/hhg-components 1.29.361 → 1.29.362-beta-1

package/build/esm/{index-230e765d.js → index-6257cb48.js}

@@ -1,44 +1,45 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-cf8bdaac.js';
-import React__default, { useState, useImperativeHandle, useRef, useEffect, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
-import { R as Radio } from './index-81097236.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-fa3837bb.js';
+import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
+import { R as Radio } from './index-e5c566b6.js';
 import { Stack, Group, createStyles, getStylesRef, Box } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-057e4881.js';
-import './index-68df179a.js';
-import { C as CommonGAssets } from './index-92ab9005.js';
-import './useMantineLocale-921259d6.js';
-import { T as Text } from './index-1b95110c.js';
-import { B as Button$1 } from './index-7d4d62ab.js';
-import './index.styles-612b88c3.js';
-import './translationsContext-1053b855.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-d0ac2540.js';
+import './index-0ac41a38.js';
+import { C as CommonGAssets } from './index-72377c79.js';
+import './useMantineLocale-5c5f128a.js';
+import { T as Text } from './index-1fd0ebe0.js';
+import { B as Button$1 } from './index-2aea6709.js';
+import './index.styles-b86ddc12.js';
+import './translationsContext-a3c2604e.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-504d3f05.js';
-import './other-28b72baa.js';
-import './index-2b2ebc80.js';
-import { i as isInternalLink } from './index-1aa0ac8b.js';
+import { M as MediaQueries } from './utils-0b25052a.js';
+import './other-1284fe94.js';
+import './index-5c889d6a.js';
+import { i as isInternalLink } from './index-7e1915f2.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, P as PureInput } from './index-da3f54f7.js';
-import { L as Logo } from './index-ad3dbb96.js';
+import { C as Checkbox, P as PureInput } from './index-11c98d09.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-d235fd62.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { isBefore, startOfMonth, addMonths, format, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
-import { a as useOutsideClick } from './useOutsideClick-66e40b60.js';
+import { a as useOutsideClick } from './useOutsideClick-c21703f6.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-e7631b76.js';
-import { u as useScreenSize } from './useScreenSize-f3cae5ca.js';
-import { u as useTranslations } from './index-8e69b183.js';
-import { D as Dropdown } from './index-2a7c39fd.js';
+import { B as Button } from './index-65c129cb.js';
+import { u as useScreenSize } from './useScreenSize-c22db377.js';
+import { u as useTranslations } from './index-8ce0fc1d.js';
+import { D as Dropdown } from './index-46c45362.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-4b7f9d72.js';
-import { D as Drawer } from './index-1e81fcab.js';
+import { I as Input } from './index-38eecd4a.js';
+import { D as Drawer } from './index-3735050f.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-e3d80799.js';
+import { L as LOCALE } from './Locale-40d804d5.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
@@ -138,6 +139,603 @@ const CheckboxGroup = ({ name, values = [], onChanges, options = [], className,
     return (React__default.createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__default.createElement(Checkbox, { label: option.label, name: name, key: `${index}-${option.value}`, checked: values.includes(option.value), value: option.value, isDisabled: isDisabled || option.disabled, onChange: !isDisabled && onChange, isRectangle: isRectangle })))));
 };
 
+const MONTHS_TRANSLATION = {
+    'vi-VN': [
+        'Tháng 1',
+        'Tháng 2',
+        'Tháng 3',
+        'Tháng 4',
+        'Tháng 5',
+        'Tháng 6',
+        'Tháng 7',
+        'Tháng 8',
+        'Tháng 9',
+        'Tháng 10',
+        'Tháng 11',
+        'Tháng 12',
+    ],
+    'id-ID': [
+        'Januari',
+        'Februari',
+        'Maret',
+        'April',
+        'Mei',
+        'Juni',
+        'Juli',
+        'Agustus',
+        'September',
+        'Oktober',
+        'November',
+        'Desember',
+    ],
+    'ms-MY': [
+        'Januari',
+        'Februari',
+        'Mac',
+        'April',
+        'Mei',
+        'Jun',
+        'Julai',
+        'Ogos',
+        'September',
+        'Oktober',
+        'November',
+        'Disember',
+    ],
+    'km-KH': [
+        'មករា',
+        'ខែកុម្ភៈ',
+        'មីនា',
+        'ខែមេសា',
+        'ឧសភា',
+        'មិថុនា',
+        'ខែកក្កដា',
+        'សីហា',
+        'ខែកញ្ញា',
+        'តុលា',
+        'វិច្ឆិកា',
+        'ធ្នូ',
+    ],
+    'en-PH': [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    'th-TH': [
+        'มกราคม',
+        'กุมภาพันธ์',
+        'มีนาคม',
+        'เมษายน',
+        'อาจ',
+        'มิถุนายน',
+        'กรกฎาคม',
+        'สิงหาคม',
+        'กันยายน',
+        'ตุลาคม',
+        'พฤศจิกายน',
+        'ธันวาคม',
+    ],
+    'my-MM': [
+        'ဇန်နဝါရီလ',
+        'ဖေဖော်ဝါရီလ',
+        'မတ်လ',
+        'ပြီလ',
+        'မေလ',
+        'ဇွန',
+        'ဇူလိုင်လ',
+        'သြဂုတ်လ',
+        'စက်တင်ဘာ',
+        'အောက်တိုဘာ',
+        'နိုဝင်ဘာ',
+        'ဒီဇင်ဘာ',
+    ],
+    'zh-TW': [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月',
+    ],
+    'hi-IN': [
+        'जनवरी',
+        'फ़रवरी',
+        'जुलूस',
+        'अप्रैल',
+        'मई',
+        'जून',
+        'जुलाई',
+        'अगस्त',
+        'सितंबर',
+        'अक्टूबर',
+        'नवंबर',
+        'दिसंबर',
+    ],
+};
+
+const StyledPickerContainer = styled.div `
+  .pickerContainer {
+    position: relative;
+    padding-top: 0;
+    & > div > svg {
+      position: absolute;
+      top: 36px;
+      right: 16px;
+      cursor: pointer;
+    }
+
+    & > :not(:first-child) {
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+    }
+  }
+
+  &[data-is-static] .pickerOverlayWrapper {
+    position: static;
+    max-width: 250px;
+    aspect-ratio: 1 / 1;
+
+    > .pickerOverlay {
+      padding: 1rem;
+    }
+  }
+
+  .pickerOverlayWrapper {
+    min-width: 320px;
+  }
+
+  &[data-align-right='true'] {
+    .pickerOverlayWrapper {
+      right: 0;
+    }
+  }
+
+  .pickerOverlay {
+    margin-top: 6px;
+    background: white;
+    border-radius: ${theme.borderRadius};
+    box-shadow: 0px 6px 12px rgba(67, 86, 100, 0.2);
+  }
+
+  .picker {
+    width: 100%;
+  }
+
+  .react-datepicker-popper {
+    .react-datepicker {
+      display: flex;
+      width: 340px;
+      height: 305px;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      box-shadow: (-1px 1px 2px rgba(67, 70, 74, 0.0001)),
+        (-2px 2px 5px rgba(67, 86, 100, 0.123689));
+    }
+
+    .svg {
+      cursor: pointer;
+      stroke: ${theme.colors.gray800};
+    }
+    .react-datepicker__day {
+      width: 40px;
+    }
+
+    .react-datepicker__header {
+      border-bottom: 0;
+      background-color: white;
+    }
+
+    .react-datepicker__day--outside-month {
+      color: #e9e9e9;
+    }
+
+    .react-datepicker__day {
+      font-weight: ${theme.sizes.fwBold};
+    }
+
+    .react-datepicker__day--selected,
+    .react-datepicker__day--today,
+    .react-datepicker__day--selected:hover,
+    .react-datepicker__day--keyboard-selected {
+      width: 32px;
+      height: 30px;
+      margin: 4px;
+      margin-bottom: -2px;
+      background: ${theme.colors.primaryBase};
+      border-radius: 50%;
+    }
+
+    .react-datepicker__day-name {
+      width: 40px;
+    }
+
+    .react-datepicker__triangle {
+      display: none;
+    }
+
+    .react-datepicker__header.react-datepicker__header--custom {
+      svg {
+        stroke: #262626;
+      }
+      select {
+        background: ${theme.colors.neutral100};
+        text-align: center;
+        &:not(:last-child) {
+          padding: 8px 10px;
+          margin-right: 15px;
+          border-radius: ${theme.borderRadius};
+        }
+      }
+    }
+  }
+
+  /* DayPicker styles */
+
+  .DayPicker {
+    display: inline-block;
+    font-size: 1rem;
+  }
+
+  .DayPicker-wrapper {
+    position: relative;
+
+    flex-direction: row;
+    padding-bottom: 1em;
+
+    -webkit-user-select: none;
+
+    -moz-user-select: none;
+
+    -ms-user-select: none;
+
+    user-select: none;
+  }
+
+  .DayPicker-Months {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .DayPicker-Month {
+    display: table;
+    margin: 0 16px;
+    margin-top: 16px;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    -webkit-user-select: none;
+
+    -moz-user-select: none;
+
+    -ms-user-select: none;
+
+    user-select: none;
+  }
+
+  .DayPicker-NavBar {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+  }
+
+  .DayPicker-NavButton {
+    width: 24px;
+    height: 24px;
+    margin-bottom: -47px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    color: #8b9898;
+    cursor: pointer;
+  }
+
+  .DayPicker-NavButton:hover {
+    opacity: 0.8;
+  }
+
+  .DayPicker-NavButton--prev {
+    //left: 2px;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L1 5L5 1' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
+
+  .DayPicker-NavButton--next {
+    //right: 2px;
+    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
+
+  .DayPicker-NavButton--interactionDisabled {
+    display: none;
+  }
+
+  .DayPicker-Caption {
+    display: table-caption;
+    width: 100%;
+    height: 46px;
+    padding: 0 32px;
+  }
+
+  .DayPicker-Caption select {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  .DayPicker-Weekdays {
+    display: table-header-group;
+    margin-top: 1em;
+  }
+
+  .DayPicker-WeekdaysRow {
+    display: table-row;
+  }
+
+  .DayPicker-Weekday {
+    display: table-cell;
+    padding: 0.5em;
+    color: #8b9898;
+    font-size: 0.875em;
+    text-align: center;
+  }
+
+  .DayPicker-Weekday abbr[title] {
+    border-bottom: none;
+    text-decoration: none;
+  }
+
+  .DayPicker-Body {
+    display: table-row-group;
+  }
+
+  .DayPicker-Week {
+    display: table-row;
+  }
+
+  .DayPicker-Day {
+    display: table-cell;
+
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .DayPicker-WeekNumber {
+    display: table-cell;
+    min-width: 1em;
+    padding: 0.5em;
+    border-right: 1px solid #eaecec;
+    color: #8b9898;
+    cursor: pointer;
+    font-size: 0.75em;
+    text-align: right;
+    vertical-align: middle;
+  }
+
+  .DayPicker--interactionDisabled .DayPicker-Day {
+    cursor: default;
+  }
+
+  .DayPicker-Footer {
+    padding-top: 0.5em;
+  }
+
+  .DayPicker-TodayButton {
+    border: none;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    color: #4a90e2;
+    cursor: pointer;
+    font-size: 0.875em;
+  }
+
+  /* Default modifiers */
+
+  .DayPicker-Day--today {
+    color: #d0021b;
+    font-weight: 700;
+  }
+
+  .DayPicker-Day--outside {
+    color: #8b9898;
+    cursor: default;
+  }
+
+  .DayPicker-Day--disabled {
+    color: #dce0e0;
+    cursor: default;
+    /* background-color: #eff1f1; */
+  }
+
+  /* Example modifiers */
+
+  .DayPicker-Day--sunday {
+    background-color: #f7f8f8;
+  }
+
+  .DayPicker-Day--sunday:not(.DayPicker-Day--today) {
+    color: #dce0e0;
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--outside
+    ) {
+    position: relative;
+
+    background-color: ${theme.colors.primaryBase};
+    color: #f0f8ff;
+    font-weight: ${theme.sizes.fwBold};
+  }
+
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--outside
+    ):hover {
+    background-color: #51a0fa;
+  }
+
+  .DayPicker:not(.DayPicker--interactionDisabled)
+    .DayPicker-Day:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--selected
+    ):not(.DayPicker-Day--outside):hover {
+    background-color: #f0f8ff;
+  }
+
+  /* DayPickerInput */
+
+  .DayPickerInput {
+    display: inline-block;
+  }
+
+  .DayPickerInput-OverlayWrapper {
+    position: relative;
+  }
+
+  .DayPickerInput-Overlay {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+
+    background: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  }
+`;
+const StyledCaptionWrapper = styled.form `
+  display: flex;
+  width: 100%;
+
+  height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  & > :first-child {
+    margin-right: 10px;
+  }
+
+  & * {
+    height: 46px;
+    padding: 10px 10px;
+    background: ${theme.colors.neutral100};
+    border-radius: ${theme.borderRadius};
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const DatePicker = ({ alignRight = true, placeholder, displayDateFormat, onChange, customInput: CustomInput, pickedDate, className, isStatic, disabledDays, modifiers, UnHideOnClickOutside, initialMonth, locale = 'en-PH', }) => {
+    const isDatePickerShown = useRef(false);
+    const dateFormatter = format;
+    const [month, setMonth] = useState(initialMonth || new Date());
+    const datePickerContainer = useRef(null);
+    const datePicker = useRef(null);
+    const defaultDateFormatString = 'yyyy-MM-dd';
+    const monthLabels = MONTHS_TRANSLATION[locale];
+    const handleDaysSelect = (day) => {
+        datePicker.current && !isStatic && datePicker.current.hideDayPicker();
+        onChange && onChange(day);
+    };
+    const handleDayChanged = (selectedDay) => {
+        handleDaysSelect(selectedDay);
+    };
+    const formatPickerDate = (date, format) => {
+        return dateFormatter(date, format);
+    };
+    const handleDateClick = (e) => {
+        if (UnHideOnClickOutside)
+            return;
+        if (!datePickerContainer.current ||
+            !datePickerContainer.current.contains(e.target)) {
+            datePicker.current && datePicker.current.hideDayPicker();
+        }
+    };
+    // customise the drop downs for Month and year
+    const currentYear = new Date().getFullYear();
+    const fromMonth = new Date(currentYear - 150, 0);
+    const toMonth = new Date(currentYear + 1, 0);
+    const YearMonthForm = ({ date, 
+    // localeUtils,
+    onChange, monthLabels, }) => {
+        // const months = localeUtils.getMonths()
+        const years = [];
+        for (let i = toMonth.getFullYear(); i >= fromMonth.getFullYear(); i -= 1) {
+            years.push(i);
+        }
+        const handleChange = function handleChange(e) {
+            const { year, month } = e.target.form;
+            onChange(new Date(year.value, month.value));
+        };
+        return (React__default.createElement("div", { className: "DayPicker-Caption" },
+            React__default.createElement(StyledCaptionWrapper, null,
+                React__default.createElement("select", { name: "month", onChange: handleChange, value: date.getMonth() }, monthLabels.map((month, i) => (React__default.createElement("option", { key: month, value: i }, month)))),
+                React__default.createElement("select", { name: "year", onChange: handleChange, value: date.getFullYear() }, years.map((year) => (React__default.createElement("option", { key: year, value: year }, year)))))));
+    };
+    const CaptionElement = ({ date, localeUtils, }) => {
+        const defaultMonthLabels = localeUtils === null || localeUtils === void 0 ? void 0 : localeUtils.getMonths();
+        return (React__default.createElement(YearMonthForm, { date: date, 
+            // localeUtils={localeUtils}
+            monthLabels: monthLabels || defaultMonthLabels, onChange: setMonth }));
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', handleDateClick, {
+            passive: true,
+        });
+        return () => {
+            document.removeEventListener('mousedown', handleDateClick, false);
+        };
+    }, []);
+    return (React__default.createElement(StyledPickerContainer, { className: className, "data-align-right": alignRight, ref: datePickerContainer, "data-is-static": isStatic || undefined },
+        React__default.createElement(DayPickerInput, { ref: datePicker, inputProps: {
+                readOnly: true,
+            }, keepFocus: false, classNames: {
+                container: 'pickerContainer',
+                overlayWrapper: 'pickerOverlayWrapper',
+                overlay: 'pickerOverlay',
+            }, component: CustomInput &&
+                React__default.forwardRef(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                (props, _ref) => (React__default.createElement(CustomInput, Object.assign({}, props)))), onDayPickerHide: () => {
+                isDatePickerShown.current = false;
+            }, onDayPickerShow: () => {
+                isDatePickerShown.current = true;
+            }, dayPickerProps: {
+                month: month,
+                className: 'picker',
+                selectedDays: pickedDate,
+                canChangeMonth: true,
+                enableOutsideDaysClick: isStatic ? false : true,
+                firstDayOfWeek: 1,
+                captionElement: CaptionElement,
+                disabledDays: disabledDays || undefined,
+                modifiers: modifiers,
+            }, format: displayDateFormat || defaultDateFormatString, formatDate: formatPickerDate, hideOnDayClick: isStatic ? false : true, placeholder: placeholder || '', onDayChange: handleDayChanged, showOverlay: isStatic })));
+};
+
 const StyledIconText = styled.div `
   display: flex;
   align-items: center;
@@ -4036,4 +4634,4 @@ const WidgetChatbotAi = ({}) => {
                     React__default.createElement(Button$1, { className: "submitBtn", type: "submit", variant: value ? 'primary' : 'ghost', leftIcon: React__default.createElement(ArrowRight, { size: 16, color: value ? '#fff' : '#595959' }) }))))));
 };
 
-export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DoctorInfo as D, FloatButtonGroup as F, IconText as I, RadioGroup as R, ScrollList as S, Tabs as T, WidgetChatbotAi as W, CheckboxGroup as a, StatisticCard as b, index as c, CookieAcceptConfirm as d, SeoHead as e, DateRangePicker as f, ShareContainer as g, ShareDrawer as h, index$1 as i, FixedBottomAdBlock as j };
+export { AdBlock as A, Breadcrumbs as B, CategoryCard as C, DatePicker as D, FloatButtonGroup as F, IconText as I, RadioGroup as R, ScrollList as S, Tabs as T, 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 };