@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/{index-e68d4285.js → index-0ca9b175.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2673b49d.js';
+import { _ as __rest } from './tslib.es6-06ba3978.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-0af1cc3d.js';
+import { t as theme } from './theme-7dadf4a1.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-c4699d44.js → index-0cd3523c.js}

@@ -1,186 +1,45 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-2673b49d.js';
-import React__default, { useState, useMemo, useRef, Fragment, useEffect, useContext, useCallback } from 'react';
-import { F as Flag, a as Avatar, B as Button$1, c as Input } from './index-92eedeb0.js';
-import styled from '@emotion/styled';
-import { t as theme } from './theme-0af1cc3d.js';
-import { T as Text } from './index-4dcdce19.js';
-import { C as CommonGAssets } from './index-80f4d7df.js';
-import { C as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, b as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-c807ef87.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-38ab69f4.js';
-import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-7bc3e320.js';
-import { P as Popup, U as UserAvatar, a as formatCommunity, b as formatPost } from './index-9b54376f.js';
-import { L as Logo } from './index-d48b5db6.js';
-import { u as useTranslations } from './useTranslations-adad3b06.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-06ba3978.js';
+import React__default, { useMemo, useRef, useState, Fragment, useEffect, useContext, useCallback } from 'react';
+import { i as isInternalLink, L as LanguageSwitcher } from './index-ea63e0d2.js';
+import { b as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, c as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-6210f454.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-7a93ebb9.js';
+import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-9e330438.js';
+import { P as Popup, a as formatCommunity, b as formatPost } from './dataTransform-623716c3.js';
+import { L as Logo } from './index-2dc7803d.js';
+import { u as useTranslations } from './useTranslations-b970f667.js';
 import throttle from 'lodash/throttle';
 import { createStyles, Box, Indicator, Portal, useMantineTheme } from '@mantine/core';
+import { a as Avatar, c as Input } from './index-9b3a8b6d.js';
 import '@mantine/dates';
-import { L as LOCALE } from './index-eeedf0f0.js';
-import './useMantineLocale-1373e175.js';
-import './translationsContext-036458b7.js';
+import { L as LOCALE } from './index-189d7601.js';
+import { C as CommonGAssets } from './index-9471fca1.js';
+import './useMantineLocale-453f8013.js';
+import { T as Text } from './index-5723381f.js';
+import { B as Button$1 } from './index-1d3c6ce7.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import './translationsContext-42a1fa63.js';
 import formatString from 'string-format';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-511a24f4.js';
-import { L as LOCALISED_SLUGS } from './constants-7661ce64.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-d7bbdb52.js';
+import { L as LOCALISED_SLUGS } from './constants-bb470362.js';
+import styled from '@emotion/styled';
 import { User } from '@hhgtech/icons/core';
-import { s as setDefaultClass, j as domainLocalesMarryBaby } from './utils-dee27bfd.js';
-import { C as ChevronDown } from './ChevronDown-d24fd24b.js';
+import { s as setDefaultClass } from './defaultClassWrapper-00903c00.js';
+import { C as ChevronDown } from './ChevronDown-31ea3e19.js';
 import { css } from '@emotion/react';
-import { B as Button } from './index-3c7f109c.js';
-import { a as LOCALIZED_SLUGS } from './constants-508ba335.js';
-import { H as Heading } from './index-82861dba.js';
-import { I as Indicator$1 } from './index-e68d4285.js';
-import { u as useIsInit } from './useIsInit-2c5ff93d.js';
-import './index.styles-0ef0135c.js';
-import './utils-ff5d88a2.js';
-import './index-13bf84f4.js';
-import './index.styled-9e147e72.js';
-import './index-528e64f4.js';
-import { ArrowRight } from '@hhgtech/icons/other';
+import { B as Button } from './index-9b9c1499.js';
+import { i as domainLocalesMarryBaby } from './utils-3b29eb79.js';
+import { L as LOCALIZED_SLUGS } from './constants-f6b2e49d.js';
+import { H as Heading } from './index-046778af.js';
+import { I as Indicator$1 } from './index-0ca9b175.js';
+import { u as useIsInit } from './useIsInit-f4dec279.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { C as Container } from './index-6c0f560b.js';
+import { U as UserAvatar } from './index-9f99909b.js';
+import { ArrowRight } from '@hhgtech/icons/other';
+import { C as Container } from './index-266a32ff.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-5a22b83e.js';
-
-const ALLOW_DOMAIN_URL = [
-    'hellobacsi.com',
-    'hellosehat.com',
-    'hellodoktor.com',
-    'hellokrupet.com',
-    'hellodoctor.com.ph',
-    'hellokhunmor.com',
-    'hellosayarwon.com',
-    'helloyishi.com.tw',
-    'helloswasthya.com',
-    'marrybaby.vn',
-    'hellohealth.questionpro.com',
-    'hellobacsivn.page.link',
-];
-const isInternalLink = (url = '') => {
-    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
-};
-
-const StyledLanguageChangeLink = styled.a `
-  display: inline-flex;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  padding: 7px 11px;
-  gap: 2px;
-
-  background: ${theme.colors.white};
-  border: 1px solid ${theme.colors.neutral100};
-  border-radius: 20px;
-
-  color: ${theme.colors.gray600};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  text-decoration: none;
-
-  cursor: pointer;
-`;
-
-const StyledSelectionContainer = styled.div `
-  position: relative;
-  display: inline-block;
-`;
-const StyledSelectionLabel = styled.div `
-  position: relative;
-`;
-const StyleSelectionPopup = styled.div `
-  position: absolute;
-  z-index: 21;
-  top: 100%;
-  right: 0;
-  width: 327px;
-  padding: 8px;
-  background: white;
-  border-radius: 4px;
-  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
-
-  &[data-is-open='false'] {
-    display: none;
-  }
-  &[data-show-indicator='true'] {
-    &:before {
-      position: absolute;
-      right: 11px;
-      bottom: 100%;
-      width: 0;
-      height: 0;
-      border: 0.5rem solid transparent;
-      border-top: none;
-      border-bottom-color: #fff;
-      content: '';
-      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
-    }
-  }
-`;
-const StyledOption = styled.div `
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0 16px;
-  border-radius: ${theme.borderRadius};
-  cursor: pointer;
-
-  .check-icon {
-    width: 16px;
-    height: 16px;
-  }
-  &[data-selected='false'] {
-    background-color: ${theme.colors.gray100};
-  }
-`;
-const StyledPopupBackground = styled.div `
-  position: fixed;
-  z-index: 20;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: default;
-`;
-
-const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledSelectionContainer, null,
-            React__default.createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
-                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
-                React__default.createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index) => (React__default.createElement(StyledOption, { key: index, "data-selected": showSelected && selected === option.value, onClick: (e) => {
-                        if (selected !== option.value) {
-                            onChange(option.value);
-                            setIsOpen((value) => !value);
-                        }
-                        e.stopPropagation();
-                    } },
-                    React__default.createElement(Text, { size: "p3" }, option.label),
-                    showSelected && selected === option.value && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
-        isOpen && (React__default.createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
-};
-
-const LanguageSwitcher = ({ languageOptions, locale }) => {
-    var _a, _b;
-    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
-    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
-        return null;
-    }
-    return (React__default.createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default.createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
-            if (typeof window !== 'undefined') {
-                window.location.href = href;
-            }
-        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
-};
-const LanguageLabel = ({ locale, label, href, }) => {
-    var _a, _b, _c;
-    return (React__default.createElement(StyledLanguageChangeLink, { href: href },
-        React__default.createElement(Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
-        React__default.createElement("span", null, label)));
-};
+import { g as getDataWithCache } from './core-80bfe8b7.js';
 
 const getEcomUrl = ({ path, locale, }) => {
     var _a;
@@ -2974,13 +2833,13 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                import('./doctor-f4cadffb.js').then((data) => {
+                import('./doctor-e0c2476d.js').then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
             }
             else if (item.id === 'ecom') {
-                import('./cart-5bdb4fa5.js').then((data) => {
+                import('./cart-1ac23ce7.js').then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -3415,4 +3274,4 @@ const getNavMenuContentWithCache = (locale) => __awaiter(void 0, void 0, void 0,
     return (yield getDataWithCache('nav-menu-content', () => getNavMenuContent(locale || 'en-PH'), (data) => { var _a, _b; return !!((_b = (_a = data === null || data === void 0 ? void 0 : data.categories) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length); })) || {};
 });
 
-export { LanguageSwitcher as L, NavigationV2 as N, ProfileNavigation as P, getNavMenuContentWithCache as a, NavigationLogoutPopup as b, NavigationProfileButton as c, getTogetherUserPostsApiPath as d, getNavMenuContent as g, isInternalLink as i };
+export { NavigationV2 as N, ProfileNavigation as P, getNavMenuContentWithCache as a, NavigationLogoutPopup as b, NavigationProfileButton as c, getTogetherUserPostsApiPath as d, getNavMenuContent as g };

package/build/esm/index-0ee66974.js

@@ -0,0 +1,95 @@
+import React__default, { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-7dadf4a1.js';
+import { I as ImageWrap } from './index-9b3a8b6d.js';
+
+const StyledAvatar = styled.div `
+  background-color: var(--background-color, transparent);
+  color: white;
+  cursor: pointer;
+  img {
+    --width: var(--width-prop, 40px);
+    --height: var(--height-prop, 40px);
+    width: var(--width);
+    height: var(--height);
+  }
+  &[data-has-max='true'] {
+    img {
+      max-width: var(--width);
+      max-height: var(--height);
+    }
+  }
+
+  &[data-avatar-type='square'] {
+    img {
+      --width: var(--width-prop, 72px);
+      --height: var(--height-prop, 72px);
+      border-radius: ${theme.borderRadius};
+    }
+  }
+
+  &[data-avatar-type='rounded'] {
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &[data-custom-size='true'] {
+    display: flex;
+    overflow: hidden;
+    overflow: hidden;
+    width: var(--size);
+    height: var(--size);
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    font-size: calc(var(--size) / 2);
+    font-weight: bold;
+    &[data-avatar-type='square'] {
+      border-radius: ${theme.borderRadius};
+    }
+    &[data-avatar-type='rounded'] {
+      border-radius: 50%;
+      img {
+        --width: 100%;
+        --height: 100%;
+      }
+    }
+    img {
+      object-fit: cover;
+    }
+  }
+`;
+
+const pxBySize = {
+    xs: 28,
+    small: 32,
+    medium: 40,
+    large: 48,
+    xl: 64,
+    xxl: 80,
+    xxxl: 96,
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
+    const sizePx = size ? pxBySize[size] : undefined;
+    const [isImageLoadingError, setIsImageLoadingError] = useState(false);
+    useEffect(() => {
+        if (avatarUrl) {
+            const img = document.createElement('img');
+            img.setAttribute('src', avatarUrl);
+            img.addEventListener('error', () => {
+                setIsImageLoadingError(true);
+            });
+        }
+    }, [avatarUrl, setIsImageLoadingError]);
+    const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
+    return (React__default.createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
+        avatarImg,
+        avatarUrl && !isImageLoadingError && (React__default.createElement(ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
+        shouldRenderLetter && firstLetter));
+};
+
+export { Avatar as A };