@bikdotai/bik-component-library 0.0.551 → 0.0.552-beta.1

package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
 declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
 export default EventsTrigger;

package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts

@@ -1,2 +1,2 @@
-import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
+import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
 export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];

package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
 declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
 export default IGTrigger;

package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts

@@ -1,2 +1,2 @@
-import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
+import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
 export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];

package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DropdownOption } from "../../../dropdown/type";
-import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
-import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
+import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
 declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
     cacheKey: string;
     propertyAddBtnText: string;

package/dist/cjs/components/dropdown/ChipInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ChipInputProps {
+    chips: string[];
+    onDeleteChip: (chip: string, index: number) => void;
+    containerStyle?: React.CSSProperties;
+    isDropdownOpened?: boolean;
+    sizeToUse?: 'default' | 'small';
+    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

package/dist/cjs/components/dropdown/ChipInput.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),i=require("../../assets/icons/cross.svg.js"),r=require("../tag/Tag.js"),n=require("../TypographyStyle.js");exports.default=l=>{let{chips:o,onDeleteChip:a,containerStyle:c={},sizeToUse:d="default",isDropdownOpened:p,setDropdownVisibility:g}=l;return e.jsxs("div",Object.assign({style:Object.assign({border:`1px solid ${s.COLORS.stroke.primary}`,width:"360px",height:"100%",padding:"8px",display:"flex",justifyContent:"space-between",alignItems:"center",borderRadius:"4px"},c)},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}},{children:[o.slice(0,2).map(((s,t)=>e.jsx("div",{children:e.jsx(r.Tag,Object.assign({tagText:s,TrailingIcon:()=>e.jsx(i.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>a(s,t)})},{children:s}))},t))),o.length>2&&e.jsx(n.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${o.length-2} more`})),0===o.length&&e.jsx(n.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:"Select.."}))]})),e.jsx("div",Object.assign({onClick:()=>null==g?void 0:g(!p)},{children:e.jsx(t.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:"small"===d?20:24,height:"small"===d?20:24,color:s.COLORS.content.primary})}))]}))};

package/dist/cjs/components/dropdown/Dropdown.d.ts

@@ -9,5 +9,7 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolderHeight?: string;
     showPlaceholderWhenSelected?: boolean;
     inputStyle?: React.CSSProperties;
+    inputType?: 'chip' | 'default';
+    onDeleteChip?: (chip: string, index: number) => void;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/cjs/components/dropdown/Dropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./DropdownPopover/index.js");function a(){}const d=d=>{var u,c,p,{placeHolder:h,size:v,onSelect:g,defaultOptions:j,disabled:b,noErrorHint:f,placeHolderHeight:x,showPlaceholderWhenSelected:w=!1,inputStyle:S={}}=d,y=e.__rest(d,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle"]);const[m,H]=n.useState(!1),O=null!=v?v:"default",q=n.useRef(),[E,I]=n.useState(null!=j?j:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==y?void 0:y.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),I([...t])}),[y.options]),n.useEffect((()=>{j&&I([...j])}),[j]);const P=E.length?E.map((e=>e.label)).join(", "):void 0;return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===O?32:48),width:null!==(c=null!==(u=y.buttonWidth)&&void 0!==u?u:y.width)&&void 0!==c?c:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},S),input:{minHeight:"100%"}}},{children:t.jsx(s.DropdownPopover,Object.assign({ref:q,onSelect:function(e){Array.isArray(e)?I([...e]):I([e]),null==g||g(e)},disabled:b,onDropdownVisbilityChange:e=>H(e)},y,{children:t.jsx(i.Input,{version:y.version,noErrorHint:f,state:b?"disabled":"none",value:w?h:null!=P?P:"",errorMessage:y.error,variant:O,placeholder:null!=h?h:"Select an option",width:null!==(p=y.width)&&void 0!==p?p:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(o.default,{style:{transform:m?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===O?20:24,height:"small"===O?20:24,color:r.COLORS.content.primary})},truncateText:!0})}))}))};d.displayName="Dropdown",exports.Dropdown=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),i=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),d=require("./DropdownPopover/index.js"),u=require("./OpenedDropdown/utils/iterationOnOptions.js");function a(){}const p=p=>{var c,h,v,g,j,{placeHolder:f,size:w,onSelect:b,defaultOptions:x,disabled:y,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:D=!1,inputStyle:q={},inputType:H="default",onDeleteChip:m}=p,C=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[I,E]=n.useState(!1),P=null!=w?w:"default",T=n.useRef(),[A,_]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==C?void 0:C.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),_([...t])}),[C.options]),n.useEffect((()=>{x&&_([...x])}),[x]);const z=u.getSelectedOptionsAsText(A),W=u.getSelectedOptionsAsArray(A);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:S||("small"===P?32:48),width:null!==(h=null!==(c=C.buttonWidth)&&void 0!==c?c:C.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},q),input:{minHeight:"100%"}}},{children:t.jsxs(d.DropdownPopover,Object.assign({ref:T,onSelect:function(e){Array.isArray(e)?_([...e]):_([e]),null==b||b(e)},disabled:y,onDropdownVisbilityChange:e=>E(e)},C,{hideOverLapAbs:"chip"===H},{children:["default"==H&&t.jsx(r.Input,{version:C.version,noErrorHint:O,state:y?"disabled":"none",value:D?f:null!=z?z:"",errorMessage:C.error,variant:P,placeholder:null!=f?f:"Select an option",width:null!==(v=C.width)&&void 0!==v?v:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(o.default,{style:{transform:I?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===P?20:24,height:"small"===P?20:24,color:i.COLORS.content.primary})},truncateText:!0}),"chip"==H&&t.jsx(s.default,{chips:W,onDeleteChip:(e,t)=>{null==m||m(e,t)},isDropdownOpened:I,sizeToUse:P,containerStyle:{width:null!==(g=C.width)&&void 0!==g?g:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==T?void 0:T.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;

package/dist/cjs/components/dropdown/DropdownPopover/index.d.ts

@@ -10,6 +10,7 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
     tooltipContent?: string | undefined;
     tooltipDirection?: Placement | undefined;
     showTooltipArrow?: boolean | undefined;
+    hideOverLapAbs?: boolean | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

package/dist/cjs/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("react"),t=require("react-popper"),n=require("../../dropShadow/DropShadow.js"),l=require("../../tooltips/Tooltip.js"),i=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=d(r).default.forwardRef(((d,p)=>{var{children:a,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w}=d,b=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const f=p,[h,D]=r.useState(!1),[O,g]=r.useState(null),[x,y]=r.useState(null),m=r.useRef(null),{styles:S,attributes:C}=t.usePopper(O,x,{placement:b.placement,strategy:b.strategy}),q=e=>{var o,r;"2.0"===u&&b.isMultiSelect&&e&&(null===(o=b.onSelect)||void 0===o||o.call(b,[...e])),D(!1),null===(r=null==b?void 0:b.onClose)||void 0===r||r.call(b)};r.useImperativeHandle(f,(()=>({openDropdown:h})),[]),r.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=h)}),[h]),r.useEffect((()=>{null==c||c(h)}),[h]);const _=()=>o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:g},{children:[o.jsx(i.OverLapAbs,{ref:m,disabled:b.disabled,onClick:e=>{var o;null===(o=b.onDropdownOpen)||void 0===o||o.call(b),h?(D(!1),e.preventDefault()):b.disabled||D(!0)}}),a]})),h&&o.jsx(i.OpenDropdownContainer,Object.assign({ref:y,style:Object.assign(Object.assign({},S.popper),{zIndex:3})},C.popper,{children:o.jsx(n.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},b,{onSelect:e=>{var o;"2.0"===u&&b.isMultiSelect||(null===(o=b.onSelect)||void 0===o||o.call(b,e),D(!1))},onClose:q,version:u,headerRef:m}))}))}))]});return o.jsx(o.Fragment,{children:h||void 0===v?_():o.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",{children:_()})}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("react"),n=require("react-popper"),t=require("../../dropShadow/DropShadow.js"),i=require("../../tooltips/Tooltip.js"),l=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=d(r).default.forwardRef(((d,p)=>{var{children:a,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w}=d,b=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const f=p,[h,D]=r.useState(!1),[O,y]=r.useState(null),[g,x]=r.useState(null),m=r.useRef(null),{styles:S,attributes:C}=n.usePopper(O,g,{placement:b.placement,strategy:b.strategy}),q=e=>{var o,r;"2.0"===u&&b.isMultiSelect&&e&&(null===(o=b.onSelect)||void 0===o||o.call(b,[...e])),D(!1),null===(r=null==b?void 0:b.onClose)||void 0===r||r.call(b)};r.useImperativeHandle(f,(()=>({openDropdown:h,closeDropdown:()=>D(!1),openDropdownFn:()=>D(!0),setDropdownVisibility:D})),[]),r.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=h)}),[h]),r.useEffect((()=>{null==c||c(h)}),[h]);const _=()=>o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:y},{children:[!b.hideOverLapAbs&&o.jsx(l.OverLapAbs,{ref:m,disabled:b.disabled,onClick:e=>{var o;null===(o=b.onDropdownOpen)||void 0===o||o.call(b),h?(D(!1),e.preventDefault()):b.disabled||D(!0)}}),a]})),h&&o.jsx(l.OpenDropdownContainer,Object.assign({ref:x,style:Object.assign(Object.assign({},S.popper),{zIndex:3})},C.popper,{children:o.jsx(t.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},b,{onSelect:e=>{var o;"2.0"===u&&b.isMultiSelect||(null===(o=b.onSelect)||void 0===o||o.call(b,e),D(!1))},onClose:q,version:u,headerRef:m}))}))}))]});return o.jsx(o.Fragment,{children:h||void 0===v?_():o.jsx(i.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",{children:_()})}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),n=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:x,isSearchable:f,isMultiSelect:g,width:v,allowFreeForm:w,height:b,onClose:y,onSelect:m,onSearch:O,version:q,skipSorting:M,headerRef:C,hideSelectAll:D,primaryButtonText:L}=j;const{dropdownOptions:F,search:A,searchedString:k,searchedOptions:B,onApplyHandler:H,selectAllHandler:Z,onMultiSelectClear:R,onFreeFormSelect:T,onMultiSelectApply:P,latestDropdownOptionsRef:_,getSelectedOptions:z}=n.useDropdown(q,x,m,M,g,O),[E,I]=t.useState(null!=v?v:S),[K,N]=t.useState(null),W=t.useRef(null);s.useOutside(W,(()=>{if(N(null),g&&"2.0"===q){const e=z(_.current);null==y||y(e)}else null==y||y(F)}),[C]);const G=null!=b?b:h,J="number"==typeof G?f&&g?G-96:f&&!g||!f&&g?G-48:G:G;t.useEffect((()=>{const e=null!=v?v:S;if(null===K)I(e);else if("number"==typeof e)I(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));I(t)}}),[K]);const Q=[],U=(k&&O?B:F).map((e=>{var t,r;if(k&&!O){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(k.toLowerCase()))&&(Q.push(!k||e.label===k),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(k.toLowerCase()))||(null===(r=e.searchKey)||void 0===r?void 0:r.toLowerCase().includes(k.toLowerCase()))?(Q.push(!k||e.label===k),e):null}return e})).filter((e=>null!==e)),V=!!f&&k&&0===U.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:q,ref:W,style:{width:E}},{children:[e.jsxs("div",Object.assign({style:{width:K?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!f&&e.jsx(d.SearchBox,{onSearch:A,version:q}),U.length||k?e.jsxs(a.MenuListContainer,Object.assign({minHeight:G,maxHeight:J},{children:[!!g&&!V&&!D&&e.jsx(u.SelectAllMenu,{version:q,options:k&&O?B:F,onSelect:Z}),!w&&V&&e.jsx(p.SearchZeroState,{height:J,searchedString:k}),w&&(V||!!Q.length&&Q.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:q,isMultiSelect:g,onSelect:T,searchedString:k}),e.jsx(l.MenuList,{version:q,onSelect:H,showDescription:function(e,t){N(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:U})]})):e.jsx("div",Object.assign({style:{height:G,display:"flex"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!U.length&&!k)&&"2.0"!==q&&e.jsx(c.default,{onClear:R,onApply:P,list:k&&O?B:F,buttonText:L})]})),!!K&&e.jsx(o.Description,{title:K.title,description:K.description,version:q})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),r=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),s=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),p=require("./searchbox/SearchBox.js"),d=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:f,isSearchable:x,isMultiSelect:g,width:w,allowFreeForm:b,height:v,onClose:m,onSelect:y,onSearch:O,version:M,skipSorting:q,headerRef:C,hideSelectAll:D,primaryButtonText:L,onInfiniteScroll:F,onMultiSelectClear:k,onDropdownItemClick:A,buttonOptions:B}=j;const{dropdownOptions:I,search:H,searchedString:Z,searchedOptions:R,onApplyHandler:T,selectAllHandler:P,onMultiSelectClear:_,onFreeFormSelect:z,onMultiSelectApply:E,latestDropdownOptionsRef:K,getSelectedOptions:N}=o.useDropdown(M,f,y,q,g,O),[W,G]=t.useState(null!=w?w:S),[J,Q]=t.useState(null),U=t.useRef(null);r.useOutside(U,(()=>{if(Q(null),g&&"2.0"===M){const e=N(K.current);null==m||m(e)}else null==m||m(I)}),[C]);const V=null!=v?v:h,X="number"==typeof V?x&&g?V-96:x&&!g||!x&&g?V-48:V:V;t.useEffect((()=>{const e=null!=w?w:S;if(null===J)G(e);else if("number"==typeof e)G(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));G(t)}}),[J]);const Y=[],$=(Z&&O?R:I).map((e=>{var t,n;if(Z&&!O){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))&&(Y.push(!Z||e.label===Z),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(Z.toLowerCase()))?(Y.push(!Z||e.label===Z),e):null}return e})).filter((e=>null!==e)),ee=!!x&&Z&&0===$.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:M,ref:U,style:{width:W}},{children:[e.jsxs("div",Object.assign({style:{width:J?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!x&&e.jsx(p.SearchBox,{onSearch:H,version:M}),$.length||Z?e.jsxs(a.MenuListContainer,Object.assign({minHeight:V,maxHeight:X},{children:[!!g&&!ee&&!D&&e.jsx(u.SelectAllMenu,{version:M,options:Z&&O?R:I,onSelect:P}),!b&&ee&&e.jsx(d.SearchZeroState,{height:X,searchedString:Z}),b&&(ee||!!Y.length&&Y.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:M,isMultiSelect:g,onSelect:z,searchedString:Z}),e.jsx(l.MenuList,{onInfiniteScroll:F,onDropdownItemClick:A,version:M,onSelect:T,showDescription:function(e,t){Q(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:$})]})):e.jsx("div",Object.assign({style:{height:V,display:"flex"}},{children:e.jsx(n.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!$.length&&!Z)&&"2.0"!==M&&e.jsx(c.default,{onClear:()=>{_(),null==k||k()},onApply:E,list:Z&&O?R:I,buttonText:L,buttonOptions:B})]})),!!J&&e.jsx(s.Description,{title:J.title,description:J.description,version:M})]}))};

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-export declare const MenuItem: React.FC<{
+interface MenuItemProps {
     option: SingleOption | MultiSelectOption;
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (option: SingleOption) => void;
+    onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
     version?: '1.0' | '2.0';
-}>;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;
+export {};

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -2,4 +2,4 @@
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`;exports.MenuItem=t=>{let{option:i,isMultiSelect:l,showDescription:a,onSelect:d,last:u,version:p}=t;var x;function g(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(c,{version:p,style:u?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),g(!i.selected)},onMouseOver:function(){i.description?a(i.label,i.description):a()},listItem:{value:i.value,label:i.label},subText:i.subText,leadingIcon:l?e.jsxs("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e.jsx(n.CheckBox,{size:"2.0"===p?"SMALL":"DEFAULT",isDisabled:null!==(x=i.disabled)&&void 0!==x&&x,isChecked:!!i.selected,onValueChange:g}),e.jsx("div",Object.assign({style:{marginRight:"-4px"}},{children:i.leadingIcon}))]})):i.leadingIcon?e.jsx(e.Fragment,{children:i.leadingIcon}):e.jsx(e.Fragment,{}),customComponent:i.customComponent,trailingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(s.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Freeform"}))}):i.trailingIcon?e.jsx(e.Fragment,{children:i.trailingIcon}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":i.selected?"selected":"default"})};
+`;exports.MenuItem=t=>{let{option:i,isMultiSelect:l,showDescription:a,onSelect:d,last:u,version:p,onDropdownItemClick:m}=t;var x;function g(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(c,{version:p,style:u?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),g(!i.selected),null==m||m(i)},onMouseOver:function(){i.description?a(i.label,i.description):a()},listItem:{value:i.value,label:i.label},subText:i.subText,leadingIcon:l?e.jsxs("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e.jsx(n.CheckBox,{size:"2.0"===p?"SMALL":"DEFAULT",isDisabled:null!==(x=i.disabled)&&void 0!==x&&x,isChecked:!!i.selected,onValueChange:g}),e.jsx("div",Object.assign({style:{marginRight:"-4px"}},{children:i.leadingIcon}))]})):i.leadingIcon?e.jsx(e.Fragment,{children:i.leadingIcon}):e.jsx(e.Fragment,{}),customComponent:i.customComponent,trailingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(s.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Freeform"}))}):i.trailingIcon?e.jsx(e.Fragment,{children:i.trailingIcon}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":i.selected?"selected":"default"})};

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
-export declare const MenuList: React.FC<{
+interface MenuListProps {
     options: DropdownOption[];
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
     version?: '1.0' | '2.0';
-}>;
+    onInfiniteScroll?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
+}
+export declare const MenuList: React.FC<MenuListProps>;
+export {};

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=n=>{let{options:i,isMultiSelect:r,showDescription:o,onSelect:l,version:c}=n;return e.jsx(e.Fragment,{children:i.map(((n,a)=>{const u=a===i.length-1;if(n.options){const i=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===c?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:c},{children:[i.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):e.jsx(e.Fragment,{}),i.label]})),i.options.map(((s,n)=>e.jsx(t.MenuItem,{version:c,last:n===i.options.length-1,onSelect:l,showDescription:o,isMultiSelect:r,option:s},`${a}-${n}`)))]}),a)}return e.jsx(t.MenuItem,{version:c,last:u,onSelect:l,showDescription:o,isMultiSelect:r,option:n},a)}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=r=>{let{options:i,isMultiSelect:o,showDescription:l,onSelect:c,version:u,onInfiniteScroll:a,onDropdownItemClick:p}=r;const d=n.useRef(null),j=n.useRef(null),g=n.useCallback((()=>{d.current&&d.current.disconnect(),d.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==a||a())})),j.current&&d.current.observe(j.current)}),[a]);return n.useEffect((()=>(g(),()=>{d.current&&d.current.disconnect()})),[g,i]),e.jsx(e.Fragment,{children:i.map(((n,r)=>{const a=r===i.length-1;if(n.options){const i=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===u?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:u},{children:[i.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):e.jsx(e.Fragment,{}),i.label]})),i.options.map(((n,s)=>e.jsx(t.MenuItem,{version:u,last:s===i.options.length-1,onSelect:c,showDescription:l,onDropdownItemClick:p,isMultiSelect:o,option:n},`${r}-${s}`))),a?e.jsx("span",{ref:j}):null]}),r)}return e.jsxs("div",{children:[e.jsx(t.MenuItem,{version:u,last:a,onSelect:c,showDescription:l,onDropdownItemClick:p,isMultiSelect:o,option:n},r),a?e.jsx("span",{ref:j}):null]},r)}))})};

package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { DropdownOption } from '../../../type';
-declare const MultiSelectDropdownBottomBar: React.FC<{
+import { ButtonOptions, DropdownOption } from '../../../type';
+interface MultiSelectDropdownBottomBarProps {
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
     buttonText?: string;
-}>;
+    buttonOptions?: ButtonOptions;
+}
+declare const MultiSelectDropdownBottomBar: React.FC<MultiSelectDropdownBottomBarProps>;
 export default MultiSelectDropdownBottomBar;

package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:u,buttonText:a}=o;const c=u.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{l()}})]}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),n=require("../../../../../constants/Theme.js"),o=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=s=>{const{onClear:i,onApply:l,list:u,buttonText:a,buttonOptions:c}=s,{primaryButtonText:p,primaryButtonType:y,secondaryButtonText:d,secondaryButtonType:x}=null!=c?c:{},j=u.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(o.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:n.COLORS.content.primary}},{children:j?`${j} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:x||"primary",buttonText:d||"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:p||a||"Apply",buttonType:y||"primary",onClick:()=>{l()}})]}))]}))};

package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -12,6 +12,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -24,6 +25,9 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
+export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;
+export declare function getSelectedOptionsAsArray(selectedOption: DropdownOption[]): string[];

package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.iterateOnOptions=function(t,s,e){return t.map((t=>{if(t.options){const n=t.options.map((t=>!e||e(t)?Object.assign(Object.assign({},t),s):Object.assign({},t)));return Object.assign(Object.assign({},t),{options:[...n]})}return!e||e(t)?Object.assign(Object.assign({},t),s):Object.assign({},t)}))},exports.iterateOnOptionsRaw=function(t,s){t.forEach((t=>{t.options?t.options.forEach(s):s(t)}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getSelectedOptionsAsArray=function(e){return e&&e.length?e.map((e=>{var t;const n=e;return null!==(t=n.selectedLabel)&&void 0!==t?t:n.label})):[]},exports.getSelectedOptionsAsText=function(e){if(e&&e.length)return e.map((e=>{var t;const n=e;return null!==(t=n.selectedLabel)&&void 0!==t?t:n.label})).join(", ")},exports.iterateOnOptions=function(e,t,n){return e.map((e=>{if(e.options){const s=e.options.map((e=>!n||n(e)?Object.assign(Object.assign({},e),t):Object.assign({},e)));return Object.assign(Object.assign({},e),{options:[...s]})}return!n||n(e)?Object.assign(Object.assign({},e),t):Object.assign({},e)}))},exports.iterateOnOptionsRaw=function(e,t){e.forEach((e=>{e.options?e.options.forEach(t):t(e)}))};

package/dist/cjs/components/dropdown/hooks/useDropdown.d.ts

@@ -19,6 +19,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -31,6 +32,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/cjs/components/dropdown/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -19,6 +20,10 @@ export interface OpenDropdownProps {
     headerRef?: any;
     hideSelectAll?: boolean;
     primaryButtonText?: string;
+    onInfiniteScroll?: () => void;
+    onMultiSelectClear?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
+    buttonOptions?: ButtonOptions;
 }
 export type GroupedOption = {
     label?: string;
@@ -37,7 +42,14 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
+    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
+export interface ButtonOptions {
+    primaryButtonText?: string;
+    primaryButtonType?: Type;
+    secondaryButtonText?: string;
+    secondaryButtonType?: Type;
+}
 export type { Placement };

package/dist/cjs/components/side-modal/SideModal.style.js

@@ -30,6 +30,7 @@
 	border-bottom: 1px solid ${t.COLORS.stroke.primary};
 	svg:hover {
 		cursor: pointer;
+		background: ${t.COLORS.background.base};
 	}
 	${t=>{let{headerStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -53,5 +53,6 @@ export interface TemplateContextMapperProps {
     fileName?: string;
     setFileName?: (name: string) => void;
     hideDeviceContainerInPreview?: boolean;
+    maxCharLimit?: number;
 }
 export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("lodash"),t=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),n=require("./modalElements/Footer.js"),d=require("./modalElements/TemplateSelectModalContent.js"),u=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=c=>{let{selectedTemplate:v,closeDialog:p,showVariableMapping:m,channel:h,htmlContent:C,templateVariables:b,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:P,zIndex:g,showVariableModal:f,variableList:T,discountCode:I,setDiscountCode:L,onBackPress:y,enabledCustomText:j,variableListForImage:w,showSampleValues:M,disableEditVariable:N,pod:V,extras:k,pickerConf:A,selectedCarouselProducts:D,disableEditExpiry:H,cardWidth:q,onDeleteSelectedProducts:F,fileName:O,setFileName:_,hideDeviceContainerInPreview:B}=c;var W,R,Y,z,$,U,G,J;t.useEffect((()=>{oe(C)}),[C]);const K=h===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(R=null===(W=null==v?void 0:v.components)||void 0===W?void 0:W[1])||void 0===R?void 0:R.type),Q=null==v?void 0:v.isProductCarouselType,[X,Z]=t.useState(h===s.CHANNEL_TYPE.EMAIL||K?"desktop":"mobile"),[ee,le]=t.useState(!1),[te,oe]=t.useState(C),[ae,re]=t.useState(!1),[se,ie]=t.useState([]),[ne,de]=t.useState({}),[ue,ce]=t.useState(v),[ve,pe]=t.useState([]),[me,he]=t.useState(null),[Ce,be]=t.useState(!1),[Se,Ee]=t.useState(null!=b?b:[]),[xe,Pe]=t.useState(!1),[ge,fe]=t.useState(K?(null===(z=null===(Y=null==ue?void 0:ue.mapping)||void 0===Y?void 0:Y.body)||void 0===z?void 0:z.length)?-1:0:-1),[Te,Ie]=t.useState([]),[Le,ye]=t.useState(void 0),je=t.useRef(null),[we,Me]=t.useState(!1),[Ne,Ve]=t.useState(!1);t.useEffect((()=>{D?Ie(D):Q&&Ie([])}),[D]),t.useEffect((()=>{var e;if(!Ce&&Q&&(!D||0===Ie.length)){const l=null===(e=null==ue?void 0:ue.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),pe(t),be(!0)}}),[Ce]);const ke=t.useMemo((()=>u.convertPlaceholdersToBikDropdown(E)),[E]);return t.useEffect((()=>{ye(l.cloneDeep(T))}),[T]),e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{hideCrossButton:Ne,setHideCrossButton:Ve,variableList:Le,setVariableList:ye,variableCallback:me,setVariableCallback:he,showVariablePicker:ee,setShowVariablePicker:le,template:ue,setTemplate:ce,device:X,setDevice:Z,display_content:te,setDisplayContent:oe,originalVariableList:Se,setOriginalVariableList:Ee,isError:ae,setIsError:re,channel:h,globalNormalizedPlaceholders:ke,templateSelectionTriggered:xe,setTemplateSelectionTriggered:Pe,enabledCustomText:j,disableEditVariable:N,pod:V,extras:k,isWhatsappCarousel:K,selectedCarouselIndex:ge,setSelectedCarouselIndex:fe,isProductCarouselType:Q,templateErrorIndexes:ne,cardCount:K?null===(U=null===($=v.components)||void 0===$?void 0:$[1].cards)||void 0===U?void 0:U.length:void 0,errorIndexes:se,setErrorIndexes:ie,pickerConf:A,carouselProducts:Te,setCarouselProducts:Ie,disableEditExpiry:H,cardWidth:q,cardImages:ve,onDeleteSelectedProducts:F,hideDeviceContainerInPreview:B,sliderRef:je,isCarouselHovered:we,setIsCarouselHovered:Me}},{children:x?e.jsx(d.default,{variableListFromProps:T,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:Ne,zIndex:g,centralContainerStyles:{width:K?900:h===s.CHANNEL_TYPE.EMAIL&&m?1e3:800},open:!0,onClose:()=>{null==p||p()},headingTitle:null==ue?void 0:ue.label,headingSubtitle:h===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(G=null==ue?void 0:ue.category)&&void 0!==G?G:"")} • ${null!==(J=null==ue?void 0:ue.templateCategory)&&void 0!==J?J:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(d.default,{variableListFromProps:T,showSampleValues:M,showVariableMapping:m,channel:h,whatsappSpecificPickerMeta:P,showVariableModal:f,discountCode:I,setDiscountCode:L,variableListForImage:w&&(null==w?void 0:w.length)>0?w:Le,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(n.default,{isWhatsappCarousel:null!=K&&K,onSelect:function(){var e;if((null==Te?void 0:Te.length)<1&&Q)return void re(!0);const l=null==S?void 0:S(ue,Se,null!=te?te:"",Te);de(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&ie(l.errorIndexes),(null==l?void 0:l.error)&&re(!!(null==l?void 0:l.error))):Pe(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("lodash"),t=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),n=require("./modalElements/Footer.js"),d=require("./modalElements/TemplateSelectModalContent.js"),u=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=c=>{let{selectedTemplate:v,closeDialog:p,showVariableMapping:m,channel:h,htmlContent:C,templateVariables:b,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:P,zIndex:g,showVariableModal:f,variableList:T,discountCode:L,setDiscountCode:I,onBackPress:y,enabledCustomText:j,variableListForImage:w,showSampleValues:M,disableEditVariable:N,pod:V,extras:k,pickerConf:A,selectedCarouselProducts:D,disableEditExpiry:H,cardWidth:q,onDeleteSelectedProducts:F,fileName:O,setFileName:_,hideDeviceContainerInPreview:B,maxCharLimit:W}=c;var R,Y,z,$,U,G,J,K;t.useEffect((()=>{ae(C)}),[C]);const Q=h===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(Y=null===(R=null==v?void 0:v.components)||void 0===R?void 0:R[1])||void 0===Y?void 0:Y.type),X=null==v?void 0:v.isProductCarouselType,[Z,ee]=t.useState(h===s.CHANNEL_TYPE.EMAIL||Q?"desktop":"mobile"),[le,te]=t.useState(!1),[oe,ae]=t.useState(C),[re,se]=t.useState(!1),[ie,ne]=t.useState([]),[de,ue]=t.useState({}),[ce,ve]=t.useState(v),[pe,me]=t.useState([]),[he,Ce]=t.useState(null),[be,Se]=t.useState(!1),[Ee,xe]=t.useState(null!=b?b:[]),[Pe,ge]=t.useState(!1),[fe,Te]=t.useState(Q?(null===($=null===(z=null==ce?void 0:ce.mapping)||void 0===z?void 0:z.body)||void 0===$?void 0:$.length)?-1:0:-1),[Le,Ie]=t.useState([]),[ye,je]=t.useState(void 0),we=t.useRef(null),[Me,Ne]=t.useState(!1),[Ve,ke]=t.useState(!1);t.useEffect((()=>{D?Ie(D):X&&Ie([])}),[D]),t.useEffect((()=>{var e;if(!be&&X&&(!D||0===Ie.length)){const l=null===(e=null==ce?void 0:ce.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),me(t),Se(!0)}}),[be]);const Ae=t.useMemo((()=>u.convertPlaceholdersToBikDropdown(E)),[E]);return t.useEffect((()=>{je(l.cloneDeep(T))}),[T]),e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{hideCrossButton:Ve,setHideCrossButton:ke,variableList:ye,setVariableList:je,variableCallback:he,setVariableCallback:Ce,showVariablePicker:le,setShowVariablePicker:te,template:ce,setTemplate:ve,device:Z,setDevice:ee,display_content:oe,setDisplayContent:ae,originalVariableList:Ee,setOriginalVariableList:xe,isError:re,setIsError:se,channel:h,globalNormalizedPlaceholders:Ae,templateSelectionTriggered:Pe,setTemplateSelectionTriggered:ge,enabledCustomText:j,disableEditVariable:N,pod:V,extras:k,isWhatsappCarousel:Q,selectedCarouselIndex:fe,setSelectedCarouselIndex:Te,isProductCarouselType:X,templateErrorIndexes:de,cardCount:Q?null===(G=null===(U=v.components)||void 0===U?void 0:U[1].cards)||void 0===G?void 0:G.length:void 0,errorIndexes:ie,setErrorIndexes:ne,pickerConf:A,carouselProducts:Le,setCarouselProducts:Ie,disableEditExpiry:H,cardWidth:q,cardImages:pe,onDeleteSelectedProducts:F,hideDeviceContainerInPreview:B,sliderRef:we,isCarouselHovered:Me,setIsCarouselHovered:Ne,maxCharLimit:W}},{children:x?e.jsx(d.default,{variableListFromProps:T,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:Ve,zIndex:g,centralContainerStyles:{width:Q?900:h===s.CHANNEL_TYPE.EMAIL&&m?1e3:800},open:!0,onClose:()=>{null==p||p()},headingTitle:null==ce?void 0:ce.label,headingSubtitle:h===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(J=null==ce?void 0:ce.category)&&void 0!==J?J:"")} • ${null!==(K=null==ce?void 0:ce.templateCategory)&&void 0!==K?K:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(d.default,{variableListFromProps:T,showSampleValues:M,showVariableMapping:m,channel:h,whatsappSpecificPickerMeta:P,showVariableModal:f,discountCode:L,setDiscountCode:I,variableListForImage:w&&(null==w?void 0:w.length)>0?w:ye,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(n.default,{isWhatsappCarousel:null!=Q&&Q,onSelect:function(){var e;if((null==Le?void 0:Le.length)<1&&X)return void se(!0);const l=null==S?void 0:S(ce,Ee,null!=oe?oe:"",Le);ue(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&ne(l.errorIndexes),(null==l?void 0:l.error)&&se(!!(null==l?void 0:l.error))):ge(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -65,6 +65,7 @@ export declare const TemplateModalContext: React.Context<{
     sliderRef?: LegacyRef<Slider> | undefined;
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
+    maxCharLimit?: number | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideCrossButton: boolean;
@@ -122,4 +123,5 @@ export declare const useTemplateModalContext: () => {
     sliderRef?: LegacyRef<Slider> | undefined;
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
+    maxCharLimit?: number | undefined;
 };

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js

@@ -13,4 +13,4 @@
 	background-color: rgba(0, 0, 0, 0.1);
 	z-index: 1000;
 	cursor: not-allowed;
-`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},C={value:"static_expiry",label:"Static Expiry"};exports.Container=h,exports.default=n=>{let{onFocus:x,variable:_,index:N,showVariableModal:P,setShowDiscountCheckBox:V,componentType:A,CTAoptions:k,buttonType:S}=n;var L,D,B,H,w,Y,U,q,R;const[M,W]=i.useState(!1),[I,$]=i.useState(""),[z,Z]=i.useState([]),[F,G]=i.useState(),[Q,K]=i.useState(!1),{variableList:J,setVariableList:X,setVariableCallback:ee,setShowVariablePicker:te,device:le,channel:ae,isError:ie,originalVariableList:ne,template:se,templateSelectionTriggered:oe,setTemplate:ue,setDisplayContent:de,setOriginalVariableList:re,globalNormalizedPlaceholders:ce,enabledCustomText:pe,pod:me,selectedCarouselIndex:ve,isProductCarouselType:be,isWhatsappCarousel:ge,disableEditVariable:Oe,disableEditExpiry:je,templateErrorIndexes:ye}=g.useTemplateModalContext();function xe(e,t){var l,a,i;const n=e;$(""),G(n),ae===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(he(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Te||Te(null!==(a=_.index)&&void 0!==a?a:0,n.value,!0)):(null==Te||Te(null!==(i=_.index)&&void 0!==i?i:0,"",!0,n.value),he("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?he(n.value,"url"===n.bikPlaceholderType?"link":"string"):($(""),he("",n.value))}function _e(e,t){var l;$(t);const a="custom_link"===(null==F?void 0:F.value)&&t?t.includes("https")?t:`https://${t}`:t;he(a,"static_expiry"===e?"string":e),ae===c.CHANNEL_TYPE.WHATSAPP&&(null==Te||Te(null!==(l=_.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function he(e,t,l){var i,n,s,o;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ae!==c.CHANNEL_TYPE.WHATSAPP){const l=j.getVariableNameForEmailByIndex(N+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===le?"template_html_mobile":"template_html_desktop"),n=ae===c.CHANNEL_TYPE.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:_.variableName);const s=ne.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==re||re(s)}if(ae===c.CHANNEL_TYPE.WHATSAPP){if(null!=ve&&ve>-1&&be){const l=Object.assign({},ne).cards.map(((l,a)=>{var i,n;return"BODY"===A?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===A?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==re||re((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=ve&&ve>-1?ne.cards[ve]:ne;let d=i.body,r=i.header,c=i.buttons;if("BODY"===A?d=null===(n=i.body)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===A?r=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===A&&(c=null===(o=i.buttons)||void 0===o?void 0:o.map(((a,i)=>i===N?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=ve&&ve>-1){const e=a.cloneDeep(ne.cards);e[ve]={header:r,body:d,buttons:c},null==re||re((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==re||re((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function Te(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ve&&ve>-1&&be){const s=Object.assign({},se).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(se);if(l){const l=null===(n=Object.assign({},se).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===A)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===A&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=se.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==ue||ue(o))}const p=null!=ve&&ve>-1?{components:null===(s=Object.assign({},se).components[1].cards)||void 0===s?void 0:s[ve].components,mapping:null===(o=Object.assign({},se).mapping.cards)||void 0===o?void 0:o[ve]}:Object.assign({},se),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===A){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===A)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===A&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===A&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===A&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ve&&ve>-1&&se){const e=a.cloneDeep(se);e.components[1].cards[ve].components=p.components,e.mapping.cards[ve]=p.mapping,null==ue||ue(e)}else null==ue||ue(Object.assign({},p))}i.useEffect((()=>{M&&(null==x||x())}),[M]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===le?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ae===c.CHANNEL_TYPE.EMAIL&&(null==de||de(o))}()}),[oe]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(ae!==c.CHANNEL_TYPE.MESSAGE||pe){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,E]}),G(f)):"date_time"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,E]}),G(C)):(l.push({label:"",options:[f,E,C]}),G(E));const e=null!=ce?ce:[];Z([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ce?ce:[];Z([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((ae===c.CHANNEL_TYPE.WHATSAPP||ae===c.CHANNEL_TYPE.EMAIL||ae===c.CHANNEL_TYPE.MESSAGE)&&_.updatedValue)if(r.placeHolderNamePattern.test(_.updatedValue)&&ae===c.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&ae!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(P){let t=e.updatedValue;if(me===p.POD.CHATBOT&&"BUTTONS"===A){const l=null==k?void 0:k.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(_,a,ae);e.value&&G(e)}else"date_time"===_.type?(G(C),$(_.updatedValue),Te(null!==(e=_.index)&&void 0!==e?e:0,_.updatedValue)):(null===(t=_.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(G(f),$(_.updatedValue.split("https://")[1])):(G(E),$(_.updatedValue))}()}),[ve]),i.useEffect((()=>{le&&F&&I&&setTimeout((()=>{he("custom_link"===(null==F?void 0:F.value)&&I?I.includes("https")?I:`https://${I}`:I,F.value)}),100)}),[le]),i.useEffect((()=>{!Q&&F&&_.updatedValue&&setTimeout((()=>{he("custom_link"===(null==F?void 0:F.value)&&_.updatedValue?_.updatedValue.includes("https")?_.updatedValue:`https://${_.updatedValue}`:_.updatedValue,F.value),K(!0)}),100)}),[F]);const fe=e=>{null==V||V(!1),"{{custom.url}}"===e.actualValue?xe({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?xe({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?xe({label:e.displayName,selected:!0,value:"static_expiry"}):xe({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e.jsxs(h,Object.assign({channel:ae,focused:M,onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:ie&&!F?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(L=_.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:P?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==F?void 0:F.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,Object.assign({numberOfLines:1},{children:me===p.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==F?void 0:F.value)&&void 0!==D?D:"")?null==F?void 0:F.label:null==F?void 0:F.value:d.truncate(null!==(B=null==F?void 0:F.label)&&void 0!==B?B:"",20,!0)})),Oe||"date_time"===(null==_?void 0:_.type)&&je?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(S===p.BUTTON_TYPE.URL&&me===p.POD.CHATBOT){const e=O.updateVariables({variableList:J,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});X(e)}else if("limited_time_offer"===A){const e=O.updateVariables({variableList:J,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});X(e)}else if(S===p.BUTTON_TYPE.COPY_CODE){const e=O.updateVariables({variableList:J,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});X(e)}})(),ee((()=>fe)),te(!0)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:Oe,options:z,isSearchable:!1,onSelect:xe,defaultOptions:F?[Object.assign(Object.assign({},F),{selected:!0})]:[]})})),("custom_text"===(null==F?void 0:F.value)||"custom_link"===(null==F?void 0:F.value))&&e.jsx(u.Input,{state:Oe?"disabled":"none",labelText:"custom_text"===(null==F?void 0:F.value)?"Custom text value":"custom_link"===(null==F?void 0:F.value)?"Custom URL value":"",id:`variable-value-${null==F?void 0:F.value}-${N}`,value:I,errorMessage:ie&&(null===(H=null==ye?void 0:ye.buttons)||void 0===H?void 0:H.includes(null!==(w=null==_?void 0:_.index)&&void 0!==w?w:-1))?I&&0!==I.trim().length?"custom_link"!==F.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${I.trim()}`)&&0!==I.trim().length?"custom_link"!==F.value&&I.length>30?"Length cannot be more than 30":"BUTTONS"===A&&"custom_link"!==F.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==F?void 0:F.value)?2e3:"BUTTONS"===A?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==F?void 0:F.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===F.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{_e(F.value,e)}}),"static_expiry"===(null==F?void 0:F.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[Oe&&e.jsx(T,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:I?l.format(new Date(I),"hh:mm a"):l.format(new Date,"hh:mm a"),date:I?new Date(I):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{_e("static_expiry",e.toISOString())}})]})),"link"===_.type&&"custom_link"!==(null==F?void 0:F.value)&&!be&&!ge&&me===p.POD.CHATBOT&&e.jsx(y.QueryParamsComponent,{isError:null!==(q=null===(Y=null==ye?void 0:ye.buttons)||void 0===Y?void 0:Y.includes(null!==(U=null==_?void 0:_.index)&&void 0!==U?U:-1))&&void 0!==q&&q,params:null!==(R=_.queryParams)&&void 0!==R?R:[],onChange:e=>{he(_.updatedValue,"link",e)},variableValue:_.updatedValue})]}))};
+`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},C={value:"static_expiry",label:"Static Expiry"};exports.Container=h,exports.default=n=>{let{onFocus:x,variable:_,index:N,showVariableModal:P,setShowDiscountCheckBox:V,componentType:A,CTAoptions:k,buttonType:S}=n;var L,D,B,H,w,Y,U,q,R;const[M,W]=i.useState(!1),[I,$]=i.useState(""),[z,Z]=i.useState([]),[F,G]=i.useState(),[Q,K]=i.useState(!1),{variableList:J,setVariableList:X,setVariableCallback:ee,setShowVariablePicker:te,device:le,channel:ae,isError:ie,originalVariableList:ne,template:se,templateSelectionTriggered:oe,setTemplate:ue,setDisplayContent:de,setOriginalVariableList:re,globalNormalizedPlaceholders:ce,enabledCustomText:pe,pod:me,selectedCarouselIndex:ve,isProductCarouselType:be,isWhatsappCarousel:ge,disableEditVariable:Oe,disableEditExpiry:je,templateErrorIndexes:ye,maxCharLimit:xe}=g.useTemplateModalContext();function _e(e,t){var l,a,i;const n=e;$(""),G(n),ae===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(Te(null!==(l=n.value)&&void 0!==l?l:"","string"),null==fe||fe(null!==(a=_.index)&&void 0!==a?a:0,n.value,!0)):(null==fe||fe(null!==(i=_.index)&&void 0!==i?i:0,"",!0,n.value),Te("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?Te(n.value,"url"===n.bikPlaceholderType?"link":"string"):($(""),Te("",n.value))}function he(e,t){var l;$(t);const a="custom_link"===(null==F?void 0:F.value)&&t?t.includes("https")?t:`https://${t}`:t;Te(a,"static_expiry"===e?"string":e),ae===c.CHANNEL_TYPE.WHATSAPP&&(null==fe||fe(null!==(l=_.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function Te(e,t,l){var i,n,s,o;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ae!==c.CHANNEL_TYPE.WHATSAPP){const l=j.getVariableNameForEmailByIndex(N+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===le?"template_html_mobile":"template_html_desktop"),n=ae===c.CHANNEL_TYPE.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:_.variableName);const s=ne.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==re||re(s)}if(ae===c.CHANNEL_TYPE.WHATSAPP){if(null!=ve&&ve>-1&&be){const l=Object.assign({},ne).cards.map(((l,a)=>{var i,n;return"BODY"===A?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===A?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==re||re((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=ve&&ve>-1?ne.cards[ve]:ne;let d=i.body,r=i.header,c=i.buttons;if("BODY"===A?d=null===(n=i.body)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===A?r=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===A&&(c=null===(o=i.buttons)||void 0===o?void 0:o.map(((a,i)=>i===N?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=ve&&ve>-1){const e=a.cloneDeep(ne.cards);e[ve]={header:r,body:d,buttons:c},null==re||re((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==re||re((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function fe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ve&&ve>-1&&be){const s=Object.assign({},se).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(se);if(l){const l=null===(n=Object.assign({},se).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===A)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===A&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=se.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==ue||ue(o))}const p=null!=ve&&ve>-1?{components:null===(s=Object.assign({},se).components[1].cards)||void 0===s?void 0:s[ve].components,mapping:null===(o=Object.assign({},se).mapping.cards)||void 0===o?void 0:o[ve]}:Object.assign({},se),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===A){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===A)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===A&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===A&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===A&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ve&&ve>-1&&se){const e=a.cloneDeep(se);e.components[1].cards[ve].components=p.components,e.mapping.cards[ve]=p.mapping,null==ue||ue(e)}else null==ue||ue(Object.assign({},p))}i.useEffect((()=>{M&&(null==x||x())}),[M]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===le?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ae===c.CHANNEL_TYPE.EMAIL&&(null==de||de(o))}()}),[oe]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(ae!==c.CHANNEL_TYPE.MESSAGE||pe){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,E]}),G(f)):"date_time"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,E]}),G(C)):(l.push({label:"",options:[f,E,C]}),G(E));const e=null!=ce?ce:[];Z([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ce?ce:[];Z([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((ae===c.CHANNEL_TYPE.WHATSAPP||ae===c.CHANNEL_TYPE.EMAIL||ae===c.CHANNEL_TYPE.MESSAGE)&&_.updatedValue)if(r.placeHolderNamePattern.test(_.updatedValue)&&ae===c.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&ae!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(P){let t=e.updatedValue;if(me===p.POD.CHATBOT&&"BUTTONS"===A){const l=null==k?void 0:k.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(_,a,ae);e.value&&G(e)}else"date_time"===_.type?(G(C),$(_.updatedValue),fe(null!==(e=_.index)&&void 0!==e?e:0,_.updatedValue)):(null===(t=_.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(G(f),$(_.updatedValue.split("https://")[1])):(G(E),$(_.updatedValue))}()}),[ve]),i.useEffect((()=>{le&&F&&I&&setTimeout((()=>{Te("custom_link"===(null==F?void 0:F.value)&&I?I.includes("https")?I:`https://${I}`:I,F.value)}),100)}),[le]),i.useEffect((()=>{!Q&&F&&_.updatedValue&&setTimeout((()=>{Te("custom_link"===(null==F?void 0:F.value)&&_.updatedValue?_.updatedValue.includes("https")?_.updatedValue:`https://${_.updatedValue}`:_.updatedValue,F.value),K(!0)}),100)}),[F]);const Ee=e=>{null==V||V(!1),"{{custom.url}}"===e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"static_expiry"}):_e({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e.jsxs(h,Object.assign({channel:ae,focused:M,onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:ie&&!F?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(L=_.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:P?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==F?void 0:F.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,Object.assign({numberOfLines:1},{children:me===p.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==F?void 0:F.value)&&void 0!==D?D:"")?null==F?void 0:F.label:null==F?void 0:F.value:d.truncate(null!==(B=null==F?void 0:F.label)&&void 0!==B?B:"",20,!0)})),Oe||"date_time"===(null==_?void 0:_.type)&&je?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(S===p.BUTTON_TYPE.URL&&me===p.POD.CHATBOT){const e=O.updateVariables({variableList:J,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});X(e)}else if("limited_time_offer"===A){const e=O.updateVariables({variableList:J,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});X(e)}else if(S===p.BUTTON_TYPE.COPY_CODE){const e=O.updateVariables({variableList:J,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});X(e)}})(),ee((()=>Ee)),te(!0)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:Oe,options:z,isSearchable:!1,onSelect:_e,defaultOptions:F?[Object.assign(Object.assign({},F),{selected:!0})]:[]})})),("custom_text"===(null==F?void 0:F.value)||"custom_link"===(null==F?void 0:F.value))&&e.jsx(u.Input,{state:Oe?"disabled":"none",labelText:"custom_text"===(null==F?void 0:F.value)?"Custom text value":"custom_link"===(null==F?void 0:F.value)?"Custom URL value":"",id:`variable-value-${null==F?void 0:F.value}-${N}`,value:I,errorMessage:ie&&(null===(H=null==ye?void 0:ye.buttons)||void 0===H?void 0:H.includes(null!==(w=null==_?void 0:_.index)&&void 0!==w?w:-1))?I&&0!==I.trim().length?"custom_link"!==F.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${I.trim()}`)&&0!==I.trim().length?"custom_link"!==F.value&&I.length>30?"Length cannot be more than 30":"BUTTONS"===A&&"custom_link"!==F.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:xe||("custom_link"===(null==F?void 0:F.value)?2e3:"BUTTONS"===A?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==F?void 0:F.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===F.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{he(F.value,e)}}),"static_expiry"===(null==F?void 0:F.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[Oe&&e.jsx(T,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:I?l.format(new Date(I),"hh:mm a"):l.format(new Date,"hh:mm a"),date:I?new Date(I):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{he("static_expiry",e.toISOString())}})]})),"link"===_.type&&"custom_link"!==(null==F?void 0:F.value)&&!be&&!ge&&me===p.POD.CHATBOT&&e.jsx(y.QueryParamsComponent,{isError:null!==(q=null===(Y=null==ye?void 0:ye.buttons)||void 0===Y?void 0:Y.includes(null!==(U=null==_?void 0:_.index)&&void 0!==U?U:-1))&&void 0!==q&&q,params:null!==(R=_.queryParams)&&void 0!==R?R:[],onChange:e=>{Te(_.updatedValue,"link",e)},variableValue:_.updatedValue})]}))};

package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
 declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
 export default EventsTrigger;

package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts

@@ -1,2 +1,2 @@
-import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
+import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
 export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];

package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
 declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
 export default IGTrigger;

package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts

@@ -1,2 +1,2 @@
-import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
+import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
 export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];

package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DropdownOption } from "../../../dropdown/type";
-import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
-import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
+import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
 declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
     cacheKey: string;
     propertyAddBtnText: string;

package/dist/esm/components/dropdown/ChipInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ChipInputProps {
+    chips: string[];
+    onDeleteChip: (chip: string, index: number) => void;
+    containerStyle?: React.CSSProperties;
+    isDropdownOpened?: boolean;
+    sizeToUse?: 'default' | 'small';
+    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

package/dist/esm/components/dropdown/ChipInput.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import i from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as o}from"../tag/Tag.js";import{BodyCaption as n}from"../TypographyStyle.js";const l=l=>{let{chips:a,onDeleteChip:c,containerStyle:d={},sizeToUse:p="default",isDropdownOpened:g,setDropdownVisibility:h}=l;return e("div",Object.assign({style:Object.assign({border:`1px solid ${s.stroke.primary}`,width:"360px",height:"100%",padding:"8px",display:"flex",justifyContent:"space-between",alignItems:"center",borderRadius:"4px"},d)},{children:[e("div",Object.assign({style:{display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}},{children:[a.slice(0,2).map(((e,s)=>t("div",{children:t(o,Object.assign({tagText:e,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>c(e,s)})},{children:e}))},s))),a.length>2&&t(n,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t(n,Object.assign({color:s.content.placeholder},{children:"Select.."}))]})),t("div",Object.assign({onClick:()=>null==h?void 0:h(!g)},{children:t(i,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===p?20:24,height:"small"===p?20:24,color:s.content.primary})}))]}))};export{l as default};

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -9,5 +9,7 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolderHeight?: string;
     showPlaceholderWhenSelected?: boolean;
     inputStyle?: React.CSSProperties;
+    inputType?: 'chip' | 'default';
+    onDeleteChip?: (chip: string, index: number) => void;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,h,m,{placeHolder:g,size:v,onSelect:f,defaultOptions:b,disabled:j,noErrorHint:w,placeHolderHeight:H,showPlaceholderWhenSelected:x=!1,inputStyle:y={}}=c,S=e(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle"]);const[O,E]=t(!1),I=null!=v?v:"default",P=n(),[D,W]=t(null!=b?b:[]);r((()=>{var e;const o=[];null===(e=null==S?void 0:S.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),W([...o])}),[S.options]),r((()=>{b&&W([...b])}),[b]);const z=D.length?D.map((e=>e.label)).join(", "):void 0;return o(a.Provider,Object.assign({value:{InputWrapper:Object.assign({height:H||("small"===I?32:48),width:null!==(h=null!==(u=S.buttonWidth)&&void 0!==u?u:S.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},y),input:{minHeight:"100%"}}},{children:o(d,Object.assign({ref:P,onSelect:function(e){Array.isArray(e)?W([...e]):W([e]),null==f||f(e)},disabled:j,onDropdownVisbilityChange:e=>E(e)},S,{children:o(s,{version:S.version,noErrorHint:w,state:j?"disabled":"none",value:x?g:null!=z?z:"",errorMessage:S.error,variant:I,placeholder:null!=g?g:"Select an option",width:null!==(m=S.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>o(l,{style:{transform:O?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===I?20:24,height:"small"===I?20:24,color:i.content.primary})},truncateText:!0})}))}))};c.displayName="Dropdown";export{c as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as n,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as d}from"../input/context/InputStyleProvider.js";import a from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u,getSelectedOptionsAsArray as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,b,w,j,{placeHolder:y,size:O,onSelect:D,defaultOptions:H,disabled:S,noErrorHint:x,placeHolderHeight:C,showPlaceholderWhenSelected:I=!1,inputStyle:T={},inputType:E="default",onDeleteChip:P}=v,z=e(v,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[W,A]=i(!1),V=null!=O?O:"default",_=n(),[k,L]=i(null!=H?H:[]);r((()=>{var e;const o=[];null===(e=null==z?void 0:z.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),L([...o])}),[z.options]),r((()=>{H&&L([...H])}),[H]);const M=u(k),N=h(k);return o(d.Provider,Object.assign({value:{InputWrapper:Object.assign({height:C||("small"===V?32:48),width:null!==(g=null!==(f=z.buttonWidth)&&void 0!==f?f:z.width)&&void 0!==g?g:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},T),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:_,onSelect:function(e){Array.isArray(e)?L([...e]):L([e]),null==D||D(e)},disabled:S,onDropdownVisbilityChange:e=>A(e)},z,{hideOverLapAbs:"chip"===E},{children:["default"==E&&o(p,{version:z.version,noErrorHint:x,state:S?"disabled":"none",value:I?y:null!=M?M:"",errorMessage:z.error,variant:V,placeholder:null!=y?y:"Select an option",width:null!==(b=z.width)&&void 0!==b?b:"100%",onChangeText:m,rightIcon:{icon:()=>o(s,{style:{transform:W?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"small"===V?20:24,height:"small"===V?20:24,color:l.content.primary})},truncateText:!0}),"chip"==E&&o(a,{chips:N,onDeleteChip:(e,o)=>{null==P||P(e,o)},isDropdownOpened:W,sizeToUse:V,containerStyle:{width:null!==(w=z.width)&&void 0!==w?w:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==_?void 0:_.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};v.displayName="Dropdown";export{v as Dropdown};

package/dist/esm/components/dropdown/DropdownPopover/index.d.ts

@@ -10,6 +10,7 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
     tooltipContent?: string | undefined;
     tooltipDirection?: Placement | undefined;
     showTooltipArrow?: boolean | undefined;
+    hideOverLapAbs?: boolean | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import t,{useState as l,useRef as i,useImperativeHandle as s,useEffect as p}from"react";import{usePopper as d}from"react-popper";import c from"../../dropShadow/DropShadow.js";import{Tooltip as a}from"../../tooltips/Tooltip.js";import{OverLapAbs as m,OpenDropdownContainer as v}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const h=t.forwardRef(((t,h)=>{var{children:w,onDropdownVisbilityChange:b,version:f="1.0",tooltipContent:j,tooltipDirection:D,showTooltipArrow:g}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=h,[C,S]=l(!1),[x,A]=l(null),[R,T]=l(null),z=i(null),{styles:M,attributes:V}=d(x,R,{placement:y.placement,strategy:y.strategy}),_=o=>{var e,r;"2.0"===f&&y.isMultiSelect&&o&&(null===(e=y.onSelect)||void 0===e||e.call(y,[...o])),S(!1),null===(r=null==y?void 0:y.onClose)||void 0===r||r.call(y)};s(O,(()=>({openDropdown:C})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==b||b(C)}),[C]);const k=()=>n(r,{children:[n("div",Object.assign({style:{position:"relative"},ref:A},{children:[e(m,{ref:z,disabled:y.disabled,onClick:o=>{var e;null===(e=y.onDropdownOpen)||void 0===e||e.call(y),C?(S(!1),o.preventDefault()):y.disabled||S(!0)}}),w]})),C&&e(v,Object.assign({ref:T,style:Object.assign(Object.assign({},M.popper),{zIndex:3})},V.popper,{children:e(c,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},y,{onSelect:o=>{var e;"2.0"===f&&y.isMultiSelect||(null===(e=y.onSelect)||void 0===e||e.call(y,o),S(!1))},onClose:_,version:f,headerRef:z}))}))}))]});return e(r,{children:C||void 0===j?k():e(a,Object.assign({body:j,placement:D,hideArrow:!g},{children:e("div",{children:k()})}))})}));h.displayName="DropdownPopover";export{h as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import i,{useState as t,useRef as l,useImperativeHandle as s,useEffect as p}from"react";import{usePopper as d}from"react-popper";import c from"../../dropShadow/DropShadow.js";import{Tooltip as a}from"../../tooltips/Tooltip.js";import{OverLapAbs as m,OpenDropdownContainer as v}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const w=i.forwardRef(((i,w)=>{var{children:b,onDropdownVisbilityChange:h,version:f="1.0",tooltipContent:D,tooltipDirection:j,showTooltipArrow:y}=i,g=o(i,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=w,[C,S]=t(!1),[A,x]=t(null),[R,T]=t(null),V=l(null),{styles:z,attributes:M}=d(A,R,{placement:g.placement,strategy:g.strategy}),_=o=>{var e,n;"2.0"===f&&g.isMultiSelect&&o&&(null===(e=g.onSelect)||void 0===e||e.call(g,[...o])),S(!1),null===(n=null==g?void 0:g.onClose)||void 0===n||n.call(g)};s(O,(()=>({openDropdown:C,closeDropdown:()=>S(!1),openDropdownFn:()=>S(!0),setDropdownVisibility:S})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==h||h(C)}),[C]);const k=()=>r(n,{children:[r("div",Object.assign({style:{position:"relative"},ref:x},{children:[!g.hideOverLapAbs&&e(m,{ref:V,disabled:g.disabled,onClick:o=>{var e;null===(e=g.onDropdownOpen)||void 0===e||e.call(g),C?(S(!1),o.preventDefault()):g.disabled||S(!0)}}),b]})),C&&e(v,Object.assign({ref:T,style:Object.assign(Object.assign({},z.popper),{zIndex:3})},M.popper,{children:e(c,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},g,{onSelect:o=>{var e;"2.0"===f&&g.isMultiSelect||(null===(e=g.onSelect)||void 0===e||e.call(g,o),S(!1))},onClose:_,version:f,headerRef:V}))}))}))]});return e(n,{children:C||void 0===D?k():e(a,Object.assign({body:D,placement:j,hideArrow:!y},{children:e("div",{children:k()})}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as i}from"react";import{ZeroState as n}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as p}from"./menu/MenuList.js";import{SelectAllMenu as u}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,v=v=>{let{options:j,isSearchable:w,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:A,skipSorting:F,headerRef:k,hideSelectAll:B,primaryButtonText:H}=v;const{dropdownOptions:T,search:R,searchedString:Z,searchedOptions:q,onApplyHandler:z,selectAllHandler:I,onMultiSelectClear:K,onFreeFormSelect:N,onMultiSelectApply:P,latestDropdownOptionsRef:W,getSelectedOptions:E}=s(A,j,D,F,y,L),[G,J]=o(null!=x?x:b),[Q,U]=o(null),V=r(null);l(V,(()=>{if(U(null),y&&"2.0"===A){const e=E(W.current);null==M||M(e)}else null==M||M(T)}),[k]);const X=null!=C?C:g,Y="number"==typeof X?w&&y?X-96:w&&!y||!w&&y?X-48:X:X;i((()=>{const e=null!=x?x:b;if(null===Q)J(e);else if("number"==typeof e)J(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));J(t)}}),[Q]);const $=[],_=(Z&&L?q:T).map((e=>{var t,o;if(Z&&!L){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))&&($.push(!Z||e.label===Z),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(Z.toLowerCase()))?($.push(!Z||e.label===Z),e):null}return e})).filter((e=>null!==e)),ee=!!w&&Z&&0===_.length;return e(h,Object.assign({version:A,ref:V,style:{width:G}},{children:[e("div",Object.assign({style:{width:Q?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(f,{onSearch:R,version:A}),_.length||Z?e(m,Object.assign({minHeight:X,maxHeight:Y},{children:[!!y&&!ee&&!B&&t(u,{version:A,options:Z&&L?q:T,onSelect:I}),!O&&ee&&t(S,{height:Y,searchedString:Z}),O&&(ee||!!$.length&&$.every((e=>!1===e)))&&t(a,{version:A,isMultiSelect:y,onSelect:N,searchedString:Z}),t(p,{version:A,onSelect:z,showDescription:function(e,t){U(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:_})]})):t("div",Object.assign({style:{height:X,display:"flex"}},{children:t(n,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!_.length&&!Z)&&"2.0"!==A&&t(d,{onClear:K,onApply:P,list:Z&&L?q:T,buttonText:H})]})),!!Q&&t(c,{title:Q.title,description:Q.description,version:A})]}))};export{v as OpenedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as r}from"react";import{ZeroState as i}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as p}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as m,MenuListContainer as h}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,w=w=>{let{options:v,isSearchable:j,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:k,version:L,skipSorting:A,headerRef:F,hideSelectAll:I,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:R,buttonOptions:Z}=w;const{dropdownOptions:q,search:z,searchedString:K,searchedOptions:N,onApplyHandler:P,selectAllHandler:W,onMultiSelectClear:E,onFreeFormSelect:G,onMultiSelectApply:J,latestDropdownOptionsRef:Q,getSelectedOptions:U}=s(L,v,D,A,y,k),[V,X]=o(null!=x?x:b),[Y,$]=o(null),_=n(null);l(_,(()=>{if($(null),y&&"2.0"===L){const e=U(Q.current);null==M||M(e)}else null==M||M(q)}),[F]);const ee=null!=C?C:g,te="number"==typeof ee?j&&y?ee-96:j&&!y||!j&&y?ee-48:ee:ee;r((()=>{const e=null!=x?x:b;if(null===Y)X(e);else if("number"==typeof e)X(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));X(t)}}),[Y]);const oe=[],ne=(K&&k?N:q).map((e=>{var t,o;if(K&&!k){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(K.toLowerCase()))&&(oe.push(!K||e.label===K),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(K.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(K.toLowerCase()))?(oe.push(!K||e.label===K),e):null}return e})).filter((e=>null!==e)),re=!!j&&K&&0===ne.length;return e(m,Object.assign({version:L,ref:_,style:{width:V}},{children:[e("div",Object.assign({style:{width:Y?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:z,version:L}),ne.length||K?e(h,Object.assign({minHeight:ee,maxHeight:te},{children:[!!y&&!re&&!I&&t(a,{version:L,options:K&&k?N:q,onSelect:W}),!O&&re&&t(S,{height:te,searchedString:K}),O&&(re||!!oe.length&&oe.every((e=>!1===e)))&&t(p,{version:L,isMultiSelect:y,onSelect:G,searchedString:K}),t(u,{onInfiniteScroll:H,onDropdownItemClick:R,version:L,onSelect:P,showDescription:function(e,t){$(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ne})]})):t("div",Object.assign({style:{height:ee,display:"flex"}},{children:t(i,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!ne.length&&!K)&&"2.0"!==L&&t(d,{onClear:()=>{E(),null==T||T()},onApply:J,list:K&&k?N:q,buttonText:B,buttonOptions:Z})]})),!!Y&&t(c,{title:Y.title,description:Y.description,version:L})]}))};export{w as OpenedDropdown};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-export declare const MenuItem: React.FC<{
+interface MenuItemProps {
     option: SingleOption | MultiSelectOption;
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (option: SingleOption) => void;
+    onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
     version?: '1.0' | '2.0';
-}>;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;
+export {};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -2,4 +2,4 @@ import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"st
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u}=i;var b;function f(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),f(!s.selected)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(b=s.disabled)&&void 0!==b&&b,isChecked:!!s.selected,onValueChange:f}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};
+`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u,onDropdownItemClick:b}=i;var f;function h(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),h(!s.selected),null==b||b(s)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(f=s.disabled)&&void 0!==f&&f,isChecked:!!s.selected,onValueChange:h}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
-export declare const MenuList: React.FC<{
+interface MenuListProps {
     options: DropdownOption[];
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
     version?: '1.0' | '2.0';
-}>;
+    onInfiniteScroll?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
+}
+export declare const MenuList: React.FC<MenuListProps>;
+export {};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{MenuItem as n}from"./MenuItem.js";import{StyledGroupedLabel as o}from"./MenuList.styled.js";const s=s=>{let{options:r,isMultiSelect:l,showDescription:c,onSelect:p,version:a}=s;return e(t,{children:r.map(((s,m)=>{const g=m===r.length-1;if(s.options){const r=s;return i("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[i(o,Object.assign({version:a},{children:[r.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:r.leadingIcon})):e(t,{}),r.label]})),r.options.map(((t,i)=>e(n,{version:a,last:i===r.options.length-1,onSelect:p,showDescription:c,isMultiSelect:l,option:t},`${m}-${i}`)))]}),m)}return e(n,{version:a,last:g,onSelect:p,showDescription:c,isMultiSelect:l,option:s},m)}))})};export{s as MenuList};
+import{jsx as n,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useCallback as o,useEffect as i}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as c}from"./MenuList.styled.js";const l=l=>{let{options:p,isMultiSelect:u,showDescription:a,onSelect:m,version:d,onInfiniteScroll:g,onDropdownItemClick:h}=l;const I=r(null),f=r(null),v=o((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((n=>{n[0].isIntersecting&&(null==g||g())})),f.current&&I.current.observe(f.current)}),[g]);return i((()=>(v(),()=>{I.current&&I.current.disconnect()})),[v,p]),n(e,{children:p.map(((r,o)=>{const i=o===p.length-1;if(r.options){const l=r;return t("div",Object.assign({style:{marginTop:"2.0"===d?2:0}},{children:[t(c,Object.assign({version:d},{children:[l.leadingIcon?n("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):n(e,{}),l.label]})),l.options.map(((e,t)=>n(s,{version:d,last:t===l.options.length-1,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:e},`${o}-${t}`))),i?n("span",{ref:f}):null]}),o)}return t("div",{children:[n(s,{version:d,last:i,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:r},o),i?n("span",{ref:f}):null]},o)}))})};export{l as MenuList};

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { DropdownOption } from '../../../type';
-declare const MultiSelectDropdownBottomBar: React.FC<{
+import { ButtonOptions, DropdownOption } from '../../../type';
+interface MultiSelectDropdownBottomBarProps {
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
     buttonText?: string;
-}>;
+    buttonOptions?: ButtonOptions;
+}
+declare const MultiSelectDropdownBottomBar: React.FC<MultiSelectDropdownBottomBarProps>;
 export default MultiSelectDropdownBottomBar;

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{BottomBarContainer as n}from"./MultiSelectDropdownBottomBar.styled.js";const s=s=>{let{onApply:i,onClear:c,list:p,buttonText:a}=s;const m=p.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(n,Object.assign({style:{justifyContent:"space-between"}},{children:[e(r,Object.assign({style:{flex:1,color:l.content.primary}},{children:m?`${m} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:c}),e(o,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{i()}})]}))]}))};export{s as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as n}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{BottomBarContainer as s}from"./MultiSelectDropdownBottomBar.styled.js";const l=l=>{const{onClear:i,onApply:p,list:a,buttonText:c,buttonOptions:y}=l,{primaryButtonText:u,primaryButtonType:m,secondaryButtonText:d,secondaryButtonType:f}=null!=y?y:{},b=a.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(s,Object.assign({style:{justifyContent:"space-between"}},{children:[e(n,Object.assign({style:{flex:1,color:r.content.primary}},{children:b?`${b} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:f||"primary",buttonText:d||"Clear",onClick:i}),e(o,{size:"small",buttonText:u||c||"Apply",buttonType:m||"primary",onClick:()=>{p()}})]}))]}))};export{l as default};

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -12,6 +12,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -24,6 +25,9 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
+export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;
+export declare function getSelectedOptionsAsArray(selectedOption: DropdownOption[]): string[];

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...i]})}return!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)}))}function n(s,n){s.forEach((s=>{s.options?s.options.forEach(n):n(s)}))}export{s as iterateOnOptions,n as iterateOnOptionsRaw};
+function n(n,t,e){return n.map((n=>{if(n.options){const s=n.options.map((n=>!e||e(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)));return Object.assign(Object.assign({},n),{options:[...s]})}return!e||e(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)}))}function t(n,t){n.forEach((n=>{n.options?n.options.forEach(t):t(n)}))}function e(n){if(n&&n.length)return n.map((n=>{var t;const e=n;return null!==(t=e.selectedLabel)&&void 0!==t?t:e.label})).join(", ")}function s(n){return n&&n.length?n.map((n=>{var t;const e=n;return null!==(t=e.selectedLabel)&&void 0!==t?t:e.label})):[]}export{s as getSelectedOptionsAsArray,e as getSelectedOptionsAsText,n as iterateOnOptions,t as iterateOnOptionsRaw};

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -19,6 +19,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -31,6 +32,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/esm/components/dropdown/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -19,6 +20,10 @@ export interface OpenDropdownProps {
     headerRef?: any;
     hideSelectAll?: boolean;
     primaryButtonText?: string;
+    onInfiniteScroll?: () => void;
+    onMultiSelectClear?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
+    buttonOptions?: ButtonOptions;
 }
 export type GroupedOption = {
     label?: string;
@@ -37,7 +42,14 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
+    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
+export interface ButtonOptions {
+    primaryButtonText?: string;
+    primaryButtonType?: Type;
+    secondaryButtonText?: string;
+    secondaryButtonType?: Type;
+}
 export type { Placement };

package/dist/esm/components/side-modal/SideModal.style.js

@@ -1,8 +1,8 @@
-import e,{css as t}from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as o}from"../../constants/zindex.js";const r=e.div`
+import e,{css as t}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{ComponentZindex as i}from"../../constants/zindex.js";const r=e.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${e=>e.zIndex||o.SIDE_MODAL};
+	z-index: ${e=>e.zIndex||i.SIDE_MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.4);
@@ -12,7 +12,7 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 `,n=e.div`
 	height: 100%;
 	width: ${e=>e.width||"566px"};
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -25,23 +25,24 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	padding: 0px 24px;
-	border-bottom: 1px solid ${i.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	svg:hover {
 		cursor: pointer;
+		background: ${o.background.base};
 	}
-	${e=>{let{headerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{headerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
 `,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
 	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
-	${e=>{let{bodyStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{bodyStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,p=e.div`
+`,a=e.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -50,14 +51,14 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	flex-direction: ${e=>e.footerDirection||"row"};
 	justify-content: space-between;
 	align-items: center;
-	background: ${i.surface.standard};
-	border-top: 1px solid ${i.stroke.primary};
+	background: ${o.surface.standard};
+	border-top: 1px solid ${o.stroke.primary};
 	padding: 0px 24px;
-	${e=>{let{footerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{footerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,a=e.div`
+`,p=e.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;export{a as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,p as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
+`;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -53,5 +53,6 @@ export interface TemplateContextMapperProps {
     fileName?: string;
     setFileName?: (name: string) => void;
     hideDeviceContainerInPreview?: boolean;
+    maxCharLimit?: number;
 }
 export declare const TemplateContextMapper: React.FC<TemplateContextMapperProps>;

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as r,useState as i,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{TemplateModalContext as p}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import v from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as h}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:C,closeDialog:g,showVariableMapping:P,channel:f,htmlContent:x,templateVariables:E,onTemplateSelect:I,globalPlaceholders:S,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:T,showVariableModal:V,variableList:L,discountCode:k,setDiscountCode:M,onBackPress:j,enabledCustomText:D,variableListForImage:A,showSampleValues:F,disableEditVariable:H,pod:B,extras:O,pickerConf:W,selectedCarouselProducts:N,disableEditExpiry:z,cardWidth:R,onDeleteSelectedProducts:$,fileName:U,setFileName:_,hideDeviceContainerInPreview:q}=b;var G,J,K,Q,X,Y,Z,ee;r((()=>{ne(x)}),[x]);const le=f===u.WHATSAPP&&"CAROUSEL"===(null===(J=null===(G=null==C?void 0:C.components)||void 0===G?void 0:G[1])||void 0===J?void 0:J.type),oe=null==C?void 0:C.isProductCarouselType,[te,re]=i(f===u.EMAIL||le?"desktop":"mobile"),[ie,ae]=i(!1),[se,ne]=i(x),[de,ce]=i(!1),[ue,pe]=i([]),[me,ve]=i({}),[he,be]=i(C),[Ce,ge]=i([]),[Pe,fe]=i(null),[xe,Ee]=i(!1),[Ie,Se]=i(null!=E?E:[]),[ye,we]=i(!1),[Te,Ve]=i(le?(null===(Q=null===(K=null==he?void 0:he.mapping)||void 0===K?void 0:K.body)||void 0===Q?void 0:Q.length)?-1:0:-1),[Le,ke]=i([]),[Me,je]=i(void 0),De=a(null),[Ae,Fe]=i(!1),[He,Be]=i(!1);r((()=>{N?ke(N):oe&&ke([])}),[N]),r((()=>{var e;if(!xe&&oe&&(!N||0===ke.length)){const l=null===(e=null==he?void 0:he.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),ge(o),Ee(!0)}}),[xe]);const Oe=s((()=>h(S)),[S]);return r((()=>{je(t(L))}),[L]),e(p.Provider,Object.assign({value:{hideCrossButton:He,setHideCrossButton:Be,variableList:Me,setVariableList:je,variableCallback:Pe,setVariableCallback:fe,showVariablePicker:ie,setShowVariablePicker:ae,template:he,setTemplate:be,device:te,setDevice:re,display_content:se,setDisplayContent:ne,originalVariableList:Ie,setOriginalVariableList:Se,isError:de,setIsError:ce,channel:f,globalNormalizedPlaceholders:Oe,templateSelectionTriggered:ye,setTemplateSelectionTriggered:we,enabledCustomText:D,disableEditVariable:H,pod:B,extras:O,isWhatsappCarousel:le,selectedCarouselIndex:Te,setSelectedCarouselIndex:Ve,isProductCarouselType:oe,templateErrorIndexes:me,cardCount:le?null===(Y=null===(X=C.components)||void 0===X?void 0:X[1].cards)||void 0===Y?void 0:Y.length:void 0,errorIndexes:ue,setErrorIndexes:pe,pickerConf:W,carouselProducts:Le,setCarouselProducts:ke,disableEditExpiry:z,cardWidth:R,cardImages:Ce,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:q,sliderRef:De,isCarouselHovered:Ae,setIsCarouselHovered:Fe}},{children:y?e(v,{variableListFromProps:L,channel:u.EMAIL,hideHeader:!0}):l(c,Object.assign({hideCrossButton:He,zIndex:T,centralContainerStyles:{width:le?900:f===u.EMAIL&&P?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==he?void 0:he.label,headingSubtitle:f===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(Z=null==he?void 0:he.category)&&void 0!==Z?Z:"")} • ${null!==(ee=null==he?void 0:he.templateCategory)&&void 0!==ee?ee:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(v,{variableListFromProps:L,showSampleValues:F,showVariableMapping:P,channel:f,whatsappSpecificPickerMeta:w,showVariableModal:V,discountCode:k,setDiscountCode:M,variableListForImage:A&&(null==A?void 0:A.length)>0?A:Me,fileName:U,setFileName:e=>{null==_||_(e)}}),I?e(m,{isWhatsappCarousel:null!=le&&le,onSelect:function(){var e;if((null==Le?void 0:Le.length)<1&&oe)return void ce(!0);const l=null==I?void 0:I(he,Ie,null!=se?se:"",Le);ve(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&pe(l.errorIndexes),(null==l?void 0:l.error)&&ce(!!(null==l?void 0:l.error))):we(!0)}}):e(o,{})]}))}))};export{b as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as i,useState as r,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import p from"./modalElements/Footer.js";import v from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as h}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:C,closeDialog:g,showVariableMapping:x,channel:P,htmlContent:f,templateVariables:E,onTemplateSelect:I,globalPlaceholders:S,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:L,showVariableModal:T,variableList:V,discountCode:k,setDiscountCode:M,onBackPress:j,enabledCustomText:D,variableListForImage:A,showSampleValues:F,disableEditVariable:H,pod:B,extras:O,pickerConf:W,selectedCarouselProducts:N,disableEditExpiry:z,cardWidth:R,onDeleteSelectedProducts:$,fileName:U,setFileName:_,hideDeviceContainerInPreview:q,maxCharLimit:G}=b;var J,K,Q,X,Y,Z,ee,le;i((()=>{de(f)}),[f]);const oe=P===u.WHATSAPP&&"CAROUSEL"===(null===(K=null===(J=null==C?void 0:C.components)||void 0===J?void 0:J[1])||void 0===K?void 0:K.type),te=null==C?void 0:C.isProductCarouselType,[ie,re]=r(P===u.EMAIL||oe?"desktop":"mobile"),[ae,se]=r(!1),[ne,de]=r(f),[ce,ue]=r(!1),[me,pe]=r([]),[ve,he]=r({}),[be,Ce]=r(C),[ge,xe]=r([]),[Pe,fe]=r(null),[Ee,Ie]=r(!1),[Se,ye]=r(null!=E?E:[]),[we,Le]=r(!1),[Te,Ve]=r(oe?(null===(X=null===(Q=null==be?void 0:be.mapping)||void 0===Q?void 0:Q.body)||void 0===X?void 0:X.length)?-1:0:-1),[ke,Me]=r([]),[je,De]=r(void 0),Ae=a(null),[Fe,He]=r(!1),[Be,Oe]=r(!1);i((()=>{N?Me(N):te&&Me([])}),[N]),i((()=>{var e;if(!Ee&&te&&(!N||0===Me.length)){const l=null===(e=null==be?void 0:be.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,i;"HEADER"===e.type&&o.push(null!==(i=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==i?i:"")}))})),xe(o),Ie(!0)}}),[Ee]);const We=s((()=>h(S)),[S]);return i((()=>{De(t(V))}),[V]),e(m.Provider,Object.assign({value:{hideCrossButton:Be,setHideCrossButton:Oe,variableList:je,setVariableList:De,variableCallback:Pe,setVariableCallback:fe,showVariablePicker:ae,setShowVariablePicker:se,template:be,setTemplate:Ce,device:ie,setDevice:re,display_content:ne,setDisplayContent:de,originalVariableList:Se,setOriginalVariableList:ye,isError:ce,setIsError:ue,channel:P,globalNormalizedPlaceholders:We,templateSelectionTriggered:we,setTemplateSelectionTriggered:Le,enabledCustomText:D,disableEditVariable:H,pod:B,extras:O,isWhatsappCarousel:oe,selectedCarouselIndex:Te,setSelectedCarouselIndex:Ve,isProductCarouselType:te,templateErrorIndexes:ve,cardCount:oe?null===(Z=null===(Y=C.components)||void 0===Y?void 0:Y[1].cards)||void 0===Z?void 0:Z.length:void 0,errorIndexes:me,setErrorIndexes:pe,pickerConf:W,carouselProducts:ke,setCarouselProducts:Me,disableEditExpiry:z,cardWidth:R,cardImages:ge,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:q,sliderRef:Ae,isCarouselHovered:Fe,setIsCarouselHovered:He,maxCharLimit:G}},{children:y?e(v,{variableListFromProps:V,channel:u.EMAIL,hideHeader:!0}):l(c,Object.assign({hideCrossButton:Be,zIndex:L,centralContainerStyles:{width:oe?900:P===u.EMAIL&&x?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==be?void 0:be.label,headingSubtitle:P===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(ee=null==be?void 0:be.category)&&void 0!==ee?ee:"")} • ${null!==(le=null==be?void 0:be.templateCategory)&&void 0!==le?le:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(v,{variableListFromProps:V,showSampleValues:F,showVariableMapping:x,channel:P,whatsappSpecificPickerMeta:w,showVariableModal:T,discountCode:k,setDiscountCode:M,variableListForImage:A&&(null==A?void 0:A.length)>0?A:je,fileName:U,setFileName:e=>{null==_||_(e)}}),I?e(p,{isWhatsappCarousel:null!=oe&&oe,onSelect:function(){var e;if((null==ke?void 0:ke.length)<1&&te)return void ue(!0);const l=null==I?void 0:I(be,Se,null!=ne?ne:"",ke);he(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&pe(l.errorIndexes),(null==l?void 0:l.error)&&ue(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{b as TemplateContextMapper};

package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts

@@ -65,6 +65,7 @@ export declare const TemplateModalContext: React.Context<{
     sliderRef?: LegacyRef<Slider> | undefined;
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
+    maxCharLimit?: number | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideCrossButton: boolean;
@@ -122,4 +123,5 @@ export declare const useTemplateModalContext: () => {
     sliderRef?: LegacyRef<Slider> | undefined;
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
+    maxCharLimit?: number | undefined;
 };

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js

@@ -13,4 +13,4 @@ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"..
 	background-color: rgba(0, 0, 0, 0.1);
 	z-index: 1000;
 	cursor: not-allowed;
-`,E={value:"custom_link",label:"Custom URL"},C={value:"custom_text",label:"Custom text"},S={value:"static_expiry",label:"Static Expiry"},A=u=>{let{onFocus:A,variable:D,index:P,showVariableModal:B,setShowDiscountCheckBox:N,componentType:L,CTAoptions:w,buttonType:U}=u;var H,R,W,M,$,I,Y,z,Z;const[q,G]=o(!1),[F,K]=o(""),[Q,J]=o([]),[X,ee]=o(),[te,le]=o(!1),{variableList:ae,setVariableList:ie,setVariableCallback:ne,setShowVariablePicker:oe,device:se,channel:ue,isError:de,originalVariableList:re,template:ce,templateSelectionTriggered:pe,setTemplate:me,setDisplayContent:ve,setOriginalVariableList:be,globalNormalizedPlaceholders:ge,enabledCustomText:Oe,pod:ye,selectedCarouselIndex:je,isProductCarouselType:he,isWhatsappCarousel:xe,disableEditVariable:fe,disableEditExpiry:_e,templateErrorIndexes:Te}=x();function Ve(e,t){var l,a,i;const n=e;K(""),ee(n),ue===v.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(Ee(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Ce||Ce(null!==(a=D.index)&&void 0!==a?a:0,n.value,!0)):(null==Ce||Ce(null!==(i=D.index)&&void 0!==i?i:0,"",!0,n.value),Ee("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?Ee(n.value,"url"===n.bikPlaceholderType?"link":"string"):(K(""),Ee("",n.value))}function ke(e,t){var l;K(t);const a="custom_link"===(null==X?void 0:X.value)&&t?t.includes("https")?t:`https://${t}`:t;Ee(a,"static_expiry"===e?"string":e),ue===v.WHATSAPP&&(null==Ce||Ce(null!==(l=D.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function Ee(e,t,l){var a,i,o,s;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ue!==v.WHATSAPP){const l=_(P+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===se?"template_html_mobile":"template_html_desktop"),n=ue===v.EMAIL?null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:D.variableName);const o=re.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==be||be(o)}if(ue===v.WHATSAPP){if(null!=je&&je>-1&&he){const l=Object.assign({},re).cards.map(((l,a)=>{var i,n;return"BODY"===L?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>P===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===L?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===P?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==be||be((e=>Object.assign(Object.assign({},e),{cards:l}))))}const a=null!=je&&je>-1?re.cards[je]:re;let d=a.body,r=a.header,c=a.buttons;if("BODY"===L?d=null===(i=a.body)||void 0===i?void 0:i.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===L?r=null===(o=a.header)||void 0===o?void 0:o.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===L&&(c=null===(s=a.buttons)||void 0===s?void 0:s.map(((a,i)=>i===P?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=je&&je>-1){const e=n(re.cards);e[je]={header:r,body:d,buttons:c},null==be||be((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==be||be((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function Ce(e,t,l,a){var i,o,s,u,d,r,c;if(null!=je&&je>-1&&he){const o=Object.assign({},ce).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s,u;if("BODY"===l.type&&"BODY"===L){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===L){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=n(ce);if(l){const l=null===(i=Object.assign({},ce).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===L)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});if("BUTTONS"===L&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=ce.components[1].cards)||void 0===o||o[i].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==me||me(s))}const p=null!=je&&je>-1?{components:null===(o=Object.assign({},ce).components[1].cards)||void 0===o?void 0:o[je].components,mapping:null===(s=Object.assign({},ce).mapping.cards)||void 0===s?void 0:s[je]}:Object.assign({},ce),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,o,s,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===L){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===L){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===L){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===L)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===L&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===L&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===L&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=je&&je>-1&&ce){const e=n(ce);e.components[1].cards[je].components=p.components,e.mapping.cards[je]=p.mapping,null==me||me(e)}else null==me||me(Object.assign({},p))}s((()=>{q&&(null==A||A())}),[q]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===se?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ue===v.EMAIL&&(null==ve||ve(s))}()}),[pe]),s((()=>{!function(){var e,t;const l=[];let a=[];if(ue!==v.MESSAGE||Oe){"link"===(null==D?void 0:D.type)?(l.push({label:"",options:[E,C]}),ee(E)):"date_time"===(null==D?void 0:D.type)?(l.push({label:"",options:[E,C]}),ee(S)):(l.push({label:"",options:[E,C,S]}),ee(C));const e=null!=ge?ge:[];J([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:j.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ge?ge:[];J([{label:"",options:[C,E]},...e]),a=[{label:"",options:[C,E]},...e]}if((ue===v.WHATSAPP||ue===v.EMAIL||ue===v.MESSAGE)&&D.updatedValue)if(m.test(D.updatedValue)&&ue===v.WHATSAPP||D.updatedValue.startsWith("{{")&&ue!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(B){let t=e.updatedValue;if(ye===b.CHATBOT&&"BUTTONS"===L){const l=null==w?void 0:w.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(D,a,ue);e.value&&ee(e)}else"date_time"===D.type?(ee(S),K(D.updatedValue),Ce(null!==(e=D.index)&&void 0!==e?e:0,D.updatedValue)):(null===(t=D.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(ee(E),K(D.updatedValue.split("https://")[1])):(ee(C),K(D.updatedValue))}()}),[je]),s((()=>{se&&X&&F&&setTimeout((()=>{Ee("custom_link"===(null==X?void 0:X.value)&&F?F.includes("https")?F:`https://${F}`:F,X.value)}),100)}),[se]),s((()=>{!te&&X&&D.updatedValue&&setTimeout((()=>{Ee("custom_link"===(null==X?void 0:X.value)&&D.updatedValue?D.updatedValue.includes("https")?D.updatedValue:`https://${D.updatedValue}`:D.updatedValue,X.value),le(!0)}),100)}),[X]);const Se=e=>{null==N||N(!1),"{{custom.url}}"===e.actualValue?Ve({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Ve({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?Ve({label:e.displayName,selected:!0,value:"static_expiry"}):Ve({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e(V,Object.assign({channel:ue,focused:q,onMouseEnter:()=>G(!0),onMouseLeave:()=>G(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:de&&!X?h.content.negative:h.content.primary}},{children:[null===(H=D.variableName)||void 0===H?void 0:H.replace("{{","").replace("}}","")," ","link"===(null==D?void 0:D.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:B?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==X?void 0:X.label)?"space-between":"flex-end"}},{children:[t(y,Object.assign({numberOfLines:1},{children:ye===b.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(R=null==X?void 0:X.value)&&void 0!==R?R:"")?null==X?void 0:X.label:null==X?void 0:X.value:p(null!==(W=null==X?void 0:X.label)&&void 0!==W?W:"",20,!0)})),fe||"date_time"===(null==D?void 0:D.type)&&_e?t(l,{}):t(a,{onClick:()=>{(()=>{if(U===g.URL&&ye===b.CHATBOT){const e=f({variableList:ae,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ie(e)}else if("limited_time_offer"===L){const e=f({variableList:ae,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ie(e)}else if(U===g.COPY_CODE){const e=f({variableList:ae,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ie(e)}})(),ne((()=>Se)),oe(!0)},width:24,height:24,color:h.content.primary})]})):t(r,{disabled:fe,options:Q,isSearchable:!1,onSelect:Ve,defaultOptions:X?[Object.assign(Object.assign({},X),{selected:!0})]:[]})})),("custom_text"===(null==X?void 0:X.value)||"custom_link"===(null==X?void 0:X.value))&&t(c,{state:fe?"disabled":"none",labelText:"custom_text"===(null==X?void 0:X.value)?"Custom text value":"custom_link"===(null==X?void 0:X.value)?"Custom URL value":"",id:`variable-value-${null==X?void 0:X.value}-${P}`,value:F,errorMessage:de&&(null===(M=null==Te?void 0:Te.buttons)||void 0===M?void 0:M.includes(null!==($=null==D?void 0:D.index)&&void 0!==$?$:-1))?F&&0!==F.trim().length?"custom_link"!==X.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${F.trim()}`)&&0!==F.trim().length?"custom_link"!==X.value&&F.length>30?"Length cannot be more than 30":"BUTTONS"===L&&"custom_link"!==X.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==X?void 0:X.value)?2e3:"BUTTONS"===L?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==X?void 0:X.value)?"https://":"",placeholder:"link"===D.type||"custom_link"===X.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ke(X.value,e)}}),"static_expiry"===(null==X?void 0:X.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[fe&&t(k,{onClick:e=>e.preventDefault()}),t(d,{placement:"auto",time:i(F?new Date(F):new Date,"hh:mm a"),date:F?new Date(F):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ke("static_expiry",e.toISOString())}})]})),"link"===D.type&&"custom_link"!==(null==X?void 0:X.value)&&!he&&!xe&&ye===b.CHATBOT&&t(T,{isError:null!==(z=null===(I=null==Te?void 0:Te.buttons)||void 0===I?void 0:I.includes(null!==(Y=null==D?void 0:D.index)&&void 0!==Y?Y:-1))&&void 0!==z&&z,params:null!==(Z=D.queryParams)&&void 0!==Z?Z:[],onChange:e=>{Ee(D.updatedValue,"link",e)},variableValue:D.updatedValue})]}))};export{V as Container,A as default};
+`,E={value:"custom_link",label:"Custom URL"},C={value:"custom_text",label:"Custom text"},S={value:"static_expiry",label:"Static Expiry"},A=u=>{let{onFocus:A,variable:D,index:P,showVariableModal:B,setShowDiscountCheckBox:N,componentType:L,CTAoptions:w,buttonType:U}=u;var H,R,W,M,$,I,Y,z,Z;const[q,G]=o(!1),[F,K]=o(""),[Q,J]=o([]),[X,ee]=o(),[te,le]=o(!1),{variableList:ae,setVariableList:ie,setVariableCallback:ne,setShowVariablePicker:oe,device:se,channel:ue,isError:de,originalVariableList:re,template:ce,templateSelectionTriggered:pe,setTemplate:me,setDisplayContent:ve,setOriginalVariableList:be,globalNormalizedPlaceholders:ge,enabledCustomText:Oe,pod:ye,selectedCarouselIndex:je,isProductCarouselType:he,isWhatsappCarousel:xe,disableEditVariable:fe,disableEditExpiry:_e,templateErrorIndexes:Te,maxCharLimit:Ve}=x();function ke(e,t){var l,a,i;const n=e;K(""),ee(n),ue===v.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(Ce(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Se||Se(null!==(a=D.index)&&void 0!==a?a:0,n.value,!0)):(null==Se||Se(null!==(i=D.index)&&void 0!==i?i:0,"",!0,n.value),Ce("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?Ce(n.value,"url"===n.bikPlaceholderType?"link":"string"):(K(""),Ce("",n.value))}function Ee(e,t){var l;K(t);const a="custom_link"===(null==X?void 0:X.value)&&t?t.includes("https")?t:`https://${t}`:t;Ce(a,"static_expiry"===e?"string":e),ue===v.WHATSAPP&&(null==Se||Se(null!==(l=D.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function Ce(e,t,l){var a,i,o,s;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ue!==v.WHATSAPP){const l=_(P+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===se?"template_html_mobile":"template_html_desktop"),n=ue===v.EMAIL?null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:D.variableName);const o=re.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==be||be(o)}if(ue===v.WHATSAPP){if(null!=je&&je>-1&&he){const l=Object.assign({},re).cards.map(((l,a)=>{var i,n;return"BODY"===L?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>P===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===L?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===P?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==be||be((e=>Object.assign(Object.assign({},e),{cards:l}))))}const a=null!=je&&je>-1?re.cards[je]:re;let d=a.body,r=a.header,c=a.buttons;if("BODY"===L?d=null===(i=a.body)||void 0===i?void 0:i.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===L?r=null===(o=a.header)||void 0===o?void 0:o.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===L&&(c=null===(s=a.buttons)||void 0===s?void 0:s.map(((a,i)=>i===P?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=je&&je>-1){const e=n(re.cards);e[je]={header:r,body:d,buttons:c},null==be||be((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==be||be((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function Se(e,t,l,a){var i,o,s,u,d,r,c;if(null!=je&&je>-1&&he){const o=Object.assign({},ce).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s,u;if("BODY"===l.type&&"BODY"===L){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===L){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=n(ce);if(l){const l=null===(i=Object.assign({},ce).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===L)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});if("BUTTONS"===L&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=ce.components[1].cards)||void 0===o||o[i].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==me||me(s))}const p=null!=je&&je>-1?{components:null===(o=Object.assign({},ce).components[1].cards)||void 0===o?void 0:o[je].components,mapping:null===(s=Object.assign({},ce).mapping.cards)||void 0===s?void 0:s[je]}:Object.assign({},ce),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,o,s,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===L){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===L){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===L){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===L)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===L&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===L&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===L&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=je&&je>-1&&ce){const e=n(ce);e.components[1].cards[je].components=p.components,e.mapping.cards[je]=p.mapping,null==me||me(e)}else null==me||me(Object.assign({},p))}s((()=>{q&&(null==A||A())}),[q]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===se?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ue===v.EMAIL&&(null==ve||ve(s))}()}),[pe]),s((()=>{!function(){var e,t;const l=[];let a=[];if(ue!==v.MESSAGE||Oe){"link"===(null==D?void 0:D.type)?(l.push({label:"",options:[E,C]}),ee(E)):"date_time"===(null==D?void 0:D.type)?(l.push({label:"",options:[E,C]}),ee(S)):(l.push({label:"",options:[E,C,S]}),ee(C));const e=null!=ge?ge:[];J([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:j.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ge?ge:[];J([{label:"",options:[C,E]},...e]),a=[{label:"",options:[C,E]},...e]}if((ue===v.WHATSAPP||ue===v.EMAIL||ue===v.MESSAGE)&&D.updatedValue)if(m.test(D.updatedValue)&&ue===v.WHATSAPP||D.updatedValue.startsWith("{{")&&ue!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(B){let t=e.updatedValue;if(ye===b.CHATBOT&&"BUTTONS"===L){const l=null==w?void 0:w.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(D,a,ue);e.value&&ee(e)}else"date_time"===D.type?(ee(S),K(D.updatedValue),Se(null!==(e=D.index)&&void 0!==e?e:0,D.updatedValue)):(null===(t=D.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(ee(E),K(D.updatedValue.split("https://")[1])):(ee(C),K(D.updatedValue))}()}),[je]),s((()=>{se&&X&&F&&setTimeout((()=>{Ce("custom_link"===(null==X?void 0:X.value)&&F?F.includes("https")?F:`https://${F}`:F,X.value)}),100)}),[se]),s((()=>{!te&&X&&D.updatedValue&&setTimeout((()=>{Ce("custom_link"===(null==X?void 0:X.value)&&D.updatedValue?D.updatedValue.includes("https")?D.updatedValue:`https://${D.updatedValue}`:D.updatedValue,X.value),le(!0)}),100)}),[X]);const Ae=e=>{null==N||N(!1),"{{custom.url}}"===e.actualValue?ke({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ke({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ke({label:e.displayName,selected:!0,value:"static_expiry"}):ke({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e(V,Object.assign({channel:ue,focused:q,onMouseEnter:()=>G(!0),onMouseLeave:()=>G(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:de&&!X?h.content.negative:h.content.primary}},{children:[null===(H=D.variableName)||void 0===H?void 0:H.replace("{{","").replace("}}","")," ","link"===(null==D?void 0:D.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:B?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==X?void 0:X.label)?"space-between":"flex-end"}},{children:[t(y,Object.assign({numberOfLines:1},{children:ye===b.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(R=null==X?void 0:X.value)&&void 0!==R?R:"")?null==X?void 0:X.label:null==X?void 0:X.value:p(null!==(W=null==X?void 0:X.label)&&void 0!==W?W:"",20,!0)})),fe||"date_time"===(null==D?void 0:D.type)&&_e?t(l,{}):t(a,{onClick:()=>{(()=>{if(U===g.URL&&ye===b.CHATBOT){const e=f({variableList:ae,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ie(e)}else if("limited_time_offer"===L){const e=f({variableList:ae,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ie(e)}else if(U===g.COPY_CODE){const e=f({variableList:ae,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ie(e)}})(),ne((()=>Ae)),oe(!0)},width:24,height:24,color:h.content.primary})]})):t(r,{disabled:fe,options:Q,isSearchable:!1,onSelect:ke,defaultOptions:X?[Object.assign(Object.assign({},X),{selected:!0})]:[]})})),("custom_text"===(null==X?void 0:X.value)||"custom_link"===(null==X?void 0:X.value))&&t(c,{state:fe?"disabled":"none",labelText:"custom_text"===(null==X?void 0:X.value)?"Custom text value":"custom_link"===(null==X?void 0:X.value)?"Custom URL value":"",id:`variable-value-${null==X?void 0:X.value}-${P}`,value:F,errorMessage:de&&(null===(M=null==Te?void 0:Te.buttons)||void 0===M?void 0:M.includes(null!==($=null==D?void 0:D.index)&&void 0!==$?$:-1))?F&&0!==F.trim().length?"custom_link"!==X.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${F.trim()}`)&&0!==F.trim().length?"custom_link"!==X.value&&F.length>30?"Length cannot be more than 30":"BUTTONS"===L&&"custom_link"!==X.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Ve||("custom_link"===(null==X?void 0:X.value)?2e3:"BUTTONS"===L?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==X?void 0:X.value)?"https://":"",placeholder:"link"===D.type||"custom_link"===X.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ee(X.value,e)}}),"static_expiry"===(null==X?void 0:X.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[fe&&t(k,{onClick:e=>e.preventDefault()}),t(d,{placement:"auto",time:i(F?new Date(F):new Date,"hh:mm a"),date:F?new Date(F):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ee("static_expiry",e.toISOString())}})]})),"link"===D.type&&"custom_link"!==(null==X?void 0:X.value)&&!he&&!xe&&ye===b.CHATBOT&&t(T,{isError:null!==(z=null===(I=null==Te?void 0:Te.buttons)||void 0===I?void 0:I.includes(null!==(Y=null==D?void 0:D.index)&&void 0!==Y?Y:-1))&&void 0!==z&&z,params:null!==(Z=D.queryParams)&&void 0!==Z?Z:[],onChange:e=>{Ce(D.updatedValue,"link",e)},variableValue:D.updatedValue})]}))};export{V as Container,A as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.551",
+	"version": "0.0.552-beta.1",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",