@hhgtech/hhg-components 1.27.9 → 1.27.11

package/build/esm/index-73d79e3c.js

@@ -0,0 +1,177 @@
+import e,{useRef as t,useEffect as a,useState as o}from"react";import{Portal as i}from"@mantine/core";import{t as l,M as n}from"./utils-e9b5c7b6.js";import{F as r,G as s,J as d,K as c,L as m,N as p,E as h,I as b}from"./index-8c7dd74b.js";import{T as u}from"./index-d249dce4.js";import g from"styled-components";import{u as x}from"./useTranslations-ef68c591.js";import{G as y}from"./Onboarding-255cb0b7.js";import{M as C,a as f}from"./index-3e0a42d5.js";import{t as v}from"./theme-605b605d.js";const w=({open:t=!1,onClickOutside:a})=>e.createElement(r,{"data-open":t,onClick:a}),E=({children:o,title:n,onClose:r,open:m=!1,placement:p="left",destroyOnClose:h=!1,className:b})=>{const g=t();a((()=>(l(m),()=>l(!1))),[m]);const x=()=>{g.current.classList.add("slideOut"),setTimeout((()=>{r()}),800)};return!m&&h?null:e.createElement(i,null,e.createElement(s,{className:b,open:m},e.createElement(w,{open:m,onClickOutside:x}),e.createElement(d,{open:m,placement:p,ref:g,hasTitle:Boolean(n)},e.createElement("div",{className:"title"},n&&e.createElement(u,{size:"s2",type:"semiBold"},n),e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"close-button",onClick:x},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=>e.stopPropagation()},o&&(e.isValidElement(o)?o:"function"==typeof o?o({internalClose:x}):null)))))},$=({value:t,options:a,className:i,direction:l="horizontal",onChange:n,isDisabled:r,siteType:s})=>{const[d,c]=o(t),h="marryBaby"===s;return e.createElement(m,{className:i,"data-direction":l},a.map(((a,o)=>e.createElement(p,{"data-selected":(t||d)===a.value,"data-is-mb":h,"data-disabled":r,key:o,onClick:()=>{var e;e=a.value,r||(c(e),n&&n(e))}},e.createElement("div",null,a.content,a.label&&e.createElement(e.Fragment,null,h?e.createElement(C,{type:"subtitle-2",color:(t||d)===a.value?v.mbColors.dark:v.mbColors.midGray},a.label):e.createElement(u,{type:"bold",color:(t||d)===a.value?"#2D87F3":"black",className:"radio-group-item-heading",size:"label1"},a.label)))))))},k="hhgcomp-modal-modal",B=h(g.div`
+  position: relative;
+  z-index: 200;
+  background-color: ${e=>e.theme.colors.white};
+  border-radius: ${e=>e.theme.borderRadius};
+  box-shadow: 0px 4px 8px ${e=>e.theme.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;
+  }
+`,k),j=g.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 {
+    .${k} {
+      transform: translate(0, -100vh);
+      transition: all 0.5s ease;
+    }
+
+    &[data-open='true'] {
+      .${k} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    .${k} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      .${k} {
+        transition: all 0.3s ease-out;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    .${k} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    .${k} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${n.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    .${k} {
+      height: 100%;
+      max-height: 539px;
+      ${n.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${e=>e.theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    .${k} {
+      width: 100%;
+      max-width: 407px;
+      ${n.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`,z=g.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${e=>e.theme.colors.secondaryDark};
+  }
+`,G=g.div`
+  & > :not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  .gender-selector {
+    & > :not(:last-child) {
+      margin-right: 16px;
+    }
+
+    & > div {
+      width: calc(50% - 8px);
+
+      ${n.mbUp} {
+        justify-self: left;
+      }
+    }
+  }
+`,L=g($)`
+  & > 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;
+  }
+`,T=({value:t,onChange:a,siteType:o})=>{const{t:i}=x(),l="marryBaby"==o;return e.createElement(G,{"data-is-marryBaby":l},l?e.createElement(f,{type:"h4",color:v.mbColors.dark},i("babyVaccineTool.selectGender")):e.createElement(u,{size:"label2",type:"bold",style:{marginBottom:"0.5rem"}},i("babyVaccineTool.selectGender")),e.createElement(L,{siteType:o,options:[{value:y.Boy,label:i("gender.male"),content:l?e.createElement(b.BabyBoyMB,null):e.createElement(b.GenderChooseBoy,null)},{value:y.Girl,label:i("gender.female"),content:l?e.createElement(b.BabyGirlMB,null):e.createElement(b.GenderChooseGirl,null)}],value:t,onChange:a,className:"gender-selector"}))};export{T as B,E as D,$ as R,j as S,z as a,B as b};

package/build/esm/{index-87c0e77d.js → index-757566c2.js}

@@ -1 +1 @@
-import{_ as e}from"./tslib.es6-53c155ba.js";import l,{createContext as n,useContext as r,useRef as i,useState as t,useEffect as o}from"react";import{Carousel as s}from"@mantine/carousel";import{createStyles as d}from"@mantine/core";import{useViewportSize as c,useResizeObserver as a}from"@mantine/hooks";const u=s.Slide,v=n({}),m=(e,l)=>e>=l?e-l:e,h=n=>{var{children:r,blurFromCenter:u,blurFromIndex:h,blurLength:p=3,maxBlurOpacity:S=.5,onSlideChange:g,selectSlideWhenClick:f}=n,y=e(n,["children","blurFromCenter","blurFromIndex","blurLength","maxBlurOpacity","onSlideChange","selectSlideWhenClick"]);const{width:b}=c(),[C]=a(),k=i(null),[x,O]=t(0),I=()=>{var e,l,n,r,i;const t=(null===(e=null==k?void 0:k.current)||void 0===e?void 0:e.slideNodes())||[];if((null===(l=null==k?void 0:k.current)||void 0===l?void 0:l.slideNodes().length)<=(null===(n=null==k?void 0:k.current)||void 0===n?void 0:n.slidesInView().length))return t.map((e=>{e.classList.remove("center-slide"),e.style.opacity="1"})),!1;const o=null===(r=null==k?void 0:k.current)||void 0===r?void 0:r.selectedScrollSnap();O(o);const s=t.length,d=(null===(i=null==k?void 0:k.current)||void 0===i?void 0:i.slidesInView()).length,c=Math.floor(d/2),a=u?h+p-1:c,v=o+a,g=v===s?0:v>s?v-s:v,f=o-a,y=f<0?s+f:f>0?o-a:0,b=[...new Set(Array(2*a+1).fill("").map(((e,l)=>m(y+l,s))))];t.map(((e,l)=>{if(l===o?e.classList.add("center-slide"):e.classList.remove("center-slide"),-1!==b.indexOf(l)){const i=S/p;for(let t=0;t<p;t++){if(l===m(y+t,s)||l===(r=s,(n=g-t)<0?r+n:n)){e.style.opacity=String((t+1)*i);break}e.style.opacity="1"}}else e.style.opacity="0";var n,r}))},j={getEmblaApi:e=>{k.current=e},onSlideChange:e=>{I(),null==g||g(e)}};o((()=>{(null==k?void 0:k.current)&&I()}),[b]);const w=d((()=>{var e,l;return{control:Object.assign({},(null===(e=null==k?void 0:k.current)||void 0===e?void 0:e.slideNodes().length)<=(null===(l=null==k?void 0:k.current)||void 0===l?void 0:l.slidesInView().length)&&{display:"none"})}})),{classes:E}=w();return l.createElement(v.Provider,{value:{slider:null==k?void 0:k.current,centerSlide:x,selectSlideWhenClick:f}},l.createElement(s,Object.assign({classNames:{control:E.control},ref:C,slideSize:"auto",containScroll:"trimSnaps"},j,y,{loop:!0}),"function"==typeof r?r(x):r))};h.Slide=n=>{var{children:s,onClick:d,innerSlideProps:c}=n,a=e(n,["children","onClick","innerSlideProps"]);const{slider:m,selectSlideWhenClick:h}=r(v),p=i(),S=i(""),[g,f]=t(0);o((()=>{S.current=String(Math.round(1e4*Math.random()))}),[]),o((()=>{const e=(null==m?void 0:m.slideNodes())||[];f(e.findIndex((e=>e.dataset.key===S.current)))}),[m]);const y={ref:p,"data-key":S.current,"data-index":g};return l.createElement(u,Object.assign({},y,a),l.createElement("div",Object.assign({style:{height:"100%"},onClick:()=>{h&&(null==m||m.scrollTo(g)),null==d||d(g)}},c),s))};export{h as C};
+import{_ as e}from"./tslib.es6-01783790.js";import l,{createContext as n,useContext as r,useRef as i,useState as t,useEffect as o}from"react";import{Carousel as s}from"@mantine/carousel";import{createStyles as d}from"@mantine/core";import{useViewportSize as c,useResizeObserver as a}from"@mantine/hooks";const u=s.Slide,v=n({}),m=(e,l)=>e>=l?e-l:e,h=n=>{var{children:r,blurFromCenter:u,blurFromIndex:h,blurLength:p=3,maxBlurOpacity:S=.5,onSlideChange:g,selectSlideWhenClick:f}=n,y=e(n,["children","blurFromCenter","blurFromIndex","blurLength","maxBlurOpacity","onSlideChange","selectSlideWhenClick"]);const{width:b}=c(),[C]=a(),k=i(null),[x,O]=t(0),I=()=>{var e,l,n,r,i;const t=(null===(e=null==k?void 0:k.current)||void 0===e?void 0:e.slideNodes())||[];if((null===(l=null==k?void 0:k.current)||void 0===l?void 0:l.slideNodes().length)<=(null===(n=null==k?void 0:k.current)||void 0===n?void 0:n.slidesInView().length))return t.map((e=>{e.classList.remove("center-slide"),e.style.opacity="1"})),!1;const o=null===(r=null==k?void 0:k.current)||void 0===r?void 0:r.selectedScrollSnap();O(o);const s=t.length,d=(null===(i=null==k?void 0:k.current)||void 0===i?void 0:i.slidesInView()).length,c=Math.floor(d/2),a=u?h+p-1:c,v=o+a,g=v===s?0:v>s?v-s:v,f=o-a,y=f<0?s+f:f>0?o-a:0,b=[...new Set(Array(2*a+1).fill("").map(((e,l)=>m(y+l,s))))];t.map(((e,l)=>{if(l===o?e.classList.add("center-slide"):e.classList.remove("center-slide"),-1!==b.indexOf(l)){const i=S/p;for(let t=0;t<p;t++){if(l===m(y+t,s)||l===(r=s,(n=g-t)<0?r+n:n)){e.style.opacity=String((t+1)*i);break}e.style.opacity="1"}}else e.style.opacity="0";var n,r}))},j={getEmblaApi:e=>{k.current=e},onSlideChange:e=>{I(),null==g||g(e)}};o((()=>{(null==k?void 0:k.current)&&I()}),[b]);const w=d((()=>{var e,l;return{control:Object.assign({},(null===(e=null==k?void 0:k.current)||void 0===e?void 0:e.slideNodes().length)<=(null===(l=null==k?void 0:k.current)||void 0===l?void 0:l.slidesInView().length)&&{display:"none"})}})),{classes:E}=w();return l.createElement(v.Provider,{value:{slider:null==k?void 0:k.current,centerSlide:x,selectSlideWhenClick:f}},l.createElement(s,Object.assign({classNames:{control:E.control},ref:C,slideSize:"auto",containScroll:"trimSnaps"},j,y,{loop:!0}),"function"==typeof r?r(x):r))};h.Slide=n=>{var{children:s,onClick:d,innerSlideProps:c}=n,a=e(n,["children","onClick","innerSlideProps"]);const{slider:m,selectSlideWhenClick:h}=r(v),p=i(),S=i(""),[g,f]=t(0);o((()=>{S.current=String(Math.round(1e4*Math.random()))}),[]),o((()=>{const e=(null==m?void 0:m.slideNodes())||[];f(e.findIndex((e=>e.dataset.key===S.current)))}),[m]);const y={ref:p,"data-key":S.current,"data-index":g};return l.createElement(u,Object.assign({},y,a),l.createElement("div",Object.assign({style:{height:"100%"},onClick:()=>{h&&(null==m||m.scrollTo(g)),null==d||d(g)}},c),s))};export{h as C};