@hhgtech/hhg-components 1.29.81 → 1.29.82

package/build/{index-73cde644.js → index-4b7d4b5b.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-05f106c2.js');
+var index$2 = require('./index-dff7ee1b.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var index = require('./index-d34cd464.js');
-var index$1 = require('./index-1efa7d84.js');
+var theme = require('./theme-be20929b.js');
+var index = require('./index-1fdf2f01.js');
+var index$1 = require('./index-64d8db08.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-77a2b9ee.js → index-4bc690c9.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
+var theme = require('./theme-be20929b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-4cdcdbbe.js

@@ -0,0 +1,498 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$1 = require('./index-54aeefca.js');
+var index = require('./index-1fdf2f01.js');
+var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
+var styled = require('@emotion/styled');
+var constants = require('./constants-a78fa8b3.js');
+var index$2 = require('./index-f222ee45.js');
+var theme = require('./theme-be20929b.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledCardLink = styled__default["default"].div `
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: ${(props) => props.color || '#f4faff'};
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: min(280px, 56.25%);
+    .link-image-blur {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 110%;
+      height: 110%;
+      /* Add the blur effect */
+      -webkit-filter: blur(8px);
+      filter: blur(8px);
+      object-fit: cover;
+      object-position: center;
+      opacity: 0.8;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+    .link-info-container {
+      padding-bottom: 1rem;
+      p {
+        color: #2661ad;
+      }
+      .link-logo {
+        max-width: 2rem;
+        height: 13px;
+        margin-right: 4px;
+        object-fit: contain;
+        vertical-align: middle;
+      }
+    }
+    .link-image-wrapper {
+      padding-top: min(360px, 56.25%);
+      .link-image {
+        object-fit: cover;
+      }
+    }
+  }
+`;
+
+const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [hideLogo, setHideLogo] = React.useState(false);
+    const _theme = core.useMantineTheme();
+    const noRefetchRef = React.useRef(noRefetch);
+    noRefetchRef.current = noRefetch;
+    const [previewData, setPreviewData] = React.useState(null);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            if (noRefetchRef.current)
+                return;
+            if (!url)
+                return setPreviewData(null);
+            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((res) => {
+                var _a, _b, _c;
+                setHideLogo(false);
+                setPreviewData({
+                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
+                    url,
+                    image: ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.logo),
+                    // logo: meta.logo,
+                });
+            })
+                .catch(() => {
+                setPreviewData(null);
+            });
+        }))();
+    }, [url]);
+    const displayImage = (previewData === null || previewData === void 0 ? void 0 : previewData.image) || image;
+    const displayTitle = (previewData === null || previewData === void 0 ? void 0 : previewData.title) || title;
+    const displayLogo = (previewData === null || previewData === void 0 ? void 0 : previewData.logo) || logo;
+    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
+    const urlParts = displayUrl
+        .replace('http://', '')
+        .replace('https://', '')
+        .split(/[/?#]/);
+    const domain = urlParts[0];
+    const showDefaultRef = React.useRef(false);
+    return (React__default["default"].createElement(StyledCardLink, { "data-is-marrybaby": isMarryBaby, className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0] },
+        React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
+            displayImage && (React__default["default"].createElement("div", { className: "link-image-wrapper" },
+                !isMarryBaby && (React__default["default"].createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
+                        if (!showDefaultRef.current) {
+                            showDefaultRef.current = true;
+                            e.currentTarget.src = constants.DEFAULT_IMG;
+                        }
+                    }, loading: "lazy" })),
+                React__default["default"].createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
+                        if (!showDefaultRef.current) {
+                            showDefaultRef.current = true;
+                            e.currentTarget.src = constants.DEFAULT_IMG;
+                        }
+                    }, loading: "lazy" }))),
+            React__default["default"].createElement("div", { className: "link-info-container" },
+                React__default["default"].createElement(index.Text, { size: "n1" },
+                    isMarryBaby && displayLogo && !hideLogo && (React__default["default"].createElement("img", { className: "link-logo", src: displayLogo, onError: () => setHideLogo(true), loading: "lazy" })),
+                    domain),
+                React__default["default"].createElement(index$1.Heading, { tag: "h6" }, displayTitle)))));
+};
+
+const StyledPopoverMenu = styled__default["default"].div `
+  position: relative;
+  display: content;
+
+  .popover-menu__btn {
+    /* position: relative; */
+    > span {
+      width: 100%;
+      height: 100%;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .popover-menu__content {
+    position: absolute;
+    z-index: 10;
+    width: 320px;
+    padding: 8px;
+    border: none;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      position: absolute;
+      width: 16px;
+      height: 8px;
+      background: #fff;
+      content: '';
+    }
+
+    &.--position {
+      &-top {
+        bottom: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            left: 0;
+
+            &::before {
+              top: 100%;
+              left: 16px;
+              clip-path: polygon(0 0, 50% 100%, 100% 0);
+            }
+          }
+
+          &-end {
+            left: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              top: 100%;
+              right: 16px;
+              clip-path: polygon(0 0, 50% 100%, 100% 0);
+            }
+          }
+        }
+      }
+
+      &-right {
+        left: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            top: 0;
+
+            &::before {
+              top: 16px;
+              left: 0;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 50%, 100% 0%, 100% 100%);
+              transform: translateX(-100%);
+            }
+          }
+
+          &-end {
+            top: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              bottom: 16px;
+              left: 0;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 50%, 100% 0%, 100% 100%);
+              transform: translateX(-100%);
+            }
+          }
+        }
+      }
+
+      &-bottom {
+        top: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            left: 0;
+
+            &::before {
+              bottom: 100%;
+              left: 16px;
+              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            }
+          }
+
+          &-end {
+            left: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              right: 16px;
+              bottom: 100%;
+              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            }
+          }
+        }
+      }
+
+      &-left {
+        left: -8px;
+        transform: translateX(-100%);
+
+        &.--align {
+          &-start {
+            top: 0;
+
+            &::before {
+              top: 16px;
+              left: 100%;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 0%, 100% 50%, 0% 100%);
+              transform: translateX(0);
+            }
+          }
+
+          &-end {
+            bottom: 0;
+
+            &::before {
+              bottom: 16px;
+              left: 100%;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 0%, 100% 50%, 0% 100%);
+              transform: translateX(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[data-is-marrybaby='true'] {
+    .popover-menu__content {
+      padding: 0;
+      border-radius: 12px;
+      /* &::before {
+        display: none;
+      } */
+    }
+  }
+`;
+const StyledTree = styled__default["default"].div `
+  display: flex;
+  /* max-height: 300px; */
+  flex-direction: column;
+  cursor: default;
+
+  .__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 0;
+    margin-bottom: 8px;
+
+    .__back-btn {
+      position: absolute;
+      top: 50%;
+      left: 8px;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      transform: translateY(-50%);
+    }
+  }
+
+  .tree-text-description {
+    padding-right: 8px;
+    padding-left: 8px;
+    margin-top: -8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: left;
+  }
+
+  .__content {
+    overflow: auto;
+    flex: 1;
+  }
+
+  .__list {
+    .__item {
+      position: relative;
+      &.bold-item {
+        font-weight: 700;
+      }
+      &:last-child {
+        .__btn {
+          margin-bottom: 0;
+        }
+      }
+
+      .__btn {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 40px;
+        align-items: center;
+        padding: 0 1rem;
+        border: none;
+        margin-bottom: 8px;
+        color: ${theme.theme.colors.gray800};
+        cursor: pointer;
+        text-align: left;
+        transition: background 0.3s;
+
+        /* for better gtm tracking result  */
+        * {
+          pointer-events: none;
+        }
+        &.--checked {
+          color: ${theme.theme.colors.gray500};
+          pointer-events: none;
+        }
+
+        &:hover {
+          background: ${theme.theme.colors.gray100};
+        }
+
+        .__icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 0.4rem;
+        }
+
+        & > span {
+          position: relative;
+
+          & > img {
+            width: 16px;
+            height: 16px;
+            margin-right: 0.4rem;
+          }
+        }
+      }
+
+      .__toggle {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        width: 16px;
+        height: 16px;
+        pointer-events: none;
+        transform: translateY(-50%);
+      }
+    }
+  }
+  &[data-is-marrybaby='true'] {
+    .__header {
+      padding: 1rem;
+    }
+    .tree-text-description {
+      padding: 0 1rem;
+    }
+    .__list {
+      .__item {
+        &:first-child {
+          .__btn {
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
+          }
+        }
+        &:last-child {
+          .__btn {
+            border-bottom-left-radius: 12px;
+            border-bottom-right-radius: 12px;
+          }
+        }
+        .__btn {
+          height: unset;
+          padding: 1rem;
+          margin-bottom: 0;
+          &:hover {
+            background: ${theme.theme.mbColors.lightPink};
+          }
+        }
+      }
+    }
+  }
+`;
+
+const PopoverMenu = ({ className, style, toggleButtonContent, position = 'bottom', align = 'end', children, buttonProps, }) => {
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [isShow, setIsShow] = React.useState(false);
+    const popoverContent = React.useRef(null);
+    const isShowRef = React.useRef(isShow);
+    React.useEffect(() => {
+        var _a;
+        isShowRef.current = isShow;
+        if (!isShow)
+            return;
+        (_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isShow]);
+    React.useEffect(() => {
+        const clickHandler = (e) => {
+            var _a;
+            if (!((_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
+                isShowRef.current)
+                setIsShow(false);
+        };
+        window.addEventListener('click', clickHandler, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('click', clickHandler);
+        };
+    }, []);
+    return (React__default["default"].createElement(StyledPopoverMenu, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        React__default["default"].createElement(index$2.Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "popover-menu__btn", size: "md", color: "transparent", onClick: () => setIsShow((v) => !v) }, buttonProps), toggleButtonContent),
+        isShow ? (React__default["default"].createElement("div", { ref: popoverContent, className: `popover-menu__content --position-${position} --align-${align}`, tabIndex: 0, onClick: (e) => e.stopPropagation() }, typeof children === 'function'
+            ? children({
+                setShow: setIsShow,
+            })
+            : children)) : null));
+};
+
+exports.CardLink = CardLink;
+exports.PopoverMenu = PopoverMenu;
+exports.StyledTree = StyledTree;

package/build/{index-06fa8444.js → index-53e14542.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var index = require('./index-05f106c2.js');
+var theme = require('./theme-be20929b.js');
+var index = require('./index-dff7ee1b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-4af08ec2.js → index-54aeefca.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-d34cd464.js');
+var index = require('./index-1fdf2f01.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-058b3c0f.js → index-60f6d762.js}

@@ -1,29 +1,29 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var React = require('react');
 var dateFns = require('date-fns');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index$2 = require('./index-05f106c2.js');
-var index = require('./index-6bc3f8c3.js');
-var index$4 = require('./index-d34cd464.js');
-var index$5 = require('./index-a7de42d1.js');
-var theme = require('./theme-e4f7f487.js');
-var useTranslations = require('./useTranslations-200168a3.js');
+var index$2 = require('./index-dff7ee1b.js');
+var index = require('./index-0b727664.js');
+var index$4 = require('./index-1fdf2f01.js');
+var index$5 = require('./index-3eb666e6.js');
+var theme = require('./theme-be20929b.js');
+var useTranslations = require('./useTranslations-685f989b.js');
 require('@mantine/hooks');
-require('./index-df5cd44b.js');
-var index$6 = require('./index-1efa7d84.js');
-require('./utils-524bda7c.js');
-require('./useMantineLocale-a4f0c61d.js');
-var index$1 = require('./index-a86ea1b6.js');
-var constants = require('./constants-dd16fb4d.js');
+require('./index-1f3fc2e3.js');
+var index$6 = require('./index-64d8db08.js');
+require('./utils-15a9772e.js');
+require('./useMantineLocale-0d63dfea.js');
+var index$1 = require('./index-e3bbd009.js');
+var constants = require('./constants-f182fc32.js');
 var other = require('@hhgtech/icons/other');
 var reactHookForm = require('react-hook-form');
-var useHealthToolCache = require('./useHealthToolCache-2a53367b.js');
-var constants$1 = require('./constants-513a9a41.js');
-var index$3 = require('./index-bef2bc73.js');
+var useHealthToolCache = require('./useHealthToolCache-048807ea.js');
+var constants$1 = require('./constants-a78fa8b3.js');
+var index$3 = require('./index-4357a324.js');
 require('@mantine/dates');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-1efa7d84.js → index-64d8db08.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-a86ea1b6.js');
-var isProduction = require('./isProduction-aa963bf9.js');
+var index = require('./index-e3bbd009.js');
+var isProduction = require('./isProduction-20cd663d.js');
 
 const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
 const defaultDomain = 'hellosehat.com';

package/build/{index-cb0544e5.js → index-6aeb5ff5.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-d34cd464.js');
+var index = require('./index-1fdf2f01.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var utils = require('./utils-524bda7c.js');
-var index$1 = require('./index-05f106c2.js');
-var index$2 = require('./index-def9867a.js');
-var defaultClassWrapper = require('./defaultClassWrapper-e87ca8ef.js');
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var theme = require('./theme-be20929b.js');
+var utils = require('./utils-15a9772e.js');
+var index$1 = require('./index-dff7ee1b.js');
+var index$2 = require('./index-a9bbb5aa.js');
+var defaultClassWrapper = require('./defaultClassWrapper-b7719693.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var flattenChildren = require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-3dcb9bc6.js → index-71843eb4.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var React = require('react');
-var utils = require('./utils-95d9832e.js');
+var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
+var theme = require('./theme-be20929b.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -48,7 +48,7 @@ const StyledUserAvatar = styled__default["default"].div `
 
 const UserAvatar = (_a) => {
     var { className, isMarryBaby: isMarryBabyProp, style, avatar, username, size } = _a, rest = tslib_es6.__rest(_a, ["className", "isMarryBaby", "style", "avatar", "username", "size"]);
-    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
     const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
     const [tempAvatar, setTempAvatar] = React.useState(false);
     return (React__default["default"].createElement(StyledUserAvatar, Object.assign({ "data-is-marrybaby": isMarryBaby, className: className, style: style, size: size }, rest), avatar && !tempAvatar ? (React__default["default"].createElement("img", { loading: "lazy", src: avatar, className: `avatar`, alt: "avatar", onError: () => {

package/build/{index-ee964d3c.js → index-765ed75d.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-524bda7c.js');
+var utils = require('./utils-15a9772e.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var animation = require('./animation-e1375a3b.js');
-var index = require('./index-d34cd464.js');
+var theme = require('./theme-be20929b.js');
+var animation = require('./animation-85d012ee.js');
+var index = require('./index-1fdf2f01.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-dd1392e3.js → index-7953fb8e.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-bd3f8718.js');
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var utils = require('./utils-524bda7c.js');
+var theme = require('./theme-be20929b.js');
+var utils = require('./utils-15a9772e.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }