@hhgtech/hhg-components 1.29.419 → 1.29.420-beta-2

package/build/esm/index-f0cad392.js

@@ -0,0 +1,388 @@
+import { createStyles, clsx, Box, useMantineTheme } from '@mantine/core';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './text-26186936.js';
+import { _ as __rest } from './tslib.es6-d50c14df.js';
+import React__default, { createContext, useState, useEffect, useContext, useCallback } from 'react';
+import { theme } from './miscTheme.js';
+import { useClickOutside } from '@mantine/hooks';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+var useTextStyles = createStyles((theme) => {
+    return GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN];
+});
+
+const ErrorIcon = (_a) => {
+    var { size } = _a, rest = __rest(_a, ["size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default.createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M5.996 6.513q.163 0 .282-.12a.38.38 0 0 0 .118-.28V3.937q0-.15-.118-.268a.4.4 0 0 0-.282-.119.4.4 0 0 0-.281.12.38.38 0 0 0-.119.28v2.175q0 .15.119.269.12.119.281.119m0 1.862a.43.43 0 0 0 .3-.112.4.4 0 0 0 .125-.313.4.4 0 0 0-.125-.3.4.4 0 0 0-.3-.125.4.4 0 0 0-.3.125.4.4 0 0 0-.125.3.4.4 0 0 0 .125.313.43.43 0 0 0 .3.112m0 2.375a4.6 4.6 0 0 1-1.856-.375 4.8 4.8 0 0 1-1.506-1.012A4.8 4.8 0 0 1 1.62 7.857 4.6 4.6 0 0 1 1.246 6q0-.987.375-1.856t1.013-1.506A4.8 4.8 0 0 1 4.14 1.625a4.6 4.6 0 0 1 1.856-.375q.988 0 1.857.375Q8.72 2 9.359 2.638q.637.637 1.012 1.506T10.747 6t-.375 1.857A4.8 4.8 0 0 1 9.36 9.363a4.8 4.8 0 0 1-1.506 1.012q-.87.375-1.857.375", fill: "#F44D2C" })));
+};
+ErrorIcon.defaultProps = {
+    size: 18,
+    color: theme.colors.gray600,
+    activeColor: theme.colors.primaryBase,
+};
+
+const TextFieldContext = createContext({});
+
+const cssInputNotShrink = css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 24 / 56);
+  line-height: calc(var(--container-height, 56px) * 24 / 56);
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+
+  ::placeholder {
+    color: ${theme.colors.gray400};
+  }
+`;
+const cssInputShrink = css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink = css `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  left: var(--space-x, 16px);
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink = css `
+  top: var(--space-y-shrink, 6px);
+  transform: none;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink = css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${theme.colors.gray200};
+  border-radius: 8px;
+  background-color: #fff;
+  padding-inline: var(--space-x, 16px);
+  padding-block: var(--space-y-not-shrink, 16px);
+  cursor: pointer;
+  pointer-events: none;
+
+  &:has(.mantine-Input-rightSection) {
+    padding-right: var(--container-height, 56px);
+  }
+
+  .mantine-Input-icon {
+    display: none;
+  }
+
+  .mantine-NumberInput-control {
+    border-color: ${theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink = css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 6px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const cssInputWrapperError = css `
+  color: ${theme.colors.red800};
+  font-size: 12px;
+  line-height: 1.5;
+`;
+const StyledTextFieldContainer = styled.div `
+  --space-x: 16px;
+  --space-y-not-shrink: 15px;
+  --space-y-shrink: 6px;
+  --container-height: 56px;
+  --label-not-shrink: 16px;
+  --label-shrink: 12px;
+  --input: 15px;
+
+  position: relative;
+  min-width: 100px;
+  max-width: 100%;
+  display: inline-block;
+
+  .textField_wrapper {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .mantine-InputWrapper-root {
+    &[data-invalid='true'] {
+      .mantine-Input-wrapper {
+        border-color: ${theme.colors.red400};
+      }
+    }
+
+    .mantine-Input-wrapper {
+      &:has([data-invalid]) {
+        border-color: ${theme.colors.red400};
+      }
+    }
+  }
+
+  .mantine-InputWrapper-label {
+    ${cssLabelNotShrink}
+  }
+
+  .mantine-Input-wrapper {
+    ${cssWrapperInputNotShrink}
+
+    + .mantine-Popover-dropdown[data-position="bottom-start"] {
+      left: 0 !important;
+    }
+    + .mantine-Popover-dropdown[data-position='top-start'] {
+      top: unset !important;
+      left: 0 !important;
+      bottom: 100% !important;
+    }
+  }
+
+  .mantine-Input-input {
+    ${cssInputNotShrink}
+  }
+
+  &.textField_shrink {
+    .mantine-InputWrapper-label {
+      ${cssLabelShrink}
+    }
+
+    .mantine-Input-wrapper {
+      ${cssWrapperInputShrink}
+      &.mantine-Select-wrapper {
+        .mantine-Select-rightSection {
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .mantine-Input-input {
+      ${cssInputShrink}
+    }
+
+    &:has(.PhoneInput) {
+      .mantine-InputWrapper-label {
+        left: var(--space-x, 16px);
+      }
+      .PhoneInput {
+        .PhoneInputInput {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &:focus-within {
+    .mantine-Input-wrapper {
+      transition: 0.25s linear border;
+      border-color: ${theme.colors.primary600};
+      box-shadow: 0 0 4px ${theme.colors.primary200};
+    }
+  }
+
+  .PhoneInput {
+    --phone-select: 75px;
+    --phone-input-space-x: 8px;
+    width: 100%;
+    opacity: 1;
+    border: none;
+    .PhoneInputCountry {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: var(--phone-select, 75px);
+    }
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.5;
+      outline: none !important;
+      border: none;
+      box-shadow: none;
+      font-size: var(--input, 15px);
+      padding: 0 var(--phone-input-space-x, 8px);
+      opacity: 0;
+      color: ${theme.colors.gray800} !important;
+      :focus {
+        color: ${theme.colors.gray800} !important;
+      }
+    }
+  }
+
+  &:has(.PhoneInput) {
+    .mantine-InputWrapper-label {
+      left: calc(
+        var(--space-x, 16px) + var(--phone-select, 75px) +
+          var(--phone-input-space-x, 8px)
+      );
+    }
+  }
+
+  .icon {
+    position: absolute;
+    top: calc(var(--container-height) / 2);
+    right: var(--space-x, 16px);
+    transform: translateY(-50%);
+    transition: 0.125s ease-in all;
+    &.shrink {
+      top: calc(var(--container-height) / 2 - 4px);
+      transform: translateY(0);
+    }
+  }
+`;
+const StyledChoiceFieldContainer = styled.div `
+  &.leadgen-form_checkbox,
+  &.leadgen-form_radio {
+    width: 100%;
+  }
+
+  &.leadgen-form_dropdown {
+    width: calc(50% - 12px);
+  }
+
+  .mantine-InputWrapper-root {
+    display: block;
+  }
+
+  .mantine-InputWrapper-label {
+    margin-bottom: 0.5rem;
+    color: ${theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .mantine-Radio-root,
+  .mantine-Checkbox-root {
+    gap: 8px;
+    min-width: calc(50% - 4px);
+
+    // input[type='radio'],
+    // input[type='checkbox'] {
+    //   border-color: ${theme.colors.gray600};
+    //   width: 18px;
+    //   height: 18px;
+    // }
+    // input[type='checkbox'] {
+    //   border-radius: 4px;
+    // }
+
+    // &[data-checked='true'] {
+    //   input[type='radio'],
+    //   input[type='checkbox'] {
+    //     border-color: ${theme.colors.primary600};
+    //   }
+
+    //   input[type='radio'] {
+    //     background-color: white;
+    //   }
+    // }
+
+    .mantine-Checkbox-input {
+      &:checked {
+        border-color: ${theme.colors.primary600};
+      }
+    }
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .mantine-InputWrapper-error {
+    ${cssInputWrapperError}
+  }
+`;
+styled.div `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  right: var(--space-x, 16px);
+`;
+
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "children", "className"]);
+    const [shrink, setShrink] = useState(shrinkProps);
+    const [hasIcon, setHasIcon] = useState(false);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(TextFieldContext.Provider, Object.assign({ value: {
+            shrinkProps,
+            shrink,
+            setShrink,
+            onChangeShrink,
+            hasIcon,
+            setHasIcon,
+        } }, restProps),
+        React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
+};
+const TextFieldControl = (props) => {
+    const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = useContext(TextFieldContext);
+    const { children } = props;
+    const containerRef = useClickOutside(() => {
+        if (shrinkProps) {
+            return;
+        }
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    // const inputInside = useMemo(() => {
+    //   containerRef.current.querySelectorAll(
+    //     'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
+    //   )
+    // }, [containerRef.current])
+    // console.log({ containerRef })
+    const focusInput = (target) => {
+        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus({ preventScroll: true });
+        }
+    };
+    const onClick = useCallback((e) => {
+        if (shrink) {
+            e.preventDefault();
+            focusInput(e.currentTarget);
+            return;
+        }
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        focusInput(e.currentTarget);
+    }, [shrink]);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(Box, { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function'
+        ? children({ shrink: !!shrink, hasIcon })
+        : children));
+};
+const TextFieldIcon = ({ Icon }) => {
+    const { shrink, setHasIcon } = useContext(TextFieldContext);
+    const theme = useMantineTheme();
+    useEffect(() => {
+        Icon && setHasIcon(true);
+    }, []);
+    return Icon ? (React__default.createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
+};
+TextField.Control = TextFieldControl;
+TextField.Icon = TextFieldIcon;
+const ChoiceField = (props) => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
+};
+
+export { ChoiceField as C, ErrorIcon as E, TextField as T, useTextStyles as u };

package/build/esm/{index-d04d36d4.js → index-f25b9d2f.js}

@@ -1,16 +1,16 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-5963bc29.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-d50c14df.js';
 import React__default, { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
-import './index-f4288484.js';
-import { L as LOCALE } from './Locale-d9693753.js';
+import './index-81bed3a5.js';
+import { L as LOCALE } from './Locale-008b482e.js';
 import { notifications, Notifications } from '@mantine/notifications';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-f701099c.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-77a5ed91.js';
 import { em } from '@mantine/core';
-import { C as CommonGAssets } from './index-3f06a39d.js';
+import { C as CommonGAssets } from './index-c66219ba.js';
 import { theme } from './miscTheme.js';
-import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-0a4ff4ca.js';
-import { C as CustomStylesType, F as FontWeight } from './text-61cb44ed.js';
-import { A as ANIMATION_DURATION } from './shared-33684c62.js';
+import { S as Screens, M as MediaQueries, B as Breakpoints } from './utils-ab85dac6.js';
+import { C as CustomStylesType, F as FontWeight } from './text-26186936.js';
+import { A as ANIMATION_DURATION } from './shared-2c32e847.js';
 
 // Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
 const MAPPED_LOCALE = {

package/build/esm/{index-31ba25b8.js → index-f84edc62.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-d9693753.js';
-import { C as CommonGAssets } from './index-3f06a39d.js';
+import { L as LOCALE } from './Locale-008b482e.js';
+import { C as CommonGAssets } from './index-c66219ba.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-0a4ff4ca.js';
-import { L as LogoIcon } from './logoIcon-be9b6a50.js';
-import './index-f4288484.js';
-import { I as ImageWrap } from './index-f606de13.js';
+import { M as MediaQueries } from './utils-ab85dac6.js';
+import { L as LogoIcon } from './logoIcon-9dc43f6b.js';
+import './index-81bed3a5.js';
+import { I as ImageWrap } from './index-d6783182.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/{index-c82fa113.js → index-fa4c7a7d.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { B as Button } from './index-733da889.js';
-import { u as useTranslations } from './index-0b3eda7a.js';
+import { B as Button } from './index-da18145b.js';
+import { u as useTranslations } from './index-af486ec3.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-66bb61f2.js → index-fad329e2.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-bec9aaac.js';
+import { L as Label } from './index-8bcbdcb9.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `