@zeniai/web-components 3.17.11 → 3.17.12

package/dist/FollowStepsSection-CXsT3UyJ.cjs

@@ -0,0 +1,390 @@
+"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),a=require("@emotion/styled"),t=require("./index-CDBWihyC.cjs"),T=require("react"),S={width:new t.ResponsiveSized(343,580,726),height:new t.ResponsiveSized(t.sp[6],t.sp[6]),controlHeight:new t.ResponsiveSized(t.sp[6],t.sp[6]),paddingLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),paddingTop:new t.ResponsiveSized(t.sp[3],t.sp[3]),paddingBottom:new t.ResponsiveSized(t.sp[3],t.sp[2]),marginTop:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginTop:new t.ResponsiveSized(t.sp[2],t.sp[2])};function Y({isDisabled:e,label:l,firstText:s,secondText:p,style:y,isFieldError:v}){const g=t.useWindowSizeContext(),{formState:{errors:w}}=o.useFormContext(),m=o.has(w,s.name),j=o.has(w,p.name),r=o.useTheme();return o.jsxRuntimeExports.jsxs(ee,{size:g,style:y,isDisabled:e!=null,isErrorFirstText:m,isErrorSecondText:j,"data-testid":t.generateDataTestId("labeled-multi-text-field",s.name),children:[o.jsxRuntimeExports.jsx(t.Label,{isDisabled:e,label:l.label,style:{marginRight:S.labelMarginRight.value(g),width:l.width??"auto",color:r.colors.champion}}),o.jsxRuntimeExports.jsxs(te,{labelWidth:l.width,children:[o.jsxRuntimeExports.jsxs(A,{className:"firstField",isDisabled:s.isDisabled,children:[o.jsxRuntimeExports.jsx(t.FormattedTextField,{type:s.type,name:s.name,placeholder:s.placeholder,prefix:"$",allowNegative:!1,isNumericString:!1,inputMode:"numeric",returnValueType:"floatValue",registerOptions:s.options,decimalScale:0,allowLeadingZeros:!1,thousandSeparator:!0,thousandsGroupStyle:"thousand",isDisabled:s.isDisabled?"disabled":void 0,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:S.controlHeight.value(g),cursor:"inherit",backgroundColor:r.colors.grey3,borderRadius:t.Space.sp1,color:r.colors.primary},hoverBgColor:r.colors.background,bgColor:r.colors.background,disabledColor:r.colors.background,isFieldError:v,defaultValue:s.defaultValue}),s.additionalInfoLabel&&s.isDisabled||m&&s.additionalErrorLabel?o.jsxRuntimeExports.jsx(G,{isError:m,children:m?s.additionalErrorLabel:s.additionalInfoLabel}):null]}),p.hideField?null:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsxs(oe,{children:[o.jsxRuntimeExports.jsx(_,{}),o.jsxRuntimeExports.jsx(se,{}),o.jsxRuntimeExports.jsx(_,{})]}),o.jsxRuntimeExports.jsxs(A,{className:"secondField",isDisabled:p.isDisabled,children:[o.jsxRuntimeExports.jsx(t.FormattedTextField,{type:p.type,name:p.name,placeholder:p.placeholder,prefix:"$",allowNegative:!1,isNumericString:!1,inputMode:"numeric",returnValueType:"floatValue",registerOptions:p.options,decimalScale:0,allowLeadingZeros:!1,thousandSeparator:!0,thousandsGroupStyle:"thousand",isDisabled:p.isDisabled?"disabled":void 0,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:S.controlHeight.value(g),cursor:"inherit",backgroundColor:r.colors.grey3,borderRadius:t.Space.sp1,color:r.colors.primary},hoverBgColor:r.colors.background,bgColor:r.colors.background,disabledColor:r.colors.background,isFieldError:v,defaultValue:s.defaultValue}),o.jsxRuntimeExports.jsx(G,{isError:j,children:p.additionalInfoLabel})]})]})]})]})}const ee=a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>S.width.valuePx(e.size)};
+  min-height: ${e=>S.height.valuePx(e.size)};
+  padding-left: ${e=>S.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${e=>S.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${e=>S.paddingTop.valuePx(e.size)};
+  padding-bottom: ${e=>S.paddingBottom.valuePx(e.size)};
+  gap: ${t.Space.sp3};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${e=>e.isErrorFirstText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      input {
+        background-color: ${e=>e.isErrorSecondText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+  }
+  .firstField {
+    input {
+      background-color: ${e=>e.isErrorFirstText?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+
+  .secondField {
+    input {
+      background-color: ${e=>e.isErrorSecondText?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isErrorFirstText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      input {
+        background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isErrorSecondText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+  }
+`,te=a.div`
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  flex-grow: 1;
+  gap: ${t.Space.sp3};
+  input {
+    text-align: left;
+  }
+`,A=a.div`
+  width: inherit;
+  position: relative;
+`,oe=a.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`,se=a.div`
+  width: ${t.Space.sp8};
+  height: 2px;
+  background-color: ${e=>e.theme.colors.primary};
+`,_=a.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${e=>e.theme.colors.primary};
+`,G=a(t.ExtraSmallRegularLabel)`
+  display: flex;
+  color: ${e=>e.isError?t.Colors.important:e.theme.colors.hero};
+  white-space: pre-line;
+  margin-top: ${t.Space.sp1};
+`;function re({isDisabled:e,label:l,firstText:s,secondText:p,style:y,isFieldError:v}){const g=t.useWindowSizeContext(),{formState:{errors:w}}=o.useFormContext(),m=o.has(w,s.name),j=o.has(w,p.name),r=o.useTheme();return o.jsxRuntimeExports.jsxs(ie,{size:g,style:y,isDisabled:e!=null,isErrorFirstText:m,isErrorSecondText:j,children:[o.jsxRuntimeExports.jsx(t.Label,{isDisabled:e,label:l.label,style:{marginRight:S.labelMarginRight.value(g),width:l.width??"auto",color:r.colors.champion}}),o.jsxRuntimeExports.jsxs(le,{labelWidth:l.width,children:[p.hideField?null:o.jsxRuntimeExports.jsxs(ae,{children:[o.jsxRuntimeExports.jsx(J,{}),o.jsxRuntimeExports.jsx(de,{isAdditionalLabel:(!!s.additionalInfoLabel&&s.isDisabled)===!0}),o.jsxRuntimeExports.jsx(J,{})]}),o.jsxRuntimeExports.jsxs(ne,{children:[o.jsxRuntimeExports.jsxs(Z,{className:"firstField",isDisabled:s.isDisabled,children:[o.jsxRuntimeExports.jsx(t.FormattedTextField,{type:s.type,name:s.name,placeholder:s.placeholder,prefix:"$",allowNegative:!1,isNumericString:!1,inputMode:"numeric",returnValueType:"floatValue",registerOptions:s.options,decimalScale:0,allowLeadingZeros:!1,thousandSeparator:!0,thousandsGroupStyle:"thousand",isDisabled:s.isDisabled?"disabled":void 0,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:S.controlHeight.value(g),cursor:"inherit",backgroundColor:r.colors.grey3,borderRadius:t.Space.sp1,color:r.colors.primary},hoverBgColor:r.colors.background,bgColor:r.colors.background,disabledColor:r.colors.background,isFieldError:v,defaultValue:s.defaultValue}),s.additionalInfoLabel&&s.isDisabled||m&&s.additionalErrorLabel?o.jsxRuntimeExports.jsx(K,{isError:m,children:m?s.additionalErrorLabel:s.additionalInfoLabel}):null]}),p.hideField?null:o.jsxRuntimeExports.jsxs(Z,{className:"secondField",isDisabled:p.isDisabled,children:[o.jsxRuntimeExports.jsx(t.FormattedTextField,{type:p.type,name:p.name,placeholder:p.placeholder,prefix:"$",allowNegative:!1,isNumericString:!1,inputMode:"numeric",returnValueType:"floatValue",registerOptions:p.options,decimalScale:0,allowLeadingZeros:!1,thousandSeparator:!0,thousandsGroupStyle:"thousand",isDisabled:p.isDisabled?"disabled":void 0,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:S.controlHeight.value(g),cursor:"inherit",backgroundColor:r.colors.grey3,borderRadius:t.Space.sp1,color:r.colors.primary},hoverBgColor:r.colors.background,bgColor:r.colors.background,disabledColor:r.colors.background,isFieldError:v,defaultValue:s.defaultValue}),o.jsxRuntimeExports.jsx(K,{isError:j,children:p.additionalInfoLabel})]})]})]})]})}const ie=a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>S.width.valuePx(e.size)};
+  min-height: ${e=>S.height.valuePx(e.size)};
+  padding-left: ${e=>S.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${e=>S.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${e=>S.paddingTop.valuePx(e.size)};
+  padding-bottom: ${e=>S.paddingBottom.valuePx(e.size)};
+  gap: ${t.Space.sp3};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${e=>e.isErrorFirstText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      margin-top: ${t.Space.sp3};
+      input {
+        background-color: ${e=>e.isErrorSecondText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+  }
+  .firstField {
+    input {
+      background-color: ${e=>e.isErrorFirstText?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+
+  .secondField {
+    margin-top: ${t.Space.sp3};
+    input {
+      background-color: ${e=>e.isErrorSecondText?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isErrorFirstText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      margin-top: ${t.Space.sp3};
+      input {
+        background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isErrorSecondText?t.Colors.importantLight:e.theme.colors.background};
+      }
+    }
+  }
+`,le=a.div`
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  input {
+    text-align: left;
+  }
+`,ne=a.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,Z=a.div`
+  width: inherit;
+`,ae=a.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-right: ${t.Space.sp4};
+  margin-top: ${t.Space.sp3};
+`,de=a.div`
+  width: 2px;
+  height: ${e=>e.isAdditionalLabel?t.Space.sp10:t.Space.sp7};
+  background-color: ${e=>e.theme.colors.primary};
+`,J=a.div`
+  width: ${t.Space.sp2};
+  height: ${t.Space.sp2};
+  border-radius: 50%;
+  background-color: ${e=>e.theme.colors.primary};
+`,K=a(t.ExtraSmallRegularLabel)`
+  display: flex;
+  color: ${e=>e.isError?t.Colors.important:e.theme.colors.hero};
+  white-space: pre-line;
+  margin-top: ${t.Space.sp1};
+`;function ce(e){return t.useWindowSizeContext()==="small"?o.jsxRuntimeExports.jsx(re,{...e}):o.jsxRuntimeExports.jsx(Y,{...e})}const pe=({allOptions:e,selectedValue:l,name:s,onSelectedValueChanged:p,valueToLabel:y,disable:v=!1,defaultMenuIsOpen:g,placeholderLabel:w})=>{const{formState:{errors:m}}=o.useFormContext(),j=o.has(m,s??""),r=o.useTheme(),[$,E]=T.useState(void 0),[h,M]=T.useState(g),O=d=>d.map(f=>F(f)),F=T.useCallback(d=>({value:d,label:y(d)}),[y]);T.useEffect(()=>{const d=l==null?void 0:F(l);E(d?.label===""?void 0:d)},[l,y,F]);const B=d=>{p(d)},C=r.colors.grey5,I=r.colors.grey5,D=t.textStyles.smallRegular,k=t.textStyles.extraSmallRegular,U={control:(d,{selectProps:f})=>({...d,border:0,height:t.sp[6],backgroundColor:f.menuIsOpen===!0?r.colors.background:j===!0?t.Colors.importantLight:r.colors.background,boxShadow:I,":hover":{fill:r.colors.primary,backgroundColor:r.colors.background,borderColor:"none"},width:"auto",minHeight:"auto",cursor:"pointer"}),container:d=>({...d,backgroundColor:I,width:"100%"}),singleValue:(d,{data:f})=>({...d,alignItems:"center",margin:`${t.Space.sp0}`,height:`${t.Space.sp4}`,color:f.value==="require_approval"?t.Colors.alertDark:t.Colors.successDark,...t.textStyles.standardRegular.cssObject,width:"100%",textOverflow:"ellipsis"}),valueContainer:(d,{selectProps:f})=>({...d,maxWidth:"100%",cursor:"pointer",...k,overflow:"visible",minWidth:"auto",padding:0,display:"flex",justifyContent:f.menuIsOpen===!1?"flex-end":"flex-start",alignItems:"center",flexWrap:"nowrap",paddingLeft:t.Space.sp3,marginRight:t.Space.sp3,width:" -webkit-fill-available"}),menu:d=>({...d,backgroundColor:C,borderRadius:4,boxShadow:`${t.Space.sp0} 2px ${t.Space.sp2} ${r.colors.dropShadowHover}`,whiteSpace:"nowrap",zIndex:10,margin:0,width:"100%",WebkitJustifyContent:"unset",overflow:"hidden"}),menuList:d=>({...d,borderRadius:10}),placeholder:d=>({...d,width:"100%",height:t.sp[4],...t.textStyles.standardRegular.cssObject,color:j===!0?t.Colors.important:r.colors.grey1,display:"flex",justifyContent:"flex-start",alignItems:"center"}),option:(d,{isSelected:f,isFocused:L,isDisabled:z,data:i})=>({...d,...D,height:t.sp[6],color:i.value==="require_approval"?t.Colors.alertDark:t.Colors.successDark,backgroundColor:f||L?r.colors.background:C,cursor:z?"not-allowed":"pointer",borderTop:i.topBorder===!0?`1px solid ${t.Colors.optionBorderLight}`:"none",":hover":{backgroundColor:r.colors.background},":first-div":{width:"100%"},"& label":{flex:1,paddingRight:"10px",cursor:z?"not-allowed":f?"default":"pointer"},zIndex:2}),input:(d,f)=>({color:r.colors.primary,overflow:"hidden",zIndex:2,height:t.sp[4],width:f.selectProps.menuIsOpen?"auto":"0",position:"absolute",display:"flex",alignItems:"center",...t.textStyles.standardRegular.cssObject})};return o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>{M(!1)},children:o.jsxRuntimeExports.jsx(o.StateManagedSelect$1,{isMulti:!1,onChange:d=>{B(d)},minMenuHeight:208,menuPlacement:"auto",menuShouldScrollIntoView:!1,defaultValue:$,value:$,placeholder:w,components:{Option:he,DropdownIndicator:fe,IndicatorSeparator:ye,SingleValue:ue},hideSelectedOptions:!1,styles:U,options:O(e),isClearable:!1,isSearchable:!1,isDisabled:v,defaultMenuIsOpen:h,"data-testid":t.generateDataTestId("single-select",s)},o.nanoid())})},ue=({children:e,...l})=>o.jsxRuntimeExports.jsx(o.components.SingleValue,{...l,children:e}),he=e=>{const{data:l,options:s,isFocused:p,label:y,isSelected:v}=e,g=s.find(m=>m.value===l.value),w=typeof l.label=="string"?l.label:l.value;return o.jsxRuntimeExports.jsxs(o.components.Option,{...e,children:[o.jsxRuntimeExports.jsxs(ge,{"data-testid":t.generateDataTestId("single-select-option",w),children:[o.jsxRuntimeExports.jsxs(me,{children:[o.jsxRuntimeExports.jsx("label",{children:y}),p===!0&&g?.id!=null&&o.jsxRuntimeExports.jsx(xe,{children:g.id})]}),v?o.jsxRuntimeExports.jsx(be,{children:o.jsxRuntimeExports.jsx(Se,{className:"tick-icon"})}):null]}),g.additionalInfo!==""&&o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{children:g.additionalInfo})]})},ge=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`,me=a.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`,xe=a.div`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 1px 6px;
+  height: 20px;
+  border: 1px solid ${e=>e.theme.colors.primary};
+  border-radius: ${t.Space.sp1};
+  margin: 0 ${t.Space.sp5} 0 ${t.Space.sp3};
+`,be=a.div`
+  display: flex;
+`,Se=a(t.SvgTick)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.primary};
+`,fe=()=>null,ye=()=>null,ve=({name:e,registerOptions:l,value:s,isDisabled:p,defaultMenuIsOpen:y,placeholderLabel:v})=>{const{control:g}=o.useFormContext(),w=s.allOptions.map(r=>r.value??""),m=r=>s.allOptions.filter(E=>E.value===r)[0]?.label??"",j=r=>s.allOptions.find($=>$.value===r.value)?.value;return o.jsxRuntimeExports.jsx(o.Controller,{name:e,control:g,defaultValue:s,rules:l,"data-testid":t.generateDataTestId("single-select-field",e),render:({field:{value:r,onChange:$}})=>o.jsxRuntimeExports.jsx(pe,{allOptions:w,onSelectedValueChanged:E=>{$({allOptions:s.allOptions,selectedOption:j(E)})},valueToLabel:E=>m(E),selectedValue:r.selectedOption,disable:p,name:e,defaultMenuIsOpen:y,placeholderLabel:v})})},Q=T.memo(ve,(e,l)=>o.isEqual(e,l)),R={width:new t.ResponsiveSized(343,580,726),height:new t.ResponsiveSized(t.sp[6],t.sp[6]),controlHeight:new t.ResponsiveSized(t.sp[6],t.sp[6]),paddingLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),paddingTopBottom:new t.ResponsiveSized(t.sp[3],t.sp[3]),marginTop:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginTop:new t.ResponsiveSized(t.sp[2],t.sp[2])},P=(e,l)=>`${e}.${l}`;function we({label:e,isDisabled:l,sectionId:s,style:p,approversPlaceholder:y,notifiersPlaceholder:v,userSelectPlaceholder:g,approveNotifyPlaceholder:w,allUserWithRoles:m,filteredApprovers:j,allAttributes:r,filteredAttributes:$,allAccountingClasses:E,stepsInfo:h,productType:M}){const O=t.useWindowSizeContext(),{commonSetUp:{approval:F}}=t.appLocale.getLocalizedStrings(),B=j.length+$.length,C=m.map(i=>i.user),{control:I,setValue:D}=o.useFormContext(),{fields:k,replace:U}=o.useFieldArray({name:s,control:I}),d=()=>{const i=h[h.length-1].stepIndex,u=X(i+1,C,r);D(s,[...h,u])},f=i=>{const u=h.filter((n,c)=>c!==i);D(s,u)};T.useEffect(()=>{const i=k.map(n=>{const{actors:c,stepType:b}=n;return{selectedUsers:c.selectedUsers.map(x=>x.userId),selectedNonUsers:c.selectedNonUsers,selectedOption:b.selectedOption}}),u=h.map(n=>{const{actors:c,stepType:b}=n;return{selectedUsers:c.selectedUsers.map(x=>x.userId),selectedNonUsers:c.selectedNonUsers,selectedOption:b.selectedOption}});if(!o.isEqual(i,u)){const n=h.map((c,b)=>({actors:{selectedUsers:c.actors.selectedUsers,selectedNonUsers:c.actors.selectedNonUsers,allUsers:C,allNonUsers:W(r)},stepIndex:b,stepType:{selectedOption:c.stepType.selectedOption,allOptions:V}}));U(n)}},[C,h,k,U,r]);const L=h[h.length-1],z=l!=null||B===0||L.actors.selectedUsers.length+L.actors.selectedNonUsers.length===0||!L.stepType.selectedOption;return o.jsxRuntimeExports.jsxs(je,{size:O,style:p,isDisabled:!1,isError:!1,children:[o.jsxRuntimeExports.jsx(t.Label,{label:e.label,style:{marginRight:R.labelMarginRight.value(O),width:"auto"}}),h.map((i,u)=>o.jsxRuntimeExports.jsxs(Re,{labelWidth:e.width,children:[o.jsxRuntimeExports.jsxs(Le,{children:[u+1,"."]}),o.jsxRuntimeExports.jsx(Ce,{children:o.jsxRuntimeExports.jsx(Q,{name:P(`${s}.${i.stepIndex}`,"stepType"),value:i.stepType,isDisabled:u===0,defaultMenuIsOpen:u===1&&i.stepType.selectedOption==null,registerOptions:{required:!0,validate:n=>n!=null&&n.selectedOption!=null||l!=null},placeholderLabel:w})}),o.jsxRuntimeExports.jsxs(ke,{children:[o.jsxRuntimeExports.jsx(t.UserMultiSelectField,{hideEmailTooltip:!1,shouldHaveBackgroundColor:!0,showBackgroundColorIfHasAnySelectedOption:!0,placeholderLabel:i.stepType.selectedOption==null?g:i.stepType.selectedOption==="require_approval"?y:v,name:P(`${s}.${i.stepIndex}`,"actors"),value:i.actors,operator:i.stepType!=null&&i.stepType.selectedOption==="require_approval"?"or":"and",registerOptions:{required:!0,validate:n=>n!=null&&(n.selectedUsers!=null&&n.selectedUsers.length>0||n.selectedNonUsers!=null&&n.selectedNonUsers.length>0)||l!=null},valueToSubtitle:n=>{const c=m.map(x=>x.role).find(x=>x?.userId===n),b=[];if(c!=null){const x=t.getSingleRoleInOrder(c.userRoles,M);x.length>0&&b.push(x),c.accountingClassIDs.forEach(q=>{const N=E.find(H=>H.classId===q);N!=null&&N.className&&b.push(N.className)})}return b}}),i.stepIndex>0&&o.jsxRuntimeExports.jsx($e,{onClick:()=>f(u)})]})]},k[u]?.id||u)),o.jsxRuntimeExports.jsx(Ee,{disabled:z,children:o.jsxRuntimeExports.jsx(t.Button,{onClick:d,style:{padding:`${t.Space.sp1} ${t.Space.sp2}`,borderRadius:t.Space.sp1},label:F.addStep,size:"small",disabled:z,"data-testid":t.generateDataTestId("add-step-button-web")})})]})}const X=(e,l,s)=>({stepIndex:e,actors:{allUsers:l,selectedUsers:[],allNonUsers:W(s),selectedNonUsers:[]},stepType:{allOptions:V,selectedOption:void 0}}),W=e=>{const l=t.appLocale.getLocalizedStrings().commonSetUp.approval.nonUsers;return e.map(s=>({label:l[s].label,value:s,position:"top",subtitles:[l[s].subTitle]}))},V=[{label:"Require",value:"require_approval"},{label:"Notify",value:"send_notification"}],je=a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>R.width.valuePx(e.size)};
+  min-height: ${e=>R.height.valuePx(e.size)};
+  padding-left: ${e=>R.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${e=>R.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${e=>R.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>R.paddingTopBottom.valuePx(e.size)};
+  gap: ${t.Space.sp3};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+
+    input {
+      background-color: ${e=>e.isError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${e=>e.isError?t.Colors.importantLight:e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+    input {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+`,Re=a.div`
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  flex-grow: 1;
+  gap: ${t.Space.sp3};
+`,$e=a(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${t.Colors.important};
+  }
+`,Ee=a.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  &:hover {
+    > button > div {
+      color: ${e=>e.disabled?e.theme.colors.grey1:e.theme.colors.primary};
+    }
+  }
+`,Ce=a.div`
+  display: flex;
+  align-items: center;
+  width: 174px;
+`,ke=a.div`
+  flex: 2;
+  display: flex;
+  gap: ${t.Space.sp3};
+  align-items: baseline;
+  max-height: 300px;
+`,Le=a.div`
+  width: ${t.Space.sp5};
+  color: ${e=>e.theme.colors.hero};
+`;function ze({label:e,isDisabled:l,sectionId:s,style:p,approversPlaceholder:y,notifiersPlaceholder:v,userSelectPlaceholder:g,approveNotifyPlaceholder:w,allUserWithRoles:m,filteredApprovers:j,allAttributes:r,filteredAttributes:$,allAccountingClasses:E,stepsInfo:h,productType:M}){const O=t.useWindowSizeContext(),{commonSetUp:{approval:F}}=t.appLocale.getLocalizedStrings(),B=j.length+$.length,C=m.map(i=>i.user),{control:I,setValue:D}=o.useFormContext(),{fields:k,replace:U}=o.useFieldArray({name:s,control:I}),d=()=>{const i=h[h.length-1].stepIndex,u=X(i+1,C,r);D(s,[...h,u])},f=i=>{const u=h.filter((n,c)=>c!==i);D(s,u)};T.useEffect(()=>{const i=k.map(n=>{const{actors:c,stepType:b}=n;return{selectedUsers:c.selectedUsers.map(x=>x.userId),selectedNonUsers:c.selectedNonUsers,selectedOption:b.selectedOption}}),u=h.map(n=>{const{actors:c,stepType:b}=n;return{selectedUsers:c.selectedUsers.map(x=>x.userId),selectedNonUsers:c.selectedNonUsers,selectedOption:b.selectedOption}});if(!o.isEqual(i,u)){const n=h.map((c,b)=>({actors:{selectedUsers:c.actors.selectedUsers,selectedNonUsers:c.actors.selectedNonUsers,allUsers:C,allNonUsers:W(r)},stepIndex:b,stepType:{selectedOption:c.stepType.selectedOption,allOptions:V}}));U(n)}},[C,h,k,U,r]);const L=h[h.length-1],z=l!=null||B===0||L.actors.selectedUsers.length+L.actors.selectedNonUsers.length===0||!L.stepType.selectedOption;return o.jsxRuntimeExports.jsxs(Oe,{size:O,style:p,isDisabled:!1,isError:!1,children:[o.jsxRuntimeExports.jsx(t.Label,{label:e.label,style:{marginRight:R.labelMarginRight.value(O),width:"auto"}}),h.map((i,u)=>o.jsxRuntimeExports.jsxs(Fe,{labelWidth:e.width,children:[o.jsxRuntimeExports.jsxs(Me,{children:[u+1,"."]}),o.jsxRuntimeExports.jsxs(Ie,{children:[o.jsxRuntimeExports.jsx(Q,{name:P(`${s}.${i.stepIndex}`,"stepType"),value:i.stepType,isDisabled:u===0,defaultMenuIsOpen:u===1&&i.stepType.selectedOption==null,registerOptions:{required:!0,validate:n=>n!=null&&n.selectedOption!=null||l!=null},placeholderLabel:w}),o.jsxRuntimeExports.jsxs(Ne,{children:[o.jsxRuntimeExports.jsx(Te,{children:o.jsxRuntimeExports.jsx(t.UserMultiSelectField,{hideEmailTooltip:!1,shouldHaveBackgroundColor:!0,showBackgroundColorIfHasAnySelectedOption:!0,placeholderLabel:i.stepType.selectedOption==null?g:i.stepType.selectedOption==="require_approval"?y:v,name:P(`${s}.${i.stepIndex}`,"actors"),value:i.actors,operator:i.stepType!=null&&i.stepType.selectedOption==="require_approval"?"or":"and",registerOptions:{required:!0,validate:n=>n!=null&&(n.selectedUsers!=null&&n.selectedUsers.length>0||n.selectedNonUsers!=null&&n.selectedNonUsers.length>0)||l!=null},valueToSubtitle:n=>{const c=m.map(x=>x.role).find(x=>x?.userId===n),b=[];if(c!=null){const x=t.getSingleRoleInOrder(c.userRoles,M);x.length>0&&b.push(x),c.accountingClassIDs.forEach(q=>{const N=E.find(H=>H.classId===q);N!=null&&N.className&&b.push(N.className)})}return b}})}),i.stepIndex>0&&o.jsxRuntimeExports.jsx(De,{onClick:()=>f(u),"data-testid":t.generateDataTestId("delete-step",u.toString())})]})]})]},k[u]?.id||u)),o.jsxRuntimeExports.jsx(Ue,{disabled:z,children:o.jsxRuntimeExports.jsx(t.Button,{onClick:d,style:{width:"100%"},label:F.addStep,size:"standard",variant:"light_transparent",disabled:z,"data-testid":t.generateDataTestId("add-step-button-small")})})]})}const Oe=a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>R.width.valuePx(e.size)};
+  min-height: ${e=>R.height.valuePx(e.size)};
+  padding-left: ${e=>R.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${e=>R.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${e=>R.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>R.paddingTopBottom.valuePx(e.size)};
+  gap: ${t.Space.sp3};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+
+    input {
+      background-color: ${e=>e.isError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${e=>e.isError?t.Colors.importantLight:e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+    input {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+`,Fe=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  width: 100%;
+  max-width: 100%;
+  flex-grow: 1;
+  gap: ${t.Space.sp2};
+`,De=a(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  margin-left: ${t.Space.sp2};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${t.Colors.important};
+  }
+`,Ue=a.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+`,Ne=a.div`
+  flex: 2;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  width: 100%;
+`,Te=a.div`
+  display: flex;
+  width: 100%;
+  min-width: ${t.Space.sp0};
+`,Ie=a.div`
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: ${t.Space.sp2};
+  align-items: center;
+  max-width: 100%;
+  min-width: ${t.Space.sp0};
+`,Me=a.div`
+  width: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`;function Be(e){return t.useWindowSizeContext()==="small"?o.jsxRuntimeExports.jsx(ze,{...e}):o.jsxRuntimeExports.jsx(we,{...e})}exports.FollowStepsSection=Be;exports.LabeledMultiTextField=ce;exports.getNonUserOptions=W;exports.requireAndNotifyOptions=V;