@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/esm/healthToolsForm.js

@@ -1,40 +1,54 @@
-export { a as BabyPoopForm, b as BabyVaccineForm, B as BmiForm, D as DueDateForm, O as OvulationForm, P as PWGForm, T as ThrForm } from './index-6ac73f00.js';
-import './tslib.es6-761239c7.js';
+export { D as DueDateForm } from './index-6125d991.js';
+export { B as BmiForm } from './index-9a8df805.js';
+export { B as BabyPoopForm } from './index-a1658f07.js';
+export { T as ThrForm } from './index-64dff9b0.js';
+export { O as OvulationForm } from './index-3060c2dc.js';
+export { B as BabyVaccineForm } from './index-e9d85fda.js';
+export { P as PWGForm } from './index-fb8f8203.js';
+import './tslib.es6-2d738692.js';
 import 'react';
+import './LastPeriod-62287ef2.js';
 import 'date-fns';
 import '@mantine/core';
 import '@mantine/form';
 import 'dayjs';
-import './index-21eac858.js';
+import './index-03d7200e.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-78255d6c.js';
-import './index-bef3c9bd.js';
-import 'date-fns/locale';
-import './index-e3787b20.js';
-import './isProduction-5684a28c.js';
-import './utils-f8761b9d.js';
+import './index-b9c4dfcb.js';
+import './constantsDomainLocales.js';
+import './Locale-c6a90240.js';
+import './constantsIsProduction.js';
+import './utils-40533779.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-c200bff6.js';
-import './theme-f18c2351.js';
-import './useMantineLocale-4fb67342.js';
-import './index-2b9213cf.js';
+import './index-7a1552e9.js';
+import './other-9b439f19.js';
+import './index-38ced379.js';
+import './miscTheme.js';
+import './useMantineLocale-faa72172.js';
+import './index-39aa0c9f.js';
+import 'date-fns/locale';
+import './constantsSite.js';
+import './constantsRiskScreener.js';
+import './index-bdc3bd61.js';
 import 'classnames';
-import './useUniqueId-c23213b6.js';
+import './useUniqueId-e84c90ce.js';
 import '@hhgtech/icons/core';
-import './index-598ab51b.js';
+import './index-96a5f239.js';
 import '@mantine/dates';
-import './useTranslations-fbf6a6ab.js';
-import './translationsContext-f3d1a7bd.js';
+import './useTranslations-ba901edf.js';
+import './translationsContext-68168ff3.js';
 import 'string-format';
-import './constants-6bdb97a8.js';
+import './index-a1d2c38b.js';
 import 'react-keyed-flatten-children';
 import 'react-hook-form';
-import './useHealthToolCache-d97dfa00.js';
-import './getDynamicHealthTool-7681e43a.js';
-import './normalizeLink-d6f57223.js';
-import './routing-bebdc8b7.js';
-import './core-c72e0ff5.js';
-import './constants-71d9f33b.js';
-import './index-f27edf45.js';
+import './useHealthToolCache-fe7dc697.js';
+import './miscGetDynamicHealthTool.js';
+import './normalizeLink-243e6342.js';
+import './routing-f2e46f96.js';
+import './core-36290fcb.js';
+import './constants-697503a2.js';
+import './index-3e2f70fe.js';
+import './embeddedHeathToolCards_helpers.js';
+import './constants-a5d70cf5.js';

package/build/esm/hooks.js

@@ -1,21 +1,25 @@
-export { u as useTranslations } from './useTranslations-fbf6a6ab.js';
-export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-84bb5b47.js';
-export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, a as usePrevious, b as useRafState } from './useCategory-8f109eb7.js';
-export { u as useHealthToolsCache } from './useHealthToolCache-d97dfa00.js';
-export { u as useIsInit } from './useIsInit-ee864235.js';
-export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-7451aa57.js';
-export { u as useInitialMount, a as useUniqueId } from './useUniqueId-c23213b6.js';
+export { u as useTranslations } from './useTranslations-ba901edf.js';
+export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-77534d1d.js';
+export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, a as usePrevious, b as useRafState } from './useCategory-45ce6ea8.js';
+export { u as useHealthToolsCache } from './useHealthToolCache-fe7dc697.js';
+export { u as useIsInit } from './useIsInit-6be72906.js';
+export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-fd3849ea.js';
+export { u as useInitialMount, a as useUniqueId } from './useUniqueId-e84c90ce.js';
 import 'react';
-import './translationsContext-f3d1a7bd.js';
+import './translationsContext-68168ff3.js';
 import 'string-format';
 import 'lodash/debounce';
-import './tslib.es6-761239c7.js';
-import './cookieHelper-73ce3871.js';
-import './index-e3787b20.js';
-import './getDynamicHealthTool-7681e43a.js';
-import './normalizeLink-d6f57223.js';
-import './routing-bebdc8b7.js';
-import './index-bef3c9bd.js';
+import './tslib.es6-2d738692.js';
+import './miscCookieHelper.js';
+import './index-38ced379.js';
+import './Locale-c6a90240.js';
+import './miscGetDynamicHealthTool.js';
+import './normalizeLink-243e6342.js';
+import './routing-f2e46f96.js';
+import './index-39aa0c9f.js';
 import 'date-fns/locale';
-import './isProduction-5684a28c.js';
-import './core-c72e0ff5.js';
+import './constantsIsProduction.js';
+import './constantsSite.js';
+import './constantsDomainLocales.js';
+import './constantsRiskScreener.js';
+import './core-36290fcb.js';

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-f3d1a7bd.js';
-export { T as TranslationsContext } from './translationsContext-f3d1a7bd.js';
+import { T as TranslationsContext } from './translationsContext-68168ff3.js';
+export { T as TranslationsContext } from './translationsContext-68168ff3.js';
 import React__default, { useState, useEffect, useMemo } from 'react';
 import defaultTranslations from './i18n-values/en-PH.js';
 import hiTranslations from './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-f3d1a7bd.js';
-export { T as TranslationsContext } from './translationsContext-f3d1a7bd.js';
+import { T as TranslationsContext } from './translationsContext-68168ff3.js';
+export { T as TranslationsContext } from './translationsContext-68168ff3.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/{index-cdac57da.js → index-03050142.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-f18c2351.js';
+import { theme } from './miscTheme.js';
 
 const StyledDropdown = styled.div `
   --dropdown-padding: 12px 18px 12px 16px;

package/build/esm/{index-21eac858.js → index-03d7200e.js}

@@ -1,21 +1,23 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-761239c7.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2d738692.js';
 import * as React from 'react';
 import React__default, { useState, forwardRef, useEffect, Component, useCallback, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { em, Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-78255d6c.js';
-import { B as Breakpoints } from './utils-f8761b9d.js';
+import { C as CommonGAssets } from './index-b9c4dfcb.js';
+import { B as Breakpoints } from './utils-40533779.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-c200bff6.js';
-import { L as LOCALE } from './index-e3787b20.js';
-import { t as theme } from './theme-f18c2351.js';
-import { G as GlobalHeadingStyle } from './useMantineLocale-4fb67342.js';
-import { I as ISO_FORMAT, s as siteOptions } from './index-bef3c9bd.js';
-import { A as ANIMATION_DURATION, B as Button } from './index-2b9213cf.js';
+import { T as Text } from './index-7a1552e9.js';
+import './index-38ced379.js';
+import { theme } from './miscTheme.js';
+import { G as GlobalHeadingStyle } from './useMantineLocale-faa72172.js';
+import { I as ISO_FORMAT } from './index-39aa0c9f.js';
+import { A as ANIMATION_DURATION, B as Button } from './index-bdc3bd61.js';
+import { L as LOCALE } from './Locale-c6a90240.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-c23213b6.js';
+import { a as useUniqueId } from './useUniqueId-e84c90ce.js';
+import { siteOptions } from './constantsSite.js';
 import { Check, Plus } from '@hhgtech/icons/core';
 
 const GlobalButtonStyle = {

package/build/esm/index-21524e86.js

@@ -0,0 +1,249 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { u as useScrollbarSize } from './useScrollbarSize-77534d1d.js';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { M as MediaQueries } from './utils-40533779.js';
+import { setDefaultClass } from './miscDefaultClassWrapper.js';
+import { theme } from './miscTheme.js';
+
+const StyledModal = setDefaultClass(styled.div `
+    position: relative;
+    z-index: 200;
+    background-color: ${theme.colors.white};
+    border-radius: ${theme.borderRadius};
+    box-shadow: 0px 8px 40px 0px #0000001a;
+    &[data-site-type='marryBaby'] {
+      border-radius: 16px;
+      .hhg-modal__content {
+        position: relative;
+        z-index: 111;
+        height: 100%;
+        padding: 24px;
+      }
+    }
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      padding: 16px;
+    }
+    .hhg-modal__video {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      background-color: none;
+      box-shadow: none;
+    }
+  `, 'hhgcomp-modal-modal');
+const StyledModalWrapper = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: opacity 0.3s ease-in-out;
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  ${StyledModal.classSelector} {
+    transition: transform 0.3s ease-in-out;
+  }
+  &.slideTop {
+    ${StyledModal.classSelector} {
+      transform: translate(0, -100vh);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    ${StyledModal.classSelector} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    ${StyledModal.classSelector} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    ${StyledModal.classSelector} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    ${StyledModal.classSelector} {
+      height: 100%;
+      max-height: 539px;
+      ${MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    ${StyledModal.classSelector} {
+      width: 100%;
+      max-width: 407px;
+      ${MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'scaleUp', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = useState(false);
+    const elRef = useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return createPortal(React__default.createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default.createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default.createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default.createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+export { Modal as M };

package/build/esm/{index-16514f4d.js → index-288b564e.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default, { useMemo } from 'react';
 import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-f18c2351.js';
-import { M as MediaQueries } from './utils-f8761b9d.js';
+import { theme } from './miscTheme.js';
+import { M as MediaQueries } from './utils-40533779.js';
 
 const StyledInput = styled.div `
   position: relative;