@hhgtech/hhg-components 1.28.63 → 1.28.64-beta-2

package/build/esm/index-0298e7d5.js

@@ -1,177 +0,0 @@
-import e,{useRef as t,useEffect as a,useState as o}from"react";import{Portal as l}from"@mantine/core";import{t as n,M as i}from"./utils-f9036688.js";import{x as r,y as d,z as s,A as c,B as m,C as p,g as h}from"./index.styles-b54bd8c1.js";import{T as u}from"./Plus-f9baa442.js";import{u as b}from"./useScrollbarSize-146cf043.js";import{createPortal as g}from"react-dom";import y from"styled-components";import{t as f}from"./theme-99eb2455.js";import{u as v}from"./useTranslations-0bb35954.js";import{G as x}from"./Subot-ae88fa88.js";import{I as C}from"./index-ae2e10d3.js";import{M as E,a as w}from"./index-0c53b603.js";import{T as B}from"./index-51bfcbb2.js";const k=({open:t=!1,onClickOutside:a})=>e.createElement(r,{"data-open":t,onClick:a}),_=({children:o,title:i,onClose:r,open:m=!1,placement:p="left",destroyOnClose:h=!1,isPropagationEvent:b=!0,className:g})=>{const y=t();a((()=>(n(m),()=>n(!1))),[m]);const f=()=>{y.current.classList.add("slideOut"),setTimeout((()=>{r()}),800)};return!m&&h?null:e.createElement(l,null,e.createElement(d,{className:g,open:m},e.createElement(k,{open:m,onClickOutside:f}),e.createElement(s,{open:m,placement:p,ref:y,hasTitle:Boolean(i)},e.createElement("div",{className:"title"},i&&e.createElement(u,{size:"s2",weight:"semiBold"},i),e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",className:"close-button",onClick:f},e.createElement("path",{d:"M5.99007 4.99067C5.79114 4.99072 5.59674 5.0501 5.43173 5.16121C5.26672 5.27233 5.1386 5.43013 5.06374 5.61444C4.98889 5.79875 4.9707 6.0012 5.0115 6.1959C5.05231 6.39061 5.15025 6.56872 5.29281 6.70747L10.5858 12.0004L5.29281 17.2934C5.19684 17.3855 5.12021 17.4959 5.06743 17.618C5.01464 17.7402 4.98676 17.8716 4.9854 18.0046C4.98405 18.1377 5.00926 18.2697 5.05954 18.3928C5.10983 18.516 5.1842 18.6279 5.27827 18.722C5.37235 18.8161 5.48426 18.8904 5.60743 18.9407C5.73061 18.991 5.86259 19.0162 5.99563 19.0149C6.12867 19.0135 6.2601 18.9856 6.38223 18.9328C6.50436 18.8801 6.61473 18.8034 6.70687 18.7075L11.9998 13.4145L17.2928 18.7075C17.385 18.8034 17.4953 18.8801 17.6175 18.9328C17.7396 18.9856 17.871 19.0135 18.0041 19.0149C18.1371 19.0162 18.2691 18.991 18.3922 18.9407C18.5154 18.8904 18.6273 18.8161 18.7214 18.722C18.8155 18.6279 18.8899 18.516 18.9401 18.3928C18.9904 18.2697 19.0156 18.1377 19.0143 18.0047C19.0129 17.8716 18.985 17.7402 18.9323 17.618C18.8795 17.4959 18.8028 17.3855 18.7069 17.2934L13.4139 12.0004L18.7069 6.70747C18.8514 6.567 18.9501 6.38616 18.99 6.18864C19.03 5.99112 19.0093 5.78614 18.9308 5.60055C18.8523 5.41497 18.7195 5.25744 18.5499 5.14861C18.3803 5.03978 18.1817 4.98473 17.9803 4.99067C17.7205 4.99841 17.4739 5.10699 17.2928 5.2934L11.9998 10.5864L6.70687 5.2934C6.61368 5.19761 6.50224 5.12146 6.37912 5.06947C6.25601 5.01747 6.12372 4.99068 5.99007 4.99067Z",fill:"#595959"}))),e.createElement(c,{onClick:e=>{b&&e.stopPropagation()}},o&&(e.isValidElement(o)?o:"function"==typeof o?o({internalClose:f}):null)))))},$=({value:t,options:a,className:l,direction:n="horizontal",onChange:i,isDisabled:r,siteType:d})=>{const[s,c]=o(t),h="marryBaby"===d;return e.createElement(m,{className:l,"data-direction":n},a.map(((a,o)=>e.createElement(p,{"data-selected":(t||s)===a.value,"data-is-mb":h,"data-disabled":r,key:o,onClick:()=>{var e;e=a.value,r||(c(e),i&&i(e))}},e.createElement("div",null,a.content,a.label&&e.createElement(e.Fragment,null,h?e.createElement(E,{type:"subtitle-2",color:(t||s)===a.value?f.mbColors.dark:f.mbColors.midGray},a.label):e.createElement(B,{type:"bold",color:(t||s)===a.value?"#2D87F3":"black",className:"radio-group-item-heading",size:"label1"},a.label)))))))},j="hhgcomp-modal-modal",N=h(y.div`
-  position: relative;
-  z-index: 200;
-  background-color: ${f.colors.white};
-  border-radius: ${f.borderRadius};
-  box-shadow: 0px 4px 8px ${f.colors.gray200};
-  &[data-site-type='marryBaby'] {
-    border-radius: 16px;
-    .hhg-modal__content {
-      position: relative;
-      z-index: 111;
-      height: 100%;
-
-      padding: 24px;
-    }
-  }
-  .hhg-modal__content {
-    position: relative;
-    z-index: 111;
-    height: 100%;
-    padding: 16px;
-  }
-  .hhg-modal__video {
-    position: relative;
-    z-index: 111;
-    height: 100%;
-    background-color: none;
-    box-shadow: none;
-  }
-`,j),L=y.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 201;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: 0;
-  visibility: hidden;
-  background-color: rgba(38, 38, 38, 0.3);
-
-  .hhg-modal__close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    cursor: pointer;
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-    }
-  }
-  &[data-type='video'] {
-    z-index: 1001;
-  }
-  &[data-open='true'] {
-    visibility: visible;
-  }
-
-  &.slideTop {
-    .${j} {
-      transform: translate(0, -100vh);
-      transition: all 0.5s ease;
-    }
-
-    &[data-open='true'] {
-      .${j} {
-        transform: translate(0);
-      }
-    }
-  }
-
-  &.scaleUp {
-    .${j} {
-      transform: scale(0.9);
-    }
-
-    &[data-open='true'] {
-      .${j} {
-        transition: all 0.3s ease-out;
-        transform: scale(1);
-      }
-    }
-  }
-
-  &[data-type='tail'] {
-    justify-content: flex-end;
-    .${j} {
-      width: 420px;
-      height: 100%;
-      border-radius: 0;
-      overflow: hidden auto;
-    }
-  }
-  &[data-type='form'] {
-    .${j} {
-      width: 496px;
-      height: 548px;
-      max-height: 100%;
-      overflow-y: auto;
-      ${i.mbDown} {
-        width: 340px;
-      }
-    }
-  }
-  &[data-type='video'] {
-    .${j} {
-      height: 100%;
-      max-height: 539px;
-      ${i.mbDown} {
-        height: 192px;
-        width: 100%;
-        height: 100%;
-        border-radius: ${f.borderRadius};
-        max-height: 192px;
-      }
-    }
-  }
-  &[data-type='confirm'] {
-    .${j} {
-      width: 100%;
-      max-width: 407px;
-      ${i.mbDown} {
-        width: calc(100% - 32px);
-        max-width: calc(100% - 32px);
-      }
-    }
-  }
-`,z=y.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  align-items: center;
-
-  &[data-open='false'] {
-    display: none;
-  }
-  &[data-type='video'] {
-    background-color: ${f.colors.secondaryDark};
-  }
-`,T="hhg-modals",G=()=>{document.querySelectorAll('.hhg-modal[data-open="true"]').length<1&&document.body.classList.remove("hhc-modal-show")},D=()=>{document.querySelectorAll('.hhg-modal[data-open="true"]').length<1&&(document.body.style.overflow="",document.body.style.paddingRight="",document.body.classList.remove("hhc-disabled-scroll"))},M=({type:l="lead",closeIcon:n,isOpen:i=!0,onClose:r,children:d,className:s="",animationType:c="slideTop",isStaticBackdrop:m=!1,siteType:p})=>{const[h,u]=o(!1),y=t(null),{width:f}=b();if(!y.current&&h&&(y.current=document.createElement("div")),a((()=>(u(!0),()=>{u(!1),G(),D()})),[]),a((()=>{if(h){const e=(()=>{let e=document.getElementById(T);return e||(e=document.createElement("div"),e.setAttribute("id",T),document.body.append(e)),e})();return e.appendChild(y.current),()=>{e.removeChild(y.current)}}}),[h]),a((()=>{i?document.body.classList.add("hhc-modal-show"):G()}),[i]),a((()=>{i?(document.body.style.overflow="hidden",document.body.style.paddingRight=f+"px",document.body.classList.add("hhc-disabled-scroll")):D()}),[i,f]),!h)return null;const v=["hhg-modal__wrapper",s,c].filter((e=>e)).join(" ");return g(e.createElement(L,{className:v,"data-open":i,"data-type":l},!m&&e.createElement(z,{"data-open":i,onClick:r,"data-type":l}),!m&&"video"===l&&!!n&&e.createElement("div",{className:"hhg-modal__close",onClick:r},n),e.createElement(N,{className:"hhg-modal","data-open":i,"data-site-type":p},e.createElement("div",{className:"video"===l?"hhg-modal__video":"hhg-modal__content"},!!n&&"video"!==l&&e.createElement("div",{className:"hhg-modal__close",onClick:r},n),d))),y.current)},S=y.div`
-  & > :not(:last-child) {
-    margin-bottom: 8px;
-  }
-
-  .gender-selector {
-    & > :not(:last-child) {
-      margin-right: 16px;
-    }
-
-    & > div {
-      width: calc(50% - 8px);
-
-      ${i.mbUp} {
-        justify-self: left;
-      }
-    }
-  }
-`,O=y($)`
-  & > div > div {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-    gap: 8px;
-    padding-block: 5px;
-  }
-  .radio-group-item-heading {
-    margin-top: 0;
-  }
-`,R=({value:t,onChange:a,siteType:o})=>{const{t:l}=v(),n="marryBaby"==o;return e.createElement(S,{"data-is-marryBaby":n},n?e.createElement(w,{type:"h4",color:f.mbColors.dark},l("tools.selectBabyGender")):e.createElement(u,{size:"label2",weight:"bold",style:{marginBottom:"0.5rem"}},l("tools.selectBabyGender")),e.createElement(O,{siteType:o,options:[{value:x.Boy,label:l("gender.male"),content:n?e.createElement(C.BabyBoyMB,null):e.createElement(C.GenderChooseBoy,null)},{value:x.Girl,label:l("gender.female"),content:n?e.createElement(C.BabyGirlMB,null):e.createElement(C.GenderChooseGirl,null)}],value:t,onChange:a,className:"gender-selector"}))};export{R as B,_ as D,M,$ as R};