@integry/sdk 4.5.16 → 4.5.17

package/dist/esm/index.csm.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="index.ts" />
 import { html } from 'htm/preact';
 import { VNode } from "preact";
 type IntegrySDKEventType = "authorizations" | "did-add-authorization" | "did-begin-remove-authorization" | "did-change-step" | "did-fail-authorization-verification" | "did-load-flow" | "did-load-flows" | "did-load-integration" | "did-load-integrations" | "did-load-preview" | "did-remove-authorization" | "did-save-integration" | "did-delete-integration" | "did-select-authorization" | "ready" | "should-load-flow" | "did-click-close-button" | "did-app-load" | "did-enable-integration" | "did-disable-integration" | "did-rename-integration" | "did-raise-sdk-embed-warning" | "app-connected" | "app-disconnected" | "modal-closed" | "integration-created";

package/dist/esm/index.csm.js

@@ -2236,30 +2236,30 @@ var e,t,n,i,o,s,a,l,r,d,p,c,_={},u=[],m=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|n
           keyValue="${`${l}.${e}`}"
         />`))}
     </div>
-  `};var us,ms={tagMenu:"styles-module_tagMenu__1zL3Y",tagMenuHeader:"styles-module_tagMenuHeader__1xLOJ",tagMenuHeaderItem:"styles-module_tagMenuHeaderItem__118kJ",active:"styles-module_active__q-t6i",tagMenuBody:"styles-module_tagMenuBody__2VhdZ",tagMenuBodyItem:"styles-module_tagMenuBodyItem__36ub0",value:"styles-module_value__Nbjas",selected:"styles-module_selected__3w5uy",noOptions:"styles-module_noOptions__1Dcpu",noOptionsRetry:"styles-module_noOptionsRetry__RVn-i",optionsRefreshProminent:"styles-module_optionsRefreshProminent__lc2Mq",optionsRefresh:"styles-module_optionsRefresh__3w_oH",tagMenuSearch:"styles-module_tagMenuSearch__3r3dc",tagMenuWithSearch:"styles-module_tagMenuWithSearch__C33C2",tagMenuBodyWithSearch:"styles-module_tagMenuBodyWithSearch__1zO00"};fe(".styles-module_tagMenu__1zL3Y {\n  width: 100%;\n  max-width: 342px;\n  max-height: 210px;\n  background: #ffffff;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px 0px;\n  border: 1px solid #e2e0db;\n  border-radius: 4px;\n  padding: 12px;\n  overflow-y: auto;\n  margin-top: 0px;\n  position: fixed;\n  z-index: 999;\n  height: max-content;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar {\n  width: 7px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb {\n  background: #bdbdbd;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb:hover {\n  background: rgb(116, 116, 116);\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 8px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ {\n  padding: 6px 12px;\n  background: #f2f2f2;\n  border-radius: 100px;\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 12px;\n  color: #333333;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ.styles-module_active__q-t6i {\n  background: #4250f0;\n  color: #ffffff;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ {\n  min-height: 15px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas {\n  box-sizing: border-box;\n  height: 31px;\n  padding: 8px 0px 8px 12px;\n  width: 100%;\n  font-size: 12px;\n  line-height: 15px;\n  color: #333333;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 5px;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas:hover {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_selected__3w5uy {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu {\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 15px;\n  margin-left: 16px;\n  color: #999;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu span.styles-module_noOptionsRetry__RVn-i [class^=styles-module_loader_] {\n  position: relative;\n  top: 5px;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefreshProminent__lc2Mq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefresh__3w_oH {\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.styles-module_tagMenuSearch__3r3dc {\n  position: relative;\n  margin-bottom: 5px;\n}\n.styles-module_tagMenuSearch__3r3dc fieldset {\n  margin-bottom: 5px;\n}\n\n.styles-module_tagMenuWithSearch__C33C2 {\n  padding-top: 0px;\n}\n\n.styles-module_tagMenuBodyWithSearch__1zO00 {\n  max-height: 142px;\n  overflow-y: auto;\n}\n.styles-module_tagMenuBodyWithSearch__1zO00 span {\n  padding-left: 3px !important;\n}"),function(e){e.Values="values",e.AppFields="AppFields"}(us||(us={}));const hs=e=>{const{appName:t="",tags:n={},options:i=[],hideTabs:o=!1,defaultTab:s=us.AppFields,onTagClick:a=()=>null,onOptionClick:l=()=>null,fieldId:r="",value:d,onTabSelect:p,isEditable:c=!1,enableSearch:_=!1,refreshRootStepData:u,handleRefreshClick:m,isErrorOnLoadingOptions:h=!1,isMultiSelect:g=!1,loadingOptions:y=!1,nextPage:f="",tagsComponent:v=null}=e,[x,w]=Oe(s),b=Re([]),$=Re(null),[C,I]=Oe(!1),[L,k]=Oe(""),[S,M]=Oe(!1),[A,D]=Oe(!1),[T,F]=Oe(y),[E,O]=Oe(!1);Ne((()=>{let e=i;Array.isArray(i)||(e=[]),b.current=(e||[]).map(((e,t)=>b.current[t]??{current:null}))}),[i]);const N=document.getElementById(r),R=()=>{const e=N?N.getBoundingClientRect().bottom:"";let t={top:N?`${e}px`:"",left:N?`${N.getBoundingClientRect().left}px`:"",display:N&&!ds(N,"steps-body-container")?"none":"block",maxWidth:N?`${N.getBoundingClientRect().width}px`:"342px"};return N&&N.getBoundingClientRect().bottom+210>window.innerHeight-8&&(t={bottom:window.innerHeight-N.getBoundingClientRect().top+"px",left:N?`${N.getBoundingClientRect().left}px`:"",display:N&&!ds(N,"steps-body-container")?"none":"block",maxWidth:N?`${N.getBoundingClientRect().width}px`:"342px"}),t};$.current=R();const W=()=>{$.current=R(),I((e=>!e))},z=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return 0===t.trim().length?e:e.filter((e=>e.value.toLowerCase().includes(t.trim().toLowerCase())))},H=e=>{w(e),p&&p(e)};Ne((()=>(d&&!o&&d.startsWith("{")&&d.endsWith("}")&&H(us.AppFields),window.addEventListener("scroll",W,!0),()=>window.removeEventListener("scroll",W))),[]);const P=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];M(!1),D(e)},V=()=>{u&&(M(!0),u(P))};let U=[];return d&&(U=g?JSON.parse(d):[d]),B` <div
+  `};var us,ms={tagMenu:"styles-module_tagMenu__1zL3Y",tagMenuHeader:"styles-module_tagMenuHeader__1xLOJ",tagMenuHeaderItem:"styles-module_tagMenuHeaderItem__118kJ",active:"styles-module_active__q-t6i",tagMenuBody:"styles-module_tagMenuBody__2VhdZ",tagMenuBodyItem:"styles-module_tagMenuBodyItem__36ub0",value:"styles-module_value__Nbjas",selected:"styles-module_selected__3w5uy",noOptions:"styles-module_noOptions__1Dcpu",noOptionsRetry:"styles-module_noOptionsRetry__RVn-i",optionsRefreshProminent:"styles-module_optionsRefreshProminent__lc2Mq",optionsRefresh:"styles-module_optionsRefresh__3w_oH",tagMenuSearch:"styles-module_tagMenuSearch__3r3dc",tagMenuWithSearch:"styles-module_tagMenuWithSearch__C33C2",tagMenuBodyWithSearch:"styles-module_tagMenuBodyWithSearch__1zO00"};fe(".styles-module_tagMenu__1zL3Y {\n  width: 100%;\n  max-width: 342px;\n  max-height: 210px;\n  background: #ffffff;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px 0px;\n  border: 1px solid #e2e0db;\n  border-radius: 4px;\n  padding: 12px;\n  overflow-y: auto;\n  margin-top: 0px;\n  position: fixed;\n  z-index: 999;\n  height: max-content;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar {\n  width: 7px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb {\n  background: #bdbdbd;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb:hover {\n  background: rgb(116, 116, 116);\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 8px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ {\n  padding: 6px 12px;\n  background: #f2f2f2;\n  border-radius: 100px;\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 12px;\n  color: #333333;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ.styles-module_active__q-t6i {\n  background: #4250f0;\n  color: #ffffff;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ {\n  min-height: 15px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas {\n  box-sizing: border-box;\n  height: 31px;\n  padding: 8px 0px 8px 12px;\n  width: 100%;\n  font-size: 12px;\n  line-height: 15px;\n  color: #333333;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 5px;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas:hover {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_selected__3w5uy {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu {\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 15px;\n  margin-left: 16px;\n  color: #999;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu span.styles-module_noOptionsRetry__RVn-i [class^=styles-module_loader_] {\n  position: relative;\n  top: 5px;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefreshProminent__lc2Mq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefresh__3w_oH {\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.styles-module_tagMenuSearch__3r3dc {\n  position: relative;\n  margin-bottom: 5px;\n}\n.styles-module_tagMenuSearch__3r3dc fieldset {\n  margin-bottom: 5px;\n}\n\n.styles-module_tagMenuWithSearch__C33C2 {\n  padding-top: 0px;\n}\n\n.styles-module_tagMenuBodyWithSearch__1zO00 {\n  max-height: 142px;\n  overflow-y: auto;\n}\n.styles-module_tagMenuBodyWithSearch__1zO00 span {\n  padding-left: 3px !important;\n}"),function(e){e.Values="values",e.AppFields="AppFields"}(us||(us={}));const hs=e=>{const{appName:t="",tags:n={},options:i=[],hideTabs:o=!1,defaultTab:s=us.AppFields,onTagClick:a=()=>null,onOptionClick:l=()=>null,fieldId:r="",value:d,onTabSelect:p,isEditable:c=!1,enableSearch:_=!1,refreshRootStepData:u,handleRefreshClick:m,isErrorOnLoadingOptions:h=!1,isMultiSelect:g=!1,loadingOptions:y=!1,nextPage:v="",tagsComponent:x=null}=e,[w,b]=Oe(s),$=Re([]),C=Re(null),[I,L]=Oe(!1),[k,S]=Oe(""),[M,A]=Oe(!1),[D,T]=Oe(!1),[F,E]=Oe(y),[O,N]=Oe(!1);Ne((()=>{let e=i;Array.isArray(i)||(e=[]),$.current=(e||[]).map(((e,t)=>$.current[t]??{current:null}))}),[i]);const R=document.getElementById(r),W=()=>{const e=R?R.getBoundingClientRect().bottom:"";let t={top:R?`${e}px`:"",left:R?`${R.getBoundingClientRect().left}px`:"",display:R&&!ds(R,"steps-body-container")?"none":"block",maxWidth:R?`${R.getBoundingClientRect().width}px`:"342px"};return R&&R.getBoundingClientRect().bottom+210>window.innerHeight-8&&(t={bottom:window.innerHeight-R.getBoundingClientRect().top+"px",left:R?`${R.getBoundingClientRect().left}px`:"",display:R&&!ds(R,"steps-body-container")?"none":"block",maxWidth:R?`${R.getBoundingClientRect().width}px`:"342px"}),t};C.current=W();const z=()=>{C.current=W(),L((e=>!e))},H=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return 0===t.trim().length?e:e.filter((e=>e.value.toLowerCase().includes(t.trim().toLowerCase())))},P=e=>{b(e),p&&p(e)};Ne((()=>(d&&!o&&d.startsWith("{")&&d.endsWith("}")&&P(us.AppFields),window.addEventListener("scroll",z,!0),()=>window.removeEventListener("scroll",z))),[]);const V=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];A(!1),T(e)},U=()=>{u&&(A(!0),u(V))};let Z=[];return d&&(Z=g?JSON.parse(d):[d]),x&&f(x,{onSelect:()=>alert("Selected!")}),B` <div
     class=${`${ms.tagMenu} ${_?ms.tagMenuWithSearch:""}`}
-    style=${N&&$?.current?$.current:""}
+    style=${R&&C?.current?C.current:""}
   >
     ${_&&B`
       <div class=${ms.tagMenuSearch}>
         <${Xo}
           id="search_${r}"
           placeholder="Search for a field"
-          value="${L}"
-          onChange="${e=>{k(e)}}"
+          value="${k}"
+          onChange="${e=>{S(e)}}"
         />
       </div>
     `}
     ${!o&&B`<div class=${ms.tagMenuHeader}>
       <div
-        class=${`${ms.tagMenuHeaderItem} ${x===us.Values?ms.active:""}`}
-        onClick=${()=>H(us.Values)}
+        class=${`${ms.tagMenuHeaderItem} ${w===us.Values?ms.active:""}`}
+        onClick=${()=>P(us.Values)}
       >
         Values
       </div>
       <div
-        class=${`${ms.tagMenuHeaderItem} ${x===us.AppFields?ms.active:""}`}
-        onClick=${()=>H(us.AppFields)}
+        class=${`${ms.tagMenuHeaderItem} ${w===us.AppFields?ms.active:""}`}
+        onClick=${()=>P(us.AppFields)}
       >
         ${t?`${t} fields`:"Fields"}
       </div>
@@ -2267,65 +2267,65 @@ var e,t,n,i,o,s,a,l,r,d,p,c,_={},u=[],m=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|n
     <div
       class=${`${ms.tagMenuBody} ${_?ms.tagMenuBodyWithSearch:""}`}
     >
-      ${x===us.Values?B`<div className=${ms.tagMenuBodyItem} id="tag-menu-body-item">
-            ${i.length>0?z(i,L).length>0?z(i,L).map(((e,t,n)=>{return t===n.length-1&&F(!1),B`
+      ${w===us.Values?B`<div className=${ms.tagMenuBodyItem} id="tag-menu-body-item">
+            ${i.length>0?H(i,k).length>0?H(i,k).map(((e,t,n)=>{return t===n.length-1&&E(!1),B`
                         <div
-                          class=${`${ms.value} ${U.includes(e.id)?ms.selected:""}`}
+                          class=${`${ms.value} ${Z.includes(e.id)?ms.selected:""}`}
                           onClick=${t=>{t.stopPropagation(),l(e)}}
-                          ref=${b.current[t]}
-                          data-hint=${`${i=b.current[t],i&&i.current&&i.current.clientWidth<i.current.scrollWidth?e.value:""}`}
+                          ref=${$.current[t]}
+                          data-hint=${`${i=$.current[t],i&&i.current&&i.current.clientWidth<i.current.scrollWidth?e.value:""}`}
                         >
                           ${e.value}
                         </div>
 
                         ${t!==n.length-1?"":B`<span>
-                              ${T||E?B`<${it} color="#999" />`:B` <a
+                              ${F||O?B`<${it} color="#999" />`:B` <a
                                     className=${ms.optionsRefreshProminent}
                                     href="#"
-                                    onclick=${()=>{m&&(O(!0),m((()=>O(!1)),f))}}
-                                    >${f?"Load more options":"Reload options?"}</a
+                                    onclick=${()=>{m&&(N(!0),m((()=>N(!1)),v))}}
+                                    >${v?"Load more options":"Reload options?"}</a
                                   >`}
                             </span>`}
                       `;var i})):B`<div className=${ms.noOptions}>
                     Your search did not match any values
                   </div>`:B`<div className=${ms.noOptions}>
                   <span className=${ms.noOptionsRetry}>
-                    ${T?B`<${it} color="#999" />`:B`${h?"Could not load options.":"No options found."}
+                    ${F?B`<${it} color="#999" />`:B`${h?"Could not load options.":"No options found."}
                           <a
                             className=${ms.optionsRefresh}
                             href="#"
-                            onclick=${()=>{m&&(F(!0),m((()=>F(!1))))}}
+                            onclick=${()=>{m&&(E(!0),m((()=>E(!1))))}}
                           >
                             ${" "}Try again?</a
                           >`}
                   </span>
                 </div>`}
           </div>`:B` <div className="${ms.mappedFieldMenu}">
-            ${v?B`<${v} tags=${n} onSelect=${a}>
-                <//>`:B`${Object.keys(c?n:ps(n,L)).length>0?Object.keys(c?n:ps(n,L)).map(((e,t,i)=>B`
+            ${x?B`<${x} tags=${n} onSelect=${a}>
+                <//>`:B`${Object.keys(c?n:ps(n,k)).length>0?Object.keys(c?n:ps(n,k)).map(((e,t,i)=>B`
                         <${_s}
                           objectKey="${e}"
                           keyValue="${e}"
-                          objectData="${c?n[e]:ps(n,L)[e]}"
+                          objectData="${c?n[e]:ps(n,k)[e]}"
                           onSelect=${a}
                           isRoot="${!0}"
                         />
                         ${t!==i.length-1?"":B`<span>
-                              ${S?B`<${it} color="#999" />`:B` <a
+                              ${M?B`<${it} color="#999" />`:B` <a
                                     className=${ms.optionsRefreshProminent}
                                     href="#"
-                                    onclick=${V}
+                                    onclick=${U}
                                     >Reload fields?</a
                                   >`}
                             </span>`}
                       `)):B`<div className=${ms.noOptions}>
-                      ${c||""===L?B`
+                      ${c||""===k?B`
                             <span className=${ms.noOptionsRetry}>
-                              ${S?B`<${it} color="#999" />`:B`${A?"Could not load fields.":"No fields found."}
+                              ${M?B`<${it} color="#999" />`:B`${D?"Could not load fields.":"No fields found."}
                                     <a
                                       className=${ms.optionsRefresh}
                                       href="#"
-                                      onclick=${e=>{e.preventDefault(),e.stopPropagation(),V()}}
+                                      onclick=${e=>{e.preventDefault(),e.stopPropagation(),U()}}
                                     >
                                       ${" "}Try again?</a
                                     >`}
@@ -7011,14 +7011,26 @@ var e,t,n,i,o,s,a,l,r,d,p,c,_={},u=[],m=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|n
               </div>
             </div>
           `}
-    `}});const ap={getAuthHash:async function(e,t){const n=e=>new Uint8Array([...unescape(encodeURIComponent(e))].map((e=>e.charCodeAt(0)))),i=n(t),o=n(e),s=await crypto.subtle.importKey("raw",i,{name:"HMAC",hash:"SHA-256"},!0,["sign"]),a=await crypto.subtle.sign("HMAC",s,o);return[...new Uint8Array(a)].map((e=>e.toString(16).padStart(2,"0"))).join("")}};class lp{static SDK_VERSION="4.5.16";config;apiHandler;initConfig;eventEmitter=(()=>new te)();static html=(()=>B)();static RenderModes=(()=>ae)();static TemplateFormRenderModes=(()=>oe)();static Layouts=(()=>ie)();static ViewStyles=(()=>ne)();static MarketplaceRenderModes=(()=>se)();static Helpers;authModalId="";forceRerender=!1;constructor(e){let t;const n=e.baseUrl||"https://app.integry.io",i=e;if(i.user){const{userId:e,apiKey:t,...n}=i.user;"userId"in i||(i.userId=""),"userId"in i&&(i.userId=e.toString()),i.xIntegryConfig||(i.xIntegryConfig={}),i.xIntegryConfig.appAuth||(i.xIntegryConfig.appAuth={}),i.xIntegryConfig.appAuth.extras||(i.xIntegryConfig.appAuth.extras={}),i.xIntegryConfig.appAuth.apiKey=(t||"").toString(),i.xIntegryConfig.appAuth.extras=n}const o={oauthVerifyPath:"auth/verify",endpointsUrl:"https://integry-app.appspot.com",baseUrl:n,baseUrlv2:`${n}/v2`,baseAPIUrl:"https://api.integry.io",apiKey:i.xIntegryConfig?.appAuth?.apiKey,authId:i.xIntegryConfig?.appAuth?.authId,extras:i.xIntegryConfig?.appAuth?.extras},s=i.options||i.userConfig||{};if(i.options&&i.payloads&&(i.options.objects=e.payloads),"appKey"in i)t={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId},this.config={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId,deploymentId:i.deploymentId,userConfig:i.deploymentId?{...s,tags:s?.tags?[...s?.tags,`${i.deploymentId}`]:[`${i.deploymentId}`]}:s};else{const e=this.getAuthParamsFromUrl()||{};t={...o,...e},this.config={...o,...e,userConfig:i.userConfig}}this.authModalId=this.getRandomFlowId(6),this.apiHandler=new X(t),this.verifyAuthConfig().then((e=>{e?.config_verified?this.eventEmitter.emit("ready",{isReady:!0}):console.error("IntegrySDK: Auth config verification failed, are your auth parameters correct?")})).catch((e=>console.error(e))),this.initConfig={containerId:"",renderMode:oe.INLINE}}SDKFailedHandler=(e,t)=>{const n=e.options||e.userConfig||{},i=document.getElementById(t);throw i&&z(B`
+    `}});const ap=e=>{const{tags:t,onSelect:n,...i}=e,o={FirstName:"John",LastName:"Doe",Gender:"male",Age:20,DateOfBirth:"1990-01-01",Email:"johndoe@example.com",Phone:"555-555-1234",Address:{Street:"123 Main St",City:"New York",State:"NY",PostalCode:"10001",Country:"USA"},PreferredContactMethod:"email",LastContacted:"2023-01-15",Twitter:"@johndoe",Website:"https://www.example.com",LinkedIn:"https://www.linkedin.com/in/johndoe",Bio:"John Doe is a software engineer with over 10 years of experience.",Relationship:"professional",Tags:["tech","conference","networking"],JobTitle:"Software Engineer",Company:"Example Corp.",DateCreated:"2023-04-14T12:00:00Z",DateUpdated:"2023-04-14T12:00:00Z",NextMeeting:{Date:"2023-05-01",Topic:"Project Planning",Location:"New York"},Notes:"Met at the 2022 Tech Conference in San Francisco."};return B`
+    <div>
+      ${Object.keys(o).map(((e,t,i)=>B`
+          <${_s}
+            objectKey="${e}"
+            keyValue="${e}"
+            objectData="${o[e]}"
+            onSelect=${n}
+            isRoot="${!0}"
+          />
+        `))}
+    </div>
+  `},lp={getAuthHash:async function(e,t){const n=e=>new Uint8Array([...unescape(encodeURIComponent(e))].map((e=>e.charCodeAt(0)))),i=n(t),o=n(e),s=await crypto.subtle.importKey("raw",i,{name:"HMAC",hash:"SHA-256"},!0,["sign"]),a=await crypto.subtle.sign("HMAC",s,o);return[...new Uint8Array(a)].map((e=>e.toString(16).padStart(2,"0"))).join("")}};class rp{static SDK_VERSION="4.5.17";config;apiHandler;initConfig;eventEmitter=(()=>new te)();static html=(()=>B)();static RenderModes=(()=>ae)();static TemplateFormRenderModes=(()=>oe)();static Layouts=(()=>ie)();static ViewStyles=(()=>ne)();static MarketplaceRenderModes=(()=>se)();static Helpers;authModalId="";forceRerender=!1;constructor(e){let t;const n=e.baseUrl||"https://app.integry.io",i=e;if(i.user){const{userId:e,apiKey:t,...n}=i.user;"userId"in i||(i.userId=""),"userId"in i&&(i.userId=e.toString()),i.xIntegryConfig||(i.xIntegryConfig={}),i.xIntegryConfig.appAuth||(i.xIntegryConfig.appAuth={}),i.xIntegryConfig.appAuth.extras||(i.xIntegryConfig.appAuth.extras={}),i.xIntegryConfig.appAuth.apiKey=(t||"").toString(),i.xIntegryConfig.appAuth.extras=n}const o={oauthVerifyPath:"auth/verify",endpointsUrl:"https://integry-app.appspot.com",baseUrl:n,baseUrlv2:`${n}/v2`,baseAPIUrl:"https://api.integry.io",apiKey:i.xIntegryConfig?.appAuth?.apiKey,authId:i.xIntegryConfig?.appAuth?.authId,extras:i.xIntegryConfig?.appAuth?.extras},s=i.options||i.userConfig||{};if(i.options&&i.payloads&&(i.options.objects=e.payloads),"appKey"in i)t={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId},this.config={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId,deploymentId:i.deploymentId,userConfig:i.deploymentId?{...s,tags:s?.tags?[...s?.tags,`${i.deploymentId}`]:[`${i.deploymentId}`]}:s};else{const e=this.getAuthParamsFromUrl()||{};t={...o,...e},this.config={...o,...e,userConfig:i.userConfig}}this.authModalId=this.getRandomFlowId(6),this.apiHandler=new X(t),this.verifyAuthConfig().then((e=>{e?.config_verified?this.eventEmitter.emit("ready",{isReady:!0}):console.error("IntegrySDK: Auth config verification failed, are your auth parameters correct?")})).catch((e=>console.error(e))),this.initConfig={containerId:"",renderMode:oe.INLINE}}SDKFailedHandler=(e,t)=>{const n=e.options||e.userConfig||{},i=document.getElementById(t);throw i&&z(B`
           <${Il}
             message="SDK failed to load"
             debug=${n.debug}
             config=${n.debug?e:null}
           >
           <//>
-        `,i),new Error("IntegrySDK: SDK failed to load")};getRandomFlowId=e=>{const t=[],n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let i=0;i<e;i+=1)t.push(n.charAt(Math.floor(52*Math.random())));return`x-integry-modal-${t.join("")}`};getAuthParamsFromUrl=()=>{const e=ge()&&new URLSearchParams(window.location.search);if(e){const t=e.get("user_id"),n=e.get("app_key"),i=e.get("hash"),o=e.get("deployment_id");if(!(t&&n&&i&&o))throw new Error(`The following auth variables are undefined: ${t?"":"userId"} ${n?"":"appKey"} ${i?"":"hash"} ${o?"":"deploymentId"}`);return{userId:t,appKey:n,hash:i,deploymentId:o}}return{userId:"",appKey:"",hash:"",deploymentId:""}};printVersion=()=>{console.info(`@integry/sdk@${lp.SDK_VERSION}`)};setupFlowFormDestination=(e,t)=>{let n=null;if(t){if(e===oe.MODAL||e===oe.INLINE)throw new Error('The `templateContainerId` property is unsupported when render mode is set to "MODAL" or "INLINE"');n=document.getElementById(t),n||console.warn(`The template form render target with id ${t} was not found`)}switch(e){case oe.MODAL:return n=document.createElement("div"),n.id=this.getRandomFlowId(8),document.body.appendChild(n),n;case oe.INLINE:return null;case oe.DETACHED:case oe.CUSTOM:return n;default:throw new Error(`Unsupported renderMode ${e} configuration, please provide one of ${JSON.stringify(Object.keys(oe))}`)}};renderFlowSetupForm=e=>{const{flowId:t,flowContainerId:n,versionId:i,viewStyle:o}=e,s=document.getElementById(n);if(!s)return void console.warn(`Integry template form render target with id ${n} was not found`);let a=Number(t),l=this.config.integrationId||e.integrationId;l||(l=Number(ye("integrationId"))),a||(a=Number(ye("flowId")));const r=he();r.setState({integrationIdToEdit:l,userConfig:this.config.userConfig,genericData:{...pe.genericData,implicitAuthEnabled:!!this.config.xIntegryConfig?.appAuth?.apiKey,deploymentId:Number(this.config.deploymentId),isAnonymous:!!this.config.xIntegryConfig?.isAnonymous,viewStyle:o||ne.COMFORTABLE,testMultipurpose:!0,customFlowSetupRender:!0}}),z(B`
+        `,i),new Error("IntegrySDK: SDK failed to load")};getRandomFlowId=e=>{const t=[],n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let i=0;i<e;i+=1)t.push(n.charAt(Math.floor(52*Math.random())));return`x-integry-modal-${t.join("")}`};getAuthParamsFromUrl=()=>{const e=ge()&&new URLSearchParams(window.location.search);if(e){const t=e.get("user_id"),n=e.get("app_key"),i=e.get("hash"),o=e.get("deployment_id");if(!(t&&n&&i&&o))throw new Error(`The following auth variables are undefined: ${t?"":"userId"} ${n?"":"appKey"} ${i?"":"hash"} ${o?"":"deploymentId"}`);return{userId:t,appKey:n,hash:i,deploymentId:o}}return{userId:"",appKey:"",hash:"",deploymentId:""}};printVersion=()=>{console.info(`@integry/sdk@${rp.SDK_VERSION}`)};setupFlowFormDestination=(e,t)=>{let n=null;if(t){if(e===oe.MODAL||e===oe.INLINE)throw new Error('The `templateContainerId` property is unsupported when render mode is set to "MODAL" or "INLINE"');n=document.getElementById(t),n||console.warn(`The template form render target with id ${t} was not found`)}switch(e){case oe.MODAL:return n=document.createElement("div"),n.id=this.getRandomFlowId(8),document.body.appendChild(n),n;case oe.INLINE:return null;case oe.DETACHED:case oe.CUSTOM:return n;default:throw new Error(`Unsupported renderMode ${e} configuration, please provide one of ${JSON.stringify(Object.keys(oe))}`)}};renderFlowSetupForm=e=>{const{flowId:t,flowContainerId:n,versionId:i,viewStyle:o}=e,s=document.getElementById(n);if(!s)return void console.warn(`Integry template form render target with id ${n} was not found`);let a=Number(t),l=this.config.integrationId||e.integrationId;l||(l=Number(ye("integrationId"))),a||(a=Number(ye("flowId")));const r=he();r.setState({integrationIdToEdit:l,userConfig:this.config.userConfig,genericData:{...pe.genericData,implicitAuthEnabled:!!this.config.xIntegryConfig?.appAuth?.apiKey,deploymentId:Number(this.config.deploymentId),isAnonymous:!!this.config.xIntegryConfig?.isAnonymous,viewStyle:o||ne.COMFORTABLE,testMultipurpose:!0,customFlowSetupRender:!0}}),z(B`
         <${re.Provider}
           value=${{apiHandler:this.apiHandler,eventEmitter:this.eventEmitter,isPreviewMode:!1}}
         >
@@ -7302,10 +7314,10 @@ var e,t,n,i,o,s,a,l,r,d,p,c,_={},u=[],m=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|n
                 isReadOnly="${!1}"
                 selectedAuthId="${t.connectedAccountId}"
                 accountConnected=${!0}
-                tagsComponent=${t.tagsComponent}
+                tagsComponent=${ap}
                 onFieldChangeCallback=${t.onFieldChangeCallback}
                 tagsTree=${t.tagsTree}
               />
             <//>
           <//>
-        </div>`,n)}else console.warn(`Integry SDK render target with id ${t.containerId} was not found`)}})();verifyAuthConfig=()=>this.apiHandler.verifyAuthConfig({deploymentId:this.config.deploymentId});getUserVariables=async()=>{try{const e=await this.apiHandler.getUserVariables();return e?e.results:[]}catch(e){return console.error(e),[]}};destroy=()=>{try{this.eventEmitter.offAll();const e=document.getElementById(this.authModalId);e&&e.remove()}catch(e){console.error("There was an error unsubscribing from all events")}};static setFieldValue=(e,t)=>{const n=document.getElementById(e)?.querySelector("input");if(n&&n instanceof HTMLInputElement){n.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});n.dispatchEvent(e)}const i=document.getElementById(`tagify_${e}`);if(i&&i instanceof HTMLInputElement){i.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});i.dispatchEvent(e)}};getMethod=()=>"POST";getBaseAPIUrl=()=>"https://api.integry.io";getHeaders=()=>({"Content-Type":"application/json"})}export{ap as Helpers,lp as IntegryJS,B as html};
+        </div>`,n)}else console.warn(`Integry SDK render target with id ${t.containerId} was not found`)}})();verifyAuthConfig=()=>this.apiHandler.verifyAuthConfig({deploymentId:this.config.deploymentId});getUserVariables=async()=>{try{const e=await this.apiHandler.getUserVariables();return e?e.results:[]}catch(e){return console.error(e),[]}};destroy=()=>{try{this.eventEmitter.offAll();const e=document.getElementById(this.authModalId);e&&e.remove()}catch(e){console.error("There was an error unsubscribing from all events")}};static setFieldValue=(e,t)=>{const n=document.getElementById(e)?.querySelector("input");if(n&&n instanceof HTMLInputElement){n.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});n.dispatchEvent(e)}const i=document.getElementById(`tagify_${e}`);if(i&&i instanceof HTMLInputElement){i.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});i.dispatchEvent(e)}};getMethod=()=>"POST";getBaseAPIUrl=()=>"https://api.integry.io";getHeaders=()=>({"Content-Type":"application/json"})}export{lp as Helpers,rp as IntegryJS,B as html};

package/dist/umd/index.umd.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="index.ts" />
 import { VNode } from "preact";
 type IntegrySDKEventType = "authorizations" | "did-add-authorization" | "did-begin-remove-authorization" | "did-change-step" | "did-fail-authorization-verification" | "did-load-flow" | "did-load-flows" | "did-load-integration" | "did-load-integrations" | "did-load-preview" | "did-remove-authorization" | "did-save-integration" | "did-delete-integration" | "did-select-authorization" | "ready" | "should-load-flow" | "did-click-close-button" | "did-app-load" | "did-enable-integration" | "did-disable-integration" | "did-rename-integration" | "did-raise-sdk-embed-warning" | "app-connected" | "app-disconnected" | "modal-closed" | "integration-created";
 type ConnectedAccount = {

package/dist/umd/index.umd.js

@@ -2236,30 +2236,30 @@
           keyValue="${`${l}.${e}`}"
         />`))}
     </div>
-  `};var us,ms={tagMenu:"styles-module_tagMenu__1zL3Y",tagMenuHeader:"styles-module_tagMenuHeader__1xLOJ",tagMenuHeaderItem:"styles-module_tagMenuHeaderItem__118kJ",active:"styles-module_active__q-t6i",tagMenuBody:"styles-module_tagMenuBody__2VhdZ",tagMenuBodyItem:"styles-module_tagMenuBodyItem__36ub0",value:"styles-module_value__Nbjas",selected:"styles-module_selected__3w5uy",noOptions:"styles-module_noOptions__1Dcpu",noOptionsRetry:"styles-module_noOptionsRetry__RVn-i",optionsRefreshProminent:"styles-module_optionsRefreshProminent__lc2Mq",optionsRefresh:"styles-module_optionsRefresh__3w_oH",tagMenuSearch:"styles-module_tagMenuSearch__3r3dc",tagMenuWithSearch:"styles-module_tagMenuWithSearch__C33C2",tagMenuBodyWithSearch:"styles-module_tagMenuBodyWithSearch__1zO00"};fe(".styles-module_tagMenu__1zL3Y {\n  width: 100%;\n  max-width: 342px;\n  max-height: 210px;\n  background: #ffffff;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px 0px;\n  border: 1px solid #e2e0db;\n  border-radius: 4px;\n  padding: 12px;\n  overflow-y: auto;\n  margin-top: 0px;\n  position: fixed;\n  z-index: 999;\n  height: max-content;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar {\n  width: 7px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb {\n  background: #bdbdbd;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb:hover {\n  background: rgb(116, 116, 116);\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 8px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ {\n  padding: 6px 12px;\n  background: #f2f2f2;\n  border-radius: 100px;\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 12px;\n  color: #333333;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ.styles-module_active__q-t6i {\n  background: #4250f0;\n  color: #ffffff;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ {\n  min-height: 15px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas {\n  box-sizing: border-box;\n  height: 31px;\n  padding: 8px 0px 8px 12px;\n  width: 100%;\n  font-size: 12px;\n  line-height: 15px;\n  color: #333333;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 5px;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas:hover {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_selected__3w5uy {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu {\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 15px;\n  margin-left: 16px;\n  color: #999;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu span.styles-module_noOptionsRetry__RVn-i [class^=styles-module_loader_] {\n  position: relative;\n  top: 5px;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefreshProminent__lc2Mq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefresh__3w_oH {\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.styles-module_tagMenuSearch__3r3dc {\n  position: relative;\n  margin-bottom: 5px;\n}\n.styles-module_tagMenuSearch__3r3dc fieldset {\n  margin-bottom: 5px;\n}\n\n.styles-module_tagMenuWithSearch__C33C2 {\n  padding-top: 0px;\n}\n\n.styles-module_tagMenuBodyWithSearch__1zO00 {\n  max-height: 142px;\n  overflow-y: auto;\n}\n.styles-module_tagMenuBodyWithSearch__1zO00 span {\n  padding-left: 3px !important;\n}"),function(e){e.Values="values",e.AppFields="AppFields"}(us||(us={}));const hs=e=>{const{appName:t="",tags:n={},options:i=[],hideTabs:o=!1,defaultTab:s=us.AppFields,onTagClick:a=()=>null,onOptionClick:l=()=>null,fieldId:r="",value:d,onTabSelect:p,isEditable:c=!1,enableSearch:_=!1,refreshRootStepData:u,handleRefreshClick:m,isErrorOnLoadingOptions:h=!1,isMultiSelect:g=!1,loadingOptions:y=!1,nextPage:f="",tagsComponent:v=null}=e,[x,w]=Oe(s),b=Re([]),$=Re(null),[C,I]=Oe(!1),[L,k]=Oe(""),[S,M]=Oe(!1),[A,D]=Oe(!1),[T,F]=Oe(y),[E,O]=Oe(!1);Ne((()=>{let e=i;Array.isArray(i)||(e=[]),b.current=(e||[]).map(((e,t)=>b.current[t]??{current:null}))}),[i]);const N=document.getElementById(r),R=()=>{const e=N?N.getBoundingClientRect().bottom:"";let t={top:N?`${e}px`:"",left:N?`${N.getBoundingClientRect().left}px`:"",display:N&&!ds(N,"steps-body-container")?"none":"block",maxWidth:N?`${N.getBoundingClientRect().width}px`:"342px"};return N&&N.getBoundingClientRect().bottom+210>window.innerHeight-8&&(t={bottom:window.innerHeight-N.getBoundingClientRect().top+"px",left:N?`${N.getBoundingClientRect().left}px`:"",display:N&&!ds(N,"steps-body-container")?"none":"block",maxWidth:N?`${N.getBoundingClientRect().width}px`:"342px"}),t};$.current=R();const W=()=>{$.current=R(),I((e=>!e))},z=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return 0===t.trim().length?e:e.filter((e=>e.value.toLowerCase().includes(t.trim().toLowerCase())))},H=e=>{w(e),p&&p(e)};Ne((()=>(d&&!o&&d.startsWith("{")&&d.endsWith("}")&&H(us.AppFields),window.addEventListener("scroll",W,!0),()=>window.removeEventListener("scroll",W))),[]);const P=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];M(!1),D(e)},V=()=>{u&&(M(!0),u(P))};let U=[];return d&&(U=g?JSON.parse(d):[d]),B` <div
+  `};var us,ms={tagMenu:"styles-module_tagMenu__1zL3Y",tagMenuHeader:"styles-module_tagMenuHeader__1xLOJ",tagMenuHeaderItem:"styles-module_tagMenuHeaderItem__118kJ",active:"styles-module_active__q-t6i",tagMenuBody:"styles-module_tagMenuBody__2VhdZ",tagMenuBodyItem:"styles-module_tagMenuBodyItem__36ub0",value:"styles-module_value__Nbjas",selected:"styles-module_selected__3w5uy",noOptions:"styles-module_noOptions__1Dcpu",noOptionsRetry:"styles-module_noOptionsRetry__RVn-i",optionsRefreshProminent:"styles-module_optionsRefreshProminent__lc2Mq",optionsRefresh:"styles-module_optionsRefresh__3w_oH",tagMenuSearch:"styles-module_tagMenuSearch__3r3dc",tagMenuWithSearch:"styles-module_tagMenuWithSearch__C33C2",tagMenuBodyWithSearch:"styles-module_tagMenuBodyWithSearch__1zO00"};fe(".styles-module_tagMenu__1zL3Y {\n  width: 100%;\n  max-width: 342px;\n  max-height: 210px;\n  background: #ffffff;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px 0px;\n  border: 1px solid #e2e0db;\n  border-radius: 4px;\n  padding: 12px;\n  overflow-y: auto;\n  margin-top: 0px;\n  position: fixed;\n  z-index: 999;\n  height: max-content;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar {\n  width: 7px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb {\n  background: #bdbdbd;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n}\n.styles-module_tagMenu__1zL3Y::-webkit-scrollbar-thumb:hover {\n  background: rgb(116, 116, 116);\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 8px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ {\n  padding: 6px 12px;\n  background: #f2f2f2;\n  border-radius: 100px;\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 12px;\n  color: #333333;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuHeader__1xLOJ .styles-module_tagMenuHeaderItem__118kJ.styles-module_active__q-t6i {\n  background: #4250f0;\n  color: #ffffff;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ {\n  min-height: 15px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas {\n  box-sizing: border-box;\n  height: 31px;\n  padding: 8px 0px 8px 12px;\n  width: 100%;\n  font-size: 12px;\n  line-height: 15px;\n  color: #333333;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 5px;\n  cursor: pointer;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_value__Nbjas:hover {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_tagMenuBody__2VhdZ .styles-module_tagMenuBodyItem__36ub0 .styles-module_selected__3w5uy {\n  background: rgba(66, 80, 240, 0.1);\n  border-radius: 100px;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu {\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 15px;\n  margin-left: 16px;\n  color: #999;\n}\n.styles-module_tagMenu__1zL3Y .styles-module_noOptions__1Dcpu span.styles-module_noOptionsRetry__RVn-i [class^=styles-module_loader_] {\n  position: relative;\n  top: 5px;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefreshProminent__lc2Mq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n.styles-module_tagMenu__1zL3Y a.styles-module_optionsRefresh__3w_oH {\n  font-size: 12px;\n  line-height: 15px;\n  color: #4250f0;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.styles-module_tagMenuSearch__3r3dc {\n  position: relative;\n  margin-bottom: 5px;\n}\n.styles-module_tagMenuSearch__3r3dc fieldset {\n  margin-bottom: 5px;\n}\n\n.styles-module_tagMenuWithSearch__C33C2 {\n  padding-top: 0px;\n}\n\n.styles-module_tagMenuBodyWithSearch__1zO00 {\n  max-height: 142px;\n  overflow-y: auto;\n}\n.styles-module_tagMenuBodyWithSearch__1zO00 span {\n  padding-left: 3px !important;\n}"),function(e){e.Values="values",e.AppFields="AppFields"}(us||(us={}));const hs=e=>{const{appName:t="",tags:n={},options:i=[],hideTabs:o=!1,defaultTab:s=us.AppFields,onTagClick:a=()=>null,onOptionClick:l=()=>null,fieldId:r="",value:d,onTabSelect:p,isEditable:c=!1,enableSearch:_=!1,refreshRootStepData:u,handleRefreshClick:m,isErrorOnLoadingOptions:h=!1,isMultiSelect:g=!1,loadingOptions:y=!1,nextPage:v="",tagsComponent:x=null}=e,[w,b]=Oe(s),$=Re([]),C=Re(null),[I,L]=Oe(!1),[k,S]=Oe(""),[M,A]=Oe(!1),[D,T]=Oe(!1),[F,E]=Oe(y),[O,N]=Oe(!1);Ne((()=>{let e=i;Array.isArray(i)||(e=[]),$.current=(e||[]).map(((e,t)=>$.current[t]??{current:null}))}),[i]);const R=document.getElementById(r),W=()=>{const e=R?R.getBoundingClientRect().bottom:"";let t={top:R?`${e}px`:"",left:R?`${R.getBoundingClientRect().left}px`:"",display:R&&!ds(R,"steps-body-container")?"none":"block",maxWidth:R?`${R.getBoundingClientRect().width}px`:"342px"};return R&&R.getBoundingClientRect().bottom+210>window.innerHeight-8&&(t={bottom:window.innerHeight-R.getBoundingClientRect().top+"px",left:R?`${R.getBoundingClientRect().left}px`:"",display:R&&!ds(R,"steps-body-container")?"none":"block",maxWidth:R?`${R.getBoundingClientRect().width}px`:"342px"}),t};C.current=W();const z=()=>{C.current=W(),L((e=>!e))},H=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return 0===t.trim().length?e:e.filter((e=>e.value.toLowerCase().includes(t.trim().toLowerCase())))},P=e=>{b(e),p&&p(e)};Ne((()=>(d&&!o&&d.startsWith("{")&&d.endsWith("}")&&P(us.AppFields),window.addEventListener("scroll",z,!0),()=>window.removeEventListener("scroll",z))),[]);const V=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];A(!1),T(e)},U=()=>{u&&(A(!0),u(V))};let Z=[];return d&&(Z=g?JSON.parse(d):[d]),x&&f(x,{onSelect:()=>alert("Selected!")}),B` <div
     class=${`${ms.tagMenu} ${_?ms.tagMenuWithSearch:""}`}
-    style=${N&&$?.current?$.current:""}
+    style=${R&&C?.current?C.current:""}
   >
     ${_&&B`
       <div class=${ms.tagMenuSearch}>
         <${Xo}
           id="search_${r}"
           placeholder="Search for a field"
-          value="${L}"
-          onChange="${e=>{k(e)}}"
+          value="${k}"
+          onChange="${e=>{S(e)}}"
         />
       </div>
     `}
     ${!o&&B`<div class=${ms.tagMenuHeader}>
       <div
-        class=${`${ms.tagMenuHeaderItem} ${x===us.Values?ms.active:""}`}
-        onClick=${()=>H(us.Values)}
+        class=${`${ms.tagMenuHeaderItem} ${w===us.Values?ms.active:""}`}
+        onClick=${()=>P(us.Values)}
       >
         Values
       </div>
       <div
-        class=${`${ms.tagMenuHeaderItem} ${x===us.AppFields?ms.active:""}`}
-        onClick=${()=>H(us.AppFields)}
+        class=${`${ms.tagMenuHeaderItem} ${w===us.AppFields?ms.active:""}`}
+        onClick=${()=>P(us.AppFields)}
       >
         ${t?`${t} fields`:"Fields"}
       </div>
@@ -2267,65 +2267,65 @@
     <div
       class=${`${ms.tagMenuBody} ${_?ms.tagMenuBodyWithSearch:""}`}
     >
-      ${x===us.Values?B`<div className=${ms.tagMenuBodyItem} id="tag-menu-body-item">
-            ${i.length>0?z(i,L).length>0?z(i,L).map(((e,t,n)=>{return t===n.length-1&&F(!1),B`
+      ${w===us.Values?B`<div className=${ms.tagMenuBodyItem} id="tag-menu-body-item">
+            ${i.length>0?H(i,k).length>0?H(i,k).map(((e,t,n)=>{return t===n.length-1&&E(!1),B`
                         <div
-                          class=${`${ms.value} ${U.includes(e.id)?ms.selected:""}`}
+                          class=${`${ms.value} ${Z.includes(e.id)?ms.selected:""}`}
                           onClick=${t=>{t.stopPropagation(),l(e)}}
-                          ref=${b.current[t]}
-                          data-hint=${`${i=b.current[t],i&&i.current&&i.current.clientWidth<i.current.scrollWidth?e.value:""}`}
+                          ref=${$.current[t]}
+                          data-hint=${`${i=$.current[t],i&&i.current&&i.current.clientWidth<i.current.scrollWidth?e.value:""}`}
                         >
                           ${e.value}
                         </div>
 
                         ${t!==n.length-1?"":B`<span>
-                              ${T||E?B`<${it} color="#999" />`:B` <a
+                              ${F||O?B`<${it} color="#999" />`:B` <a
                                     className=${ms.optionsRefreshProminent}
                                     href="#"
-                                    onclick=${()=>{m&&(O(!0),m((()=>O(!1)),f))}}
-                                    >${f?"Load more options":"Reload options?"}</a
+                                    onclick=${()=>{m&&(N(!0),m((()=>N(!1)),v))}}
+                                    >${v?"Load more options":"Reload options?"}</a
                                   >`}
                             </span>`}
                       `;var i})):B`<div className=${ms.noOptions}>
                     Your search did not match any values
                   </div>`:B`<div className=${ms.noOptions}>
                   <span className=${ms.noOptionsRetry}>
-                    ${T?B`<${it} color="#999" />`:B`${h?"Could not load options.":"No options found."}
+                    ${F?B`<${it} color="#999" />`:B`${h?"Could not load options.":"No options found."}
                           <a
                             className=${ms.optionsRefresh}
                             href="#"
-                            onclick=${()=>{m&&(F(!0),m((()=>F(!1))))}}
+                            onclick=${()=>{m&&(E(!0),m((()=>E(!1))))}}
                           >
                             ${" "}Try again?</a
                           >`}
                   </span>
                 </div>`}
           </div>`:B` <div className="${ms.mappedFieldMenu}">
-            ${v?B`<${v} tags=${n} onSelect=${a}>
-                <//>`:B`${Object.keys(c?n:ps(n,L)).length>0?Object.keys(c?n:ps(n,L)).map(((e,t,i)=>B`
+            ${x?B`<${x} tags=${n} onSelect=${a}>
+                <//>`:B`${Object.keys(c?n:ps(n,k)).length>0?Object.keys(c?n:ps(n,k)).map(((e,t,i)=>B`
                         <${_s}
                           objectKey="${e}"
                           keyValue="${e}"
-                          objectData="${c?n[e]:ps(n,L)[e]}"
+                          objectData="${c?n[e]:ps(n,k)[e]}"
                           onSelect=${a}
                           isRoot="${!0}"
                         />
                         ${t!==i.length-1?"":B`<span>
-                              ${S?B`<${it} color="#999" />`:B` <a
+                              ${M?B`<${it} color="#999" />`:B` <a
                                     className=${ms.optionsRefreshProminent}
                                     href="#"
-                                    onclick=${V}
+                                    onclick=${U}
                                     >Reload fields?</a
                                   >`}
                             </span>`}
                       `)):B`<div className=${ms.noOptions}>
-                      ${c||""===L?B`
+                      ${c||""===k?B`
                             <span className=${ms.noOptionsRetry}>
-                              ${S?B`<${it} color="#999" />`:B`${A?"Could not load fields.":"No fields found."}
+                              ${M?B`<${it} color="#999" />`:B`${D?"Could not load fields.":"No fields found."}
                                     <a
                                       className=${ms.optionsRefresh}
                                       href="#"
-                                      onclick=${e=>{e.preventDefault(),e.stopPropagation(),V()}}
+                                      onclick=${e=>{e.preventDefault(),e.stopPropagation(),U()}}
                                     >
                                       ${" "}Try again?</a
                                     >`}
@@ -7011,14 +7011,26 @@
               </div>
             </div>
           `}
-    `}});class ap{static SDK_VERSION="4.5.16";config;apiHandler;initConfig;eventEmitter=(()=>new te)();static html=(()=>B)();static RenderModes=(()=>ae)();static TemplateFormRenderModes=(()=>oe)();static Layouts=(()=>ie)();static ViewStyles=(()=>ne)();static MarketplaceRenderModes=(()=>se)();static Helpers;authModalId="";forceRerender=!1;constructor(e){let t;const n=e.baseUrl||"https://app.integry.io",i=e;if(i.user){const{userId:e,apiKey:t,...n}=i.user;"userId"in i||(i.userId=""),"userId"in i&&(i.userId=e.toString()),i.xIntegryConfig||(i.xIntegryConfig={}),i.xIntegryConfig.appAuth||(i.xIntegryConfig.appAuth={}),i.xIntegryConfig.appAuth.extras||(i.xIntegryConfig.appAuth.extras={}),i.xIntegryConfig.appAuth.apiKey=(t||"").toString(),i.xIntegryConfig.appAuth.extras=n}const o={oauthVerifyPath:"auth/verify",endpointsUrl:"https://integry-app.appspot.com",baseUrl:n,baseUrlv2:`${n}/v2`,baseAPIUrl:"https://api.integry.io",apiKey:i.xIntegryConfig?.appAuth?.apiKey,authId:i.xIntegryConfig?.appAuth?.authId,extras:i.xIntegryConfig?.appAuth?.extras},s=i.options||i.userConfig||{};if(i.options&&i.payloads&&(i.options.objects=e.payloads),"appKey"in i)t={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId},this.config={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId,deploymentId:i.deploymentId,userConfig:i.deploymentId?{...s,tags:s?.tags?[...s?.tags,`${i.deploymentId}`]:[`${i.deploymentId}`]}:s};else{const e=this.getAuthParamsFromUrl()||{};t={...o,...e},this.config={...o,...e,userConfig:i.userConfig}}this.authModalId=this.getRandomFlowId(6),this.apiHandler=new X(t),this.verifyAuthConfig().then((e=>{e?.config_verified?this.eventEmitter.emit("ready",{isReady:!0}):console.error("IntegrySDK: Auth config verification failed, are your auth parameters correct?")})).catch((e=>console.error(e))),this.initConfig={containerId:"",renderMode:oe.INLINE}}SDKFailedHandler=(e,t)=>{const n=e.options||e.userConfig||{},i=document.getElementById(t);throw i&&z(B`
+    `}});const ap=e=>{const{tags:t,onSelect:n,...i}=e,o={FirstName:"John",LastName:"Doe",Gender:"male",Age:20,DateOfBirth:"1990-01-01",Email:"johndoe@example.com",Phone:"555-555-1234",Address:{Street:"123 Main St",City:"New York",State:"NY",PostalCode:"10001",Country:"USA"},PreferredContactMethod:"email",LastContacted:"2023-01-15",Twitter:"@johndoe",Website:"https://www.example.com",LinkedIn:"https://www.linkedin.com/in/johndoe",Bio:"John Doe is a software engineer with over 10 years of experience.",Relationship:"professional",Tags:["tech","conference","networking"],JobTitle:"Software Engineer",Company:"Example Corp.",DateCreated:"2023-04-14T12:00:00Z",DateUpdated:"2023-04-14T12:00:00Z",NextMeeting:{Date:"2023-05-01",Topic:"Project Planning",Location:"New York"},Notes:"Met at the 2022 Tech Conference in San Francisco."};return B`
+    <div>
+      ${Object.keys(o).map(((e,t,i)=>B`
+          <${_s}
+            objectKey="${e}"
+            keyValue="${e}"
+            objectData="${o[e]}"
+            onSelect=${n}
+            isRoot="${!0}"
+          />
+        `))}
+    </div>
+  `};class lp{static SDK_VERSION="4.5.17";config;apiHandler;initConfig;eventEmitter=(()=>new te)();static html=(()=>B)();static RenderModes=(()=>ae)();static TemplateFormRenderModes=(()=>oe)();static Layouts=(()=>ie)();static ViewStyles=(()=>ne)();static MarketplaceRenderModes=(()=>se)();static Helpers;authModalId="";forceRerender=!1;constructor(e){let t;const n=e.baseUrl||"https://app.integry.io",i=e;if(i.user){const{userId:e,apiKey:t,...n}=i.user;"userId"in i||(i.userId=""),"userId"in i&&(i.userId=e.toString()),i.xIntegryConfig||(i.xIntegryConfig={}),i.xIntegryConfig.appAuth||(i.xIntegryConfig.appAuth={}),i.xIntegryConfig.appAuth.extras||(i.xIntegryConfig.appAuth.extras={}),i.xIntegryConfig.appAuth.apiKey=(t||"").toString(),i.xIntegryConfig.appAuth.extras=n}const o={oauthVerifyPath:"auth/verify",endpointsUrl:"https://integry-app.appspot.com",baseUrl:n,baseUrlv2:`${n}/v2`,baseAPIUrl:"https://api.integry.io",apiKey:i.xIntegryConfig?.appAuth?.apiKey,authId:i.xIntegryConfig?.appAuth?.authId,extras:i.xIntegryConfig?.appAuth?.extras},s=i.options||i.userConfig||{};if(i.options&&i.payloads&&(i.options.objects=e.payloads),"appKey"in i)t={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId},this.config={...i,...o,appKey:i.appKey,hash:i.hash,userId:i.userId,deploymentId:i.deploymentId,userConfig:i.deploymentId?{...s,tags:s?.tags?[...s?.tags,`${i.deploymentId}`]:[`${i.deploymentId}`]}:s};else{const e=this.getAuthParamsFromUrl()||{};t={...o,...e},this.config={...o,...e,userConfig:i.userConfig}}this.authModalId=this.getRandomFlowId(6),this.apiHandler=new X(t),this.verifyAuthConfig().then((e=>{e?.config_verified?this.eventEmitter.emit("ready",{isReady:!0}):console.error("IntegrySDK: Auth config verification failed, are your auth parameters correct?")})).catch((e=>console.error(e))),this.initConfig={containerId:"",renderMode:oe.INLINE}}SDKFailedHandler=(e,t)=>{const n=e.options||e.userConfig||{},i=document.getElementById(t);throw i&&z(B`
           <${Il}
             message="SDK failed to load"
             debug=${n.debug}
             config=${n.debug?e:null}
           >
           <//>
-        `,i),new Error("IntegrySDK: SDK failed to load")};getRandomFlowId=e=>{const t=[],n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let i=0;i<e;i+=1)t.push(n.charAt(Math.floor(52*Math.random())));return`x-integry-modal-${t.join("")}`};getAuthParamsFromUrl=()=>{const e=ge()&&new URLSearchParams(window.location.search);if(e){const t=e.get("user_id"),n=e.get("app_key"),i=e.get("hash"),o=e.get("deployment_id");if(!(t&&n&&i&&o))throw new Error(`The following auth variables are undefined: ${t?"":"userId"} ${n?"":"appKey"} ${i?"":"hash"} ${o?"":"deploymentId"}`);return{userId:t,appKey:n,hash:i,deploymentId:o}}return{userId:"",appKey:"",hash:"",deploymentId:""}};printVersion=()=>{console.info(`@integry/sdk@${ap.SDK_VERSION}`)};setupFlowFormDestination=(e,t)=>{let n=null;if(t){if(e===oe.MODAL||e===oe.INLINE)throw new Error('The `templateContainerId` property is unsupported when render mode is set to "MODAL" or "INLINE"');n=document.getElementById(t),n||console.warn(`The template form render target with id ${t} was not found`)}switch(e){case oe.MODAL:return n=document.createElement("div"),n.id=this.getRandomFlowId(8),document.body.appendChild(n),n;case oe.INLINE:return null;case oe.DETACHED:case oe.CUSTOM:return n;default:throw new Error(`Unsupported renderMode ${e} configuration, please provide one of ${JSON.stringify(Object.keys(oe))}`)}};renderFlowSetupForm=e=>{const{flowId:t,flowContainerId:n,versionId:i,viewStyle:o}=e,s=document.getElementById(n);if(!s)return void console.warn(`Integry template form render target with id ${n} was not found`);let a=Number(t),l=this.config.integrationId||e.integrationId;l||(l=Number(ye("integrationId"))),a||(a=Number(ye("flowId")));const r=he();r.setState({integrationIdToEdit:l,userConfig:this.config.userConfig,genericData:{...pe.genericData,implicitAuthEnabled:!!this.config.xIntegryConfig?.appAuth?.apiKey,deploymentId:Number(this.config.deploymentId),isAnonymous:!!this.config.xIntegryConfig?.isAnonymous,viewStyle:o||ne.COMFORTABLE,testMultipurpose:!0,customFlowSetupRender:!0}}),z(B`
+        `,i),new Error("IntegrySDK: SDK failed to load")};getRandomFlowId=e=>{const t=[],n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let i=0;i<e;i+=1)t.push(n.charAt(Math.floor(52*Math.random())));return`x-integry-modal-${t.join("")}`};getAuthParamsFromUrl=()=>{const e=ge()&&new URLSearchParams(window.location.search);if(e){const t=e.get("user_id"),n=e.get("app_key"),i=e.get("hash"),o=e.get("deployment_id");if(!(t&&n&&i&&o))throw new Error(`The following auth variables are undefined: ${t?"":"userId"} ${n?"":"appKey"} ${i?"":"hash"} ${o?"":"deploymentId"}`);return{userId:t,appKey:n,hash:i,deploymentId:o}}return{userId:"",appKey:"",hash:"",deploymentId:""}};printVersion=()=>{console.info(`@integry/sdk@${lp.SDK_VERSION}`)};setupFlowFormDestination=(e,t)=>{let n=null;if(t){if(e===oe.MODAL||e===oe.INLINE)throw new Error('The `templateContainerId` property is unsupported when render mode is set to "MODAL" or "INLINE"');n=document.getElementById(t),n||console.warn(`The template form render target with id ${t} was not found`)}switch(e){case oe.MODAL:return n=document.createElement("div"),n.id=this.getRandomFlowId(8),document.body.appendChild(n),n;case oe.INLINE:return null;case oe.DETACHED:case oe.CUSTOM:return n;default:throw new Error(`Unsupported renderMode ${e} configuration, please provide one of ${JSON.stringify(Object.keys(oe))}`)}};renderFlowSetupForm=e=>{const{flowId:t,flowContainerId:n,versionId:i,viewStyle:o}=e,s=document.getElementById(n);if(!s)return void console.warn(`Integry template form render target with id ${n} was not found`);let a=Number(t),l=this.config.integrationId||e.integrationId;l||(l=Number(ye("integrationId"))),a||(a=Number(ye("flowId")));const r=he();r.setState({integrationIdToEdit:l,userConfig:this.config.userConfig,genericData:{...pe.genericData,implicitAuthEnabled:!!this.config.xIntegryConfig?.appAuth?.apiKey,deploymentId:Number(this.config.deploymentId),isAnonymous:!!this.config.xIntegryConfig?.isAnonymous,viewStyle:o||ne.COMFORTABLE,testMultipurpose:!0,customFlowSetupRender:!0}}),z(B`
         <${re.Provider}
           value=${{apiHandler:this.apiHandler,eventEmitter:this.eventEmitter,isPreviewMode:!1}}
         >
@@ -7302,10 +7314,10 @@
                 isReadOnly="${!1}"
                 selectedAuthId="${t.connectedAccountId}"
                 accountConnected=${!0}
-                tagsComponent=${t.tagsComponent}
+                tagsComponent=${ap}
                 onFieldChangeCallback=${t.onFieldChangeCallback}
                 tagsTree=${t.tagsTree}
               />
             <//>
           <//>
-        </div>`,n)}else console.warn(`Integry SDK render target with id ${t.containerId} was not found`)}})();verifyAuthConfig=()=>this.apiHandler.verifyAuthConfig({deploymentId:this.config.deploymentId});getUserVariables=async()=>{try{const e=await this.apiHandler.getUserVariables();return e?e.results:[]}catch(e){return console.error(e),[]}};destroy=()=>{try{this.eventEmitter.offAll();const e=document.getElementById(this.authModalId);e&&e.remove()}catch(e){console.error("There was an error unsubscribing from all events")}};static setFieldValue=(e,t)=>{const n=document.getElementById(e)?.querySelector("input");if(n&&n instanceof HTMLInputElement){n.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});n.dispatchEvent(e)}const i=document.getElementById(`tagify_${e}`);if(i&&i instanceof HTMLInputElement){i.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});i.dispatchEvent(e)}};getMethod=()=>"POST";getBaseAPIUrl=()=>"https://api.integry.io";getHeaders=()=>({"Content-Type":"application/json"})}return ap.Helpers={getAuthHash:async function(e,t){const n=e=>new Uint8Array([...unescape(encodeURIComponent(e))].map((e=>e.charCodeAt(0)))),i=n(t),o=n(e),s=await crypto.subtle.importKey("raw",i,{name:"HMAC",hash:"SHA-256"},!0,["sign"]),a=await crypto.subtle.sign("HMAC",s,o);return[...new Uint8Array(a)].map((e=>e.toString(16).padStart(2,"0"))).join("")}},ap.html=B,ap}));
+        </div>`,n)}else console.warn(`Integry SDK render target with id ${t.containerId} was not found`)}})();verifyAuthConfig=()=>this.apiHandler.verifyAuthConfig({deploymentId:this.config.deploymentId});getUserVariables=async()=>{try{const e=await this.apiHandler.getUserVariables();return e?e.results:[]}catch(e){return console.error(e),[]}};destroy=()=>{try{this.eventEmitter.offAll();const e=document.getElementById(this.authModalId);e&&e.remove()}catch(e){console.error("There was an error unsubscribing from all events")}};static setFieldValue=(e,t)=>{const n=document.getElementById(e)?.querySelector("input");if(n&&n instanceof HTMLInputElement){n.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});n.dispatchEvent(e)}const i=document.getElementById(`tagify_${e}`);if(i&&i instanceof HTMLInputElement){i.value=t;const e=new KeyboardEvent("keyup",{key:"a",bubbles:!0,cancelable:!0});i.dispatchEvent(e)}};getMethod=()=>"POST";getBaseAPIUrl=()=>"https://api.integry.io";getHeaders=()=>({"Content-Type":"application/json"})}return lp.Helpers={getAuthHash:async function(e,t){const n=e=>new Uint8Array([...unescape(encodeURIComponent(e))].map((e=>e.charCodeAt(0)))),i=n(t),o=n(e),s=await crypto.subtle.importKey("raw",i,{name:"HMAC",hash:"SHA-256"},!0,["sign"]),a=await crypto.subtle.sign("HMAC",s,o);return[...new Uint8Array(a)].map((e=>e.toString(16).padStart(2,"0"))).join("")}},lp.html=B,lp}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.16",
+  "version": "4.5.17",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
+import { createElement } from 'preact/compat';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -46,6 +47,11 @@ interface FieldMenuProps {
   tagsComponent?: any;
 }
 
+const customComponent = (props: { element: any }) => {
+  const { element } = props;
+  return html` <${element} /> `;
+};
+
 const FieldDropdown = (props: FieldMenuProps) => {
   const {
     appName = '',
@@ -205,6 +211,13 @@ const FieldDropdown = (props: FieldMenuProps) => {
       selectedValues = [value];
     }
   }
+
+  if (tagsComponent) {
+    const tagsComponentRender = createElement(tagsComponent, {
+      onSelect: () => alert('Selected!'),
+    });
+  }
+
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current

package/src/index.ts

@@ -48,7 +48,7 @@ import FunctionForm from '@/features/common/FunctionForm';
 import { openPopupWindow } from '@/utils/popup';
 import { Modal } from '@/components/Modal';
 import { ListBox } from '@/components/MultipurposeField/Dropdown';
-// import { TestComponent } from '@/components/TestComponent';
+import { TestComponent } from '@/components/TestComponent';
 import { MultipurposeField } from './components/MultipurposeField';
 import SDKDebugContainer from './features/containers/SDKDebugContainer';
 
@@ -2018,7 +2018,7 @@ export class IntegryJS {
                 isReadOnly="${false}"
                 selectedAuthId="${options.connectedAccountId}"
                 accountConnected=${true}
-                tagsComponent=${options.tagsComponent}
+                tagsComponent=${TestComponent}
                 onFieldChangeCallback=${options.onFieldChangeCallback}
                 tagsTree=${options.tagsTree}
               />

package/src/types/preact-compat.d.ts

@@ -0,0 +1,4 @@
+declare module '@preact/compat' {
+  export * from 'react';
+  export { default } from 'react';
+}