@hhgtech/hhg-components 1.29.362 → 1.29.363-beta-1

package/build/embeddedHeathToolCards_targetHeartRate.js

@@ -2,53 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-b6754243.js');
+var tslib_es6 = require('./tslib.es6-2e23e1b2.js');
 var React = require('react');
-var index = require('./index-06d8f4c6.js');
-var index$1 = require('./index-feab9a46.js');
-var dataTransform = require('./dataTransform-99aef06b.js');
-var healthToolsCardWrapper = require('./index-80d944f3.js');
-var index$2 = require('./index-f987d8ac.js');
-require('./translationsContext-776c1d5f.js');
+var index = require('./index-43ae933f.js');
+var index$1 = require('./index-9e0eb6a9.js');
+var dataTransform = require('./dataTransform-36801523.js');
+var healthToolsCardWrapper = require('./index-10da6d8b.js');
+var index$2 = require('./index-eace968d.js');
+require('./translationsContext-a7d3b749.js');
 require('./constantsDomainLocales.js');
-require('./Locale-8424b413.js');
+require('./Locale-043d083b.js');
 require('./constantsIsProduction.js');
 require('@mantine/core');
-require('./index-6cb86f78.js');
+require('./index-195f6e5b.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./useScreenSize-7806176e.js');
+require('./useScreenSize-b501ca79.js');
 require('@emotion/styled');
-require('./utils-22ce9f9e.js');
+require('./utils-7f6ff3c4.js');
 require('@mantine/carousel');
-require('./index-9eccde6f.js');
-require('./other-6c620bcf.js');
-require('./index-167e1ca6.js');
+require('./index-2eae91af.js');
+require('./other-076deeb8.js');
+require('./index-4597d53c.js');
 require('./miscTheme.js');
-require('./useMantineLocale-b8a79d56.js');
+require('./useMantineLocale-6426be99.js');
 require('@mantine/notifications');
-require('./index-e9fb386a.js');
+require('./index-05ddebba.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('dayjs');
-require('./index-f3a871c5.js');
+require('./index-42946da1.js');
 require('classnames');
-require('./useUniqueId-490497d9.js');
+require('./useUniqueId-2fd547e0.js');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-ff03980e.js');
-require('./index-95159081.js');
+require('./index.styles-0207515c.js');
+require('./index-32cfdd3a.js');
 require('./miscDefaultClassWrapper.js');
 require('@mantine/form');
-require('./useHealthToolCache-0c768f4c.js');
+require('./useHealthToolCache-e14fec74.js');
 require('./miscGetDynamicHealthTool.js');
-require('./normalizeLink-3c8a02ba.js');
-require('./core-fc1b679c.js');
-require('./constants-a79017ab.js');
-require('./index-80d7b6b7.js');
-require('./index-8e577b03.js');
-require('./index-6e720c8f.js');
+require('./normalizeLink-888a76f2.js');
+require('./core-b9574056.js');
+require('./constants-6846ba29.js');
+require('./index-9b582642.js');
+require('./index-1c23777a.js');
+require('./index-97bd9308.js');
 require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/esm/InputDate-59904635.js

@@ -0,0 +1,407 @@
+import { _ as __rest } from './tslib.es6-ae0c9cc7.js';
+import React__default, { forwardRef, useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
+import cn from 'classnames';
+import dayjs from 'dayjs';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { theme } from './miscTheme.js';
+import { I as ISO_FORMAT } from './index-fdec3777.js';
+import { L as LOCALE } from './Locale-37e2792b.js';
+
+const KEYCODE = {
+    BACKSPACE: 8,
+    SPACEBAR: 32,
+    ZERO: 48,
+};
+
+const PATTERN_NUMBER = /^([0-9]*)$/;
+const INPUT_DATE_PLACEHOLDER = {
+    DD: 'Day',
+    MM: 'Month',
+    YYYY: 'Year',
+};
+const INPUT_DATE_FORMAT_TYPING = {
+    DD: (day, cb) => {
+        if (!day) {
+            cb === null || cb === void 0 ? void 0 : cb('');
+            return '';
+        }
+        const dayNumber = parseInt(day);
+        if (dayNumber > 31) {
+            cb === null || cb === void 0 ? void 0 : cb(day[0]);
+            return day[0];
+        }
+        /** Day cannot be over number 31 */
+        if (dayNumber >= 4) {
+            const dayString = String(dayNumber).padStart(2, '0');
+            cb === null || cb === void 0 ? void 0 : cb(dayString);
+            return dayString;
+        }
+        cb === null || cb === void 0 ? void 0 : cb(day);
+        return day;
+    },
+    MM: (month, cb) => {
+        if (!month) {
+            cb === null || cb === void 0 ? void 0 : cb('');
+            return '';
+        }
+        const monthNumber = parseInt(month);
+        if (monthNumber > 12) {
+            cb === null || cb === void 0 ? void 0 : cb(month[0]);
+            return month[0];
+        }
+        /** Month cannot be over number 12 */
+        if (monthNumber >= 2) {
+            const monthString = String(monthNumber).padStart(2, '0');
+            cb === null || cb === void 0 ? void 0 : cb(monthString);
+            return monthString;
+        }
+        cb === null || cb === void 0 ? void 0 : cb(month);
+        return month;
+    },
+    YYYY: (year, cb) => {
+        if (!year) {
+            cb === null || cb === void 0 ? void 0 : cb('');
+            return '';
+        }
+        cb === null || cb === void 0 ? void 0 : cb(year);
+        return year;
+    },
+};
+const INPUT_DATE_DEFAULT_DISABLED = [false, true, true];
+const getInputDateInputDisabled = (valueString) => {
+    return valueString.map((_, index) => {
+        if (index === 0) {
+            return false;
+        }
+        if (index !== 0 && !!valueString[index - 1]) {
+            return false;
+        }
+        return true;
+    });
+};
+
+const cssInputNotShrink = css `
+  max-width: 100%;
+  color: ${theme.colors.gray800};
+  font-size: var(--input-font-size, 16px);
+  font-weight: 400;
+  line-height: calc(var(--input-height, 56px) * 24 / 56);
+  opacity: 0;
+  transition: 0.3s linear opacity;
+  vertical-align: middle;
+  &::placeholder {
+    color: transparent;
+    font-weight: 400;
+  }
+`;
+const cssInputShrink = css `
+  opacity: 1;
+  line-height: calc(var(--input-height, 56px) * 24 / 56);
+  transition: 0.3 linear opacity;
+  &::placeholder {
+    color: ${theme.colors.gray600};
+  }
+`;
+const cssPlaceholderNotShrink = css `
+  position: absolute;
+  top: calc(var(--input-height, 56px) / 2);
+  left: var(--input-padding, 16px);
+  color: ${theme.colors.gray600};
+  transform: translateY(-50%);
+  transition: 0.125s linear all;
+  vertical-align: middle;
+`;
+const cssPlaceholderShrink = css `
+  top: calc(var(--input-height, 56px) * 7 / 56);
+  font-size: calc(var(--input-font-size, 16px) * 12 / 16);
+  line-height: calc(var(--input-height, 56px) * 18 / 56);
+  transform: translateY(0);
+  transition: 0.125s linear all;
+`;
+const StyledInputDate = styled.div `
+  --input-gap: 8px;
+  --input-height: 56px;
+  --input-max-width: 320px;
+  --input-font-size: 16px;
+  --input-line-height: 24px;
+  --input-padding-x: 16px;
+  --input-padding-y: 16px;
+  --input-border-radius: 8px;
+  --input-border-color: ${theme.colors.gray200};
+
+  display: flex;
+  gap: var(--input-gap, 8px);
+  max-width: var(--input-max-width, 320px);
+  font-weight: 400;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .input_date-input_container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--input-height, 56px);
+    max-width: calc((100% / 3) - (var(--input-gap, 8px) * 2 / 3));
+    line-height: var(--input-line-height, 24px);
+    padding: var(--input-padding-y, 16px) var(--input-padding-x, 16px);
+    border-radius: var(--input-border-radius, 8px);
+    border: 1px solid var(--input-border-color, ${theme.colors.gray200});
+
+    .input_date-input_placeholder {
+      ${cssPlaceholderNotShrink}
+    }
+
+    .input_date-input {
+      ${cssInputNotShrink}
+    }
+
+    &:has([disabled]) {
+      pointer-events: none;
+    }
+
+    &:focus-within,
+    &.input_date-input_shrink {
+      --input-padding-y: 8px;
+      align-items: flex-end;
+      .input_date-input_placeholder {
+        ${cssPlaceholderShrink}
+      }
+
+      .input_date-input {
+        ${cssInputShrink}
+      }
+    }
+
+    &.input_date-input_active {
+      border-color: ${theme.colors.primary600};
+      box-shadow: 0px 0px 5px ${theme.colors.primary400};
+      transition: 0.25s linear all;
+    }
+
+    &.input_date-input_error {
+      border-color: ${theme.colors.red600};
+    }
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs.extend(customParseFormat);
+const { BACKSPACE, SPACEBAR, ZERO } = KEYCODE;
+const formatInputDateValue = (value, format) => {
+    if (typeof value === 'undefined') {
+        return null;
+    }
+    if (typeof value === 'string') {
+        const dayInJS = dayjs(value, format, true);
+        if (dayInJS.isValid()) {
+            return dayInJS.toDate();
+        }
+        return null;
+    }
+    const dayInJS = dayjs(value);
+    if (dayInJS.isValid()) {
+        return dayInJS.toDate();
+    }
+    return null;
+};
+const formatInputDateValueString = (value, format) => {
+    if (!value) {
+        return [undefined, undefined, undefined];
+    }
+    const dayInJS = dayjs(value);
+    return dayInJS.format(format).split('/');
+};
+const InputDate = forwardRef((props, ref) => {
+    const { id, name, locale = LOCALE.Vietnam, className, style, defaultValue: defaultValueProps, value: valueProps, onChange: onChangeProps, error, disabled: disabledProps, labelTuples, placeholderTuples, onFocus, onBlur, autoComplete = 'off' } = props, restProps = __rest(props, ["id", "name", "locale", "className", "style", "defaultValue", "value", "onChange", "error", "disabled", "labelTuples", "placeholderTuples", "onFocus", "onBlur", "autoComplete"]);
+    const [activeInput, setActiveInput] = useState(-1);
+    const inputRef = useRef([]);
+    const [value, setValue] = useState(formatInputDateValue(defaultValueProps || valueProps, ISO_FORMAT[locale].dateFormat));
+    const [valueString, setValueString] = useState([
+        undefined,
+        undefined,
+        undefined,
+    ]);
+    const [disabled, setDisabled] = useState(INPUT_DATE_DEFAULT_DISABLED);
+    const { dateFormat } = useMemo(() => {
+        return (ISO_FORMAT === null || ISO_FORMAT === void 0 ? void 0 : ISO_FORMAT[locale]) || ISO_FORMAT['vi-VN'];
+    }, [locale]);
+    const orders = useMemo(() => dateFormat.split('/'), [dateFormat]);
+    const defaultValue = useMemo(() => formatInputDateValueString(defaultValueProps, dateFormat), [defaultValueProps, dateFormat]);
+    const label = useMemo(() => orders.map((keyOrd, idx) => (labelTuples === null || labelTuples === void 0 ? void 0 : labelTuples[idx]) || INPUT_DATE_PLACEHOLDER[keyOrd]), [labelTuples]);
+    const placeholder = useMemo(() => orders.map((keyOrd, idx) => (placeholderTuples === null || placeholderTuples === void 0 ? void 0 : placeholderTuples[idx]) || keyOrd), [placeholderTuples]);
+    const focusPrevInput = useCallback(() => {
+        var _a, _b;
+        if (activeInput === 0 || activeInput === -1) {
+            return;
+        }
+        const curInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a[activeInput];
+        if (curInput) {
+            curInput.blur();
+        }
+        const prevInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b[activeInput - 1];
+        if (prevInput) {
+            prevInput.focus();
+        }
+    }, [activeInput]);
+    const focusNextInput = useCallback(() => {
+        var _a, _b;
+        if (activeInput === orders.length - 1) {
+            return;
+        }
+        const curInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a[activeInput];
+        if (curInput) {
+            curInput.blur();
+        }
+        const nextInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b[activeInput + 1];
+        if (nextInput) {
+            nextInput.focus();
+        }
+    }, [activeInput, orders]);
+    const changeCodeAtFocus = useCallback(() => {
+        let count = 0;
+        function changeFocus() {
+            const target = inputRef.current[activeInput];
+            const nextTarget = inputRef.current[activeInput + 1];
+            const disabledNext = disabled[activeInput + 1];
+            if (!nextTarget || count === 1) {
+                return;
+            }
+            if (disabledNext) {
+                requestAnimationFrame(changeFocus);
+                count++;
+            }
+            if (target.value.length === target.maxLength) {
+                focusNextInput();
+            }
+        }
+        requestAnimationFrame(changeFocus);
+    }, [...disabled, activeInput, focusNextInput]);
+    const onChange = useCallback((valStr) => {
+        const valString = valStr || valueString;
+        const dayString = orders
+            .map((_, index) => {
+            const val = valString[index];
+            return val;
+        })
+            .filter(Boolean)
+            .join('/');
+        const dayInJS = dayjs(dayString, dateFormat, true);
+        if (dayInJS.isValid()) {
+            setValue(dayInJS.toDate());
+            onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(dayInJS.toDate(), dayString);
+        }
+        else {
+            setValue(null);
+            onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(dayString, dayString);
+        }
+    }, [orders, dateFormat, ...valueString]);
+    const inputOnChange = useCallback((index) => ((e) => {
+        const val = e.target.value;
+        const valString = [...valueString];
+        if (!val) {
+            valString[index] = '';
+            setValueString(valString);
+            onChange(valString);
+            if (index === 0) {
+                setDisabled(INPUT_DATE_DEFAULT_DISABLED);
+            }
+            return;
+        }
+        if (!val.trim().match(PATTERN_NUMBER)) {
+            return;
+        }
+        const inputType = orders[index];
+        INPUT_DATE_FORMAT_TYPING[inputType](val, (newVal) => {
+            valString[index] = newVal;
+            setDisabled(getInputDateInputDisabled(valString));
+            setValueString(valString);
+            changeCodeAtFocus();
+        });
+        onChange(valString);
+    }), [...valueString, orders, changeCodeAtFocus, onChange]);
+    const inputOnFocus = useCallback((e) => {
+        const target = e.target;
+        const inputIndex = inputRef.current.findIndex((input) => input === target);
+        if (inputIndex !== -1) {
+            setActiveInput(inputIndex);
+        }
+        if (inputIndex === 0) {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }
+    }, [...valueString, orders, onFocus]);
+    const inputOnBlur = useCallback((e) => {
+        setActiveInput(-1);
+        const target = e.target;
+        const inputIndex = inputRef.current.findIndex((input) => input === target);
+        if (inputIndex !== -1) {
+            const newVal = target.value;
+            const valString = [...valueString];
+            if (newVal !== '' && inputIndex !== orders.length - 1) {
+                valString[inputIndex] = String(newVal).padStart(target.maxLength, '0');
+                setDisabled(getInputDateInputDisabled(valString));
+                setValueString(valString);
+                onChange(valString);
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [...valueString, orders, onChange, onBlur]);
+    // Handle cases of backspace, delete, left arrow, right arrow, space
+    const inputOnKeyDown = useCallback((e) => {
+        const target = inputRef.current[activeInput];
+        if (target.value === '0' && (e.keyCode === ZERO || e.key === '0')) {
+            e.preventDefault();
+        }
+        if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+            if (!target.value) {
+                focusPrevInput();
+            }
+        }
+        if (e.keyCode === SPACEBAR ||
+            e.key === ' ' ||
+            e.key === 'Spacebar' ||
+            e.key === 'Space') {
+            e.preventDefault();
+        }
+    }, [activeInput, focusPrevInput, focusNextInput]);
+    const onClick = useCallback(() => {
+        if (activeInput === -1 && !value) {
+            inputRef.current[0].focus();
+            setActiveInput(0);
+        }
+        else if (activeInput === -1 && value) {
+            inputRef.current[inputRef.current.length - 1].focus();
+            setActiveInput(inputRef.current.length - 1);
+        }
+    }, [activeInput, value]);
+    useEffect(() => {
+        setValue(formatInputDateValue(valueProps, dateFormat));
+    }, [valueProps, dateFormat]);
+    useEffect(() => {
+        if (value) {
+            setValueString(formatInputDateValueString(value, dateFormat));
+        }
+    }, [value, dateFormat]);
+    useImperativeHandle(ref, () => inputRef.current[0], []);
+    return (React__default.createElement(StyledInputDate, Object.assign({ className: className, style: style, onClick: onClick }, restProps), orders.map((inputName, idxOrd) => {
+        const inputLabel = label[idxOrd];
+        const inputDefaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[idxOrd];
+        const inputValue = valueString[idxOrd];
+        const inputDisabled = disabled[idxOrd];
+        const inputPlaceholder = placeholder[idxOrd];
+        const inputMaxLength = inputName.length;
+        return (React__default.createElement("div", { key: inputName, className: cn('input_date-input_container', {
+                'input_date-input_active': activeInput === idxOrd,
+                'input_date-input_shrink': !!inputValue,
+                'input_date-input_error': error,
+            }) },
+            React__default.createElement("span", { className: "input_date-input_placeholder" }, inputLabel),
+            React__default.createElement("input", { ref: (ref) => (inputRef.current[idxOrd] = ref), name: `${id || ''}-${name || ''}-${inputName}`, type: "text", inputMode: "numeric", defaultValue: inputDefaultValue, value: inputValue, maxLength: inputMaxLength, disabled: disabledProps || inputDisabled, placeholder: inputPlaceholder, onChange: inputOnChange(idxOrd), onBlur: inputOnBlur, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, className: "input_date-input", autoComplete: autoComplete })));
+    })));
+});
+
+export { InputDate as I };

package/build/esm/{LastPeriod-e8d99ec6.js → LastPeriod-fbf8fbf3.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-2571f98c.js';
+import { _ as __rest } from './tslib.es6-ae0c9cc7.js';
 import React__default from 'react';
 
 const LastPeriod = (_a) => {

package/build/esm/{Locale-23142efe.js → Locale-37e2792b.js}

@@ -10,6 +10,7 @@ var LOCALE;
     LOCALE["Myanmar"] = "my-MM";
     LOCALE["Taiwan"] = "zh-TW";
     LOCALE["India"] = "hi-IN";
+    LOCALE["China"] = "zh-CN";
 })(LOCALE || (LOCALE = {}));
 
 export { LOCALE as L };

package/build/esm/{MobileBottomNavigationIcon-5f4ee3f4.js → MobileBottomNavigationIcon-6b3bd20f.js}

@@ -1,10 +1,10 @@
-import { _ as __rest } from './tslib.es6-2571f98c.js';
+import { _ as __rest } from './tslib.es6-ae0c9cc7.js';
 import React__default from 'react';
-import { T as Text } from './index-c17eb826.js';
+import { T as Text } from './index-edbca095.js';
 import { theme } from './miscTheme.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-213d1bf3.js';
+import { M as MediaQueries } from './utils-a220d748.js';
 
 const slideInUp = keyframes `
   from {

package/build/esm/{Spinner-6ffe5c0f.js → Spinner-a518c119.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-2571f98c.js';
+import { _ as __rest } from './tslib.es6-ae0c9cc7.js';
 import React__default from 'react';
 
 const Spinner = (_a) => {

package/build/esm/{WhatsApp-1c55868a.js → WhatsApp-1c47f4a0.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-2571f98c.js';
+import { _ as __rest } from './tslib.es6-ae0c9cc7.js';
 import React__default from 'react';
 
 const Instagram = (_a) => {

package/build/esm/adapters.js

@@ -1,36 +1,36 @@
-export { B as Button } from './index-419ed52f.js';
-export { T as Text } from './index-5b2d87c3.js';
-export { H as Heading } from './index-3504643c.js';
-import './tslib.es6-2571f98c.js';
+export { B as Button } from './index-7e1f46f2.js';
+export { T as Text } from './index-be3016c1.js';
+export { H as Heading } from './index-8281b68f.js';
+import './tslib.es6-ae0c9cc7.js';
 import 'react';
-import './index-3cb8cb4b.js';
+import './index-7e02a49f.js';
 import '@mantine/core';
-import './index-a0ef2f51.js';
+import './index-45e0fcc8.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-fa4aed4f.js';
+import './index-9103b9eb.js';
 import './constantsDomainLocales.js';
-import './Locale-23142efe.js';
+import './Locale-37e2792b.js';
 import './constantsIsProduction.js';
-import './useScreenSize-245884d6.js';
+import './useScreenSize-d72ccba0.js';
 import '@emotion/styled';
-import './utils-213d1bf3.js';
+import './utils-a220d748.js';
 import '@mantine/carousel';
-import './index-c17eb826.js';
-import './other-9f3c0383.js';
-import './index-93f05cbd.js';
+import './index-edbca095.js';
+import './other-9be7cf1c.js';
+import './index-48c3a543.js';
 import './miscTheme.js';
-import './useMantineLocale-1d78bb2f.js';
+import './useMantineLocale-a4edc099.js';
 import '@mantine/notifications';
-import './index-a7ef127e.js';
+import './index-fdec3777.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'dayjs';
 import 'classnames';
-import './useUniqueId-31d70d4b.js';
+import './useUniqueId-44fdf47f.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-756b61f3.js';
-import './translationsContext-feb0f31b.js';
-import './index-4ea9c741.js';
+import './index.styles-76c9a592.js';
+import './translationsContext-1cfdc69b.js';
+import './index-f49d5819.js';