@lanaco/lnc-react-ui/dist/CalorieCalculatorSection.cjs

React component library

"use strict";const e=require("react/jsx-runtime"),o=require("react"),b=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),y=require("./consts-CtNoHdBj.cjs"),z=require("./Button.cjs"),I=require("./index-BPVoEhTF.cjs"),L=require("./RangeSlider.cjs"),F=require("./DropdownItem.cjs"),X=require("./DropdownMenu.cjs"),Z=require("./IconButton.cjs"),V=require("./BannerSectionWithList.cjs"),H=require("./utils-NZLCh-J5.cjs"),D=b.newStyled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2.25rem;

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    gap: 2rem;
  }
`,Y=b.newStyled.div`
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 0.25rem;

  & .header-title {
    font-size: 1.5rem;
    font-weight: 600;
  }

  & .header-subtitle {
    color: var(--gray-600, #676e79);
    font-size: 1rem;
    font-weight: 500;
  }

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
  }
`;b.newStyled.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;

  & .subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600, #676e79);
  }
`;const K=b.newStyled.div`
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  align-items: center;

  & .btns-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    & button {
      width: 20rem;
      max-width: 20rem;
    }
  }

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    gap: 2rem;
    & .btns-footer {
      width: 100%;
      align-items: center;
      & button {
        width: 100%;
        max-width: 13.75rem;
      }
    }
  }
`,J=b.newStyled.div`
  display: grid;
  grid-template-columns: auto auto;
  width: fit-content;
  gap: 0.5rem;
  align-items: center;

  & .lnc-ui-button {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  & .caluclating-group {
    display: flex;
    align-items: center;
    gap: 0.625rem;

    & .range-input-lnc {
      width: 22.75rem;
    }

    & .calculating-btn {
      min-width: 4.5rem;
      max-width: 4.5rem;
    }

    & .calculating-input {
      min-height: 2.25rem;
      max-height: 2.25rem;
      min-width: 4.5rem;
      max-width: 4.5rem;
      padding: 0.38rem;
      border-radius: 0.5rem;
      border: 1px solid var(--gray-95012, rgba(20, 22, 26, 0.12));
      background: var(--white, #fff);
      text-align: center;
    }
  }

  & .btn-cnt {
    display: flex;
    align-items: center;
    gap: 0.38rem;

    & i {
      font-size: 1.5rem;
    }
  }

  & .grid-label {
    font-weight: 600;
    font-size: 1rem;
    min-width: 10rem;
    padding-top: 0.75rem;

    & .unit {
      font-weight: 400;
      color: var(--gray-600, #676e79);
    }
  }

  & .grid-label:first-of-type {
    padding-top: 0 !important;
  }

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    gap: 0.25rem;
    grid-template-columns: auto;

    & .grid-label {
      font-size: 1rem;
    }
    & .caluclating-group {
      flex-wrap: wrap;
      gap: 1rem;
      & .range-input-lnc {
        width: unset;
        flex: 1;
      }
    }

    & .group-activity {
      button {
        width: 100%;
      }
    }

    & .grid-label {
      min-width: unset;
    }
  }
`,Q=b.newStyled.div`
  border-radius: 0.75rem;
  border: 1px solid var(--neutral-95008);
  background: var(--white);
  padding: 1.25rem;
  /* drop-shadow */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);

  display: flex;
  padding: 1.25rem;
  align-items: center;
  gap: 1rem;

  & .dropdown-group {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  & .vertical-line {
    width: 1px;
    height: 4rem;
    background-color: var(--gray-95008);
    margin: 0 0.62rem;
  }

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    padding: 0.75rem;
    gap: 0.75rem;

    & .vertical-line {
      height: 100%;
      min-height: 5.25rem;
    }

    & .dropdown-group {
      gap: 0.75rem;
      align-items: start;
    }
  }
`,U=b.newStyled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  flex: 1;

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
`,k=b.newStyled.div`
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 7.125rem;
  align-items: center;
  text-align: center;
  font-weight: 600;
  font-size: 1.375rem;

  & .subgroup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  & .subtext {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-600, #676e79);
  }

  & i {
    color: ${c=>c.color};
    font-size: 3rem;
  }

  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
    flex-direction: row;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    align-items: start;

    & i {
      font-size: 1.75rem;
    }

    & .subtext {
      font-size: 0.75rem;
      font-weight: 400;
    }
    & .subgroup {
      gap: 0;
    }
  }
`,ee=b.newStyled.label`
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: var(--white, #fff);
  border-radius: 30px;
  user-select: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: var(--gray-950, #14161A);
  transition: background-color 0.3s;
  min-height: 2.5rem;
  max-height: 2.5rem;
  font-size: 1rem;
  font-weight: 50;
  width: fit-content;

  & i {
    font-size: 1rem;
  }

  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .knob {
    position: absolute;
    top: 0;
    bottom: 0;
    left: ${c=>c.checked?"3rem":"3px"};
    background: var(--success-600, #059669);
    border-radius: 30px;
    transition: left 0.3s;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    font-weight: normal;
    font-size: 0.9rem;
    color: var(--white, #fff);
    padding: 0 0.75rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    border: 1px solid var(--success-600, #059669);
  }

  .text {
    width: 100%;
    text-align: center;
    pointer-events: none;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--gray-95012, #14161a1f);
    border-radius: 30px;
    min-height: 2.5rem;
    max-height: 2.5rem;

    & .hidden-txt {
      opacity: 0;
    }
  }

  & .cont {
    display: flex;
    align-items: center;
    gap: 0.38rem;
  }
`,E=o.forwardRef((c,v)=>{var g,m,x,p,h,f,N,w;const{onChange:d=()=>{},items:a=[{name:"Male",icon:"mng-lnc-male-02",value:"male"},{name:"Female",value:"female",icon:"mng-lnc-female-02"}],...l}=c,s=e.jsxs("div",{className:"cont",children:[e.jsx("i",{className:(g=a==null?void 0:a.at(0))==null?void 0:g.icon}),e.jsx("span",{children:(m=a==null?void 0:a.at(0))==null?void 0:m.name})]}),n=e.jsxs("div",{className:"cont",children:[e.jsx("span",{children:(x=a==null?void 0:a.at(1))==null?void 0:x.name}),e.jsx("i",{className:(p=a==null?void 0:a.at(1))==null?void 0:p.icon})]}),[t,r]=o.useState(!1),i=u=>{var C,T;r(u.target.checked),d&&d(u.target.checked===!0?(C=a==null?void 0:a.at(1))==null?void 0:C.value:(T=a==null?void 0:a.at(0))==null?void 0:T.value)};return e.jsxs(ee,{ref:v,checked:t,...l,children:[e.jsx("input",{type:"checkbox",checked:t,onChange:i}),e.jsx("span",{className:"knob",children:t?n:s}),e.jsxs("span",{className:"text",children:[e.jsxs("div",{className:"cont",children:[e.jsx("i",{className:(h=a==null?void 0:a.at(0))==null?void 0:h.icon}),t===!0&&e.jsx("span",{className:"hidden-txt",children:(f=a==null?void 0:a.at(0))==null?void 0:f.name})]}),e.jsxs("div",{className:"cont",children:[t!==!0&&e.jsx("span",{className:"hidden-txt",children:(N=a==null?void 0:a.at(1))==null?void 0:N.name}),e.jsx("i",{className:(w=a==null?void 0:a.at(1))==null?void 0:w.icon})]})]})]})});E.propTypes={value:I.PropTypes.any,handleClick:I.PropTypes.func,color:I.PropTypes.string};const te=o.forwardRef((c,v)=>{var w;const{yearsText:d,heightText:a,weightText:l,genderText:s="Gender",calculateText:n="Calculate",closeText:t="Close calculator",onClose:r=()=>{},genders:i=[{name:"Male",icon:"mng-lnc-male-02",value:"male"},{name:"Female",value:"female",icon:"mng-lnc-female-02"}],activityLevels:g=[{name:"Very low",code:"veryLow"},{name:"Moderate",code:"moderate"},{name:"Very active",code:"veryActive"}],activityLevelText:m,goalText:x,goals:p=[{name:"Lose weight",code:"loseWeight",icon:"mng-lnc-weight-scale"},{name:"Maintaining",code:"maintaining",icon:"mng-lnc-move"},{name:"Gain muscle",code:"gainMuscle",icon:"mng-lnc-muscule"}],onCalculate:h=()=>{}}=c,f=o.useRef({year:null,height:null,weight:null,gender:(w=i==null?void 0:i.at(0))==null?void 0:w.value,activityLevel:null,goal:null}),N=()=>{h==null||h(f==null?void 0:f.current)};return e.jsxs(K,{children:[e.jsxs(J,{className:"calorie-calculating",children:[e.jsx("div",{className:"grid-label",children:s}),e.jsx("div",{children:e.jsx(E,{items:i,onChange:u=>f.current.gender=u})}),e.jsx(ae,{text:d,onChange:u=>f.current.year=u}),e.jsx(ne,{text:a,onChange:u=>f.current.height=u}),e.jsx(re,{text:l,onChange:u=>f.current.weight=u}),e.jsx(ie,{text:m,activityLevels:g,onChange:u=>f.current.activityLevel=u}),e.jsx(le,{text:x,goals:p,onChange:u=>f.current.goal=u})]}),e.jsxs("div",{className:"btns-footer",children:[e.jsx(z,{type:"button",color:"neutral",size:"medium",onClick:()=>{N()},children:n}),e.jsx(z,{type:"button",btnType:"basic",color:"gray",size:"medium",onClick:()=>r==null?void 0:r(),children:t})]})]})}),ae=o.forwardRef((c,v)=>{const{text:d="Years",onChange:a=()=>{}}=c,[l,s]=o.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"grid-label",children:d}),e.jsxs("div",{className:"caluclating-group",children:[e.jsx(L,{className:"range-input-lnc",max:115,min:0,step:1,value:l,color:"success",defaultValue:0,onChange:n=>{var t,r;s((t=n==null?void 0:n.target)==null?void 0:t.value),a==null||a((r=n==null?void 0:n.target)==null?void 0:r.value)}}),e.jsx("input",{tabIndex:2,type:"text",className:"calculating-input",onChange:n=>{var t,r,i,g,m,x,p;!isNaN((t=n==null?void 0:n.target)==null?void 0:t.value)&&+((r=n==null?void 0:n.target)==null?void 0:r.value)>=0&&s(((g=(i=n==null?void 0:n.target)==null?void 0:i.value)==null?void 0:g.length)>1?(x=(m=n==null?void 0:n.target)==null?void 0:m.value)==null?void 0:x.replace(/^0+/,""):(p=n==null?void 0:n.target)==null?void 0:p.value)},value:l==null?void 0:l.toString()})]})]})}),ne=o.forwardRef((c,v)=>{const{text:d="Height",unitText:a="cm",onChange:l=()=>{}}=c,[s,n]=o.useState(1);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"grid-label",children:[d," ",e.jsx("span",{className:"unit",children:`(${a})`})]}),e.jsxs("div",{className:"caluclating-group",children:[e.jsx(L,{className:"range-input-lnc",max:273,min:0,step:1,value:s,defaultValue:0,color:"success",onChange:t=>{var r,i;n((r=t==null?void 0:t.target)==null?void 0:r.value),l==null||l((i=t==null?void 0:t.target)==null?void 0:i.value)}}),e.jsx("input",{type:"text",tabIndex:2,className:"calculating-input",onChange:t=>{var r,i,g,m,x,p,h;!isNaN((r=t==null?void 0:t.target)==null?void 0:r.value)&&+((i=t==null?void 0:t.target)==null?void 0:i.value)>=0&&n(((m=(g=t==null?void 0:t.target)==null?void 0:g.value)==null?void 0:m.length)>1?(p=(x=t==null?void 0:t.target)==null?void 0:x.value)==null?void 0:p.replace(/^0+/,""):(h=t==null?void 0:t.target)==null?void 0:h.value)},value:s==null?void 0:s.toString()})]})]})}),re=o.forwardRef((c,v)=>{const{text:d="Weight",unitText:a="cm",onChange:l=()=>{}}=c,[s,n]=o.useState(1);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"grid-label",children:[d," ",e.jsx("span",{className:"unit",children:`(${a})`})]}),e.jsxs("div",{className:"caluclating-group",children:[e.jsx(L,{className:"range-input-lnc",max:400,min:0,step:1,value:s,color:"success",defaultValue:0,onChange:t=>{var r,i;n((r=t==null?void 0:t.target)==null?void 0:r.value),l==null||l((i=t==null?void 0:t.target)==null?void 0:i.value)}}),e.jsx("input",{tabIndex:2,type:"text",className:"calculating-input",onChange:t=>{var r,i,g,m,x,p,h;!isNaN((r=t==null?void 0:t.target)==null?void 0:r.value)&&+((i=t==null?void 0:t.target)==null?void 0:i.value)>=0&&n(((m=(g=t==null?void 0:t.target)==null?void 0:g.value)==null?void 0:m.length)>1?(p=(x=t==null?void 0:t.target)==null?void 0:x.value)==null?void 0:p.replace(/^0+/,""):(h=t==null?void 0:t.target)==null?void 0:h.value)},value:s==null?void 0:s.toString()})]})]})}),ie=o.forwardRef((c,v)=>{const{text:d="Activity level",activityLevels:a,onChange:l=()=>{}}=c,[s,n]=o.useState(null);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"grid-label",children:d}),e.jsx("div",{className:"caluclating-group",children:a==null?void 0:a.map((t,r)=>e.jsx(z,{type:"button",btnType:s===(t==null?void 0:t.code)?"filled":"tinted",color:"neutral",borderRadius:"curved",onClick:()=>{n(t==null?void 0:t.code),l(t==null?void 0:t.code)},children:t==null?void 0:t.name},r))})]})}),le=o.forwardRef((c,v)=>{const{text:d="Goal",goals:a,onChange:l=()=>{}}=c,[s,n]=o.useState(null);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"grid-label",children:d}),e.jsx("div",{className:"caluclating-group group-activity",children:a==null?void 0:a.map((t,r)=>e.jsx(z,{type:"button",btnType:s===(t==null?void 0:t.code)?"filled":"tinted",color:"neutral",borderRadius:"curved",onClick:()=>{n(t==null?void 0:t.code),l(t==null?void 0:t.code)},children:e.jsxs("div",{className:"btn-cnt",children:[e.jsx("i",{className:t==null?void 0:t.icon}),e.jsx("span",{children:t==null?void 0:t.name})]})},r))})]})}),se=o.forwardRef((c,v)=>{const{caloriesText:d="Calories",carbsText:a="Carbs",proteinText:l="Protein",fatsText:s="Fats",calculateAgainText:n="Calculate again",calories:t,carbs:r,protein:i,fats:g,onGoBack:m=()=>{}}=c;return e.jsxs(Q,{children:[e.jsxs(U,{children:[e.jsxs(k,{color:"var(--warning-600)",children:[e.jsx("i",{className:"mng-lnc-fire"}),e.jsxs("div",{className:"subgroup",children:[e.jsxs("div",{children:[t," kcal"]}),e.jsx("div",{className:"subtext",children:d})]})]}),e.jsxs(k,{color:"var(--secondary-400)",children:[e.jsx("i",{className:"mng-lnc-leaf"}),e.jsxs("div",{className:"subgroup",children:[e.jsxs("div",{children:[r,"g"]}),e.jsx("div",{className:"subtext",children:a})]})]}),e.jsxs(k,{color:"var(--info-500)",children:[e.jsx("i",{className:"mng-lnc-meat"}),e.jsxs("div",{className:"subgroup",children:[e.jsxs("div",{children:[i,"g"]}),e.jsx("div",{className:"subtext",children:l})]})]}),e.jsxs(k,{color:"var(--warning-300)",children:[e.jsx("i",{className:"mng-lnc-meat"}),e.jsxs("div",{className:"subgroup",children:[e.jsxs("div",{children:[g,"g"]}),e.jsx("div",{className:"subtext",children:s})]})]})]}),e.jsxs("div",{className:"dropdown-group",children:[e.jsx("div",{className:"vertical-line"}),e.jsx(X,{color:"neutral",control:e.jsx(Z,{borderRadius:"curved",btnType:"basic",className:"dropdown-btn",color:"neutral",icon:"ellipsis",type:"button"}),offsetValue:-10,placement:"bottom-end",children:e.jsx(F,{icon:"star",onClick:m,children:n})})]})]})}),ce=o.forwardRef((c,v)=>{const{caloriesText:d,carbsText:a,proteinText:l,fatsText:s,calculateAgainText:n,yearsText:t,heightText:r,weightText:i,genderText:g,calculateText:m,closeText:x,genders:p,activityLevels:h,activityLevelText:f,goalText:N,goals:w,title:u="Daily calorie calculator",subtitle:C="Lorem ipsum dolor sit amet",list:T=["Ovdje može pisati zašto je bitno da znamo kolika nam je dnevna kalorijska potreba.","Ovdje može pisati zašto je bitno da znamo kolikanam je dnevna kalorijska potreba.","From certified dealers from all over Europe"],buttonText:_="Calculate calorie needs"}=c,[R,S]=o.useState(1),[j,B]=o.useState(0),M=({gender:q,year:O,height:P,weight:W,activityLevel:$,goal:A})=>{const G=H.calculateCalories({gender:q,age:O,heightCm:P,weightKg:W,activityLevel:$,goal:A});B(G),S(3)};return e.jsxs(D,{ref:v,children:[e.jsxs(Y,{children:[e.jsx("div",{className:"header-title",children:u}),e.jsx("div",{className:"header-subtitle",children:C})]}),R===1&&e.jsx(V,{buttonText:_,onButtonAction:()=>{S(2)},list:T}),R===2&&e.jsx(te,{yearsText:t,heightText:r,weightText:i,genderText:g,calculateText:m,closeText:x,onClose:()=>S(1),genders:p,activityLevels:h,activityLevelText:f,goalText:N,goals:w,onCalculate:M}),R===3&&e.jsx(se,{caloriesText:d,carbsText:a,proteinText:l,fatsText:s,calculateAgainText:n,onGoBack:()=>S(2),calories:j==null?void 0:j.calories,fats:j==null?void 0:j.fat,carbs:j==null?void 0:j.carbs,protein:j==null?void 0:j.protein})]})}),oe=o.forwardRef((c,v)=>e.jsx(ce,{ref:v,...c}));module.exports=oe;