@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/index-ea63e0d2.js

@@ -0,0 +1,148 @@
+import React__default, { useState } from 'react';
+import { F as Flag } from './index-9b3a8b6d.js';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-7dadf4a1.js';
+import { T as Text } from './index-5723381f.js';
+import { C as CommonGAssets } from './index-9471fca1.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)));
+};
+
+export { LanguageSwitcher as L, isInternalLink as i };

package/build/esm/{index-32e2b169.js → index-f22f6e6e.js}

@@ -1,20 +1,68 @@
-import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
-import { t as StyledDivider, u as useStyles, v as StyledContainer } from './index.styles-0ef0135c.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-2673b49d.js';
-import { u as useTranslations } from './useTranslations-adad3b06.js';
-import { B as Button } from './index-92eedeb0.js';
-import { P as PATHS } from './paths-d1c61fa8.js';
-import { a as LOCALIZED_SLUGS } from './constants-508ba335.js';
-import { d as domainLocales } from './index-c807ef87.js';
-import { h as callApi, i as getCarePath } from './utils-dee27bfd.js';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-06ba3978.js';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { u as useTranslations } from './useTranslations-b970f667.js';
+import { createStyles } from '@mantine/core';
+import { P as PATHS } from './paths-b83be1a0.js';
+import { L as LOCALIZED_SLUGS } from './constants-f6b2e49d.js';
+import { B as Button } from './index-1d3c6ce7.js';
+import { d as domainLocales } from './index-6210f454.js';
+import { c as callApi, g as getCarePath } from './utils-3b29eb79.js';
+import { i as isProduction } from './isProduction-1937d355.js';
 
-/**
- * @deprecated Consider to use mantine
- */
-const Divider = ({ type = 'solid', className, style }) => {
-    return (React__default.createElement(StyledDivider, { style: style, className: className, "data-diver-type": type, dividerType: type }));
-};
+var useStyles = createStyles((theme) => {
+    return {
+        root: {
+            display: 'inline-block',
+            // height: 1rem,
+            flexShrink: 0,
+            padding: '2px 0.5rem',
+            marginLeft: '4px',
+            borderRadius: theme.radius.xs,
+            // color: white,
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: '18px',
+            '&[data-label-type="admin"]': {
+                background: theme.primaryColor[0],
+                color: theme.primaryColor[9],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'tonePink')};
+                //   color: #{map-get($mbColors, 'cRed')};
+                // }
+            },
+            '&[data-label-type="local admin"]': {
+                background: theme.primaryColor[8],
+            },
+            '&[data-label-type="ambassador"]': {
+                background: theme.colors.green[4],
+            },
+            '&[data-label-type="expert"]': {
+                background: theme.colors.yellow[6],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'cOrange')};
+                //   color: #{map-get($colors, 'cWhite')};
+                // }
+            },
+            '&[data-label-type="moderator"]': {
+                background: theme.colors.red[0],
+                color: theme.colors.red[8],
+                // &[data-is-marrybaby='true'] {
+                //   background: #{map-get($mbColors, 'toneBlue')};
+                //   color: #{map-get($mbColors, 'cobalt')};
+                // }
+            },
+            '&[data-label-type="sponsor"]': {
+                background: theme.colors.teal[4],
+            },
+            '&[data-label-type="guide"]': {
+                background: theme.colors.teal[4],
+            },
+            '&[data-label-type="influencer"]': {
+                background: theme.colors.teal[4],
+            },
+        },
+    };
+});
 
 const AuthorLabelTextMapping = {
     admin: 'cardAuthor.admin',
@@ -50,17 +98,6 @@ const AuthorBadge = (_a) => {
         className: cx(classes.root, className), "data-label-type": matchedRole, "data-is-marrybaby": siteType === 'marryBaby' }, rest), title || t(AuthorLabelTextMapping[matchedRole]))) : null;
 };
 
-const BtnChoice = ({ value: valueInit, choices, onChange }) => {
-    const [value, setValue] = useState(valueInit);
-    useEffect(() => {
-        setValue(valueInit);
-    }, [valueInit]);
-    return (React__default.createElement(StyledContainer, null, choices.map((i, idx) => (React__default.createElement(Button, { dataEventCategory: i.dataEventCategory, dataEventAction: i.dataEventAction, dataEventLabel: i.dataEventLabel, size: "sm", variant: i.value === value ? 'primary' : 'tertiary', key: idx, onClick: () => {
-            setValue(i.value);
-            onChange === null || onChange === void 0 ? void 0 : onChange(i.value);
-        } }, i.label || '')))));
-};
-
 const BookingBtn = (_a) => {
     var { label, bookingId, bookingType = 'doctor', locale = 'vi-VN' } = _a, rest = __rest(_a, ["label", "bookingId", "bookingType", "locale"]);
     const { t } = useTranslations();
@@ -119,4 +156,4 @@ const BookingBtn = (_a) => {
     return bookingId && bookingType ? (React__default.createElement(Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
 };
 
-export { AuthorBadge as A, BtnChoice as B, Divider as D, BookingBtn as a };
+export { AuthorBadge as A, BookingBtn as B };

package/build/esm/index-f4b938f2.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-7dadf4a1.js';
+
+const StyledDivider = styled.hr `
+  border-width: 1px;
+  border-color: ${theme.colors.neutral200};
+  border-style: ${(props) => props.dividerType};
+`;
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Divider = ({ type = 'solid', className, style }) => {
+    return (React__default.createElement(StyledDivider, { style: style, className: className, "data-diver-type": type, dividerType: type }));
+};
+
+export { Divider as D };

package/build/esm/index-f660abb7.js

@@ -0,0 +1,156 @@
+import { _ as __rest } from './tslib.es6-06ba3978.js';
+import React__default, { useMemo } from 'react';
+import { useMantineTheme } from '@mantine/core';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-7dadf4a1.js';
+import { M as MediaQueries } from './utils-d7bbdb52.js';
+
+const StyledInput = styled.div `
+  position: relative;
+  width: 100%;
+
+  &[data-has-error] {
+    input {
+      border-color: ${theme.colors.red700};
+    }
+  }
+
+  input {
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px ${theme.colors.gray200};
+    border-radius: ${theme.borderRadius};
+
+    &:active,
+    &:focus,
+    &.focused {
+      border-color: ${(props) => props.color};
+      box-shadow: 0px 0px 2px 2px ${(props) => props.shadowColor};
+    }
+
+    &:disabled {
+      background-color: ${theme.colors.gray100};
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-has-action-icon] {
+    input {
+      padding: 12px 48px 12px 16px;
+    }
+  }
+  &[data-has-display-icon] {
+    input {
+      padding: 12px 16px 12px 48px;
+    }
+  }
+
+  &[data-has-action-icon][data-has-display-icon] {
+    input {
+      padding: 12px 48px;
+    }
+  }
+
+  &[data-size='lg'] {
+    input {
+      font-size: 16px;
+      font-weight: ${theme.sizes.fwRegular};
+      ${MediaQueries.mbDown} {
+        font-size: 22px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 26px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='md'] {
+    input {
+      font-weight: ${theme.sizes.fwRegular};
+      line-height: 22px;
+      ${MediaQueries.mbDown} {
+        font-size: 14px;
+        line-height: 1.2;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 16px;
+        line-height: 1.2;
+      }
+    }
+  }
+  &[data-size='sm'] {
+    input {
+      font-weight: ${theme.sizes.fwRegular};
+      line-height: 20px;
+      ${MediaQueries.mbDown} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      ${MediaQueries.mbUp} {
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    }
+  }
+`;
+const StyledErrorLabel = styled.label `
+  color: ${theme.colors.red700};
+  font-weight: ${theme.sizes.fwRegular};
+`;
+const StyledActionIcon = styled.div `
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  cursor: pointer;
+  transform: translateY(-50%);
+`;
+const StyledDisplayIcon = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  display: inline-flex;
+  cursor: default;
+  transform: translateY(-50%);
+`;
+
+var styles = {"label":"DjBFAbd"};
+
+/**
+ * @deprecated will removed soon
+ */
+const Label = ({ children, className, style, htmlFor, size }) => {
+    return (React__default.createElement("label", { "data-size": size, className: `${styles.label} ${className || ''}`, style: style, htmlFor: htmlFor }, children));
+};
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Input = (_a) => {
+    var { name, value, errorMessage, isNumerousKeyboard = false, showErrorMessage = true, actionIcon: ActionIcon, displayIcon: DisplayIcon, onActionClick, label, className, onChange, isDisabled, CustomInput, size, style, autoComplete = 'off', type = 'text', inputClassName, trackingAttributes, enterKeyHint } = _a, rest = __rest(_a, ["name", "value", "errorMessage", "isNumerousKeyboard", "showErrorMessage", "actionIcon", "displayIcon", "onActionClick", "label", "className", "onChange", "isDisabled", "CustomInput", "size", "style", "autoComplete", "type", "inputClassName", "trackingAttributes", "enterKeyHint"]);
+    const _theme = useMantineTheme();
+    const gaAttributes = useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    return (React__default.createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][0], style: style },
+        label && (React__default.createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
+        React__default.createElement("div", { style: { position: 'relative' } },
+            CustomInput ? (CustomInput) : (React__default.createElement("input", Object.assign({ id: name, name: name, onChange: (e) => onChange && onChange(e.target.value), type: type, "aria-label": type, value: value, disabled: isDisabled, autoComplete: autoComplete, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', className: inputClassName, enterKeyHint: enterKeyHint }, gaAttributes, rest))),
+            DisplayIcon && (React__default.createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
+            ActionIcon && (React__default.createElement(StyledActionIcon, { className: "actionIcon", onClick: onActionClick }, ActionIcon))),
+        errorMessage && errorMessage.length > 0 && showErrorMessage && (React__default.createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
+};
+
+export { Input as I, Label as L, StyledDisplayIcon as S, StyledActionIcon as a, StyledErrorLabel as b };