@hhgtech/hhg-components
Version:
Hello Health Group common components
1,425 lines (1,295 loc) • 461 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var index$4 = require('./index-3424862e.js');
var core = require('@mantine/core');
require('@mantine/dates');
var index$6 = require('./index-ec32050c.js');
require('./index-0a047edc.js');
var index$a = require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$2 = require('./index-d4ad3f79.js');
var index$g = require('./index-515469d0.js');
var index$e = require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
require('./translationsContext-4698cb34.js');
var hooks = require('@mantine/hooks');
var utils = require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var SiteWideBanner = require('./SiteWideBanner-ccc9cb23.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var index$3 = require('./index-3996aaac.js');
var dateFns = require('date-fns');
var DayPickerInput = require('react-day-picker/DayPickerInput');
var index$5 = require('./index-862280f6.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-8e631203.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$9 = require('./index-0cd89d0b.js');
var index$7 = require('./index-6b44ec2b.js');
var index$8 = require('./index-2b476eb9.js');
var classNames = require('classnames');
var index$b = require('./index-4ce2f2b3.js');
var miscGetSocialList = require('./miscGetSocialList.js');
var index$d = require('./index-6a888e0c.js');
var index$c = require('./index-d0dc8345.js');
var index$h = require('./index-919460ff.js');
var index$i = require('./index-47ec78f0.js');
var dataTransform = require('./dataTransform-08579af5.js');
var togetherApiPaths = require('./togetherApiPaths.js');
var togetherComponentGlobalContext = require('./utils-3a3800c0.js');
var innertext = require('innertext');
var Locale = require('./Locale-eb0da538.js');
var index$f = require('./index-b58d3c31.js');
var constants = require('./constants-817a109a.js');
var dayjs = require('dayjs');
var moleculesArticleCard = require('./moleculesArticleCard.js');
var uuid = require('uuid');
var arrow = require('@hhgtech/icons/arrow');
var other = require('@hhgtech/icons/other');
var Lottie = require('lottie-light-react');
var index$j = require('./index-f37b0057.js');
var index$k = require('./index-773d8775.js');
var get = require('lodash/get');
var debounce = require('lodash/debounce');
var index$l = require('./index-78a4fbc3.js');
var carousel = require('@mantine/carousel');
var constants$1 = require('./constants-b53fd629.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var DayPickerInput__default = /*#__PURE__*/_interopDefault(DayPickerInput);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var parse__default = /*#__PURE__*/_interopDefault(parse);
var enUS__default = /*#__PURE__*/_interopDefault(enUS);
var id__default = /*#__PURE__*/_interopDefault(id);
var vi__default = /*#__PURE__*/_interopDefault(vi);
var zhTW__default = /*#__PURE__*/_interopDefault(zhTW);
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
var innertext__default = /*#__PURE__*/_interopDefault(innertext);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
var get__default = /*#__PURE__*/_interopDefault(get);
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
const StarFull = (_a) => {
var { color, stroke } = _a, props = tslib_es6.__rest(_a, ["color", "stroke"]);
return (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 48 48", fill: "none" }, props),
React__namespace.createElement("path", { d: "M24.0003 5.33203L28.4617 19.332H43.3337L31.5177 28.4067L36.1603 42.6654L24.0003 33.852L11.8403 42.6654L16.483 28.4067L4.66699 19.332H19.539L24.0003 5.33203Z", fill: color }),
React__namespace.createElement("path", { d: "M24.0003 5.33203L28.4617 19.332H43.3337L31.5177 28.4067L36.1603 42.6654L24.0003 33.852L11.8403 42.6654L16.483 28.4067L4.66699 19.332H19.539L24.0003 5.33203Z", stroke: stroke, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })));
};
/* eslint-disable prettier/prettier */
const StarHalf = (props) => React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
React__namespace.createElement("path", { d: "M8.00038 1.77734L6.51327 6.44401H1.55593L5.4946 9.4689L3.94705 14.2218L8.00038 11.284L12.0537 14.2218L10.5062 9.4689L14.4448 6.44401H9.48749L8.00038 1.77734Z", fill: "#E4E8EC" }),
React__namespace.createElement("path", { d: "M8.00038 1.77734L6.51327 6.44401H1.55594L5.4946 9.4689L3.94705 14.2218L8.00038 11.284L12.0537 14.2218L10.5062 9.4689L14.4448 6.44401H9.48749L8.00038 1.77734Z", stroke: "#D2D6DC", strokeWidth: 0.5, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M8 1.77734L6.51289 6.44401H1.55556L5.49422 9.4689L3.94667 14.2218L8 11.284V1.77734Z", fill: "#FFB521", stroke: "#FE921D", strokeWidth: 0.5, strokeLinecap: "round", strokeLinejoin: "round" }));
/* eslint-disable prettier/prettier */
const StarUpgrade = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
React__namespace.createElement("g", { clipPath: "url(#clip0_1906_4609)" },
React__namespace.createElement("path", { d: "M8.00019 1.57727L9.78597 5.19505L13.778 5.77549L10.8891 8.59149L11.5709 12.5675L8.00019 10.6902L4.42952 12.5675L5.1113 8.59149L2.22241 5.77549L6.21441 5.19505L8.00019 1.57727Z", stroke: "#00B16A", strokeWidth: 1.16667, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M8.00024 14.0001V14.9468", stroke: "#00B16A", strokeWidth: 1.16667, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M14.0773 9.48901L14.9777 9.78146", stroke: "#00B16A", strokeWidth: 1.16667, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M11.7557 2.34337L12.3122 1.57715", stroke: "#00B16A", strokeWidth: 1.16667, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M4.24468 2.34349L3.68823 1.57727", stroke: "#00B16A", strokeWidth: 1.16667, strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M1.92242 9.48901L1.02197 9.78146", stroke: "#00B16A", strokeWidth: 1.16667, strokeLinecap: "round", strokeLinejoin: "round" })),
React__namespace.createElement("defs", null,
React__namespace.createElement("clipPath", { id: "clip0_1906_4609" },
React__namespace.createElement("rect", { width: 16, height: 16, fill: "white" })))));
const StyledCategoryCard = styled__default["default"].a `
display: flex;
height: 125px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
padding: 8px;
border: 1px solid ${miscTheme.theme.colors.neutral100};
background-color: white;
border-radius: ${miscTheme.theme.borderRadius};
box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
cursor: pointer;
text-decoration: none;
& > .banner {
width: 100%;
height: 63px;
text-align: center;
}
& > .content {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: center;
word-break: break-word;
}
* {
pointer-events: none;
}
`;
const CategoryCard = (_a) => {
var { category, imgBanner, label, className, style, href = '', dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = tslib_es6.__rest(_a, ["category", "imgBanner", "label", "className", "style", "href", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
const url = (category === null || category === void 0 ? void 0 : category.customizedUrl) || (category === null || category === void 0 ? void 0 : category.permalink) || href || '';
return (React__namespace["default"].createElement(StyledCategoryCard, Object.assign({ "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, className: className, style: style, href: url }, ((category === null || category === void 0 ? void 0 : category.customizedUrl) &&
!SiteWideBanner.isInternalLink(category.customizedUrl) && {
target: '_blank',
}), { onClick: (e) => {
if (url === '') {
e.preventDefault();
}
} }, rest),
React__namespace["default"].createElement("div", { className: "banner" }, imgBanner),
React__namespace["default"].createElement("div", { className: "content" },
React__namespace["default"].createElement(index$2.Text, { className: "category_name", size: "sm", weight: "bold" }, (category === null || category === void 0 ? void 0 : category.displayName) || label || ''))));
};
const StyledCheckboxGroup = styled__default["default"].div `
display: flex;
&[data-type='vertical'] {
flex-direction: column;
div {
margin-bottom: 20px;
}
}
&[data-type='horizontal'] {
flex-wrap: wrap;
div {
margin-right: 25px;
}
&[data-is-rectangle] {
div {
margin-right: 14px;
}
}
}
`;
const CheckboxGroup = ({ name, values = [], onChanges, options = [], className, type = 'vertical', isDisabled, isRectangle, }) => {
const onChange = (value, checked) => {
const newValues = values.slice();
if (checked) {
newValues.push(value);
}
else {
const removeIndex = newValues.findIndex((item) => item === value);
newValues.splice(removeIndex, 1);
}
if (onChanges) {
onChanges(newValues);
}
};
return (React__namespace["default"].createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__namespace["default"].createElement(index$3.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__default["default"].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: ${miscTheme.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: ${miscTheme.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: ${miscTheme.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: ${miscTheme.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: ${miscTheme.theme.colors.neutral100};
text-align: center;
&:not(:last-child) {
padding: 8px 10px;
margin-right: 15px;
border-radius: ${miscTheme.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: ${miscTheme.theme.colors.primaryBase};
color: #f0f8ff;
font-weight: ${miscTheme.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__default["default"].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: ${miscTheme.theme.colors.neutral100};
border-radius: ${miscTheme.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 = React.useRef(false);
const dateFormatter = dateFns.format;
const [month, setMonth] = React.useState(initialMonth || new Date());
const datePickerContainer = React.useRef(null);
const datePicker = React.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__namespace["default"].createElement("div", { className: "DayPicker-Caption" },
React__namespace["default"].createElement(StyledCaptionWrapper, null,
React__namespace["default"].createElement("select", { name: "month", onChange: handleChange, value: date.getMonth() }, monthLabels.map((month, i) => (React__namespace["default"].createElement("option", { key: month, value: i }, month)))),
React__namespace["default"].createElement("select", { name: "year", onChange: handleChange, value: date.getFullYear() }, years.map((year) => (React__namespace["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__namespace["default"].createElement(YearMonthForm, { date: date,
// localeUtils={localeUtils}
monthLabels: monthLabels || defaultMonthLabels, onChange: setMonth }));
};
React.useEffect(() => {
document.addEventListener('mousedown', handleDateClick, {
passive: true,
});
return () => {
document.removeEventListener('mousedown', handleDateClick, false);
};
}, []);
return (React__namespace["default"].createElement(StyledPickerContainer, { className: className, "data-align-right": alignRight, ref: datePickerContainer, "data-is-static": isStatic || undefined },
React__namespace["default"].createElement(DayPickerInput__default["default"], { ref: datePicker, inputProps: {
readOnly: true,
}, keepFocus: false, classNames: {
container: 'pickerContainer',
overlayWrapper: 'pickerOverlayWrapper',
overlay: 'pickerOverlay',
}, component: CustomInput &&
React__namespace["default"].forwardRef(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
(props, _ref) => (React__namespace["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__default["default"].div `
display: flex;
align-items: center;
--font-weight-lg: ${miscTheme.theme.sizes.fwBold};
--font-weight-md: ${miscTheme.theme.sizes.fwRegular};
--font-weight-sm: ${miscTheme.theme.sizes.fwRegular};
&[data-icon-position='left'] {
& > *:first-child {
margin-right: 8px;
}
& > *:last-child {
width: calc(100% - 24px);
}
}
&[data-icon-position='right'] {
& > *:first-child {
width: calc(100% - 24px);
}
& > *:last-child {
margin-left: 8px;
}
}
${utils.MediaQueries.mbDown} {
&[data-size='lg'] {
font-size: 16px;
line-height: 24px;
font-weight: var(--font-weight-lg);
}
&[data-size='md'] {
font-size: 14px;
line-height: 22px;
font-weight: var(--font-weight-md);
}
&[data-size='sm'] {
font-size: 13px;
line-height: 20px;
font-weight: var(----font-weight-sm);
}
}
`;
const IconText = ({ size, iconPosition, className, children, icon: Icon, }) => {
return (React__namespace["default"].createElement(StyledIconText, { className: className, "data-size": size, "data-icon-position": iconPosition },
iconPosition === 'left' && Icon,
children,
iconPosition === 'right' && Icon));
};
const RadioGroup = React__namespace["default"].forwardRef(({ id, value, options, className, isDisabled, size: sizeProp = 'small', direction = 'vertical', onChange, dataEventCategory, dataEventAction, dataEventLabel, }, ref) => {
const [check, setCheck] = React.useState(value);
React.useImperativeHandle(ref, () => ({
reset() {
setCheck(value);
},
}));
const handleOnChange = (v) => {
setCheck(v);
onChange === null || onChange === void 0 ? void 0 : onChange(v);
};
const size = sizeProp === 'small' ? 'md' : 'lg';
const DirectionComp = direction === 'vertical' ? core.Stack : core.Group;
return (React__namespace["default"].createElement(index$4.Radio.Group, { name: id, className: className, size: size, value: String(check), defaultValue: value, onChange: handleOnChange },
React__namespace["default"].createElement(DirectionComp, { spacing: "xl" }, options.map((option) => (React__namespace["default"].createElement(index$4.Radio, { key: option.value, value: option.value, label: option.label, disabled: isDisabled, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }))))));
});
const StyledSideMenu = styled__default["default"].div `
--menu-width: 240px;
--menu-spacing: 28px 16px;
width: var(--menu-width);
height: 100vh;
padding: var(--menu-spacing);
background-color: ${miscTheme.theme.colors.neutral50};
transition: ease-in-out 0.5s;
&[data-is-collapsed] {
--menu-width: 64px;
--menu-spacing: 28px 8px;
}
`;
const SideMenu = ({ isCollapsed, className, style, children }) => {
return (React__namespace["default"].createElement(StyledSideMenu, { style: style, className: className, "data-is-collapsed": isCollapsed || undefined }, children));
};
const StyledSideHeader = styled__default["default"].div `
display: flex;
align-items: baseline;
justify-content: space-between;
svg {
transition: 0.4s ease-in-out;
}
`;
const StyledArrow = styled__default["default"].div `
cursor: pointer;
&[data-is-collapsed] {
transform: rotate(180deg);
}
`;
const SideHeader = ({ isCollapsed, defaultLogo, onBackClick, customIcon, }) => {
return (React__namespace["default"].createElement(StyledSideHeader, null,
React__namespace["default"].createElement(index$5.Logo, { type: isCollapsed ? 'logomark' : defaultLogo || 'hellocare', customSize: {
width: isCollapsed ? '24px' : '77px',
height: '24px',
} }),
React__namespace["default"].createElement(StyledArrow, { "data-is-collapsed": isCollapsed || undefined, onClick: onBackClick }, customIcon ? (customIcon) : (React__namespace["default"].createElement("svg", { "data-name": "Layer 1", viewBox: "0 0 20 20", width: "20px", height: "20px" },
React__namespace["default"].createElement("path", { d: "M10 .75A9.25 9.25 0 1019.25 10 9.25 9.25 0 0010 .75z", fill: "none", stroke: "#d2d6dc", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }),
React__namespace["default"].createElement("path", { d: "M11.44 6.53L8 10l3.48 3.47", fill: "none", stroke: "#737373", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }))))));
};
const StyledDoctorInfo = styled__default["default"].figure `
display: flex;
> img,
svg,
picture {
width: 40px;
height: 40px;
margin-right: 1rem;
border-radius: 6px;
object-fit: cover;
}
> figcaption {
p + p {
margin-top: 2px;
}
}
`;
const DoctorInfo = ({ name, description, image, isDescriptionHidden, }) => {
return (React__namespace["default"].createElement(StyledDoctorInfo, null,
image,
!isDescriptionHidden && (React__namespace["default"].createElement("figcaption", null,
React__namespace["default"].createElement(index$2.Text, { size: "p4", weight: "bold" }, name),
React__namespace["default"].createElement(index$2.Text, { size: "p4" }, description)))));
};
const StyledUserInfo = styled__default["default"].div `
display: flex;
align-items: center;
margin-top: 24px;
margin-bottom: 36px;
figcaption {
white-space: nowrap;
}
&[data-is-collapsed='true'] {
img {
max-width: 2rem;
max-height: 2rem;
}
}
`;
const UserInfo = ({ isCollapsed, userName, role, avatar }) => {
return (React__namespace["default"].createElement(StyledUserInfo, { "data-is-collapsed": isCollapsed || undefined },
React__namespace["default"].createElement(DoctorInfo, { image: avatar, name: userName, description: role, isDescriptionHidden: isCollapsed })));
};
const StyledMenuLink = styled__default["default"].div `
display: flex;
align-items: center;
padding: 9px 21px;
margin-bottom: 4px;
border-radius: 6px;
&:not([data-is-link-active]) {
cursor: pointer;
}
p {
margin-left: 12px;
}
&[data-is-link-active] {
background: ${miscTheme.theme.colors.primaryBase};
}
&[data-is-link-collapsed] {
justify-content: center;
margin-right: -14px;
margin-left: -14px;
}
`;
const MenuLink = ({ icon, isActive, children, isCollapsed, activeIcon, onLinkClick, textSize = 'base', textType = 'bold', textColorActive = '#fff', textColor = '#595959', }) => {
return (React__namespace["default"].createElement(StyledMenuLink, { "data-is-link-active": isActive || undefined, onClick: onLinkClick, "data-is-link-collapsed": isCollapsed || undefined },
!(isActive && activeIcon) ? icon : activeIcon,
!isCollapsed && (React__namespace["default"].createElement(index$2.Text, { size: textSize, weight: textType, color: isActive ? textColorActive : textColor }, children))));
};
var index$1 = /*#__PURE__*/Object.freeze({
__proto__: null,
SideMenu: SideMenu,
SideHeader: SideHeader,
UserInfo: UserInfo,
MenuLink: MenuLink
});
const StyledScrollList = styled__default["default"].div `
position: relative;
width: 100%;
> .container {
display: flex;
width: 100%;
-ms-overflow-style: none;
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.section {
display: flex;
width: 100%;
flex-direction: column;
flex-shrink: 0;
margin: auto;
> .grid-layout {
display: grid;
width: 100%;
grid-row-gap: 8px;
> .item-grid {
width: 100%;
> * {
margin: 0 auto;
}
}
}
.progress-bar {
display: grid;
height: 15px;
margin-bottom: 10px;
.items-progress {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
.icon-status {
position: absolute;
display: flex;
}
.line {
width: 50%;
height: 2px;
background-color: ${miscTheme.theme.colors.gray600};
}
}
}
}
}
.bullet-nav {
position: absolute;
z-index: ${miscTheme.theme.zIndexes.belowHeader};
bottom: -30px;
left: 50%;
display: flex;
transform: translate(-50%, -50%);
}
.bullet-nav__link {
display: block;
width: 8px;
height: 8px;
padding: 0;
margin-right: 8px;
backface-visibility: hidden;
background-color: #e4e8ec;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
&.active {
&[data-scheme='hellosites'] {
background-color: ${miscTheme.theme.colors.primary600};
}
&[data-scheme='marrybaby'] {
background-color: ${miscTheme.theme.mbColors.pink};
}
}
}
.arrow-left {
position: absolute;
z-index: 10;
top: 50%;
left: -35px;
transform: translateY(-50%);
&[data-event-category] > * {
pointer-events: none;
}
}
.arrow-right {
position: absolute;
z-index: 10;
top: 50%;
right: -35px;
transform: translateY(-50%);
&[data-event-category] > * {
pointer-events: none;
}
}
.image-gallery-wrapper {
display: flex;
position: relative;
margin-top: 16px;
justify-content: center;
gap: 16px;
.image-block {
display: block;
width: 100%;
border: 2px solid transparent;
border-radius: 4px;
}
.image-block.active {
border-color: ${miscTheme.theme.colors.primaryBase};
}
img {
height: 40px;
width: auto;
max-width: 100%;
}
}
`;
const RenderIconStatus = ({ status }) => {
if (status === 'inActive') {
return (React__namespace["default"].createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none" },
React__namespace["default"].createElement("circle", { cx: "3", cy: "3", r: "3", fill: "#ADB3BC" })));
}
else if (status === 'active') {
return (React__namespace["default"].createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
React__namespace["default"].createElement("circle", { cx: "6", cy: "6", r: "4", fill: "#2D87F3" }),
React__namespace["default"].createElement("circle", { cx: "6", cy: "6", r: "5.5", stroke: "#2D87F3" })));
}
else if (status === 'done') {
return (React__namespace["default"].createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
React__namespace["default"].createElement("path", { d: "M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z", fill: "#00B16A" }),
React__namespace["default"].createElement("path", { d: "M8.76061 4.20029L4.80061 7.80029L3.00061 6.16392", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
}
return (React__namespace["default"].createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none" },
React__namespace["default"].createElement("circle", { cx: "3", cy: "3", r: "3", fill: "#ADB3BC" })));
};
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const ScrollList = ({ row = 2, column = 3, isDotsShown = true, isImageGalleryShown = false, mode = 'infinity', type = 'separated', distanceOverlappedLeft = {
amount: 0,
unit: 'pixel',
}, children, className, isProgressShown = false, statusChildren, isArrowShown = false, classNameLeftArrow, classNameRightArrow, dataEventCategory, dataEventAction, dataEventLabel, onChangePage, page, customPageWidth, scheme = 'hellosites', arrowType = 'Discover', }) => {
const hasPageProps = typeof page === 'number';
const [section, setSection] = React.useState(hasPageProps ? page : 0);
//Create groups
const groups = [];
React__namespace["default"].Children.map(children, (element, idx) => {
if (idx % (row * column) === 0) {
groups.push([]);
}
groups[groups.length - 1].push(React__namespace["default"].cloneElement(element));
});
const scrollRef = React.useRef();
const currentPage = React.useRef(0);
const scrollToPage = (index) => {
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const distance = type === 'intertwined'
? distanceOverlappedLeft.unit === 'percentage'
? index * pageWidth +
(distanceOverlappedLeft.amount / 100) * pageWidth * index
: index * pageWidth +
distanceOverlappedLeft.amount * pageWidth * index
: index * pageWidth;
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
currentPage.current = index;
setSection(index);
};
const handleClick = (index) => {
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const distance = type === 'intertwined'
? distanceOverlappedLeft.unit === 'percentage'
? index * pageWidth +
(distanceOverlappedLeft.amount / 100) * pageWidth * index
: index * pageWidth +
distanceOverlappedLeft.amount * pageWidth * index
: index * pageWidth;
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
currentPage.current = index;
setSection(index);
onChangePage && onChangePage(index);
};
React.useEffect(() => {
if (typeof page === 'number')
scrollToPage(page);
}, [page]);
const handleClickArrow = (type) => {
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
let distance;
section === 0 ? (distance = 0) : (distance = section * pageWidth);
if (type === 'forward') {
if (distance === pageWidth * (groups.length - 1)) {
setSection(groups.length - 1);
distance = pageWidth * (groups.length - 1);
onChangePage && onChangePage(groups.length - 1);
}
else {
setSection(section + 1);
distance += pageWidth;
onChangePage && onChangePage(section + 1);
}
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
}
if (type === 'back') {
if (distance === 0) {
setSection(0);
onChangePage && onChangePage(0);
distance = 0;
}
else {
setSection(section - 1);
onChangePage && onChangePage(section - 1);
distance -= pageWidth;
}
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
}
};
const handleScroll = () => {
if (mode === 'infinity') {
if (!scrollRef.current)
return;
const { clientWidth, scrollLeft } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const page = Math.floor(scrollLeft / pageWidth);
setSection(page);
onChangePage && onChangePage(page);
}
};
const handleScrollThrottle = throttle__default["default"](handleScroll, 400);
React.useEffect(() => {
if (mode === 'snapped') {
let isDown = false;
let startX;
let startY;
let isSlidingY;
let isSlidingX;
let scrollLeft;
let direction;
const slider = scrollRef.current;
const start = (pageX, pageY) => {
isDown = true;
isSlidingY = false;
isSlidingX = false;
startX = pageX - slider.offsetLeft;
startY = pageY - slider.offsetTop;
scrollLeft = slider.scrollLeft;
};
const startMouse = (e) => {
start(e.pageX, e.pageY);
};
const startTouch = (e) => {
start(e.touches[0].pageX, e.touches[0].pageY);
};
const end = () => {
isDown = false;
isSlidingY = false;
isSlidingX = false;
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const page = direction === 'ltr'
? currentPage.current !== 0
? currentPage.current - 1
: currentPage.current
: direction === 'rtl'
? currentPage.current < groups.length - 1
? currentPage.current + 1
: currentPage.current
: currentPage.current;
const distance = type === 'intertwined'
? distanceOverlappedLeft.unit === 'percentage'
? page * pageWidth +
(distanceOverlappedLeft.amount / 100) * pageWidth * page
: page * pageWidth +
distanceOverlappedLeft.amount * pageWidth * page
: page * pageWidth;
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
direction = 'none';
if (currentPage.current !== page) {
currentPage.current = page;
setSection(page);
onChangePage && onChangePage(page);
}
};
const move = (pageX, pageY) => {
if (!isDown)
return;
const x = pageX - slider.offsetLeft;
const y = pageY - slider.offsetTop;
const walkX = x - startX;
const walkY = y - startY;
if (!isSlidingY && !isSlidingX && (walkY > 20 || walkY < -20)) {
isSlidingY = true;
}
if (!isSlidingY && (walkX > 20 || walkX < -20)) {
isSlidingX = true;
slider.scrollLeft = scrollLeft - walkX;
if (walkX > 0) {
direction = 'ltr';
}
if (walkX < 0) {
direction = 'rtl';
}
if (walkX === 0) {
direction = 'none';
}
}
};
const moveMouse = (e) => {
if (isSlidingX) {
e.preventDefault();
}
move(e.pageX, e.pageY);
};
const moveTouch = (e) => {
if (isSlidingX) {
e.preventDefault();
}
move(e.touches[0].pageX, e.touches[0].pageY);
};
slider === null || slider === void 0 ? void 0 : slider.addEventListener('mousedown', startMouse, {
passive: true,
});
slider === null || slider === void 0 ? void 0 : slider.addEventListener('touchstart', startTouch, {
passive: true,
});
window.addEventListener('mouseup', end, {
passive: true,
});
window.addEventListener('touchend', end, {
passive: true,
});
slider === null || slider === void 0 ? void 0 : slider.addEventListener('mousemove', moveMouse, {
passive: true,
});
slider === null || slider === void 0 ? void 0 : slider.addEventListener('touchmove', moveTouch, {
passive: true,
});
return () => {
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('mousedown', startMouse);
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('touchstart', startTouch);
window.removeEventListener('mouseup', end);
window.removeEventListener('touchend', end);
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('mousemove', moveMouse);
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('touchmove', moveTouch);
};
}
}, []);
return (React__namespace["default"].createElement(StyledScrollList, { className: className, "data-row": row, onScroll: handleScrollThrottle },
isArrowShown && section > 0 && (React__namespace["default"].createElement("div", { className: `${classNameLeftArrow} arrow-left`, onClick: () => handleClickArrow('back'), "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, arrowType === 'Care' ? (React__namespace["default"].createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
React__namespace["default"].createElement("g", { filter: "url(#filter0_dd_12599_34420)" },
React__namespace["default"].createElement("path", { d: "M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3V3C31.8368 3 39.0002 10.1634 39.0002 19V19C39.0002 27.8366 31.8368 35 23.0002 35V35C14.1637 35 7.00024 27.8366 7.00024 19V19Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M20.9293 19L24.7503 15.179C25.1643 14.765 25.1643 14.093 24.7503 13.679C24.3363 13.265 23.6643 13.265 23.2503 13.679L18.6363 18.293C18.2453 18.684 18.2453 19.317 18.6363 19.707L23.2503 24.321C23.6643 24.735 24.3363 24.735 24.7503 24.321C25.1643 23.907 25.1643 23.235 24.7503 22.821L20.9293 19Z", fill: "#595959" }),
React__namespace["default"].createElement("path", { d: "M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z", fill: "#DBDFE5" })),
React__namespace["default"].createElement("defs", null,
React__namespace["default"].createElement("filter", { id: "filter0_dd_12599_34420", x: "0.000244141", y: "0", width: "42