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

React component library

"use strict";const t=require("react/jsx-runtime"),d=require("react"),b=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),y=require("./breakpoints-CcVm-gVm.cjs"),z=require("./Button.cjs"),L=require("./RangeSlider.cjs"),H=require("./DropdownItem.cjs"),O=require("./DropdownMenu.cjs"),D=require("./IconButton.cjs"),E=require("./BannerSectionWithList.cjs"),Y=require("./utils-BK6B_Y9X.cjs"),_=b.styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2.25rem;

  @media ${y.down("S")} {
    gap: 2rem;
  }
`,K=b.styled.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 ${y.down("S")} {
  }
`;b.styled.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 P=b.styled.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 ${y.down("S")} {
    gap: 2rem;
    & .btns-footer {
      width: 100%;
      align-items: center;
      & button {
        width: 100%;
        max-width: 13.75rem;
      }
    }
  }
`,J=b.styled.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 ${y.down("S")} {
    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.styled.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 ${y.down("S")} {
    padding: 0.75rem;
    gap: 0.75rem;

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

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

  @media ${y.down("S")} {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
`,S=b.styled.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 ${y.down("S")} {
    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;
    }
  }
`,X=b.styled.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?"4.6875rem":"0"};
    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);

    & .cont {
      min-width: 6.25rem;
    }
  }

  & .cont {
    min-width: 4.6875rem;
    justify-content: center;
  }

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