@hhgtech/hhg-components
Version:
Hello Health Group common components
1,176 lines (1,087 loc) • 47.2 kB
JavaScript
;
var React = require('react');
var index = require('./index-d4ad3f79.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var utils = require('./utils-5e3a8440.js');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var index$1 = require('./index-2174890f.js');
var index$2 = require('./index-3424862e.js');
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var index$3 = require('./index-c88c8189.js');
var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
var flattenChildren = require('react-keyed-flatten-children');
var index$4 = require('./index-e13a0e39.js');
var index$6 = require('./index-78a4fbc3.js');
var index$5 = require('./index-2b476eb9.js');
var carousel = require('@mantine/carousel');
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 flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
/* eslint-disable prettier/prettier */
const Upload = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none" }, props),
React__namespace.createElement("path", { d: "M9.82324 8.7033L10.8228 9.70287C10.9267 9.80662 11.056 9.8573 11.2107 9.85493C11.3655 9.85255 11.4948 9.79943 11.5987 9.69555C11.7026 9.59168 11.7545 9.46074 11.7545 9.30274C11.7545 9.14474 11.7026 9.01462 11.5987 8.91237L9.7353 7.04899C9.59968 6.91337 9.44149 6.84555 9.26074 6.84555C9.07999 6.84555 8.9218 6.91337 8.78618 7.04899L6.91549 8.91968C6.81174 9.02355 6.75987 9.15287 6.75987 9.30762C6.75987 9.46237 6.81174 9.59168 6.91549 9.69555C7.01937 9.79943 7.1503 9.85137 7.3083 9.85137C7.4663 9.85137 7.59643 9.79943 7.69868 9.69555L8.69824 8.7033L8.69824 11.5576C8.69824 11.717 8.75218 11.8506 8.86005 11.9583C8.96793 12.0662 9.10156 12.1201 9.26093 12.1201C9.42043 12.1201 9.55399 12.0662 9.66162 11.9583C9.76937 11.8506 9.82324 11.717 9.82324 11.5576L9.82324 8.7033ZM16.3857 9.3063C16.3857 10.2918 16.1987 11.2181 15.8247 12.0852C15.4507 12.9524 14.9432 13.7066 14.3021 14.348C13.6609 14.9894 12.907 15.4972 12.0402 15.8714C11.1735 16.2456 10.2474 16.4326 9.26205 16.4326C8.27655 16.4326 7.35024 16.2456 6.48312 15.8716C5.61599 15.4976 4.86174 14.9901 4.22037 14.3489C3.57899 13.7078 3.07118 12.9539 2.69693 12.0871C2.3228 11.2204 2.13574 10.2943 2.13574 9.30893C2.13574 8.32343 2.32274 7.39712 2.69674 6.52999C3.07074 5.66287 3.5783 4.90862 4.21943 4.26724C4.86055 3.62587 5.61449 3.11805 6.48124 2.7438C7.34799 2.36968 8.27405 2.18262 9.25943 2.18262C10.2449 2.18262 11.1712 2.36962 12.0384 2.74362C12.9055 3.11762 13.6597 3.62518 14.3011 4.2663C14.9425 4.90743 15.4503 5.66137 15.8246 6.52812C16.1987 7.39487 16.3857 8.32093 16.3857 9.3063ZM15.2607 9.30762C15.2607 7.63262 14.6795 6.21387 13.517 5.05137C12.3545 3.88887 10.9357 3.30762 9.26074 3.30762C7.58574 3.30762 6.16699 3.88887 5.00449 5.05137C3.84199 6.21387 3.26074 7.63262 3.26074 9.30762C3.26074 10.9826 3.84199 12.4014 5.00449 13.5639C6.16699 14.7264 7.58574 15.3076 9.26074 15.3076C10.9357 15.3076 12.3545 14.7264 13.517 13.5639C14.6795 12.4014 15.2607 10.9826 15.2607 9.30762Z", fill: "#595959" })));
/**
* @deprecated Consider to use Mantine
*/
const Alert = ({ style, onClose, text, type, contentIcon, closeIcon, className, description, }) => {
return (React__namespace["default"].createElement("div", { className: `${styles.alert} ${className || ''}`, style: style, "data-alert-type": type },
React__namespace["default"].createElement("div", { className: styles.content },
React__namespace["default"].createElement("div", { className: "icon-title" },
contentIcon,
React__namespace["default"].createElement(index.Text, { weight: "bold", size: "label1" }, text)),
React__namespace["default"].createElement(index.Text, { weight: "regular", size: "p3" }, description)),
React__namespace["default"].createElement("div", { className: styles.close, onClick: onClose }, closeIcon)));
};
const renderNotificationStyles = (type, size, hasIcon, color) => {
let sizeparams = '';
if (type === 'numeric') {
switch (size) {
case 'medium':
sizeparams = `
height: 16px;
font-size: 11px;
padding: 1px 6px;
`;
case 'large':
sizeparams = `
height: 24px;
font-size: 13px;
padding: 1px 10px;
`;
}
}
let icon = '';
if (hasIcon) {
icon = `
position: absolute;
top: 0;
left: 75%;
`;
}
let numericIcon;
if (hasIcon) {
numericIcon = `
left: 70%;
${size === 'large'
? `
top: -7px;
`
: size === 'medium'
? `
top: -2px;
width: 16px;
height: 16px;
`
: ''}
`;
}
let notificationColor = '';
switch (color) {
case 'primary':
notificationColor = `
background: ${miscTheme.theme.colors.primary50};
color: ${miscTheme.theme.colors.primary600};
`;
break;
case 'error':
notificationColor = `
background: ${miscTheme.theme.colors.error};
color: white;
`;
break;
}
switch (type) {
case 'dot':
return `
${icon}
width: 8px;
height: 8px;
font-size: 0px;
border-radius: 50%;
${notificationColor}
`;
case 'numeric':
return `
${icon}
width: max-content;
border-radius: 32px;
${sizeparams}
${numericIcon}
${notificationColor}
`;
}
};
const StyledBadge = styled__default["default"].div `
position: relative;
> div {
width: max-content;
position: relative;
}
span {
font-weight: ${miscTheme.theme.sizes.fwBold};
display: flex;
justify-content: center;
align-items: center;
${(props) => renderNotificationStyles(props.notificationType, props.notificationSize, props.hasIcon, props.notificationColor)}
}
${(props) => props.hasIcon &&
`
svg {
width: 40px;
height: 40px;
}
`}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const Badge = ({ amount, type, size = 'medium', color = 'primary', icon, className, }) => {
return (React__namespace["default"].createElement(StyledBadge, { "data-notification-type": type, "data-notification-size": size, "data-notification-color": color, "data-has-icon": !!icon || undefined, notificationType: type, notificationSize: size, notificationColor: color, hasIcon: !!icon, className: className },
React__namespace["default"].createElement("div", null,
amount && React__namespace["default"].createElement("span", null, amount),
" ",
icon && React__namespace["default"].createElement("div", null, icon))));
};
const StyledBorderHeading = styled__default["default"].h4 `
position: relative;
line-height: 18px;
&:after {
position: absolute;
top: 1px;
left: 0;
width: 4px;
height: 18px;
background-color: ${miscTheme.theme.colors.primaryBase};
content: '';
}
&[data-size='lg'] {
font-size: 18px;
padding-left: 12px;
}
&[data-size='sm'] {
font-size: 14px;
padding-left: 8px;
&::after {
width: 2px;
height: 15px;
}
}
&[data-type='bold'] {
font-weight: ${miscTheme.theme.sizes.fwBold};
}
&[data-type='semiBold'] {
font-weight: ${miscTheme.theme.sizes.fwSemiBold};
}
&[data-uppercase] {
text-transform: uppercase;
}
${utils.MediaQueries.mbDown} {
&[data-size='lg'] {
font-size: 16px;
}
}
`;
const BorderHeading = ({ style, children, className, size = 'lg', type = 'bold', upperCase, as = 'h4', color, }) => (React__namespace["default"].createElement(StyledBorderHeading, { style: Object.assign({ color }, style), className: className, "data-size": size, "data-type": type, "data-uppercase": upperCase, as: as }, children));
const StyledArrowDownIcon = styled__default["default"](index$1.ShapedArrowDown) `
flex-shrink: 0;
color: ${miscTheme.theme.colors.neutral800};
width: 16px;
height: 16px;
transition: transform 0.2s ease-in-out;
transform: rotate(-180deg);
&[data-is-collapsed='true'] {
transform: rotate(0deg);
}
`;
const StyledCardCollapse = styled__default["default"].div `
background-color: white;
.icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: ${miscTheme.theme.colors.neutral800};
}
.title-collapse {
color: #111111;
font-weight: var(--fwSemiBold);
font-size: 1.0625rem;
line-height: 1.5rem;
flex-grow: 1;
}
.box-collapse {
display: flex;
padding: 1.5rem 1rem 1rem 1rem;
gap: 0.75rem;
align-items: center;
}
`;
function CardCollapse({ children, title, icon, defaultOpened = true, haveCollapse = true, id, className, as = 'h2', }) {
const [opened, { toggle }] = hooks.useDisclosure(defaultOpened);
const handleClick = () => {
if (haveCollapse) {
toggle();
}
};
return (React__namespace["default"].createElement(StyledCardCollapse, { id: id, className: className },
React__namespace["default"].createElement("div", { className: "box-collapse", onClick: handleClick },
haveCollapse && icon,
React__namespace["default"].createElement(index.Text, { as: as, className: "title-collapse" }, title),
haveCollapse && React__namespace["default"].createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
React__namespace["default"].createElement(core.Collapse, { in: haveCollapse ? opened : true, transitionDuration: 200, transitionTimingFunction: "ease" }, children)));
}
const StyledDropdown = styled__default["default"].div `
position: relative;
box-sizing: border-box;
border: 1px solid ${miscTheme.theme.colors.gray200};
background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
background-position: right 16px center;
border-radius: ${miscTheme.theme.borderRadius};
&[data-has-icons='true'] {
border: none;
background: ${miscTheme.theme.colors.gray100};
img,
svg {
display: inline-block;
max-width: 16px;
margin-right: 6px;
}
span {
vertical-align: middle;
display: inline-block;
}
&:hover {
box-shadow: none;
}
> div {
position: relative;
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
}
> div::after {
content: '';
right: 12px;
top: 50%;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
width: 10px;
height: 8px;
position: absolute;
background-repeat: no-repeat;
transform: translateY(-50%);
}
}
&:hover {
box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
}
`;
const StyledDropdownName = styled__default["default"].div `
padding: 12px 18px 12px 16px;
cursor: pointer;
&[data-dropdown-open] {
padding: 11px 15px 11px 15px;
border: 1px solid ${miscTheme.theme.colors.primaryBase};
border-radius: ${miscTheme.theme.borderRadius};
box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
}
& > svg {
height: 16px;
width: 16px;
}
`;
const StyledDropdownList = styled__default["default"].ul `
position: absolute;
top: 100%;
right: 0;
left: 0;
display: block;
margin-top: 4px;
background: ${miscTheme.theme.colors.white};
border-radius: ${miscTheme.theme.borderRadius};
box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-2px 2px 5px rgba(67, 86, 100, 0.123689);
cursor: pointer;
&[data-has-icons='true'] {
background: white;
box-shadow: none;
border: 1px solid ${miscTheme.theme.colors.gray200};
filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
}
`;
const StyledDropdownOption = styled__default["default"].li `
margin: 8px;
padding: 12px 18px 12px 16px;
border-radius: ${miscTheme.theme.borderRadius};
display: flex;
&:hover,
:active {
background: ${miscTheme.theme.colors.gray100};
}
`;
const StyledIcon = styled__default["default"].div `
display: flex;
align-items: center;
margin-right: 8px;
& > svg {
height: 16px;
width: 16px;
}
`;
const ShareIconPathStyle = () => (React__namespace["default"].createElement("style", null, '.file-dropdown-path{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'));
const DefaultFileIcon = () => (React__namespace["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 12.17 14.83" },
React__namespace["default"].createElement("defs", null,
React__namespace["default"].createElement("clipPath", { id: "prefix__clip-path", transform: "translate(-1.92 -1.54)" },
React__namespace["default"].createElement("path", { fill: "none", d: "M0 .96h16v16H0z" }))),
React__namespace["default"].createElement("title", null, 'File'),
React__namespace["default"].createElement("g", { clipPath: "url(#prefix__clip-path)" },
React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29H4a1.33 1.33 0 00-1.33 1.33v10.67A1.33 1.33 0 004 15.62h8a1.33 1.33 0 001.33-1.33V7z", transform: "translate(-1.92 -1.54)" }),
React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29V7h4.66", transform: "translate(-1.92 -1.54)" }))));
const DownloadIcon = () => (React__namespace["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
React__namespace["default"].createElement("title", null, 'download'),
React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M4.67 7.62L8 11l3.33-3.34M8 11V3", transform: "translate(-1.25 -2.21)" })));
const UploadIcon = () => (React__namespace["default"].createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
React__namespace["default"].createElement("title", null, 'upload'),
React__namespace["default"].createElement("path", { className: "file-dropdown-path", d: "M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M11.33 6.29L8 3 4.67 6.29M8 3v8", transform: "translate(-1.25 -2.21)" })));
const FileDropdown = ({ className, value, options, onUploadSelected, id, placeholderIcon, placeholder, style, }) => {
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const showDropdown = () => setIsDropdownOpen(!isDropdownOpen);
const inputList = React.useRef(options.map((option) => {
return (option.type === 'upload' && (React__namespace["default"].createElement("input", { id: 'uploader-dropdown-input-' + id + '-' + option.value, key: 'uploader-dropdown-input-' + id + '-' + option.value, accept: option.fileAcceptedType, multiple: option.multiple, type: "file", style: { display: 'none' }, onChange: (e) => {
console.log('change');
onUploadSelected(e.target.files);
} })));
}));
const onUpload = (dropdownId) => {
var _a;
(_a = document.querySelector(dropdownId)) === null || _a === void 0 ? void 0 : _a.click();
};
const onDownload = (url) => {
url && window.open(url, '_blank');
};
return (React__namespace["default"].createElement(StyledDropdown, { className: className, "data-dropdown-open": !!isDropdownOpen, id: id, "data-has-icons": true, style: style, onBlur: () => setIsDropdownOpen(false), tabIndex: 0 },
React__namespace["default"].createElement(ShareIconPathStyle, null),
React__namespace["default"].createElement(StyledDropdownName, { onClick: showDropdown },
placeholderIcon || React__namespace["default"].createElement(DefaultFileIcon, null),
' ',
React__namespace["default"].createElement("span", null, value && value.value ? value.label : placeholder)),
isDropdownOpen && (React__namespace["default"].createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": true }, options.map((option) => (React__namespace["default"].createElement(StyledDropdownOption, { key: `${id}-${option.value}`, "data-selected": (value && value.value === option.value) || undefined, onClick: () => option.type === 'upload'
? onUpload('#uploader-dropdown-input-' + id + '-' + option.value)
: onDownload(option.url) },
React__namespace["default"].createElement(StyledIcon, null, option.icon || option.type === 'download' ? (React__namespace["default"].createElement(DownloadIcon, null)) : (React__namespace["default"].createElement(UploadIcon, null))),
option.label))))),
React__namespace["default"].createElement(React__namespace["default"].Fragment, null, inputList.current)));
};
const StyledGrid = styled__default["default"].div `
--columns: var(--grid-template-columns, repeat(var(--columns-count), 1fr));
--columns-desktop: var(
--grid-template-columns-desktop,
repeat(var(--columns-count-desktop), 1fr)
);
display: grid;
grid-template-columns: var(--columns);
grid-gap: var(--grid-gap);
align-items: var(--align-items);
${utils.MediaQueries.tdUp} {
grid-template-columns: var(--columns-desktop);
}
> * {
justify-self: var(--justify-children);
}
`;
/**
* @deprecated Consider to use mantine
*/
const Grid = ({ className, columns, columnsDesktop, gridTemplateColumns, gridTemplateColumnsDesktop, gap, children, justifyChildren, style, alignItems, }) => {
return (React__namespace["default"].createElement(StyledGrid, { className: className, style: Object.assign({ '--columns-count': columns, '--columns-count-desktop': columnsDesktop, '--grid-template-columns': gridTemplateColumns, '--grid-template-columns-desktop': gridTemplateColumnsDesktop, '--justify-children': justifyChildren, '--grid-gap': gap, '--align-items': alignItems }, style) }, children));
};
/**
* @deprecated Consider to use import { Radio } from '@mantine/core'
*/
const Radio = ({ size = 'small', label, name, checked, value, className, isDisabled = false, onChange, dataEventCategory, dataEventAction, dataEventLabel, }) => {
const isHasTracking = !!dataEventAction && !!dataEventCategory && !!dataEventLabel;
const trackingProps = isHasTracking
? {
'data-event-category': dataEventCategory,
'data-event-action': dataEventAction,
'data-event-label': dataEventLabel,
}
: {};
return (React__namespace["default"].createElement(index$2.Radio
// type,
, Object.assign({
// type,
size: size === 'small' ? 'md' : 'lg', label: label, name: name, checked: checked, value: value, className: className, disabled: isDisabled, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value) }, trackingProps)));
};
const StyledRateStars = styled__default["default"].div `
display: inline-flex;
gap: calc(var(--gap) * 1px);
> svg {
width: calc(var(--star-size) * 1px);
height: calc(var(--star-size) * 1px);
}
&[data-selectable='true'] {
> svg {
cursor: pointer;
}
}
`;
const StarHalfIcon = (props) => {
return (React__namespace["default"].createElement("svg", Object.assign({}, props, { viewBox: "0 0 24 24", fill: "none" }),
React__namespace["default"].createElement("path", { d: "m139.287 144.772 5.17 3.12c.38.23.85-.11.75-.54l-1.37-5.88 4.56-3.95c.33-.29.16-.84-.29-.88l-6.01-.51-2.35-5.54a.498.498 0 0 0-.92 0l-2.35 5.54-6.01.51a.499.499 0 0 0-.28.88l4.56 3.95-1.37 5.88c-.1.43.37.77.75.54z", fill: "#E4E8EC" }),
React__namespace["default"].createElement("path", { d: "M139.289 144.771s.013-14.488 0-14.488a.49.49 0 0 0-.46.308l-2.35 5.54-6.01.51a.499.499 0 0 0-.28.88l4.56 3.95-1.37 5.88c-.1.43.37.77.75.54z", fill: "#FFC326" })));
};
const StarIcon = (_a) => {
var { isFull } = _a, props = tslib_es6.__rest(_a, ["isFull"]);
return (React__namespace["default"].createElement("svg", Object.assign({}, props, { viewBox: "0 0 32 32", fill: "none" }),
React__namespace["default"].createElement("path", { d: "m16 23.027 6.893 4.16c.507.306 1.134-.147 1-.72l-1.826-7.84 6.08-5.267a.67.67 0 0 0-.387-1.173l-8.013-.68-3.134-7.387a.664.664 0 0 0-1.226 0l-3.133 7.387-8.014.68a.668.668 0 0 0-.373 1.173l6.08 5.267-1.827 7.84c-.133.573.493 1.026 1 .72z", fill: isFull ? '#FFC326' : '#D2D6DC' })));
};
/**
*
* Show 5 (or more) stars and allow user vote (optional)
*
*/
const RateStars = ({ gap = 2, size = 24, star, totalStars = 5, onSelect, hideEmptyStars, style, className, }) => {
const numberOfFullStars = Math.floor(star);
const numberOfHalfStars = star - numberOfFullStars >= 0.5 ? 1 : 0;
const [tempStar, setTempStar] = React.useState(null);
const tempFullStars = tempStar || numberOfFullStars;
const tempHalfStars = tempStar ? 0 : numberOfHalfStars;
return (React__namespace["default"].createElement(StyledRateStars, { "data-selectable": !!onSelect, style: Object.assign({ '--gap': gap, '--star-size': size }, style), className: className }, Array.from({
length: hideEmptyStars
? numberOfFullStars + numberOfHalfStars
: totalStars,
}).map((_, index) => {
const onMouseOver = () => !!onSelect && setTempStar(index + 1);
const onMouseLeave = () => !!onSelect && setTempStar(null);
return index + 1 <= tempFullStars ? (React__namespace["default"].createElement(StarIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave, isFull: true })) : index + 1 === tempFullStars + tempHalfStars ? (React__namespace["default"].createElement(StarHalfIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave })) : (React__namespace["default"].createElement(StarIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave }));
})));
};
const getTag = (tag, isLight) => {
switch (tag) {
case 'yellow': {
const color = isLight ? miscTheme.theme.colors.yellow50 : miscTheme.theme.colors.yellow600;
return `
background: ${color};
p {
color: var(
--text-props-color,
${miscTheme.theme.colors.gray800}
);
}
`;
}
case 'standard': {
return `
background: ${miscTheme.theme.colors.white};
border: 1px solid ${miscTheme.theme.colors.gray200};
p {
color: var(
--text-props-color,
${miscTheme.theme.colors.gray800}
);
}
&:hover {
background: ${miscTheme.theme.colors.gray100};
}
`;
}
case 'red': {
const color = isLight ? miscTheme.theme.colors.red50 : miscTheme.theme.colors.red500;
return `
background: ${color};
`;
}
case 'green': {
const color = isLight ? miscTheme.theme.colors.green50 : miscTheme.theme.colors.green500;
return `
background: ${color};
`;
}
case 'blue': {
const color = isLight ? miscTheme.theme.colors.primary50 : miscTheme.theme.colors.primaryBase;
return `
background: ${color};
`;
}
case 'teal': {
const color = isLight ? miscTheme.theme.colors.teal100 : miscTheme.theme.colors.teal600;
return `
background: ${color};
`;
}
case 'pink': {
const color = isLight ? miscTheme.theme.colors.pink200 : miscTheme.theme.colors.pink800;
return `
background: ${color};
`;
}
case 'violet': {
const color = isLight ? miscTheme.theme.colors.violet100 : miscTheme.theme.colors.violet500;
return `
background: ${color};
`;
}
case 'grey': {
const color = isLight ? miscTheme.theme.colors.gray100 : miscTheme.theme.colors.gray600;
return `
background: ${color};
`;
}
}
};
const StyledTag = styled__default["default"].div `
--padding-horizontal: 8px;
--pading-vertical: 2px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--pading-vertical) var(--padding-horizontal);
border-radius: 24px;
${(props) => props.tagType === 'sponsored' &&
`
--offset-size: 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
border-radius: 0 4px 18px 0;
height: 24px;
width: 90px;
border-left: var(--offset-size) solid ${miscTheme.theme.colors.accentLight};
padding: 0;
margin-left: calc(var(--offset-size) * -1);
p {
font-weight: ${miscTheme.theme.sizes.fwBold};
color: var(
--text-props-color,
${miscTheme.theme.colors.secondaryDark}
);
font-size: 11px;
margin-left: calc(var(--offset-size) * -1);
}
&::after {
width: calc(var(--offset-size) * 2);
height: var(--offset-size);
background: ${miscTheme.theme.colors.accentMain};
position: absolute;
left: calc(var(--offset-size) * -1);
bottom: calc(var(--offset-size) * -1);
clip-path: polygon(0 1%, 100% 0%, 100% 100%);
content: '';
}
`}
${(props) => props.isInline &&
`
display: inline-block;
`}
${(props) => props.tagHasMorePadding &&
`
&[data-has-more-padding] {
padding: calc(var(--pading-vertical) + 5px) var(--padding-horizontal);
}
`}
p {
${(props) => props.tagIsLight
? `
color: var(--text-props-color, #000);
`
: `
color: var(--text-props-color, ${miscTheme.theme.colors.white});
`}
}
${(props) => getTag(props.tagType, props.tagIsLight)}
${(props) => props.tagIsSquared &&
props.tagType !== 'sponsored' &&
`
border-radius: 4px;
`}
${(props) => props.tagIsALink &&
`
cursor: pointer;
`}
&[data-is-selected],
&:active {
background: ${miscTheme.theme.colors.primary50};
}
`;
const Tag = ({ type, children, style, isInline, isSquared = false, className, isLight, hasMorePadding, isLink, isSelected, textProps = {
size: 'sm',
}, }) => {
const textColor = textProps.color
? { '--text-props-color': textProps.color }
: {};
return (React__namespace["default"].createElement(StyledTag, { "data-is-squared": isSquared || undefined, "data-tag-type": type, "data-is-light": isLight || undefined, "data-has-more-padding": hasMorePadding || undefined, "data-is-inline": isInline || undefined, style: Object.assign(Object.assign({}, style), textColor), className: className, "data-is-selected": isSelected || undefined, "data-is-link": isLink || undefined, tagType: type, isInline: isInline, tagHasMorePadding: hasMorePadding, tagIsLight: isLight, tagIsSquared: isSquared, tagIsALink: isLink },
React__namespace["default"].createElement(index$3.Text, Object.assign({}, textProps), children)));
};
const heightIcon = '24px';
const StyledToggleIcon = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].span `
position: relative;
display: block;
width: 40px;
height: ${heightIcon};
background: #c3cbd4;
border-radius: 100px;
cursor: pointer;
&:after {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 90px;
content: '';
transition: 0.3s;
}
`, 'hhgcomp-toggle-icon');
const StyledToggleLabel = styled__default["default"].span `
padding-left: 15px;
`;
const StyledToggle = styled__default["default"].div `
height: ${heightIcon};
input[type='checkbox'] {
width: 0;
height: 0;
visibility: hidden;
}
label {
cursor: pointer;
display: inline-flex;
color: ${miscTheme.theme.colors.gray600};
}
input:checked + label ${StyledToggleIcon.classSelector} {
background: ${miscTheme.theme.colors.primaryBase};
&:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
}
`;
/**
* @deprecated Consider to use {@link Switch} at {@link https://www.npmjs.com/package/@hhgtech/hhg-components/mantine}
*/
const Toggle = ({ className, id, onChange, checked, style, label }) => (React__namespace["default"].createElement(StyledToggle, { className: className, style: style },
React__namespace["default"].createElement("input", { type: "checkbox", id: id, onChange: onChange, checked: checked }),
React__namespace["default"].createElement("label", { htmlFor: id },
React__namespace["default"].createElement(StyledToggleIcon, null),
label && React__namespace["default"].createElement(StyledToggleLabel, null, label))));
// define shared context
const StepRendererContext = React.createContext({
currentStep: 0,
setCurrentStep: () => false,
setMaxStep: () => false,
nextStep: () => false,
prevStep: () => false,
});
const StepRenderer = ({ children, onStepChange }) => {
const [currentStep, setCurrentStep] = React.useState(0);
const [maxStep, setMaxStep] = React.useState(0);
const childrenCount = React__namespace["default"].Children.count(children);
React.useEffect(() => {
setMaxStep(childrenCount - 1);
}, [childrenCount]);
React.useEffect(() => {
onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(currentStep);
}, [currentStep]);
const nextStep = () => currentStep + 1 <= maxStep && setCurrentStep(currentStep + 1);
const prevStep = () => currentStep - 1 >= 0 && setCurrentStep(currentStep - 1);
return (React__namespace["default"].createElement(StepRendererContext.Provider, { value: {
currentStep,
setCurrentStep,
setMaxStep,
nextStep,
prevStep,
} }, flattenChildren__default["default"](children).map((element, idx) => {
const active = idx === currentStep;
return (React__namespace["default"].createElement(React.Fragment, { key: idx }, !React__namespace["default"].isValidElement(element)
? active
? element
: null
: element.props.alwaysRender || active
? React__namespace["default"].cloneElement(element, {
isActive: idx === currentStep,
stepIndex: idx,
})
: null));
})));
};
const StyledIconHeading = styled__default["default"].div `
display: flex;
align-items: center;
gap: 8px;
`;
const StyledTitle = styled__default["default"](index$4.Heading) `
font-weight: var(--fwBold);
`;
const IconHeading = ({ icon, title, className, style }) => {
return (React__namespace["default"].createElement(StyledIconHeading, { className: className, style: style },
icon,
React__namespace["default"].createElement(StyledTitle, { tag: "h6", color: "var(--secondaryDark)" }, title)));
};
const sanitizeHtml = (data) => {
if (!data)
return '';
const convertNewlinesToHtmlBreaks = data
.replace(/\n$/, '')
.replace(/\n/g, '<br />');
return convertNewlinesToHtmlBreaks;
};
const HtmlContent = ({ htmlContent, className }) => {
const htmlClean = sanitizeHtml(htmlContent);
return (React__namespace["default"].createElement("div", { className: className, dangerouslySetInnerHTML: { __html: htmlClean } }));
};
exports.FILE_UPLOAD_ACCEPTED_RATIOS = void 0;
(function (FILE_UPLOAD_ACCEPTED_RATIOS) {
FILE_UPLOAD_ACCEPTED_RATIOS["ONE_TO_ONE"] = "1:1";
FILE_UPLOAD_ACCEPTED_RATIOS["THREE_TO_ONE"] = "3:1";
})(exports.FILE_UPLOAD_ACCEPTED_RATIOS || (exports.FILE_UPLOAD_ACCEPTED_RATIOS = {}));
exports.FILE_UPLOAD_ACCEPTED_TYPES = void 0;
(function (FILE_UPLOAD_ACCEPTED_TYPES) {
FILE_UPLOAD_ACCEPTED_TYPES["PNG"] = ".png";
FILE_UPLOAD_ACCEPTED_TYPES["JPG"] = ".jpg";
FILE_UPLOAD_ACCEPTED_TYPES["JPEG"] = ".jpeg";
})(exports.FILE_UPLOAD_ACCEPTED_TYPES || (exports.FILE_UPLOAD_ACCEPTED_TYPES = {}));
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
};
const handleMultipleImageFiles = (fileList) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
if (fileList.length === 0) {
return [];
}
const base64List = yield Promise.all(fileList.map((file) => getBase64(file)));
return base64List;
});
const StyledImageUploadWrapper = styled__default["default"].div `
display: flex;
flex-direction: column;
.image-upload-input-error {
margin-top: ${core.rem(12)};
display: flex;
flex-direction: column;
gap: ${core.rem(4)};
}
`;
const StyledImageUploadContent = styled__default["default"].div `
display: flex;
flex-direction: column;
gap: ${core.rem(4)};
margin-top: ${core.rem(4)};
span {
color: ${miscTheme.theme.colors.neutral500};
}
`;
const StyledImageUploadInputWrapper = styled__default["default"].div `
position: relative;
width: fit-content;
padding: ${core.rem(8)} ${core.rem(12)};
border-radius: ${core.rem(12)};
border: ${core.rem(1)} solid ${miscTheme.theme.colors.neutral200};
cursor: pointer;
display: flex;
align-items: center;
gap: ${core.rem(8)};
margin-top: ${core.rem(18)};
&.image-upload-dragover {
border-color: ${miscTheme.theme.colors.primaryBase};
}
&.image-upload-error {
border-color: ${miscTheme.theme.colors.error};
}
&.image-upload-disabled {
cursor: not-allowed;
background-color: ${miscTheme.theme.colors.gray100};
color: ${miscTheme.theme.colors.gray400};
border-color: ${miscTheme.theme.colors.gray200};
}
svg {
width: ${core.rem(18)};
height: ${core.rem(18)};
}
input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: -1;
}
`;
const StyledImageUploadPreviewContainer = styled__default["default"].div `
position: relative;
width: ${core.rem(90)};
height: ${core.rem(90)};
border-radius: ${core.rem(12)};
overflow: hidden;
background-color: ${miscTheme.theme.colors.gray100};
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
svg {
width: ${core.rem(14)};
height: ${core.rem(14)};
color: ${miscTheme.theme.colors.white};
}
.image-upload-remove-button {
cursor: pointer;
position: absolute;
top: ${core.rem(6)};
right: ${core.rem(6)};
background: ${miscTheme.theme.colors.black};
border-radius: ${core.rem(12)};
padding: ${core.rem(2)};
display: flex;
&:hover {
opacity: 0.8;
}
}
`;
const StyledImageUploadPreviewContainerGroup = styled__default["default"].div `
display: flex;
gap: ${core.rem(8)};
margin-top: ${core.rem(18)};
`;
const ImageUpload = React.forwardRef(({ label, name, error, acceptedTypes = [
exports.FILE_UPLOAD_ACCEPTED_TYPES.PNG,
exports.FILE_UPLOAD_ACCEPTED_TYPES.JPG,
exports.FILE_UPLOAD_ACCEPTED_TYPES.JPEG,
], maxSize = 1, acceptedRatios, multiple = false, disabled = false, id, className, onChange, value, showValidationRules = false, description, useBase64 = false, placeholder, }, ref) => {
const { t } = index$5.useTranslations();
const [isDragOver, setIsDragOver] = React.useState(false);
const [validationErrors, setValidationErrors] = React.useState([]);
const fileInputRef = React.useRef(null);
const hasError = Boolean(error) || validationErrors.length > 0;
const normalizedValue = React.useMemo(() => {
if (!value)
return [];
return Array.isArray(value) ? value : [value];
}, [value]);
const validateFile = React.useCallback((file) => {
var _a;
const errors = [];
const fileExtension = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
if (!acceptedTypes.includes(fileExtension)) {
errors.push(`Unsupported file format. Please upload a ${acceptedTypes.join(', ')} file.`);
}
const fileSizeMB = file.size / (1024 * 1024);
if (fileSizeMB > maxSize) {
errors.push(`File too large. Please upload an image smaller than ${maxSize}MB.`);
}
return {
file,
isValid: errors.length === 0,
errors,
};
}, [acceptedTypes, maxSize]);
const validateImageRatio = React.useCallback((file) => {
return new Promise((resolve) => {
if (!acceptedRatios ||
!acceptedRatios.length ||
!file.type.startsWith('image/')) {
resolve([]);
return;
}
const img = new Image();
img.onload = () => {
const ratio = img.width / img.height;
const ratioString = `${ratio.toFixed(1)}:1`;
const isValidRatio = acceptedRatios.some((acceptedRatio) => {
const [w, h] = acceptedRatio.split(':');
const expectedRatio = parseInt(w) / parseInt(h);
return Math.abs(ratio - expectedRatio) < 0.1;
});
resolve(isValidRatio
? []
: [`Image ratio ${ratioString} is not accepted.`]);
};
img.onerror = () => resolve(['Invalid image file']);
img.src = URL.createObjectURL(file);
});
}, [acceptedRatios]);
const previewList = React.useMemo(() => {
return normalizedValue
.map((val) => {
if (typeof val === 'string')
return val;
if (val instanceof File)
return URL.createObjectURL(val);
return '';
})
.filter(Boolean);
}, [normalizedValue]);
const processFiles = React.useCallback((files) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const fileArray = Array.from(files);
const allErrors = [];
const validFiles = [];
for (const file of fileArray) {
const validation = validateFile(file);
const ratioErrors = yield validateImageRatio(file);
const allFileErrors = [...validation.errors, ...ratioErrors];
if (allFileErrors.length === 0) {
validFiles.push(file);
}
else {
allErrors.push(...allFileErrors);
}
}
setValidationErrors(allErrors);
if (validFiles.length === 0)
return;
const resultList = useBase64
? yield handleMultipleImageFiles(validFiles)
: validFiles;
onChange({
target: {
name,
value: multiple
? [...normalizedValue, ...resultList]
: resultList.slice(0, 1),
},
});
}), [
validateFile,
validateImageRatio,
multiple,
onChange,
name,
normalizedValue,
]);
const handleFileInputChange = (e) => {
const files = e.target.files;
if (files && files.length > 0) {
processFiles(files);
}
};
const removeFile = (index) => {
const newFiles = normalizedValue.filter((_, i) => i !== index);
setValidationErrors([]);
onChange({
target: {
name,
value: multiple ? newFiles : '', // empty string if not multiple
},
});
};
const combinedRef = React.useCallback((e) => {
fileInputRef.current = e;
if (typeof ref === 'function') {
ref(e);
}
else if (ref) {
ref.current = e;
}
}, [ref]);
const handleClick = React.useCallback(() => {
if (!disabled && fileInputRef.current) {
fileInputRef.current.click();
}
}, [disabled]);
const handleDragEnter = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragOver(true);
}, []);
const handleDragLeave = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragOver(false);
}, []);
const handleDragOver = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
}, []);
const handleDrop = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragOver(false);
const files = e.dataTransfer.files;
if (files.length > 0) {
processFiles(files);
}
}, [processFiles]);
return (React__namespace["default"].createElement(StyledImageUploadWrapper, { className: className },
React__namespace["default"].createElement("label", { htmlFor: id || name },
typeof label === 'string' ? (React__namespace["default"].createElement(index.Text, { size: "title2" }, label)) : (label),
description && (React__namespace["default"].createElement(index.Text, { size: "p3", mt: core.rem(4), color: miscTheme.theme.colors.gray700 }, description))),
showValidationRules && (React__namespace["default"].createElement(StyledImageUploadContent, null,
React__namespace["default"].createElement(index.Text, { size: "p3" },
"Formats: ",
acceptedTypes.join('/')),
acceptedRatios && (React__namespace["default"].createElement(index.Text, { size: "p3" },
"Max size: ",
maxSize,
"MB - Accepted ratios:",
' ',
acceptedRatios.join('/'))))),
(multiple || normalizedValue.length === 0) && (React__namespace["default"].createElement(StyledImageUploadInputWrapper, { className: core.clsx(isDragOver && 'image-upload-dragover', hasError && 'image-upload-error', disabled && 'image-upload-disabled'), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick },
React__namespace["default"].createElement("input", { ref: combinedRef, type: "file", id: id || name, name: name, accept: acceptedTypes.join(','), multiple: multiple, onChange: handleFileInputChange, disabled: disabled }),
React__namespace["default"].createElement(Upload, null),
React__namespace["default"].createElement(index.Text, { size: "p3", fw: 500 }, placeholder || t('common.btn.uploadPhoto')))),
normalizedValue.length > 0 && (React__namespace["default"].createElement(StyledImageUploadPreviewContainerGroup, null, previewList.map((img, index) => (React__namespace["default"].createElement(StyledImageUploadPreviewContainer, { key: index },
React__namespace["default"].createElement("img", { src: img, alt: `Uploaded file ${index + 1}`, className: "image-upload-preview-image" }),
React__namespace["default"].createElement("button", { onClick: (e) => {
e.stopPropagation();
removeFile(index);
}, className: "image-upload-remove-button" },
React__namespace["default"].createElement(index$6.Close, null))))))),
hasError && (React__namespace["default"].createElement("div", { className: "image-upload-input-error" }, [...validationErrors, error].map((err) => (React__namespace["default"].createElement(index.Text, { key: err, className: "error-text", size: "c1", color: miscTheme.theme.colors.red600 }, err)))))));
});
const StyledCarousel = styled__default["default"](carousel.Carousel) `
& .mantine-Carousel-control {
width: auto;
}
`;
const DragFreeCarousel = (_a) => {
var { children, gapItem = 8, slideSize = 'auto', withControls = false, withIndicators = false, dragFree = true, align = 'start' } = _a, otherProps = tslib_es6.__rest(_a, ["children", "gapItem", "slideSize", "withControls", "withIndicators", "dragFree", "align"]);
return (React__namespace["default"].createElement(StyledCarousel, Object.assign({ slideSize: slideSize, slideGap: gapItem, withControls: withControls, withIndicators: withIndicators, dragFree: dragFree, align: align, containScroll: "trimSnaps" }, otherProps), React__namespace["default"].Children.map(children, (child, index) => (React__namespace["default"].createElement(carousel.Carousel.Slide, { key: index }, child)))));
};
exports.Alert = Alert;
exports.Badge = Badge;
exports.BorderHeading = BorderHeading;
exports.CardCollapse = CardCollapse;
exports.DragFreeCarousel = DragFreeCarousel;
exports.FileDropdown = FileDropdown;
exports.Grid = Grid;
exports.HtmlContent = HtmlContent;
exports.IconHeading = IconHeading;
exports.ImageUpload = ImageUpload;
exports.Radio = Radio;
exports.RateStars = RateStars;
exports.StepRenderer = StepRenderer;
exports.StepRendererContext = StepRendererContext;
exports.Tag = Tag;
exports.Toggle = Toggle;
exports.Upload = Upload;