@bikdotai/bik-component-library 0.0.515-beta.1 → 0.0.515-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,4 +15,4 @@
15
15
  height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
16
16
  overflow-y: auto;
17
17
  background-image: ${e=>e.hideDeviceContainerInPreview?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
18
- `;exports.default=i=>{const{showVariableMapping:m,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:j,discountCode:E,setDiscountCode:k,variableListForImage:y,showSampleValues:T}=i,L=t.useRef(),A=t.useRef(),{variableCallback:S,showVariablePicker:V,setShowVariablePicker:q,device:M,display_content:N,channel:O,template:_,setTemplate:W,isWhatsappCarousel:H,isProductCarouselType:I,hideDeviceContainerInPreview:D}=d.useTemplateModalContext();const F=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(f,{children:[e.jsx(w,Object.assign({showOnlyContent:C,showVariableMapping:m,isWhatsappCarousel:H,hideDeviceContainerInPreview:D},{children:"mobile"===M?e.jsx(b.default,{ref:A,display_content:null!=N?N:"",channel:O,template:_,showSampleValues:T}):O===r.CHANNEL_TYPE.WHATSAPP&&H?e.jsx(l.CarouselPreview,{ref:L,channel:O,template:_,showSampleValues:T,isPreview:!1}):O!==r.CHANNEL_TYPE.MESSAGE?e.jsx(c.default,{ref:L,channel:O,display_content:null!=N?N:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(I||m)&&e.jsxs(g,Object.assign({channel:O,isWhatsappCarousel:H},{children:[e.jsx("div",Object.assign({style:{width:428,display:V?"block":"none"}},{children:e.jsx(s.VariablePicker,{showHeader:!0,showBackButton:!0,onBackButtonClick:()=>q(!1),onSelect:e=>{S(e),q(!1)},onClose:()=>{q(!1)},type:a.PickerType.EMBEDDED,data:null!=j?j:[]})})),e.jsx("div",Object.assign({style:{padding:"16px 14px",display:V?"none":"block"}},{children:O!==r.CHANNEL_TYPE.WHATSAPP?e.jsx(v.default,{onFocus:O===r.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===M?"template_html_mobile":"template_html_desktop"),o=u.getVariableNameForEmailByIndex(e+1),s=O===r.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(o):document.getElementById(o),d=F(s),c=null==s?void 0:s.offsetLeft;"desktop"===M?d&&L.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,d),p.highlightFor(o,n.COLORS.background.warning.light,2,O,M)):d&&A.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,d),p.highlightFor(o,n.COLORS.background.warning.light,2,O,M))}:void 0,showVariableModal:P,variableList:j,discountCode:E,setDiscountCode:k}):O===r.CHANNEL_TYPE.WHATSAPP&&H?e.jsx(o.default,{whatsappSpecificPickerMeta:x,template:_,showVariableModal:P,variableList:j,variableListForImage:y,discountCode:E,setDiscountCode:k}):e.jsx(h.default,{whatsappSpecificPickerMeta:x,template:_,onTemplateChange:e=>{null==W||W(e)},showVariableModal:P,variableList:j,variableListForImage:y,discountCode:E,setDiscountCode:k})}))]}))]})};
18
+ `;exports.default=i=>{const{showVariableMapping:m,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:j,discountCode:E,setDiscountCode:k,variableListForImage:y,showSampleValues:T}=i,L=t.useRef(),A=t.useRef(),{variableCallback:S,showVariablePicker:V,setShowVariablePicker:q,device:M,display_content:N,channel:O,template:_,setTemplate:W,isWhatsappCarousel:H,isProductCarouselType:I,hideDeviceContainerInPreview:D}=d.useTemplateModalContext();const F=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(f,{children:[e.jsx(w,Object.assign({showOnlyContent:C,showVariableMapping:m,isWhatsappCarousel:H,hideDeviceContainerInPreview:D},{children:"mobile"===M?e.jsx(b.default,{ref:A,display_content:null!=N?N:"",channel:O,template:_,showSampleValues:T}):O===r.CHANNEL_TYPE.WHATSAPP&&H?e.jsx(l.CarouselPreview,{ref:L,channel:O,template:_,showSampleValues:T,isPreview:!1}):O!==r.CHANNEL_TYPE.MESSAGE?e.jsx(c.default,{ref:L,channel:O,display_content:null!=N?N:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(I||m)&&e.jsxs(g,Object.assign({channel:O,isWhatsappCarousel:H},{children:[e.jsx("div",Object.assign({style:{width:428,display:V?"block":"none"}},{children:e.jsx(s.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>q(!1),onSelect:e=>{S(e),q(!1)},onClose:()=>{q(!1)},type:a.PickerType.EMBEDDED,data:null!=j?j:[]})})),e.jsx("div",Object.assign({style:{padding:"16px 14px",display:V?"none":"block"}},{children:O!==r.CHANNEL_TYPE.WHATSAPP?e.jsx(v.default,{onFocus:O===r.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===M?"template_html_mobile":"template_html_desktop"),o=u.getVariableNameForEmailByIndex(e+1),s=O===r.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(o):document.getElementById(o),d=F(s),c=null==s?void 0:s.offsetLeft;"desktop"===M?d&&L.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,d),p.highlightFor(o,n.COLORS.background.warning.light,2,O,M)):d&&A.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,d),p.highlightFor(o,n.COLORS.background.warning.light,2,O,M))}:void 0,showVariableModal:P,variableList:j,discountCode:E,setDiscountCode:k}):O===r.CHANNEL_TYPE.WHATSAPP&&H?e.jsx(o.default,{whatsappSpecificPickerMeta:x,template:_,showVariableModal:P,variableList:j,variableListForImage:y,discountCode:E,setDiscountCode:k}):e.jsx(h.default,{whatsappSpecificPickerMeta:x,template:_,onTemplateChange:e=>{null==W||W(e)},showVariableModal:P,variableList:j,variableListForImage:y,discountCode:E,setDiscountCode:k})}))]}))]})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_back.svg.js"),a=require("../../assets/icons/plus.svg.js"),i=require("../../assets/icons/triangle_error.svg.js"),l=require("react"),r=require("../../constants/Theme.js"),n=require("../accordion/Accordion.js"),c=require("../icon-button/IconButton.js"),o=require("../input/Input.js"),d=require("../list-item/ListItem.js"),h=require("../switch/Switch.js"),u=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),g=require("./context.js"),b=require("./NoResult.js"),p=require("./recommendVaribles.js"),x=require("./searchVariables.js"),y=require("./styles.js"),m=require("./SubHeaderItems.js");const O=(e,t)=>{if(0===t.length)return e;const a=e.toLowerCase().indexOf(t.toLowerCase());if(-1===a)return e;const i=e.slice(0,a),l=e.slice(a,a+t.length),n=e.slice(a+t.length);return s.jsxs("span",{children:[i,s.jsx("b",Object.assign({style:{color:r.COLORS.content.primary}},{children:l})),n]})},f=/.*\..*/,v=e=>{if(e.actualValue.match(f)){const s=e.actualValue.replace("{{","").replace("}}","").split(".");let t=s[0];return s.forEach(((e,s)=>{if(0===s)return;const a=(e=>/\w+\[\d+\]/g.test(e))(e);if(a){const s=e.match(/(\w+)\[(\d+)\]/);if(s){const e=s[1],a=s[2];t+=`['${e}'][${a}]`}}else t+=`['${e}']`})),t}return e.actualValueEval?e.actualValueEval:e.actualValue};exports.VariablePickerContent=f=>{const{data:S,onSelect:w,showHeader:C,showBackButton:R,onBackButtonClick:V,isEvaluationList:k}=f,[q,B]=l.useState(S),[L,I]=l.useState(""),[T,N]=l.useState([]),[_,H]=l.useState(""),[P,E]=l.useState(!1),[$,A]=l.useState([]);l.useEffect((()=>{W(!0)}),[]),l.useEffect((()=>{T.length>0?A([T[T.length-1]]):A(S)}),[T]);const W=s=>e.__awaiter(void 0,void 0,void 0,(function*(){if(E(s),s){const e=p.showOnlyRecommendedVariables(q,T);B(e)}else if(T.length>0){const e=_==T[T.length-1].displayName;if(L.length>0&&e){const e=x.searchVariables(L,$,T);B(e)}else B([T[T.length-1].variables])}else if(L.length>0){const e=x.searchVariables(L,$,T);B(e)}else B(S)})),z=()=>{let e=123;return T.length>0&&(e+=32),(f.showHeader||f.showBackButton)&&(e+=40),`calc(100% - ${e}px)`};return s.jsx(g.VariablePickerContext.Provider,Object.assign({value:{variables:q,searchText:L,subHeaderStack:T,showRecommended:P,setSubHeaderStack:N,setSearchText:I,setVariables:B,setShowRecommended:E}},{children:s.jsxs("div",Object.assign({tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:4,height:"100%"},onClick:e=>e.stopPropagation()},{children:[(C||R)&&s.jsxs(y.HeaderWrapper,{children:[R&&s.jsx(c.IconButton,{Icon:()=>s.jsx(t.default,{width:16,height:16,style:{display:"flex",color:r.COLORS.content.primary}}),onClick:V}),C&&s.jsx(j.TitleRegular,{children:"Select Variable"})]}),s.jsx("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:r.COLORS.surface.subdued}},{children:s.jsx(o.Input,{id:"search-bar-v3-picker",onBlur:e=>{f.onSearchBlur&&f.onSearchBlur(e)},value:L,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||H("");const s=x.searchVariables(e,$,T);if(P){const e=p.showOnlyRecommendedVariables(s,T);B(e)}else B(s);I(e);const t=T.length>0?T[T.length-1].displayName:"home";H(t)}})})),s.jsxs(y.RecommendWrapper,{children:[s.jsx(j.BodySecondary,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Only Recommended"})),s.jsx(h.Switch,{value:P,onValueChange:s=>e.__awaiter(void 0,void 0,void 0,(function*(){yield W(s)}))})]}),T.length>0&&s.jsxs(y.BackHeader,{children:[s.jsx("div",Object.assign({style:{position:"absolute",left:16}},{children:s.jsx(c.IconButton,{id:"back-btn-v3",style:{display:"flex"},Icon:()=>s.jsx(t.default,{width:12,height:12,style:{color:r.COLORS.content.secondary}}),onClick:e=>{e.stopPropagation();let s=L;const t=[...T],a=t.pop();if(N(t),a.displayName===_&&(I(""),s=""),s.length>0){const e=t.length>0?[t[t.length-1]]:S,a=x.searchVariables(s,e,t);if(P){const e=p.showOnlyRecommendedVariables(a,t);B(e)}else B(a)}else if(t.length>0)if(P){const e=p.showOnlyRecommendedVariables([t[t.length-1].variables],t);B(e)}else B([t[t.length-1].variables]);else if(P){const e=p.showOnlyRecommendedVariables(S,T);B(e)}else B(S)}})})),s.jsx(j.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:T[T.length-1].displayName}))]}),s.jsx(s.Fragment,{children:q.length>0?s.jsx(y.Container,Object.assign({height:z()},{children:q.map(((e,t)=>e.displayName&&void 0!==e.variables?s.jsx("div",Object.assign({style:{borderBottom:`1px solid ${r.COLORS.stroke.primary}`}},{children:s.jsx(n.BikAccordion,Object.assign({headerPadding:"12px 16px",header:s.jsx(j.TitleSmall,Object.assign({style:{color:r.COLORS.content.secondary}},{children:O(e.displayName,L)}))},{children:s.jsx(m.default,{searchText:L,variable:e.variables,onSelect:w})}))}),t):e.displayName?s.jsx(d.ListItem,{version:"2.0",leadingIcon:s.jsx(a.default,{width:14,height:14}),customListItemLabel:s.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[s.jsx(j.BodySecondary,Object.assign({style:{fontSize:"14px",color:r.COLORS.text.primary}},{children:O(e.displayName,L)})),!e.isAvailable&&s.jsx(u.Tooltip,Object.assign({body:"Not Recommended"},{children:s.jsx("div",Object.assign({style:{display:"flex"}},{children:s.jsx(i.default,{width:16,height:16,color:r.COLORS.content.secondary})}))}))]})),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{if(k){const s=v(e);w(Object.assign(Object.assign({},e),{actualValue:s}))}else w(e)}},t):s.jsx(m.default,{searchText:L,variable:e,onSelect:e=>{if(k){const s=v(e);w(Object.assign(Object.assign({},e),{actualValue:s}))}else w(e)}},t)))})):s.jsx(b.default,{height:z(),searchText:L})})]}))}))},exports.highlightSearchText=O;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_back.svg.js"),a=require("../../assets/icons/cross.svg.js"),i=require("../../assets/icons/plus.svg.js"),l=require("../../assets/icons/triangle_error.svg.js"),n=require("react"),r=require("../../constants/Theme.js"),o=require("../accordion/Accordion.js"),c=require("../icon-button/IconButton.js"),d=require("../input/Input.js"),h=require("../list-item/ListItem.js"),u=require("../switch/Switch.js"),j=require("../tooltips/Tooltip.js"),g=require("../TypographyStyle.js"),b=require("./context.js"),p=require("./NoResult.js"),x=require("./recommendVaribles.js"),y=require("./searchVariables.js"),m=require("./styles.js"),O=require("./SubHeaderItems.js");const f=(e,t)=>{if(0===t.length)return e;const a=e.toLowerCase().indexOf(t.toLowerCase());if(-1===a)return e;const i=e.slice(0,a),l=e.slice(a,a+t.length),n=e.slice(a+t.length);return s.jsxs("span",{children:[i,s.jsx("b",Object.assign({style:{color:r.COLORS.content.primary}},{children:l})),n]})},v=/.*\..*/,S=e=>{if(e.actualValue.match(v)){const s=e.actualValue.replace("{{","").replace("}}","").split(".");let t=s[0];return s.forEach(((e,s)=>{if(0===s)return;const a=(e=>/\w+\[\d+\]/g.test(e))(e);if(a){const s=e.match(/(\w+)\[(\d+)\]/);if(s){const e=s[1],a=s[2];t+=`['${e}'][${a}]`}}else t+=`['${e}']`})),t}return e.actualValueEval?e.actualValueEval:e.actualValue};exports.VariablePickerContent=v=>{const{data:C,onSelect:w,showHeader:R,showBackButton:V,hideHeaderCross:k,onBackButtonClick:q,isEvaluationList:B}=v,[I,L]=n.useState(C),[T,N]=n.useState(""),[_,H]=n.useState([]),[P,E]=n.useState(""),[$,A]=n.useState(!1),[W,z]=n.useState([]);n.useEffect((()=>{D(!0)}),[]),n.useEffect((()=>{_.length>0?z([_[_.length-1]]):z(C)}),[_]);const D=s=>e.__awaiter(void 0,void 0,void 0,(function*(){if(A(s),s){const e=x.showOnlyRecommendedVariables(I,_);L(e)}else if(_.length>0){const e=P==_[_.length-1].displayName;if(T.length>0&&e){const e=y.searchVariables(T,W,_);L(e)}else L([_[_.length-1].variables])}else if(T.length>0){const e=y.searchVariables(T,W,_);L(e)}else L(C)})),F=()=>{let e=123;return _.length>0&&(e+=32),(v.showHeader||v.showBackButton)&&(e+=40),`calc(100% - ${e}px)`};return s.jsx(b.VariablePickerContext.Provider,Object.assign({value:{variables:I,searchText:T,subHeaderStack:_,showRecommended:$,setSubHeaderStack:H,setSearchText:N,setVariables:L,setShowRecommended:A}},{children:s.jsxs("div",Object.assign({tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:4,height:"100%"},onClick:e=>e.stopPropagation()},{children:[(R||V)&&s.jsxs(m.HeaderWrapper,{children:[s.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[V&&s.jsx(c.IconButton,{Icon:()=>s.jsx(t.default,{width:16,height:16,style:{display:"flex",color:r.COLORS.content.primary}}),onClick:q}),R&&s.jsx(g.TitleRegular,{children:"Select Variable"})]})),!k&&s.jsx(c.IconButton,{style:{color:"#212121"},Icon:a.default,onClick:()=>v.onClose&&v.onClose()})]}),s.jsx("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:r.COLORS.surface.subdued}},{children:s.jsx(d.Input,{id:"search-bar-v3-picker",onBlur:e=>{v.onSearchBlur&&v.onSearchBlur(e)},value:T,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||E("");const s=y.searchVariables(e,W,_);if($){const e=x.showOnlyRecommendedVariables(s,_);L(e)}else L(s);N(e);const t=_.length>0?_[_.length-1].displayName:"home";E(t)}})})),s.jsxs(m.RecommendWrapper,{children:[s.jsx(g.BodySecondary,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Only Recommended"})),s.jsx(u.Switch,{value:$,onValueChange:s=>e.__awaiter(void 0,void 0,void 0,(function*(){yield D(s)}))})]}),_.length>0&&s.jsxs(m.BackHeader,{children:[s.jsx("div",Object.assign({style:{position:"absolute",left:16}},{children:s.jsx(c.IconButton,{id:"back-btn-v3",style:{display:"flex"},Icon:()=>s.jsx(t.default,{width:12,height:12,style:{color:r.COLORS.content.secondary}}),onClick:e=>{e.stopPropagation();let s=T;const t=[..._],a=t.pop();if(H(t),a.displayName===P&&(N(""),s=""),s.length>0){const e=t.length>0?[t[t.length-1]]:C,a=y.searchVariables(s,e,t);if($){const e=x.showOnlyRecommendedVariables(a,t);L(e)}else L(a)}else if(t.length>0)if($){const e=x.showOnlyRecommendedVariables([t[t.length-1].variables],t);L(e)}else L([t[t.length-1].variables]);else if($){const e=x.showOnlyRecommendedVariables(C,_);L(e)}else L(C)}})})),s.jsx(g.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:_[_.length-1].displayName}))]}),s.jsx(s.Fragment,{children:I.length>0?s.jsx(m.Container,Object.assign({height:F()},{children:I.map(((e,t)=>e.displayName&&void 0!==e.variables?s.jsx("div",Object.assign({style:{borderBottom:`1px solid ${r.COLORS.stroke.primary}`}},{children:s.jsx(o.BikAccordion,Object.assign({headerPadding:"12px 16px",header:s.jsx(g.TitleSmall,Object.assign({style:{color:r.COLORS.content.secondary}},{children:f(e.displayName,T)}))},{children:s.jsx(O.default,{searchText:T,variable:e.variables,onSelect:w})}))}),t):e.displayName?s.jsx(h.ListItem,{version:"2.0",leadingIcon:s.jsx(i.default,{width:14,height:14}),customListItemLabel:s.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[s.jsx(g.BodySecondary,Object.assign({style:{fontSize:"14px",color:r.COLORS.text.primary}},{children:f(e.displayName,T)})),!e.isAvailable&&s.jsx(j.Tooltip,Object.assign({body:"Not Recommended"},{children:s.jsx("div",Object.assign({style:{display:"flex"}},{children:s.jsx(l.default,{width:16,height:16,color:r.COLORS.content.secondary})}))}))]})),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{if(B){const s=S(e);w(Object.assign(Object.assign({},e),{actualValue:s}))}else w(e)}},t):s.jsx(O.default,{searchText:T,variable:e,onSelect:e=>{if(B){const s=S(e);w(Object.assign(Object.assign({},e),{actualValue:s}))}else w(e)}},t)))})):s.jsx(p.default,{height:F(),searchText:T})})]}))}))},exports.highlightSearchText=f;
@@ -13,6 +13,7 @@ export interface VariablePickerV3Props {
13
13
  onBackButtonClick?: () => void;
14
14
  onSearchBlur?: (e: any) => void;
15
15
  isEvaluationList?: boolean;
16
+ hideHeaderCross?: boolean;
16
17
  }
17
18
  export interface VariableListInterfaceV3 {
18
19
  isSubHeader?: boolean;
@@ -1,24 +1,24 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const a=o.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const a=o.default.div`
2
2
  display: flex;
3
3
  align-items: center;
4
- gap: 8px;
5
4
  padding: 12px 16px 0px 16px;
6
- background-color: ${r.COLORS.surface.subdued};
5
+ background-color: ${t.COLORS.surface.subdued};
6
+ justify-content: space-between;
7
7
  `,i=o.default.div`
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
11
  padding: 12px 16px;
12
- background-color: ${r.COLORS.surface.subdued};
13
- border-bottom: 1px solid ${r.COLORS.stroke.primary};
12
+ background-color: ${t.COLORS.surface.subdued};
13
+ border-bottom: 1px solid ${t.COLORS.stroke.primary};
14
14
  `,d=o.default.div`
15
15
  position: relative;
16
16
  display: flex;
17
17
  align-items: center;
18
18
  justify-content: center;
19
19
  height: 32px;
20
- background-color: ${r.COLORS.background.base};
21
- `,p=o.default.div`
20
+ background-color: ${t.COLORS.background.base};
21
+ `,n=o.default.div`
22
22
  margin: 8px;
23
23
  height: ${e=>e.height};
24
24
  overflow: scroll;
@@ -34,4 +34,4 @@
34
34
  &::-webkit-scrollbar-thumb:horizontal {
35
35
  width: 8px;
36
36
  }
37
- `;exports.BackHeader=d,exports.Container=p,exports.HeaderWrapper=a,exports.RecommendWrapper=i;
37
+ `;exports.BackHeader=d,exports.Container=n,exports.HeaderWrapper=a,exports.RecommendWrapper=i;
@@ -15,4 +15,4 @@ import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import"../../cur
15
15
  height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
16
16
  overflow-y: auto;
17
17
  background-image: ${e=>e.hideDeviceContainerInPreview?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
18
- `,P=l=>{const{showVariableMapping:P,showOnlyContent:k,whatsappSpecificPickerMeta:y,showVariableModal:x,variableList:j,discountCode:V,setDiscountCode:M,variableListForImage:S,showSampleValues:W}=l,A=a(),E=a(),{variableCallback:T,showVariablePicker:D,setShowVariablePicker:I,device:L,display_content:B,channel:O,template:$,setTemplate:_,isWhatsappCarousel:F,isProductCarouselType:H,hideDeviceContainerInPreview:G}=c();const N=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(w,{children:[o(C,Object.assign({showOnlyContent:k,showVariableMapping:P,isWhatsappCarousel:F,hideDeviceContainerInPreview:G},{children:"mobile"===L?o(v,{ref:E,display_content:null!=B?B:"",channel:O,template:$,showSampleValues:W}):O===s.WHATSAPP&&F?o(r,{ref:A,channel:O,template:$,showSampleValues:W,isPreview:!1}):O!==s.MESSAGE?o(u,{ref:A,channel:O,display_content:null!=B?B:"",showSampleValues:W}):o(t,{})})),(H||P)&&e(g,Object.assign({channel:O,isWhatsappCarousel:F},{children:[o("div",Object.assign({style:{width:428,display:D?"block":"none"}},{children:o(p,{showHeader:!0,showBackButton:!0,onBackButtonClick:()=>I(!1),onSelect:e=>{T(e),I(!1)},onClose:()=>{I(!1)},type:i.EMBEDDED,data:null!=j?j:[]})})),o("div",Object.assign({style:{padding:"16px 14px",display:D?"none":"block"}},{children:O!==s.WHATSAPP?o(f,{onFocus:O===s.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),l=m(e+1),r=O===s.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),n=N(r),p=null==r?void 0:r.offsetLeft;"desktop"===L?n&&A.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=p?p:0,n),h(l,d.background.warning.light,2,O,L)):n&&E.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=p?p:0,n),h(l,d.background.warning.light,2,O,L))}:void 0,showVariableModal:x,variableList:j,discountCode:V,setDiscountCode:M}):O===s.WHATSAPP&&F?o(n,{whatsappSpecificPickerMeta:y,template:$,showVariableModal:x,variableList:j,variableListForImage:S,discountCode:V,setDiscountCode:M}):o(b,{whatsappSpecificPickerMeta:y,template:$,onTemplateChange:e=>{null==_||_(e)},showVariableModal:x,variableList:j,variableListForImage:S,discountCode:V,setDiscountCode:M})}))]}))]})};export{P as default};
18
+ `,P=l=>{const{showVariableMapping:P,showOnlyContent:k,whatsappSpecificPickerMeta:y,showVariableModal:x,variableList:j,discountCode:V,setDiscountCode:M,variableListForImage:S,showSampleValues:W}=l,A=a(),E=a(),{variableCallback:T,showVariablePicker:D,setShowVariablePicker:I,device:L,display_content:B,channel:H,template:O,setTemplate:$,isWhatsappCarousel:_,isProductCarouselType:F,hideDeviceContainerInPreview:G}=c();const N=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(w,{children:[o(C,Object.assign({showOnlyContent:k,showVariableMapping:P,isWhatsappCarousel:_,hideDeviceContainerInPreview:G},{children:"mobile"===L?o(v,{ref:E,display_content:null!=B?B:"",channel:H,template:O,showSampleValues:W}):H===s.WHATSAPP&&_?o(r,{ref:A,channel:H,template:O,showSampleValues:W,isPreview:!1}):H!==s.MESSAGE?o(u,{ref:A,channel:H,display_content:null!=B?B:"",showSampleValues:W}):o(t,{})})),(F||P)&&e(g,Object.assign({channel:H,isWhatsappCarousel:_},{children:[o("div",Object.assign({style:{width:428,display:D?"block":"none"}},{children:o(p,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>I(!1),onSelect:e=>{T(e),I(!1)},onClose:()=>{I(!1)},type:i.EMBEDDED,data:null!=j?j:[]})})),o("div",Object.assign({style:{padding:"16px 14px",display:D?"none":"block"}},{children:H!==s.WHATSAPP?o(f,{onFocus:H===s.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===L?"template_html_mobile":"template_html_desktop"),l=m(e+1),r=H===s.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),n=N(r),p=null==r?void 0:r.offsetLeft;"desktop"===L?n&&A.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=p?p:0,n),h(l,d.background.warning.light,2,H,L)):n&&E.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=p?p:0,n),h(l,d.background.warning.light,2,H,L))}:void 0,showVariableModal:x,variableList:j,discountCode:V,setDiscountCode:M}):H===s.WHATSAPP&&_?o(n,{whatsappSpecificPickerMeta:y,template:O,showVariableModal:x,variableList:j,variableListForImage:S,discountCode:V,setDiscountCode:M}):o(b,{whatsappSpecificPickerMeta:y,template:O,onTemplateChange:e=>{null==$||$(e)},showVariableModal:x,variableList:j,variableListForImage:S,discountCode:V,setDiscountCode:M})}))]}))]})};export{P as default};
@@ -1 +1 @@
1
- import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as s,Fragment as i}from"react/jsx-runtime";import o from"../../assets/icons/arrow_back.svg.js";import n from"../../assets/icons/plus.svg.js";import l from"../../assets/icons/triangle_error.svg.js";import{useState as a,useEffect as r}from"react";import{COLORS as c}from"../../constants/Theme.js";import{BikAccordion as d}from"../accordion/Accordion.js";import{IconButton as h}from"../icon-button/IconButton.js";import{Input as m}from"../input/Input.js";import{ListItem as p}from"../list-item/ListItem.js";import{Switch as g}from"../switch/Switch.js";import{Tooltip as u}from"../tooltips/Tooltip.js";import{TitleRegular as b,BodySecondary as f,BodyCaption as y,TitleSmall as v}from"../TypographyStyle.js";import{VariablePickerContext as j}from"./context.js";import x from"./NoResult.js";import{showOnlyRecommendedVariables as O}from"./recommendVaribles.js";import{searchVariables as w}from"./searchVariables.js";import{HeaderWrapper as k,RecommendWrapper as S,BackHeader as C,Container as N}from"./styles.js";import V from"./SubHeaderItems.js";const B=(e,i)=>{if(0===i.length)return e;const o=e.toLowerCase().indexOf(i.toLowerCase());if(-1===o)return e;const n=e.slice(0,o),l=e.slice(o,o+i.length),a=e.slice(o+i.length);return s("span",{children:[n,t("b",Object.assign({style:{color:c.content.primary}},{children:l})),a]})},I=/.*\..*/,T=e=>{if(e.actualValue.match(I)){const t=e.actualValue.replace("{{","").replace("}}","").split(".");let s=t[0];return t.forEach(((e,t)=>{if(0===t)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const t=e.match(/(\w+)\[(\d+)\]/);if(t){const e=t[1],i=t[2];s+=`['${e}'][${i}]`}}else s+=`['${e}']`})),s}return e.actualValueEval?e.actualValueEval:e.actualValue},L=I=>{const{data:L,onSelect:R,showHeader:H,showBackButton:$,onBackButtonClick:E,isEvaluationList:P}=I,[_,A]=a(L),[z,D]=a(""),[K,q]=a([]),[F,G]=a(""),[J,M]=a(!1),[Q,U]=a([]);r((()=>{W(!0)}),[]),r((()=>{K.length>0?U([K[K.length-1]]):U(L)}),[K]);const W=t=>e(void 0,void 0,void 0,(function*(){if(M(t),t){const e=O(_,K);A(e)}else if(K.length>0){const e=F==K[K.length-1].displayName;if(z.length>0&&e){const e=w(z,Q,K);A(e)}else A([K[K.length-1].variables])}else if(z.length>0){const e=w(z,Q,K);A(e)}else A(L)})),X=()=>{let e=123;return K.length>0&&(e+=32),(I.showHeader||I.showBackButton)&&(e+=40),`calc(100% - ${e}px)`};return t(j.Provider,Object.assign({value:{variables:_,searchText:z,subHeaderStack:K,showRecommended:J,setSubHeaderStack:q,setSearchText:D,setVariables:A,setShowRecommended:M}},{children:s("div",Object.assign({tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:4,height:"100%"},onClick:e=>e.stopPropagation()},{children:[(H||$)&&s(k,{children:[$&&t(h,{Icon:()=>t(o,{width:16,height:16,style:{display:"flex",color:c.content.primary}}),onClick:E}),H&&t(b,{children:"Select Variable"})]}),t("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:c.surface.subdued}},{children:t(m,{id:"search-bar-v3-picker",onBlur:e=>{I.onSearchBlur&&I.onSearchBlur(e)},value:z,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||G("");const t=w(e,Q,K);if(J){const e=O(t,K);A(e)}else A(t);D(e);const s=K.length>0?K[K.length-1].displayName:"home";G(s)}})})),s(S,{children:[t(f,Object.assign({style:{color:c.content.secondary}},{children:"Only Recommended"})),t(g,{value:J,onValueChange:t=>e(void 0,void 0,void 0,(function*(){yield W(t)}))})]}),K.length>0&&s(C,{children:[t("div",Object.assign({style:{position:"absolute",left:16}},{children:t(h,{id:"back-btn-v3",style:{display:"flex"},Icon:()=>t(o,{width:12,height:12,style:{color:c.content.secondary}}),onClick:e=>{e.stopPropagation();let t=z;const s=[...K],i=s.pop();if(q(s),i.displayName===F&&(D(""),t=""),t.length>0){const e=s.length>0?[s[s.length-1]]:L,i=w(t,e,s);if(J){const e=O(i,s);A(e)}else A(i)}else if(s.length>0)if(J){const e=O([s[s.length-1].variables],s);A(e)}else A([s[s.length-1].variables]);else if(J){const e=O(L,K);A(e)}else A(L)}})})),t(y,Object.assign({style:{color:c.content.secondary}},{children:K[K.length-1].displayName}))]}),t(i,{children:_.length>0?t(N,Object.assign({height:X()},{children:_.map(((e,i)=>e.displayName&&void 0!==e.variables?t("div",Object.assign({style:{borderBottom:`1px solid ${c.stroke.primary}`}},{children:t(d,Object.assign({headerPadding:"12px 16px",header:t(v,Object.assign({style:{color:c.content.secondary}},{children:B(e.displayName,z)}))},{children:t(V,{searchText:z,variable:e.variables,onSelect:R})}))}),i):e.displayName?t(p,{version:"2.0",leadingIcon:t(n,{width:14,height:14}),customListItemLabel:s("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[t(f,Object.assign({style:{fontSize:"14px",color:c.text.primary}},{children:B(e.displayName,z)})),!e.isAvailable&&t(u,Object.assign({body:"Not Recommended"},{children:t("div",Object.assign({style:{display:"flex"}},{children:t(l,{width:16,height:16,color:c.content.secondary})}))}))]})),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{if(P){const t=T(e);R(Object.assign(Object.assign({},e),{actualValue:t}))}else R(e)}},i):t(V,{searchText:z,variable:e,onSelect:e=>{if(P){const t=T(e);R(Object.assign(Object.assign({},e),{actualValue:t}))}else R(e)}},i)))})):t(x,{height:X(),searchText:z})})]}))}))};export{L as VariablePickerContent,B as highlightSearchText};
1
+ import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as s,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_back.svg.js";import l from"../../assets/icons/cross.svg.js";import n from"../../assets/icons/plus.svg.js";import a from"../../assets/icons/triangle_error.svg.js";import{useState as r,useEffect as c}from"react";import{COLORS as d}from"../../constants/Theme.js";import{BikAccordion as h}from"../accordion/Accordion.js";import{IconButton as m}from"../icon-button/IconButton.js";import{Input as p}from"../input/Input.js";import{ListItem as g}from"../list-item/ListItem.js";import{Switch as u}from"../switch/Switch.js";import{Tooltip as b}from"../tooltips/Tooltip.js";import{TitleRegular as f,BodySecondary as y,BodyCaption as v,TitleSmall as j}from"../TypographyStyle.js";import{VariablePickerContext as x}from"./context.js";import O from"./NoResult.js";import{showOnlyRecommendedVariables as w}from"./recommendVaribles.js";import{searchVariables as k}from"./searchVariables.js";import{HeaderWrapper as C,RecommendWrapper as S,BackHeader as I,Container as N}from"./styles.js";import V from"./SubHeaderItems.js";const B=(e,o)=>{if(0===o.length)return e;const i=e.toLowerCase().indexOf(o.toLowerCase());if(-1===i)return e;const l=e.slice(0,i),n=e.slice(i,i+o.length),a=e.slice(i+o.length);return s("span",{children:[l,t("b",Object.assign({style:{color:d.content.primary}},{children:n})),a]})},T=/.*\..*/,H=e=>{if(e.actualValue.match(T)){const t=e.actualValue.replace("{{","").replace("}}","").split(".");let s=t[0];return t.forEach(((e,t)=>{if(0===t)return;const o=(e=>/\w+\[\d+\]/g.test(e))(e);if(o){const t=e.match(/(\w+)\[(\d+)\]/);if(t){const e=t[1],o=t[2];s+=`['${e}'][${o}]`}}else s+=`['${e}']`})),s}return e.actualValueEval?e.actualValueEval:e.actualValue},L=T=>{const{data:L,onSelect:R,showHeader:$,showBackButton:E,hideHeaderCross:P,onBackButtonClick:_,isEvaluationList:A}=T,[z,D]=r(L),[K,q]=r(""),[F,G]=r([]),[J,M]=r(""),[Q,U]=r(!1),[W,X]=r([]);c((()=>{Y(!0)}),[]),c((()=>{F.length>0?X([F[F.length-1]]):X(L)}),[F]);const Y=t=>e(void 0,void 0,void 0,(function*(){if(U(t),t){const e=w(z,F);D(e)}else if(F.length>0){const e=J==F[F.length-1].displayName;if(K.length>0&&e){const e=k(K,W,F);D(e)}else D([F[F.length-1].variables])}else if(K.length>0){const e=k(K,W,F);D(e)}else D(L)})),Z=()=>{let e=123;return F.length>0&&(e+=32),(T.showHeader||T.showBackButton)&&(e+=40),`calc(100% - ${e}px)`};return t(x.Provider,Object.assign({value:{variables:z,searchText:K,subHeaderStack:F,showRecommended:Q,setSubHeaderStack:G,setSearchText:q,setVariables:D,setShowRecommended:U}},{children:s("div",Object.assign({tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:4,height:"100%"},onClick:e=>e.stopPropagation()},{children:[($||E)&&s(C,{children:[s("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[E&&t(m,{Icon:()=>t(i,{width:16,height:16,style:{display:"flex",color:d.content.primary}}),onClick:_}),$&&t(f,{children:"Select Variable"})]})),!P&&t(m,{style:{color:"#212121"},Icon:l,onClick:()=>T.onClose&&T.onClose()})]}),t("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:d.surface.subdued}},{children:t(p,{id:"search-bar-v3-picker",onBlur:e=>{T.onSearchBlur&&T.onSearchBlur(e)},value:K,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||M("");const t=k(e,W,F);if(Q){const e=w(t,F);D(e)}else D(t);q(e);const s=F.length>0?F[F.length-1].displayName:"home";M(s)}})})),s(S,{children:[t(y,Object.assign({style:{color:d.content.secondary}},{children:"Only Recommended"})),t(u,{value:Q,onValueChange:t=>e(void 0,void 0,void 0,(function*(){yield Y(t)}))})]}),F.length>0&&s(I,{children:[t("div",Object.assign({style:{position:"absolute",left:16}},{children:t(m,{id:"back-btn-v3",style:{display:"flex"},Icon:()=>t(i,{width:12,height:12,style:{color:d.content.secondary}}),onClick:e=>{e.stopPropagation();let t=K;const s=[...F],o=s.pop();if(G(s),o.displayName===J&&(q(""),t=""),t.length>0){const e=s.length>0?[s[s.length-1]]:L,o=k(t,e,s);if(Q){const e=w(o,s);D(e)}else D(o)}else if(s.length>0)if(Q){const e=w([s[s.length-1].variables],s);D(e)}else D([s[s.length-1].variables]);else if(Q){const e=w(L,F);D(e)}else D(L)}})})),t(v,Object.assign({style:{color:d.content.secondary}},{children:F[F.length-1].displayName}))]}),t(o,{children:z.length>0?t(N,Object.assign({height:Z()},{children:z.map(((e,o)=>e.displayName&&void 0!==e.variables?t("div",Object.assign({style:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:t(h,Object.assign({headerPadding:"12px 16px",header:t(j,Object.assign({style:{color:d.content.secondary}},{children:B(e.displayName,K)}))},{children:t(V,{searchText:K,variable:e.variables,onSelect:R})}))}),o):e.displayName?t(g,{version:"2.0",leadingIcon:t(n,{width:14,height:14}),customListItemLabel:s("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[t(y,Object.assign({style:{fontSize:"14px",color:d.text.primary}},{children:B(e.displayName,K)})),!e.isAvailable&&t(b,Object.assign({body:"Not Recommended"},{children:t("div",Object.assign({style:{display:"flex"}},{children:t(a,{width:16,height:16,color:d.content.secondary})}))}))]})),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{if(A){const t=H(e);R(Object.assign(Object.assign({},e),{actualValue:t}))}else R(e)}},o):t(V,{searchText:K,variable:e,onSelect:e=>{if(A){const t=H(e);R(Object.assign(Object.assign({},e),{actualValue:t}))}else R(e)}},o)))})):t(O,{height:Z(),searchText:K})})]}))}))};export{L as VariablePickerContent,B as highlightSearchText};
@@ -13,6 +13,7 @@ export interface VariablePickerV3Props {
13
13
  onBackButtonClick?: () => void;
14
14
  onSearchBlur?: (e: any) => void;
15
15
  isEvaluationList?: boolean;
16
+ hideHeaderCross?: boolean;
16
17
  }
17
18
  export interface VariableListInterfaceV3 {
18
19
  isSubHeader?: boolean;
@@ -1,24 +1,24 @@
1
- import e from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const t=e.div`
1
+ import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const o=e.div`
2
2
  display: flex;
3
3
  align-items: center;
4
- gap: 8px;
5
4
  padding: 12px 16px 0px 16px;
6
- background-color: ${o.surface.subdued};
5
+ background-color: ${t.surface.subdued};
6
+ justify-content: space-between;
7
7
  `,r=e.div`
8
8
  display: flex;
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
11
  padding: 12px 16px;
12
- background-color: ${o.surface.subdued};
13
- border-bottom: 1px solid ${o.stroke.primary};
12
+ background-color: ${t.surface.subdued};
13
+ border-bottom: 1px solid ${t.stroke.primary};
14
14
  `,i=e.div`
15
15
  position: relative;
16
16
  display: flex;
17
17
  align-items: center;
18
18
  justify-content: center;
19
19
  height: 32px;
20
- background-color: ${o.background.base};
21
- `,a=e.div`
20
+ background-color: ${t.background.base};
21
+ `,n=e.div`
22
22
  margin: 8px;
23
23
  height: ${e=>e.height};
24
24
  overflow: scroll;
@@ -34,4 +34,4 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
34
34
  &::-webkit-scrollbar-thumb:horizontal {
35
35
  width: 8px;
36
36
  }
37
- `;export{i as BackHeader,a as Container,t as HeaderWrapper,r as RecommendWrapper};
37
+ `;export{i as BackHeader,n as Container,o as HeaderWrapper,r as RecommendWrapper};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.515-beta.1",
3
+ "version": "0.0.515-beta.2",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",