@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/esm/index-652f4b90.js

@@ -0,0 +1,116 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default, { useMemo, useState, useEffect } from 'react';
+import { L as LOCALE } from './Subot-73dd692f.js';
+import { C as CommonGAssets } from './index-ec1cc2ea.js';
+import { t as theme } from './theme-7522724d.js';
+import styled from 'styled-components';
+import { I as ImageWrap, f as CentralCarousel } from './index-01e95463.js';
+import { T as Text } from './index-2a68f8b2.js';
+
+const StyledIconContainer = styled.div `
+  display: inline-flex;
+  overflow: hidden;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #e4e8ec;
+  background-color: ${(props) => props.backgroundColor || theme.colors.white};
+  border-radius: ${(props) => props.borderRadius || '50%'};
+  & > * {
+    width: ${(props) => props.iconSize}px;
+    height: ${(props) => props.iconSize}px;
+  }
+`;
+const StyledPillContainer = styled.div `
+  display: inline-block;
+  height: 108px;
+  background-color: ${(props) => props.theme.colors.white};
+  border-radius: 60px;
+  cursor: pointer;
+  &.selected-week-pill {
+    background-color: ${(props) => props.theme.colors.pink100};
+  }
+
+  & > div:first-child {
+    margin: 4px 4px 0;
+  }
+
+  & > p {
+    margin-top: 8px;
+    text-align: center;
+  }
+
+  & > * {
+    pointer-events: none;
+  }
+`;
+
+const LONG_TITLE_LOCALE = [LOCALE.Myanmar, LOCALE.Taiwan];
+const Pill = (_a) => {
+    var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = __rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
+    const isSelected = useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
+    return (React__default.createElement(StyledPillContainer, Object.assign({ onClick: onSelect, className: className
+            ? 'week-pill'.concat(' non-pointer-event-child ', className)
+            : 'week-pill non-pointer-event-child', "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest),
+        React__default.createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: theme.colors.white },
+            React__default.createElement(ImageWrap, { src: icon || CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
+        isSelected ? (React__default.createElement(Text, Object.assign({ type: "semiBold", size: "n1", color: theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name)) : (React__default.createElement(Text, Object.assign({ size: "n1", color: theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name))));
+};
+
+const StyledPill = styled(Pill) `
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
+`;
+const StyledSlide = styled(CentralCarousel.Slide) `
+  cursor: pointer;
+  > div * {
+    pointer-events: none;
+  }
+`;
+const StyledCarousel = styled(CentralCarousel) `
+  .centerred-pill-wrapper {
+    padding: 16px 0;
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const PillCarousel = (_a) => {
+    var { data, isMobile, onSlideChange, pillProps, locale = LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = __rest(_a, ["data", "isMobile", "onSlideChange", "pillProps", "locale", "blurFromIndex", "blurLength"]);
+    const sliderProps = {
+        withControls: !isMobile,
+        slideGap: 16,
+        blurFromCenter: true,
+        blurFromIndex: blurFromIndex || (isMobile ? 2 : 4),
+        blurLength: blurLength || (isMobile ? 1 : 3),
+        onSlideChange,
+    };
+    const [currentUrl, setCurrentUrl] = useState('');
+    useEffect(() => {
+        setCurrentUrl(window.location.href);
+    }, []);
+    return (React__default.createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default.createElement(StyledSlide, Object.assign({ key: idx, onClick: onSlideChange, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Click", "data-event-label": currentUrl, innerSlideProps: {
+            'data-event-category': 'Health Tool',
+            'data-event-action': 'Pregnancy Week Click',
+            'data-event-label': currentUrl,
+        } }, pillProps),
+        React__default.createElement("div", { className: "centerred-pill-wrapper" },
+            React__default.createElement(StyledPill, { "data-event-category": "Health Tool", "data-event-action": "Fetal Week Click", "data-event-label": currentUrl, locale: locale, name: pill.name, icon: pill.icon, className: idx === centerSlide
+                    ? 'selected-week-pill pointer-event-child-none'
+                    : 'pointer-event-child-none' })))))));
+};
+const Arrow = ({ isRight, currentUrl, }) => {
+    return (React__default.createElement("svg", { viewBox: "0 0 15 15", fill: "none", width: "16", height: "16", style: isRight
+            ? { transform: 'rotate(-90deg)' }
+            : { transform: 'rotate(90deg)' }, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Arrow Click", "data-event-label": currentUrl, className: "pointer-event-child-none" },
+        React__default.createElement("path", { d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
+};
+
+export { PillCarousel as P };

package/build/esm/index-70eeb14d.js

@@ -0,0 +1,24 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { Modal as Modal$1, CloseButton } from '@mantine/core';
+import { C as CommonGAssets } from './index-ec1cc2ea.js';
+import { i as useStyles } from './index-01e95463.js';
+import { T as Text } from './index-ebb8bd0e.js';
+
+const Modal = (_a) => {
+    var { title, styles } = _a, rest = __rest(_a, ["title", "styles"]);
+    const { classes } = useStyles(undefined, { name: 'Modal', styles });
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Modal$1, Object.assign({ centered: true, classNames: classes }, rest, { withCloseButton: false, title: rest.withCloseButton && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Text, { size: "s2", weight: "semiBold", as: "span" }, title),
+                React__default.createElement(CloseButton, Object.assign({}, rest.closeButtonProps, { onClick: () => { var _a; return (_a = rest.onClose) === null || _a === void 0 ? void 0 : _a.call(rest); }, sx: {
+                        ':focus': {
+                            outline: 0,
+                        },
+                    } }),
+                    React__default.createElement("img", { loading: "lazy", className: "mantine-Modal-close", src: CommonGAssets.getAssetPath('CloseModal.svg'), style: {
+                            width: '16px',
+                        } })))) }))));
+};
+
+export { Modal as M };