@bikdotai/bik-component-library 0.0.359-beta.21 → 0.0.359-beta.22

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts

@@ -1,14 +1,18 @@
+/// <reference types="react" />
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
-export declare const InputWithVariables: (props: {
+interface InputWithVariablesProps {
     variablesList: any;
     onChange: (val: SelectedVariable | Variable) => void;
-    onBlur?: ((e: Event, val?: SelectedVariable | Variable) => void) | undefined;
+    onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
     addVarBoxRight: string;
     allowMix: boolean;
     prevVariable: SelectedVariable;
-    showHelp?: boolean | undefined;
-    onlyVariables?: boolean | undefined;
-    showSideVariablePanel?: boolean | undefined;
-    placeHolder?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+    showHelp?: boolean;
+    onlyVariables?: boolean;
+    showSideVariablePanel?: boolean;
+    placeHolder?: string;
+    showAddButton?: boolean;
+}
+export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
+export {};

package/dist/cjs/components/input-with-vars/InputWithVariables.js

@@ -3,4 +3,4 @@
 	input {
 		color: ${e=>e.isVar?t.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=r=>{const t=l.useRef(null),[c,b]=l.useState(!1),[V]=l.useState(i.v4()),[h,p]=l.useState(),[g,j]=l.useState(r.prevVariable),[x,T]=l.useState(!1),[y,f]=l.useState(!1);return l.useEffect((()=>{h&&h.actualValue&&(r.allowMix?j((e=>({actualValue:e.actualValue+h.actualValue,variableType:"string"}))):j((e=>({actualValue:h.actualValue,variableType:h.variableType,needsFetching:h.needsFetching}))))}),[h]),l.useEffect((()=>{r.onChange(g)}),[g]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(g.actualValue)},{children:[e.jsx(o.Input,{id:V,ref:t,skipFocus:!0,textControl:!0,isActive:c,value:g.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:r.placeHolder||"Add a value",onChangeText:function(e,a){if(r.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else r.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;b(!0),f(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||T(!0)},onBlur:e=>{var a,l,i,d,s,u,o,n;null===(a=r.onBlur)||void 0===a||a.call(r,e,g),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"varList"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)||(null===(s=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===s?void 0:s.includes("exlualr0"))||(null===(o=null===(u=e.relatedTarget)||void 0===u?void 0:u.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(t.current&&t.current.focus(),b(!0)):"Search..."===(null===(n=e.relatedTarget)||void 0===n?void 0:n.placeholder)?b(!0):(b(!1),T(!1),f(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[g.actualValue&&r.showHelp?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${g.variableType}`})})):e.jsx("div",{}),y&&e.jsx(u.AddVariableStyled,Object.assign({right:r.addVarBoxRight,id:"addVar",onClick:()=>{T(!x)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!r.showSideVariablePanel&&x&&e.jsx(s.AddVariableV2,{data:r.variablesList,showVariable:!0,setShowVariable:()=>{T(!1)},variableValue:h,setVariableValue:p,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,s;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?t.current.focus():"Enter here"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?e.relatedTarget.id!==V&&(T(!1),f(!1),b(!1)):(T(!1),f(!1),b(!1))}})]})),r.showSideVariablePanel&&x&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:r.variablesList,showVariable:x,setShowVariable:T,placeholder:"Add a variable",customTrigger:e=>{j(e)}})]})};
+`;exports.InputWithVariables=r=>{let{addVarBoxRight:t,allowMix:c,onChange:b,prevVariable:V,variablesList:h,onBlur:p,onlyVariables:g,placeHolder:j,showAddButton:x=!0,showHelp:T,showSideVariablePanel:y}=r;const f=l.useRef(null),[S,m]=l.useState(!1),[q]=l.useState(i.v4()),[w,A]=l.useState(),[C,O]=l.useState(V),[B,k]=l.useState(!1),[I,N]=l.useState(!1);return l.useEffect((()=>{w&&w.actualValue&&O(c?e=>({actualValue:e.actualValue+w.actualValue,variableType:"string"}):e=>({actualValue:w.actualValue,variableType:w.variableType,needsFetching:w.needsFetching}))}),[w]),l.useEffect((()=>{b(C)}),[C]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(C.actualValue)},{children:[e.jsx(o.Input,{id:q,ref:f,skipFocus:!0,textControl:!0,isActive:S,value:C.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:j||"Add a value",onChangeText:function(e,a){if(g){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||O({actualValue:"",variableType:"string"})}else O(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;m(!0),N(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||B||k(!0)},onBlur:e=>{var a,l,r,i,t,d,s;null==p||p(e,C),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(f.current&&f.current.focus(),m(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?m(!0):(m(!1),k(!1),N(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[C.actualValue&&T?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${C.variableType}`})})):e.jsx("div",{}),x&&I&&e.jsx(u.AddVariableStyled,Object.assign({right:t,id:"addVar",onClick:()=>{k(!B)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!y&&B&&e.jsx(s.AddVariableV2,{data:h,showVariable:!0,setShowVariable:()=>{k(!1)},variableValue:w,setVariableValue:A,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?f.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==q&&(k(!1),N(!1),m(!1)):(k(!1),N(!1),m(!1))}})]})),y&&B&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:h,showVariable:B,setShowVariable:k,placeholder:"Add a variable",customTrigger:e=>{O(e)}})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("react"),a=require("../../helpers/FileUploaderHelper.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js");var l=require("../../modals/styledModal.js");require("../../spinner/Spinner.js");var n=require("../../input-with-vars/InputWithVariables.js"),o=require("../../template-preview/models/TemplateMeta.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(t);exports.default=d=>{let{mediaComponent:c,template:p,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableList:m}=d;var h,g;const[j,E]=t.useState(void 0),[b,x]=t.useState(),[y,_]=t.useState(!1),S=u.default.createRef(),[C,q]=t.useState(!1),[w,I]=t.useState("");let M;function A(i){return e.__awaiter(this,void 0,void 0,(function*(){if(i){if(i.startsWith("https")){q(!0),I("");const e=yield fetch(i),t=yield e.blob();yield T(t)}}else R()}))}function R(){var e;(null===(e=null==S?void 0:S.current)||void 0===e?void 0:e.click)&&S.current.click()}function T(i){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(i instanceof Blob){const a=e.validate(i);if(a)I(a),_(!1),q(!1);else{const e=c.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:i,fileName:j,isImage:e});if(a.success){const[e]=i.type.split("/");v(null!==(t=a.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else I("An unknown technical error occured");q(!1),_(!1)}}else I("An unknown technical error occured"),_(!1),q(!1)}))}return M=c.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":c.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",i.jsxs(i.Fragment,{children:[i.jsx(l.StyledModal,Object.assign({open:y,zIndex:2e3,onClose:()=>_(!1),width:"480px"},{children:i.jsxs("div",Object.assign({style:{padding:16}},{children:[i.jsx(n.InputWithVariables,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:m,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,i)=>{i&&A(i.actualValue)}}),i.jsx("button",Object.assign({onClick:()=>A()},{children:"upload media"}))]}))})),!!b&&i.jsx(r.BikImageCropper,{aspectRatio:15/8,src:b,onCropComplete:function(i){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),I("");const e=yield fetch(i);T(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),i.jsx("input",{ref:S,style:{display:"none"},type:"file",onChange:function(e){var i;I(""),q(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(c.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;x(""),E(""),e.onload=()=>{x(e.result),E(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else T(t)},accept:M}),i.jsx(s.default,{imageName:null!==(g=null===(h=null==c?void 0:c.example)||void 0===h?void 0:h.header_handle)&&void 0!==g?g:[],handleImageChange:R,mediaType:null==c?void 0:c.format,error:w,isLoading:C,setOpenEditMedia:_})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("react"),i=require("../../helpers/FileUploaderHelper.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js");var l=require("../../modals/styledModal.js");require("../../spinner/Spinner.js");var n=require("../../input-with-vars/InputWithVariables.js"),o=require("../../template-preview/models/TemplateMeta.js"),s=require("../context/templateModalContext.js"),d=require("./EditMediaV2.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(a);exports.default=u=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:v,variableList:g}=u;var h,j;const[E,b]=a.useState(void 0),[x,y]=a.useState(),[_,w]=a.useState(!1),C=c.default.createRef(),[S,M]=a.useState(!1),[A,I]=a.useState(""),{template:T,setTemplate:q}=s.useTemplateModalContext();let R;function O(t){return e.__awaiter(this,void 0,void 0,(function*(){if(M(!0),I(""),t)if(t.startsWith("https")){const e=yield fetch(t),a=yield e.blob();yield H(a)}else{if(!/^{{.*}}$/.test(t))throw new Error("Invalid url or variable");{const e=yield fetch("https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"),a=yield e.blob();yield H(a);const i=Object.assign({},T);i.mapping&&(i.mapping=Object.assign(Object.assign({},i.mapping),{header:[t]}),null==q||q(Object.assign({},i)))}}else D()}))}function D(){var e;(null===(e=null==C?void 0:C.current)||void 0===e?void 0:e.click)&&C.current.click()}function H(t){var a;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(t instanceof Blob){const i=e.validate(t);if(i)I(i),w(!1),M(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,i=yield v.uploadMediaFiles({file:t,fileName:E,isImage:e});if(i.success){const[e]=t.type.split("/");f(null!==(a=i.url)&&void 0!==a?a:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else I("An unknown technical error occured");M(!1),w(!1)}}else I("An unknown technical error occured"),w(!1),M(!1)}))}return console.log("currentTemplate",T),R=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(l.StyledModal,Object.assign({open:_,zIndex:2e3,onClose:()=>w(!1),width:"480px"},{children:t.jsxs("div",Object.assign({style:{padding:16}},{children:[t.jsx(n.InputWithVariables,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:g,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&(console.log(t),O(t.actualValue))},showAddButton:p.format===o.HEADER_TYPES.IMAGE}),t.jsx("button",Object.assign({onClick:()=>O()},{children:"upload media"}))]}))})),!!x&&t.jsx(r.BikImageCropper,{aspectRatio:15/8,src:x,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){M(!1),I("");const e=yield fetch(t);H(yield e.blob()).then((()=>{y(void 0)}))}))},onCancel:()=>{M(!1),y("")}}),t.jsx("input",{ref:C,style:{display:"none"},type:"file",onChange:function(e){var t;I(""),M(!0);const a=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;y(""),b(""),e.onload=()=>{y(e.result),b(null==a?void 0:a.name)},a&&e.readAsDataURL(a)}else H(a)},accept:R}),t.jsx(d.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)||void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:D,mediaType:null==p?void 0:p.format,error:A,isLoading:S,setOpenEditMedia:w})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var c,b;const{originalVariableList:x}=t.useTemplateModalContext();return console.log("originalVariableList",x),"BODY"===n.type?e.jsx("div",{children:null===(c=null==x?void 0:x.body)||void 0===c?void 0:c.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):"HEADER"===n.type?e.jsx("div",{children:null===(b=null==x?void 0:x.header)||void 0===b?void 0:b.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var c,x;const{originalVariableList:b}=t.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(c=null==b?void 0:b.body)||void 0===c?void 0:c.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):"HEADER"===n.type?e.jsx("div",{children:null===(x=null==b?void 0:b.header)||void 0===x?void 0:x.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):e.jsx(e.Fragment,{})};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/input-with-vars/InputWithVariables.d.ts

@@ -1,14 +1,18 @@
+/// <reference types="react" />
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
-export declare const InputWithVariables: (props: {
+interface InputWithVariablesProps {
     variablesList: any;
     onChange: (val: SelectedVariable | Variable) => void;
-    onBlur?: ((e: Event, val?: SelectedVariable | Variable) => void) | undefined;
+    onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
     addVarBoxRight: string;
     allowMix: boolean;
     prevVariable: SelectedVariable;
-    showHelp?: boolean | undefined;
-    onlyVariables?: boolean | undefined;
-    showSideVariablePanel?: boolean | undefined;
-    placeHolder?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+    showHelp?: boolean;
+    onlyVariables?: boolean;
+    showSideVariablePanel?: boolean;
+    placeHolder?: string;
+    showAddButton?: boolean;
+}
+export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
+export {};

package/dist/esm/components/input-with-vars/InputWithVariables.js

@@ -1,4 +1,4 @@
-import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as o}from"react";import t from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as b}from"../TypographyStyle.js";const h=t=>{const n=i(null),[h,m]=d(!1),[g]=d(s()),[T,f]=d(),[y,j]=d(t.prevVariable),[x,w]=d(!1),[S,A]=d(!1);return o((()=>{T&&T.actualValue&&(t.allowMix?j((e=>({actualValue:e.actualValue+T.actualValue,variableType:"string"}))):j((e=>({actualValue:T.actualValue,variableType:T.variableType,needsFetching:T.needsFetching}))))}),[T]),o((()=>{t.onChange(y)}),[y]),e(a,{children:[e(V,Object.assign({isVar:/^{{.*}}$/.test(y.actualValue)},{children:[l(p,{id:g,ref:n,skipFocus:!0,textControl:!0,isActive:h,value:y.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:t.placeHolder||"Add a value",onChangeText:function(e,a){if(t.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else t.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;m(!0),A(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||w(!0)},onBlur:e=>{var a,l,r,i,d,o,s,c;null===(a=t.onBlur)||void 0===a||a.call(t,e,y),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"varList"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("exlualr0"))||(null===(s=null===(o=e.relatedTarget)||void 0===o?void 0:o.className)||void 0===s?void 0:s.includes("sc-dZoequ "))?(n.current&&n.current.focus(),m(!0)):"Search..."===(null===(c=e.relatedTarget)||void 0===c?void 0:c.placeholder)?m(!0):(m(!1),w(!1),A(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[y.actualValue&&t.showHelp?l("div",Object.assign({style:{marginTop:4}},{children:l(b,{children:`This value is of type ${y.variableType}`})})):l("div",{}),S&&l(v,Object.assign({right:t.addVarBoxRight,id:"addVar",onClick:()=>{w(!x)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!t.showSideVariablePanel&&x&&l(u,{data:t.variablesList,showVariable:!0,setShowVariable:()=>{w(!1)},variableValue:T,setVariableValue:f,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?n.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==g&&(w(!1),A(!1),m(!1)):(w(!1),A(!1),m(!1))}})]})),t.showSideVariablePanel&&x&&l(c,{zIndex:2e3,data:t.variablesList,showVariable:x,setShowVariable:w,placeholder:"Add a variable",customTrigger:e=>{j(e)}})]})},V=t.div`
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as t}from"react";import o from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as b}from"../TypographyStyle.js";const h=o=>{let{addVarBoxRight:n,allowMix:h,onChange:m,prevVariable:g,variablesList:T,onBlur:f,onlyVariables:y,placeHolder:j,showAddButton:x=!0,showHelp:w,showSideVariablePanel:S}=o;const A=i(null),[C,k]=d(!1),[B]=d(s()),[N,O]=d(),[F,I]=d(g),[L,M]=d(!1),[$,q]=d(!1);return t((()=>{N&&N.actualValue&&I(h?e=>({actualValue:e.actualValue+N.actualValue,variableType:"string"}):e=>({actualValue:N.actualValue,variableType:N.variableType,needsFetching:N.needsFetching}))}),[N]),t((()=>{m(F)}),[F]),e(a,{children:[e(V,Object.assign({isVar:/^{{.*}}$/.test(F.actualValue)},{children:[l(p,{id:B,ref:A,skipFocus:!0,textControl:!0,isActive:C,value:F.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:j||"Add a value",onChangeText:function(e,a){if(y){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||I({actualValue:"",variableType:"string"})}else I(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;k(!0),q(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||L||M(!0)},onBlur:e=>{var a,l,r,i,d,t,o;null==f||f(e,F),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(A.current&&A.current.focus(),k(!0)):"Search..."===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?k(!0):(k(!1),M(!1),q(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[F.actualValue&&w?l("div",Object.assign({style:{marginTop:4}},{children:l(b,{children:`This value is of type ${F.variableType}`})})):l("div",{}),x&&$&&l(v,Object.assign({right:n,id:"addVar",onClick:()=>{M(!L)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!S&&L&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{M(!1)},variableValue:N,setVariableValue:O,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?A.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==B&&(M(!1),q(!1),k(!1)):(M(!1),q(!1),k(!1))}})]})),S&&L&&l(c,{zIndex:2e3,data:T,showVariable:L,setShowVariable:M,placeholder:"Add a variable",customTrigger:e=>{I(e)}})]})},V=o.div`
 	margin-bottom: 32px;
 	input {
 		color: ${e=>e.isVar?n.stroke.brand:"black"};

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as i,Fragment as t,jsx as o}from"react/jsx-runtime";import a,{useState as n}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import{StyledModal as s}from"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{InputWithVariables as d}from"../../input-with-vars/InputWithVariables.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import c from"./EditMediaV2.js";const m=m=>{let{mediaComponent:u,template:f,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:h,variableList:g}=m;var b,j;const[y,C]=n(void 0),[I,M]=n(),[w,x]=n(!1),E=a.createRef(),[V,k]=n(!1),[A,O]=n("");let R;function T(i){return e(this,void 0,void 0,(function*(){if(i){if(i.startsWith("https")){k(!0),O("");const e=yield fetch(i),t=yield e.blob();yield B(t)}}else U()}))}function U(){var e;(null===(e=null==E?void 0:E.current)||void 0===e?void 0:e.click)&&E.current.click()}function B(i){var t;return e(this,void 0,void 0,(function*(){const e=new r;if(i instanceof Blob){const o=e.validate(i);if(o)O(o),x(!1),k(!1);else{const e=u.format===p.IMAGE,o=yield h.uploadMediaFiles({file:i,fileName:y,isImage:e});if(o.success){const[e]=i.type.split("/");v(null!==(t=o.url)&&void 0!==t?t:"","application"===e?p.DOCUMENT:p[e.toUpperCase()])}else O("An unknown technical error occured");k(!1),x(!1)}}else O("An unknown technical error occured"),x(!1),k(!1)}))}return R=u.format===p.IMAGE?"image/png, image/jpeg":u.format===p.VIDEO?"video/mp4":"application/pdf",i(t,{children:[o(s,Object.assign({open:w,zIndex:2e3,onClose:()=>x(!1),width:"480px"},{children:i("div",Object.assign({style:{padding:16}},{children:[o(d,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:g,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,i)=>{i&&T(i.actualValue)}}),o("button",Object.assign({onClick:()=>T()},{children:"upload media"}))]}))})),!!I&&o(l,{aspectRatio:15/8,src:I,onCropComplete:function(i){return e(this,void 0,void 0,(function*(){k(!1),O("");const e=yield fetch(i);B(yield e.blob()).then((()=>{M(void 0)}))}))},onCancel:()=>{k(!1),M("")}}),o("input",{ref:E,style:{display:"none"},type:"file",onChange:function(e){var i;O(""),k(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(u.format===p.IMAGE){const e=new FileReader;M(""),C(""),e.onload=()=>{M(e.result),C(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else B(t)},accept:R}),o(c,{imageName:null!==(j=null===(b=null==u?void 0:u.example)||void 0===b?void 0:b.header_handle)&&void 0!==j?j:[],handleImageChange:U,mediaType:null==u?void 0:u.format,error:A,isLoading:V,setOpenEditMedia:x})]})};export{m as default};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import a,{useState as n}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as r}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import{StyledModal as s}from"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import m from"./EditMediaV2.js";const u=u=>{let{mediaComponent:f,template:v,updateTemplateImageUrl:g,whatsappSpecificPickerMeta:h,variableList:b}=u;var j,y;const[C,w]=n(void 0),[I,M]=n(),[x,E]=n(!1),O=a.createRef(),[V,k]=n(!1),[A,T]=n(""),{template:B,setTemplate:R}=c();let U;function G(t){return e(this,void 0,void 0,(function*(){if(k(!0),T(""),t)if(t.startsWith("https")){const e=yield fetch(t),i=yield e.blob();yield S(i)}else{if(!/^{{.*}}$/.test(t))throw new Error("Invalid url or variable");{const e=yield fetch("https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"),i=yield e.blob();yield S(i);const o=Object.assign({},B);o.mapping&&(o.mapping=Object.assign(Object.assign({},o.mapping),{header:[t]}),null==R||R(Object.assign({},o)))}}else L()}))}function L(){var e;(null===(e=null==O?void 0:O.current)||void 0===e?void 0:e.click)&&O.current.click()}function S(t){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(t instanceof Blob){const o=e.validate(t);if(o)T(o),E(!1),k(!1);else{const e=f.format===d.IMAGE,o=yield h.uploadMediaFiles({file:t,fileName:C,isImage:e});if(o.success){const[e]=t.type.split("/");g(null!==(i=o.url)&&void 0!==i?i:"","application"===e?d.DOCUMENT:d[e.toUpperCase()])}else T("An unknown technical error occured");k(!1),E(!1)}}else T("An unknown technical error occured"),E(!1),k(!1)}))}return console.log("currentTemplate",B),U=f.format===d.IMAGE?"image/png, image/jpeg":f.format===d.VIDEO?"video/mp4":"application/pdf",t(i,{children:[o(s,Object.assign({open:x,zIndex:2e3,onClose:()=>E(!1),width:"480px"},{children:t("div",Object.assign({style:{padding:16}},{children:[o(p,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:b,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&(console.log(t),G(t.actualValue))},showAddButton:f.format===d.IMAGE}),o("button",Object.assign({onClick:()=>G()},{children:"upload media"}))]}))})),!!I&&o(r,{aspectRatio:15/8,src:I,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){k(!1),T("");const e=yield fetch(t);S(yield e.blob()).then((()=>{M(void 0)}))}))},onCancel:()=>{k(!1),M("")}}),o("input",{ref:O,style:{display:"none"},type:"file",onChange:function(e){var t;T(""),k(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(f.format===d.IMAGE){const e=new FileReader;M(""),w(""),e.onload=()=>{M(e.result),w(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else S(i)},accept:U}),o(m,{imageName:null!==(y=null===(j=null==f?void 0:f.example)||void 0===j?void 0:j.header_handle)&&void 0!==y?y:[],handleImageChange:L,mediaType:null==f?void 0:f.format,error:A,isLoading:V,setOpenEditMedia:E})]})};export{u as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:c,variableList:b}=d;var m,v;const{originalVariableList:y}=l();return console.log("originalVariableList",y),"BODY"===s.type?e("div",{children:null===(m=null==y?void 0:y.body)||void 0===m?void 0:m.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:b,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(o,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:b,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(o,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):e(i,{})};export{d as default};
+import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:c,variableList:m}=d;var b,v;const{originalVariableList:y}=l();return"BODY"===s.type?e("div",{children:null===(b=null==y?void 0:y.body)||void 0===b?void 0:b.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:m,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:m,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):e(i,{})};export{d as default};

package/package.json

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