@hhgtech/hhg-components
Version:
Hello Health Group common components
943 lines (908 loc) • 94 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-5033cbef.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var index = require('./index-034cefcd.js');
var index$2 = require('./index-68615221.js');
var styled = require('@emotion/styled');
var carousel = require('@mantine/carousel');
var index$1 = require('./index-e5454498.js');
var index$3 = require('./index-6d3687b7.js');
var miscTheme = require('./miscTheme.js');
var text = require('./text-af5ab4c9.js');
var cn = require('classnames');
var useUniqueId = require('./useUniqueId-d1da65c9.js');
var constantsSite = require('./constantsSite.js');
var core$1 = require('@hhgtech/icons/core');
var index$4 = require('./index-f3a410ea.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 cn__default = /*#__PURE__*/_interopDefault(cn);
const Select = React.forwardRef((_a, ref) => {
var { keepSearch = false } = _a, props = tslib_es6.__rest(_a, ["keepSearch"]);
if (keepSearch) {
return (React__namespace["default"].createElement(_AutoComplete, Object.assign({}, props, { ref: ref })));
}
else {
return React__namespace["default"].createElement(_Select, Object.assign({}, props, { ref: ref }));
}
});
const _AutoComplete = React.forwardRef((_a, ref) => {
var { value, defaultValue, onChange, clearable } = _a, props = tslib_es6.__rest(_a, ["value", "defaultValue", "onChange", "clearable"]);
const [_value, handleChange] = hooks.useUncontrolled({
value,
defaultValue,
onChange,
});
const onClear = () => {
handleChange('');
};
return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
? {
rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
React__namespace["default"].createElement(_IconSelect, null))),
}
: {}))));
});
const _Select = React.forwardRef((_a, ref) => {
var { searchValue, onSearchChange } = _a, props = tslib_es6.__rest(_a, ["searchValue", "onSearchChange"]);
const [_searchValue, handleSearchChange] = hooks.useUncontrolled({
defaultValue: '',
value: searchValue,
onChange: onSearchChange,
});
const onClear = () => {
handleSearchChange('');
};
return (React__namespace["default"].createElement(core.Select, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(other.ArrowDown, { size: 18 }), rightSectionProps: { style: { pointerEvents: 'none' } }, size: "md", maxDropdownHeight: 300, onSearchChange: (e) => handleSearchChange(e), searchValue: _searchValue }, props, (props.clearable && (_searchValue === null || _searchValue === void 0 ? void 0 : _searchValue.length) > 0
? {
rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
React__namespace["default"].createElement(_IconSelect, null))),
}
: {}))));
});
const _IconSelect = () => (React__namespace["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.6665 9.99996C1.6665 5.39163 5.3915 1.66663 9.99984 1.66663C14.6082 1.66663 18.3332 5.39163 18.3332 9.99996C18.3332 14.6083 14.6082 18.3333 9.99984 18.3333C5.3915 18.3333 1.6665 14.6083 1.6665 9.99996ZM12.4083 13.5831C12.7333 13.9081 13.2583 13.9081 13.5833 13.5831C13.9 13.2581 13.9 12.7247 13.5833 12.4081L11.175 9.99973L13.5833 7.5914C13.9083 7.2664 13.9083 6.7414 13.5833 6.4164C13.2583 6.0914 12.7333 6.0914 12.4083 6.4164L10 8.82473L7.59167 6.4164C7.26667 6.0914 6.74167 6.0914 6.41667 6.4164C6.26063 6.57209 6.17293 6.78347 6.17293 7.0039C6.17293 7.22433 6.26063 7.43571 6.41667 7.5914L8.825 9.99973L6.41667 12.4081C6.26063 12.5638 6.17293 12.7751 6.17293 12.9956C6.17293 13.216 6.26063 13.4274 6.41667 13.5831C6.74167 13.9081 7.26667 13.9081 7.59167 13.5831L10 11.1747L12.4083 13.5831Z", fill: "#8C8C8C" })));
class ErrorBoundary extends React.Component {
constructor() {
super(...arguments);
this.state = {
hasError: false,
};
}
static getDerivedStateFromError() {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Uncaught error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return this.props.fallback || React__namespace["default"].createElement(React__namespace["default"].Fragment, null);
}
return this.props.children;
}
}
const CarouselWrapper$1 = (_a) => {
var { slidesToShow = 1, children } = _a, props = tslib_es6.__rest(_a, ["slidesToShow", "children"]);
const length = Array.isArray(children) ? children.length : 1;
if (!length)
return null;
return (React__namespace["default"].createElement(ErrorBoundary, null,
React__namespace["default"].createElement(carousel.Carousel
// get 2 precision number
, Object.assign({
// get 2 precision number
slideSize: String(Math.floor((1 / slidesToShow) * 10000) / 100) + '%', containScroll: "trimSnaps" }, props), children)));
};
const Carousel = CarouselWrapper$1;
Carousel.Slide = carousel.Carousel.Slide;
const StyledCarousel = styled__default["default"](Carousel) `
cursor: grab;
width: 100%;
.mantine-Carousel-control {
background: rgb(255, 255, 255);
opacity: 1;
border: none;
border-radius: 0;
box-shadow: none;
&[data-inactive] {
opacity: 0;
cursor: default;
}
&:first-child {
padding-right: 24px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
}
&:last-child {
padding-left: 24px;
background: linear-gradient(
270deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
}
}
.mantine-Carousel-container {
align-items: center;
}
`;
var useStyles$1 = core.createStyles((_theme, _params) => {
return {
root: {
color: _params.color ||
(_theme.primaryColor === 'hb'
? _theme.colors.hb[6]
: _theme.fn.primaryColor()),
},
};
});
const Anchor = (_a) => {
var { color, styles, className } = _a, rest = tslib_es6.__rest(_a, ["color", "styles", "className"]);
const { classes, cx } = useStyles$1({ color }, { name: 'Anchor', styles });
return React__namespace["default"].createElement(index$1.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
};
const BreadcrumbItem = (_a) => {
var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
return (React__namespace["default"].createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
};
const AspectRatio = (props) => {
return (React__namespace["default"].createElement(core.AspectRatio, Object.assign({ sx: {
borderRadius: 4,
overflow: 'hidden',
'> img': {
objectFit: 'contain',
},
} }, props)));
};
const _Breadcrumbs = (_a) => {
var _b;
var { children, showHomeIcon = true, homeIconHref = '/' } = _a, rest = tslib_es6.__rest(_a, ["children", "showHomeIcon", "homeIconHref"]);
const theme = core.useMantineTheme();
const isMarryBaby = ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb';
const [embla, setEmbla] = React.useState(null);
const { isMobile } = index$2.useScreenSize();
const [, setShouldAllowClick] = React.useState(true);
const handleScroll = React.useCallback(() => {
setShouldAllowClick(false);
}, []);
const handlePointerUp = React.useCallback(() => {
setTimeout(() => {
setShouldAllowClick(true);
}, 1000);
}, []);
React.useEffect(() => {
if (embla) {
embla.on('scroll', handleScroll);
embla.on('pointerUp', handlePointerUp);
}
return () => {
if (embla) {
embla.off('scroll', handleScroll);
embla.on('pointerUp', handlePointerUp);
}
};
}, [embla, handleScroll, handlePointerUp]);
return (React__namespace["default"].createElement(StyledCarousel, Object.assign({ align: "center", slideGap: "xs", dragFree: true, draggable: isMobile, slideSize: "0", getEmblaApi: setEmbla, controlsOffset: -52, previousControlIcon: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
React__namespace["default"].createElement("path", { d: "M6.86589 3.56104C7.03647 3.56104 7.20724 3.62732 7.33724 3.75765L7.39453 3.81494C7.6552 4.07561 7.6552 4.49765 7.39453 4.75765L4.81901 7.33317L13.5326 7.33317C13.9006 7.33317 14.1992 7.63184 14.1992 7.99984C14.1992 8.36784 13.9006 8.6665 13.5326 8.6665L4.81901 8.66651L7.39453 11.242C7.6552 11.5027 7.6552 11.9247 7.39453 12.1847L7.33724 12.242C7.07657 12.5027 6.65453 12.5027 6.39453 12.242L2.6237 8.47119C2.36303 8.21053 2.36303 7.78849 2.6237 7.52849L6.39453 3.75765C6.52487 3.62732 6.6953 3.56104 6.86589 3.56104Z", fill: "#595959" })), nextControlIcon: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
React__namespace["default"].createElement("path", { d: "M9.13411 12.439C8.96353 12.439 8.79276 12.3727 8.66276 12.2423L8.60547 12.1851C8.3448 11.9244 8.3448 11.5023 8.60547 11.2423L11.181 8.66683L2.46745 8.66683C2.09945 8.66683 1.80078 8.36816 1.80078 8.00016C1.80078 7.63216 2.09945 7.3335 2.46745 7.3335L11.181 7.3335L8.60547 4.75797C8.3448 4.49731 8.3448 4.07527 8.60547 3.81527L8.66276 3.75797C8.92343 3.49731 9.34547 3.49731 9.60547 3.75797L13.3763 7.52881C13.637 7.78947 13.637 8.21152 13.3763 8.47152L9.60547 12.2423C9.47513 12.3727 9.3047 12.439 9.13411 12.439Z", fill: "#595959" })) }, rest),
showHomeIcon && (React__namespace["default"].createElement(Carousel.Slide, { style: { borderRight: `1px solid ${index$3.themeColors.neutral[1]}` } },
React__namespace["default"].createElement(BreadcrumbItem, { href: homeIconHref, target: "_blank", className: "pointer-event-child-none" },
React__namespace["default"].createElement(core.Box, { sx: Object.assign({}, (!isMarryBaby && {
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
})), bg: !isMarryBaby && index$3.themeColors.neutral[0], p: !isMarryBaby ? 6 : 0 },
React__namespace["default"].createElement(AspectRatio, { ratio: 1, w: 18 }, isMarryBaby ? (React__namespace["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1183 3.67722C12.8727 2.70772 11.1281 2.708 9.88187 3.67718L14.1183 3.67722ZM14.1183 3.67722L19.718 8.03283C20.5589 8.68632 21.05 9.69173 21.05 10.7562V17.6002C21.05 19.5057 19.5055 21.0502 17.6 21.0502H6.40016C4.49466 21.0502 2.9502 19.5057 2.9502 17.6002V10.7562C2.9502 9.69163 3.44113 8.68632 4.28216 8.03283L9.88187 3.67718M10.6799 4.70339L5.08006 9.05916C4.55657 9.46592 4.2502 10.0923 4.2502 10.7562V17.6002C4.2502 18.7878 5.21263 19.7502 6.40016 19.7502H17.6C18.7875 19.7502 19.75 18.7878 19.75 17.6002V10.7562C19.75 10.0923 19.4438 9.46612 18.9204 9.05936L13.3202 4.70335C12.5443 4.09941 11.4571 4.09905 10.6799 4.70339Z", fill: "#3E3F58" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2373 13.1626C12.5546 12.4794 11.4466 12.4791 10.7629 13.1628C10.0793 13.8464 10.0793 14.9538 10.7629 15.6374C11.4465 16.321 12.5539 16.321 13.2375 15.6374C13.9211 14.9538 13.9211 13.8464 13.2375 13.1628L13.2373 13.1626ZM14.1567 12.2436C12.9661 11.0521 11.0348 11.0525 9.84366 12.2436C8.65237 13.4348 8.65237 15.3653 9.84366 16.5566C11.0349 17.7479 12.9654 17.7479 14.1567 16.5566C15.348 15.3653 15.348 13.4348 14.1567 12.2436Z", fill: "#3E3F58" }))) : (React__namespace["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.58691 5.59863L8.58691 1.62305C8.83594 1.45898 9.16406 1.45898 9.41309 1.62305L15.4131 5.59863C15.624 5.73926 15.75 5.97363 15.75 6.22559V14.25C15.75 15.0791 15.0791 15.75 14.25 15.75H3.75C2.9209 15.75 2.25 15.0791 2.25 14.25V6.22559C2.25 5.97363 2.37598 5.73926 2.58691 5.59863ZM5.5017 11.7602C5.1717 11.5108 5.17316 11.0321 5.46521 10.7391C5.75775 10.4456 6.24936 10.4292 6.5986 10.6522C7.17818 11.0223 8.12516 11.4889 9.21628 11.4889C10.3074 11.4889 11.2543 11.0223 11.8339 10.6522C12.1832 10.4292 12.6748 10.4456 12.9673 10.7391C13.2594 11.0321 13.2608 11.5108 12.9308 11.7602C11.8743 12.5589 10.535 12.9889 9.21628 12.9889C7.89758 12.9889 6.55824 12.5589 5.5017 11.7602Z", fill: "#595959" })))))))),
React__namespace["default"].createElement(Carousel.Slide, null),
React__namespace["default"].createElement(Carousel.Slide, null,
React__namespace["default"].createElement(core.Breadcrumbs, { styles: {
separator: {
marginInline: 4,
},
}, separator: React__namespace["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
React__namespace["default"].createElement("path", { d: "M8.71527 7.99969L6.16794 5.45236C5.89194 5.17636 5.89194 4.72836 6.16794 4.45236C6.44394 4.17636 6.89194 4.17636 7.16794 4.45236L10.2439 7.52836C10.5046 7.78903 10.5046 8.21103 10.2439 8.47103L7.16794 11.547C6.89194 11.823 6.44394 11.823 6.16794 11.547C5.89194 11.271 5.89194 10.823 6.16794 10.547L8.71527 7.99969Z", fill: "#8C8C8C" })) }, children))));
};
const Breadcrumbs = _Breadcrumbs;
Breadcrumbs.Item = BreadcrumbItem;
const StyledTextArea = styled__default["default"](core.Textarea) `
.mantine-Textarea-input {
padding: 12px 16px;
background: #ffffff;
border: 1px solid ${miscTheme.theme.colors.gray200};
border-radius: 4px;
}
`;
const StyledAccordion = styled__default["default"](core.Accordion) `
.mantine-Accordion-label {
padding: 0;
}
.mantine-Accordion-control {
&:hover {
background-color: transparent;
}
}
.mantine-Accordion-item {
.mantine-Accordion-chevron {
> div {
background-repeat: no-repeat;
width: 16px;
height: 16px;
background-position: center;
background-image: url(${(props) => props.closeChevron || index.CommonGAssets.getAssetPath('plus-icon.svg')});
}
}
&[data-active='true'] {
.mantine-Accordion-chevron {
> div {
background-image: url(${(props) => props.openChevron || index.CommonGAssets.getAssetPath('minus-icon.svg')});
}
}
}
}
.mantine-Accordion-panel {
border-radius: ${miscTheme.theme.borderRadius};
}
.mantine-Accordion-content {
white-space: pre-wrap;
}
`;
const _Accordion = (_a) => {
var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
return (React__namespace["default"].createElement(StyledAccordion, Object.assign({ chevron: React__namespace["default"].createElement("div", null), disableChevronRotation: true, transitionDuration: 300 }, rest), children));
};
const Accordion = _Accordion;
Accordion.Control = core.Accordion.Control;
Accordion.Item = core.Accordion.Item;
Accordion.Panel = core.Accordion.Panel;
const DEFAULT_AVATAR = index.CommonGAssets.getAssetPath('avatar.jpg');
const Avatar = (_a) => {
var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
avatarProps = tslib_es6.__rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
const generateAvatar = () => {
return (React__namespace["default"].createElement(core.Avatar, Object.assign({ size: size, radius: "xl" }, avatarProps, { imageProps: Object.assign({ loading: 'lazy' }, avatarProps.imageProps), styles: {
placeholder: {
backgroundColor: avatarProps.color,
color: 'white',
},
} }), children ? (children) : placeholderText ? (placeholderText) : (React__namespace["default"].createElement(index$2.ImageWrap, { src: DEFAULT_AVATAR, width: size, alt: avatarProps.alt || 'avatar' }))));
};
if (withIndicator)
return (React__namespace["default"].createElement(core.Indicator, Object.assign({ inline: true, position: "bottom-end", offset: 9 }, indicatorConfig, { styles: Object.assign({ indicator: {
backgroundColor: React__namespace["default"].isValidElement(indicatorConfig.label) && 'transparent',
zIndex: 1,
} }, styles) }), generateAvatar()));
return generateAvatar();
};
const FileInput = (props) => {
return React__namespace["default"].createElement(core.FileInput, Object.assign({ size: "md" }, props));
};
const DEBOUNCED_TIME = 300;
const emotionCache = core.createEmotionCache({
key: 'mantine',
prepend: false,
});
const NumberInput = (_a) => {
var { value: _value, onChange: _onChange } = _a, props = tslib_es6.__rest(_a, ["value", "onChange"]);
const [value, setValue] = React.useState(_value);
const [debounced] = hooks.useDebouncedValue(value, DEBOUNCED_TIME);
React.useEffect(() => {
_onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
}, [debounced]);
React.useEffect(() => {
setValue(_value);
}, [_value]);
return (React__namespace["default"].createElement(core.NumberInput, Object.assign({ size: "md", stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
if (Number(value) === 0)
return value;
return value || '';
}, removeTrailingZeros: true, value: value }, props)));
};
const EyeVisible = index.CommonGAssets.getAssetPath('EyeVisible.svg');
const EyeHidden = index.CommonGAssets.getAssetPath('EyeHidden.svg');
// Fix re-render issue
const RenderVisibleToggleIcon = ({ reveal, size, }) => (React__namespace["default"].createElement("img", { src: reveal ? EyeVisible : EyeHidden, style: {
width: size,
height: size,
}, loading: "lazy" }));
const PasswordInput = React.forwardRef((props, ref) => {
const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = tslib_es6.__rest(props, ["size", "visibilityToggleIcon"]);
const visibilityToggleIcon = visibilityToggleIconProps || RenderVisibleToggleIcon;
return (React__namespace["default"].createElement(core.PasswordInput, Object.assign({ ref: ref, size: size, visibilityToggleIcon: visibilityToggleIcon }, restProps, { className: `input-control ${(restProps === null || restProps === void 0 ? void 0 : restProps.className) || ''}` })));
});
const InputWrapper = React.forwardRef((_a, ref) => {
var { value: _value, onChange: _onChange, onChangeRaw, maxLength } = _a, props = tslib_es6.__rest(_a, ["value", "onChange", "onChangeRaw", "maxLength"]);
const [value, setValue] = React.useState(_value || '');
const [debounced] = hooks.useDebouncedValue(value, DEBOUNCED_TIME);
React.useEffect(() => {
_onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
}, [debounced]);
React.useEffect(() => {
setValue(_value);
}, [_value]);
return (React__namespace["default"].createElement(core.TextInput, Object.assign({ ref: ref, size: "md", onChange: (event) => {
if (typeof maxLength === 'number' &&
event.currentTarget.value.length > maxLength) {
return;
}
onChangeRaw === null || onChangeRaw === void 0 ? void 0 : onChangeRaw(event);
setValue(event.currentTarget.value);
}, value: value }, props, { maxLength: maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` })));
});
const Input = InputWrapper;
Input.File = FileInput;
Input.Password = PasswordInput;
Input.Number = NumberInput;
Input.Wrapper = core.Input.Wrapper;
const StyledSlide = carousel.Carousel.Slide;
const SlideContext = React.createContext({});
const CustomSlide = (_a) => {
var { children, onClick, innerSlideProps } = _a, rest = tslib_es6.__rest(_a, ["children", "onClick", "innerSlideProps"]);
const { slider, selectSlideWhenClick } = React.useContext(SlideContext);
const ref = React.useRef();
const key = React.useRef('');
const [index, setIndex] = React.useState(0);
React.useEffect(() => {
key.current = String(Math.round(Math.random() * 10000));
}, []);
React.useEffect(() => {
const slidesNode = (slider === null || slider === void 0 ? void 0 : slider.slideNodes()) || [];
setIndex(slidesNode.findIndex((obj) => obj.dataset.key === key.current));
}, [slider]);
const sliderProps = {
ref,
'data-key': key.current,
'data-index': index,
};
return (React__namespace["default"].createElement(StyledSlide, Object.assign({}, sliderProps, rest),
React__namespace["default"].createElement("div", Object.assign({ style: {
height: '100%',
}, onClick: () => {
selectSlideWhenClick && (slider === null || slider === void 0 ? void 0 : slider.scrollTo(index));
onClick === null || onClick === void 0 ? void 0 : onClick(index);
} }, innerSlideProps), children)));
};
const findIndexFromLeftSide = (position, slideLength) => {
return position >= slideLength ? position - slideLength : position;
};
const findIndexFromRight = (position, slideLength) => {
return position < 0 ? slideLength + position : position;
};
const CarouselWrapper = (_a) => {
var { children, blurFromCenter, blurFromIndex, blurLength = 3, maxBlurOpacity = 0.5, onSlideChange, selectSlideWhenClick } = _a, props = tslib_es6.__rest(_a, ["children", "blurFromCenter", "blurFromIndex", "blurLength", "maxBlurOpacity", "onSlideChange", "selectSlideWhenClick"]);
const { width } = hooks.useViewportSize();
const [ref] = hooks.useResizeObserver();
const slider = React.useRef(null);
const [centerSlide, setCenterSlide] = React.useState(0);
const handleStyle = () => {
var _a, _b, _c, _d, _e;
const slidesNode = ((_a = slider === null || slider === void 0 ? void 0 : slider.current) === null || _a === void 0 ? void 0 : _a.slideNodes()) || [];
if (((_b = slider === null || slider === void 0 ? void 0 : slider.current) === null || _b === void 0 ? void 0 : _b.slideNodes().length) <=
((_c = slider === null || slider === void 0 ? void 0 : slider.current) === null || _c === void 0 ? void 0 : _c.slidesInView().length)) {
slidesNode.map((item) => {
item.classList.remove('center-slide');
item.style.opacity = '1';
});
return false;
}
const centerSlideIndex = (_d = slider === null || slider === void 0 ? void 0 : slider.current) === null || _d === void 0 ? void 0 : _d.selectedScrollSnap();
setCenterSlide(centerSlideIndex);
const slidesNodeLength = slidesNode.length;
const slidesInView = (_e = slider === null || slider === void 0 ? void 0 : slider.current) === null || _e === void 0 ? void 0 : _e.slidesInView();
const slidesInViewLength = slidesInView.length;
const halfSideLength = Math.floor(slidesInViewLength / 2);
const halfSideBlurLength = blurFromCenter
? blurFromIndex + blurLength - 1
: halfSideLength;
const lastRightBlurIndexTmp = centerSlideIndex + halfSideBlurLength;
const lastRightBlurIndex = lastRightBlurIndexTmp === slidesNodeLength
? 0
: lastRightBlurIndexTmp > slidesNodeLength
? lastRightBlurIndexTmp - slidesNodeLength
: lastRightBlurIndexTmp;
const lastLeftBlurIndexTmp = centerSlideIndex - halfSideBlurLength;
const lastLeftBlurIndex = lastLeftBlurIndexTmp < 0
? slidesNodeLength + lastLeftBlurIndexTmp
: lastLeftBlurIndexTmp > 0
? centerSlideIndex - halfSideBlurLength
: 0;
const visibleSlide = [
...new Set(Array(halfSideBlurLength * 2 + 1)
.fill('')
.map((i, idx) => {
const findFrom = lastLeftBlurIndex;
return findIndexFromLeftSide(findFrom + idx, slidesNodeLength);
})),
];
slidesNode.map((item, index) => {
if (index === centerSlideIndex) {
item.classList.add('center-slide');
}
else {
item.classList.remove('center-slide');
}
if (visibleSlide.indexOf(index) !== -1) {
const opacityGap = maxBlurOpacity / blurLength;
for (let i = 0; i < blurLength; i++) {
if (index ===
findIndexFromLeftSide(lastLeftBlurIndex + i, slidesNodeLength) ||
index ===
findIndexFromRight(lastRightBlurIndex - i, slidesNodeLength)) {
item.style.opacity = String((i + 1) * opacityGap);
break;
}
item.style.opacity = '1';
}
}
else {
item.style.opacity = '0';
}
});
};
const sliderProps = {
getEmblaApi: (embla) => {
slider.current = embla;
},
onSlideChange: (index) => {
handleStyle();
onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
},
};
React.useEffect(() => {
(slider === null || slider === void 0 ? void 0 : slider.current) && handleStyle();
}, [width]);
const useStyles = core.createStyles(() => {
var _a, _b;
return ({
control: Object.assign({}, (((_a = slider === null || slider === void 0 ? void 0 : slider.current) === null || _a === void 0 ? void 0 : _a.slideNodes().length) <=
((_b = slider === null || slider === void 0 ? void 0 : slider.current) === null || _b === void 0 ? void 0 : _b.slidesInView().length) && {
display: 'none',
})),
});
});
const { classes } = useStyles();
return (React__namespace["default"].createElement(SlideContext.Provider, { value: { slider: slider === null || slider === void 0 ? void 0 : slider.current, centerSlide, selectSlideWhenClick } },
React__namespace["default"].createElement(carousel.Carousel, Object.assign({ classNames: {
control: classes.control,
}, ref: ref, slideSize: 'auto', containScroll: "trimSnaps" }, sliderProps, props, { loop: true }), typeof children === 'function' ? children(centerSlide) : children)));
};
const CentralCarousel = CarouselWrapper;
CentralCarousel.Slide = CustomSlide;
const CheckboxWithState = (_a) => {
var { size = 24, isSolid, isActive } = _a, rest = tslib_es6.__rest(_a, ["size", "isSolid", "isActive"]);
return isSolid ? (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58173 14.4183 2 10 2C5.58173 2 2 5.58173 2 10C2 14.4183 5.58173 18 10 18Z", fill: "#2D87F3" }),
React__namespace["default"].createElement("path", { d: "M6.38904 10.2778L8.88904 13.0556L13.6113 6.94446", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58173 14.4183 2 10 2C5.58173 2 2 5.58173 2 10C2 14.4183 5.58173 18 10 18Z", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : isActive ? (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { opacity: ".2", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", fill: "#2D87F3" }),
React__namespace["default"].createElement("path", { d: "m6.389 10.278 2.5 2.778 4.722-6.111", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", fill: "#ADB3BC", fillOpacity: ".3" }),
React__namespace["default"].createElement("path", { d: "m6.389 10.278 2.5 2.778 4.722-6.111", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
};
const CheckboxWrapper = (_a) => {
var { color = 'blue', label, size: sizeProp, styles } = _a, props = tslib_es6.__rest(_a, ["color", "label", "size", "styles"]);
const theme = core.useMantineTheme();
const hexColor = React.useMemo(() => {
var _a, _b;
return ((color === null || color === void 0 ? void 0 : color.includes('.'))
? (_a = theme.colors[color.split('.')[0]]) === null || _a === void 0 ? void 0 : _a[color.split('.')[1]]
: (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
theme.colors.blue[6];
}, [color]);
const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
const size = isLeadgenStyle ? 20 : sizeProp;
return (React__namespace["default"].createElement(core.Checkbox, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__namespace["default"].createElement(index$1.Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
? (_a) => {
var rest = tslib_es6.__rest(_a, []);
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
React__namespace["default"].createElement(CheckboxWithState, Object.assign({ "data-icon": "true", "data-default": "true", size: size }, rest)),
React__namespace["default"].createElement(CheckboxWithState, Object.assign({ "data-icon": "true", "data-hover": "true", isActive: true, size: size }, rest)),
React__namespace["default"].createElement(CheckboxWithState, Object.assign({ "data-icon": "true", "data-checked": "true", isSolid: true, size: size }, rest))));
}
: undefined, styles: Object.assign({ input: Object.assign({ '&:hover': {
border: `1px solid ${hexColor}`,
} }, (isLeadgenStyle && {
width: size,
height: size,
backgroundColor: 'transparent',
borderRadius: '50%',
'&,&:hover': {
border: 0,
},
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-default]': {
opacity: 1,
},
'&:hover': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-hover]': {
opacity: 1,
},
},
'&:checked': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-checked]': {
opacity: 1,
},
'&:hover': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-checked]': {
opacity: 1,
},
},
},
'&, &:hover, &:checked': {
backgroundColor: 'transparent',
borderColor: 'transparent',
'& ~ svg': {
width: '100%',
transform: 'none',
transition: 'opacity 0.2s ease',
},
},
[theme.fn.smallerThan('sm')]: {
'&:hover': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-default]': {
opacity: 1,
},
},
},
})), label: Object.assign({}, (isLeadgenStyle && {
paddingLeft: 8,
})), body: Object.assign({}, (isLeadgenStyle && {
alignItems: 'flex-start',
})), inner: Object.assign({}, (isLeadgenStyle && {
paddingTop: 2,
width: size,
height: 24,
})) }, styles) }, props)));
};
const Checkbox = CheckboxWrapper;
Checkbox.Group = core.Checkbox.Group;
const StyledSlider = styled__default["default"](core.Slider) `
${(props) => {
const color = props.color || miscTheme.theme.colors.primaryBase;
return `
.mantine-Slider-bar {
background-color: ${color};
}
.mantine-Slider-thumb {
border-color: ${color};
color: ${color};
}
`;
}}
[data-theme='marryBaby'] & {
${(props) => {
const color = props.color || miscTheme.theme.mbColors.pink;
return `
.mantine-Slider-bar {
background-color: ${color};
}
.mantine-Slider-thumb {
border-color: ${color};
color: ${color};
}
`;
}}
}
.mantine-Slider-label {
background-color: transparent;
color: #000;
font-size: 14px;
font-weight: bold;
}
`;
const StyledSliderWrapper = styled__default["default"].div `
display: flex;
align-items: center;
.hhg-mantine-slider {
flex-grow: 1;
}
button {
path:not([stroke]) {
stroke: ${miscTheme.theme.colors.primaryBase};
}
}
[data-theme='marryBaby'] & {
button {
path:not([stroke]) {
stroke: ${miscTheme.theme.mbColors.pink};
}
}
}
`;
const RadioWithState = (_a) => {
var { size = 24, isSolid, isActive } = _a, rest = tslib_es6.__rest(_a, ["size", "isSolid", "isActive"]);
return isSolid ? (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "4", fill: "#2D87F3" }))) : isActive ? (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18", stroke: "#BCDEFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
};
const RadioWrapper = (_a) => {
var { color, label, size: sizeProp, styles } = _a, props = tslib_es6.__rest(_a, ["color", "label", "size", "styles"]);
const theme = core.useMantineTheme();
const hexColor = React.useMemo(() => {
var _a, _b;
return ((color === null || color === void 0 ? void 0 : color.includes('.'))
? (_a = theme.colors[color.split('.')[0]]) === null || _a === void 0 ? void 0 : _a[color.split('.')[1]]
: (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
theme.fn.primaryColor();
}, [color]);
const isLeadgenStyle = theme.other.customStyleType === text.CustomStylesType.LEADGEN;
const size = isLeadgenStyle ? 20 : sizeProp;
return (React__namespace["default"].createElement(core.Radio, Object.assign({ label: isLeadgenStyle ? (React__namespace["default"].createElement(index$1.Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
? (_a) => {
var rest = tslib_es6.__rest(_a, []);
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
React__namespace["default"].createElement(RadioWithState, Object.assign({ "data-icon": "true", "data-default": "true", size: size }, rest)),
React__namespace["default"].createElement(RadioWithState, Object.assign({ "data-icon": "true", "data-hover": "true", isActive: true, size: size }, rest)),
React__namespace["default"].createElement(RadioWithState, Object.assign({ "data-icon": "true", "data-checked": "true", isSolid: true, size: size }, rest))));
}
: undefined, styles: Object.assign({ radio: Object.assign({ '&:hover, &:checked': {
border: `1px solid ${hexColor}`,
}, '&:checked + .___ref-icon': {
top: '50%',
left: '50%',
transform: 'scale(1) translate(-50%, -50%)',
} }, (isLeadgenStyle && {
width: size,
height: size,
backgroundColor: 'transparent',
marginTop: 2,
borderRadius: '50%',
'&,&:hover': {
border: 0,
},
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-default]': {
opacity: 1,
},
'&:hover': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-hover]': {
opacity: 1,
},
},
'&:checked': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-checked]': {
opacity: 1,
},
'&:hover': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-checked]': {
opacity: 1,
},
},
},
'&, &:hover, &:checked': {
backgroundColor: 'transparent',
borderColor: 'transparent',
'& ~ svg': {
position: 'absolute',
width: '100%',
transform: 'none',
transition: 'opacity 0.2s ease',
top: 2,
left: 0,
},
},
[theme.fn.smallerThan('sm')]: {
'&:hover': {
'& ~ [data-icon]': {
opacity: 0,
},
'& ~ [data-default]': {
opacity: 1,
},
},
},
})), icon: {
color: hexColor,
}, label: Object.assign({}, (isLeadgenStyle && {
paddingLeft: 8,
})) }, styles) }, props)));
};
const Radio = RadioWrapper;
Radio.Group = core.Radio.Group;
function transferValueToOtp(value, valueLength = 6) {
const otp = new Array(valueLength).fill('');
if (value) {
const arr = value.toString().split('');
otp.map((_, index) => {
if (arr[index]) {
otp[index] = arr[index] || '';
}
});
}
return otp;
}
function transferOtpToValue(otp) {
return otp.join('');
}
var styles$2 = {"otpContainer":"_2iQs0sk","otpInput":"Ia6IojY","error":"yJs9MaD"};
const BACKSPACE = 8;
const LEFT_ARROW = 37;
const RIGHT_ARROW = 39;
const DELETE = 46;
const SPACEBAR = 32;
const OTPInputFunction = (props, ref) => {
const { maxLength = 1, placeholder, className } = props, restProps = tslib_es6.__rest(props, ["maxLength", "placeholder", "className"]);
return (React__namespace["default"].createElement("input", Object.assign({ maxLength: maxLength, className: cn__default["default"](styles$2.otpInput, 'otpInput', className), placeholder: placeholder, type: "number" }, restProps, { ref: ref })));
};
const OTPInput = React.forwardRef(OTPInputFunction);
const OTPFowardRef = (props, ref) => {
const { valueLength = 6, type = 'number', value: valueProps, defaultValue, placeholder, onChange, onBlur, otpShareProps, } = props;
const inputRef = React.useRef(new Array(valueLength).fill(null));
const [value, setValue] = React.useState(defaultValue || valueProps);
const [activeOtp, setActiveOtp] = React.useState(-1);
const [otp, setOtp] = React.useState(() => transferValueToOtp(value, valueLength));
const changeCodeAtFocus = React.useCallback(() => {
if (activeOtp === -1) {
return;
}
const activeInput = inputRef.current[activeOtp];
if (activeInput) {
activeInput.value = '';
const newOtp = otp;
newOtp[activeOtp] = '';
setOtp(newOtp);
setValue(() => transferOtpToValue(newOtp));
onChange === null || onChange === void 0 ? void 0 : onChange(transferOtpToValue(newOtp));
}
}, [activeOtp, onChange, otp]);
const focusPrevInput = React.useCallback(() => {
if (activeOtp === 0) {
return;
}
const curInput = inputRef.current[activeOtp];
if (curInput) {
curInput.blur();
}
const prevInput = inputRef.current[activeOtp - 1];
if (prevInput) {
prevInput.focus();
}
}, [activeOtp]);
const focusNextInput = React.useCallback(() => {
if (activeOtp === valueLength - 1) {
return;
}
const curInput = inputRef.current[activeOtp];
if (curInput) {
curInput.blur();
}
const nextInput = inputRef.current[activeOtp + 1];
if (nextInput) {
nextInput.focus();
}
}, [activeOtp, valueLength]);
const inputOnChange = React.useCallback((e) => {
const target = e.target;
const targetValue = target.value;
const code = targetValue.toString().slice(0, 1);
const indexTarget = inputRef.current.findIndex((input) => input === target);
if (indexTarget !== -1) {
const newOtp = otp;
newOtp[indexTarget] = code;
setOtp(newOtp);
setValue(() => transferOtpToValue(newOtp));
onChange === null || onChange === void 0 ? void 0 : onChange(transferOtpToValue(newOtp));
}
focusNextInput();
}, [focusNextInput, onChange, otp]);
const inputOnFocus = React.useCallback((e) => {
const target = e.target;
const targetIndex = inputRef.current.findIndex((input) => input === target);
if (type === 'number') {
target.select();
}
else {
target.setSelectionRange(0, target.value.length, 'backward');
}
if (targetIndex !== -1) {
setActiveOtp(targetIndex);
}
}, []);
const inputOnPaste = React.useCallback((e) => {
const clipboard = e.clipboardData.getData('text/plain');
const newOtp = transferValueToOtp(clipboard, valueLength);
const newValue = transferOtpToValue(newOtp);
setOtp(newOtp);
setValue(newValue);
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
}, [onChange, type, valueLength]);
// Handle cases of backspace, delete, left arrow, right arrow, space
const inputOnKeyDown = React.useCallback((e) => {
if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
e.preventDefault();
changeCodeAtFocus();
focusPrevInput();
}
else if (e.keyCode === DELETE || e.key === 'Delete') {
e.preventDefault();
changeCodeAtFocus();
}
else if (e.keyCode === LEFT_ARROW || e.key === 'ArrowLeft') {
e.preventDefault();
focusPrevInput();
}
else if (e.keyCode === RIGHT_ARROW || e.key === 'ArrowRight') {
e.preventDefault();
focusNextInput();
}
else if (e.keyCode === SPACEBAR ||
e.key === ' ' ||
e.key === 'Spacebar' ||
e.key === 'Space') {
e.preventDefault();
}
}, [changeCodeAtFocus, focusNextInput, focusPrevInput]);
React.useImperativeHandle(ref, () => inputRef.current[0], []);
React.useEffect(() => {
setOtp(() => transferValueToOtp(valueProps, valueLength));
setValue(valueProps);
}, [valueLength, valueProps]);
return (React__namespace["default"].createElement(core.Flex, { justify: "center", columnGap: 8, className: cn__default["default"](styles$2.otpContainer, 'otpContainer') }, otp.map((val, index) => {
return (React__namespace["default"].createElement(OTPInput, Object.assign({}, otpShareProps, { ref: (iRef) => {
inputRef.current[index] = iRef;
}, key: '' + index, value: val, type: type, onChange: inputOnChange, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, onPaste: inputOnPaste, onBlur: onBlur, placeholder: placeholder })));
})));
};
const OTP = React.forwardRef(OTPFowardRef);
const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(index$2.ImageWrap, Object.assign({ alt: "round cambodia flag", src: index.CommonGAssets.get