@bikdotai/bik-component-library 0.0.530-beta0.rt16 → 0.0.530-beta0.rt17

package/dist/cjs/components/template-preview/SMS/SMSBubble.d.ts

@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
 export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type SMSBubbleProps = {
-    content: ReactNode;
+    content: string;
     size?: 'small' | 'large';
 };
 declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/SMS/SMSBubble.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/union.svg.js"),r=require("react"),o=require("react-dom/server"),i=require("styled-components"),n=require("../../../constants/Theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(r),d=s(i);const u=d.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/union.svg.js"),r=require("styled-components"),s=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(r);const i=n.default.div`
 	position: absolute;
 	width: 30px;
 	height: 30px;
 	left: -10px;
 	bottom: -1px;
-`,l=d.default.div`
+`,a=n.default.div`
 	padding: 12px;
-	background: ${n.COLORS.background.base};
+	background: ${s.COLORS.background.base};
 	border-radius: 16px;
 	position: relative;
-`;exports.SMSContainer=l,exports.SideCaret=u,exports.default=r=>{const{content:i,size:s}=r;let d="";return"string"==typeof i||"number"==typeof i||"boolean"==typeof i?d=String(i):a.default.isValidElement(i)?d=o.renderToString(i):Array.isArray(i)&&(d=i.join("")),e.jsxs(l,{children:[e.jsx(u,{children:e.jsx(t.default,{color:n.COLORS.background.base,height:27,width:27})}),e.jsx("div",{style:{fontSize:"small"===s?12:14},dangerouslySetInnerHTML:{__html:d}})]})};
+`;exports.SMSContainer=a,exports.SideCaret=i,exports.default=r=>{const{content:o,size:n}=r;return e.jsxs(a,{children:[e.jsx(i,{children:e.jsx(t.default,{color:s.COLORS.background.base,height:27,width:27})}),e.jsx("div",{style:{fontSize:"small"===n?12:14},dangerouslySetInnerHTML:{__html:o}})]})};

package/dist/cjs/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),l=require("../../assets/icons/more_vertical.svg.js"),n=require("../../assets/icons/search.svg.js"),r=require("../../constants/Theme.js"),s=require("../template-context-mapper/context/templateModalContext.js"),i=require("../TypographyStyle.js"),a=require("./RenderVariableUIForPreview.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=u=>{let{template:c,variableStore:j,hideHeader:x,display_content:h,onlyTemplateContent:v,size:g,uniqueId:p}=u;var S,m,b;const y=null==c?void 0:c.content,{hideDeviceContainerInPreview:f,originalVariableList:q}=s.useTemplateModalContext();return console.log("templateContent in smsTemplatePreview",q),f?e.jsx(d.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(o.default,{size:null!=g?g:"large",content:null!==(S=null!=h?h:a.default({content:y,variablStore:null!=j?j:[],uniqueId:null!=p?p:""}))&&void 0!==S?S:e.jsx(e.Fragment,{})})})):e.jsxs(e.Fragment,{children:[!x&&!v&&e.jsx(d.SMSCardHeader,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!v&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:r.COLORS.content.secondary}),e.jsx(i.Caption,{children:null===(m=null==c?void 0:c.headers)||void 0===m?void 0:m[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(n.default,{width:16,height:16,color:r.COLORS.content.secondary}),e.jsx(l.default,{width:16,height:16,color:r.COLORS.content.secondary})]}))]})}),e.jsx(d.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(o.default,{size:null!=g?g:"large",content:null!==(b=null!=h?h:a.default({content:y,variablStore:null!=j?j:[],uniqueId:null!=p?p:""}))&&void 0!==b?b:""})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_left.svg.js"),t=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),l=require("../../constants/Theme.js"),n=require("../template-context-mapper/context/templateModalContext.js"),i=require("../TypographyStyle.js"),a=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=c=>{let{template:u,variableStore:j,hideHeader:h,display_content:x,onlyTemplateContent:p,size:v,uniqueId:g}=c;var S;const m=null==u?void 0:u.content,{hideDeviceContainerInPreview:b}=n.useTemplateModalContext();return b?e.jsx(d.SMSBubbleContainer,Object.assign({size:v},{children:e.jsx(o.default,{size:null!=v?v:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=j?j:[],void 0,null!=g?g:"")})})):e.jsxs(e.Fragment,{children:[!h&&!p&&e.jsx(d.SMSCardHeader,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:u.name}))}),!p&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(r.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(i.Caption,{children:null===(S=null==u?void 0:u.headers)||void 0===S?void 0:S[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(t.default,{width:16,height:16,color:l.COLORS.content.secondary})]}))]})}),e.jsx(d.SMSBubbleContainer,Object.assign({size:v},{children:e.jsx(o.default,{size:null!=v?v:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=j?j:[],"",null!=g?g:"")})}))]})};

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.d.ts

@@ -1,2 +1,2 @@
 import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;
+export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(r,a){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand;const l=(null==a?void 0:a.length)?null==a?void 0:a.map((e=>e.updatedValue)):r.match(n.variablePatternGlobal);return n.variablePatternGlobal.lastIndex=0,r.split(n.variablePattern).map(((e,n)=>{var r;return(null==l?void 0:l[n])?`${e}<span></span><span id="connectors_variable_${n+1}" style="color: ${t}; text-decoration: underline; word-break: break-word;">${null!==(r=null==l?void 0:l[n])&&void 0!==r?r:""}</span><span> </span>`:e})).join("")};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(r,a){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand,l=arguments.length>3?arguments[3]:void 0;const o=(null==a?void 0:a.length)?null==a?void 0:a.map((e=>e.updatedValue)):r.match(n.variablePatternGlobal);return n.variablePatternGlobal.lastIndex=0,r.split(n.variablePattern).map(((e,n)=>{var r;return(null==o?void 0:o[n])?`${e}<span></span><span id="${l||""}connectors_variable_${n+1}" style="color: ${t}; text-decoration: underline; word-break: break-word;">${null!==(r=null==o?void 0:o[n])&&void 0!==r?r:""}</span><span> </span>`:e})).join("")};

package/dist/esm/components/template-preview/SMS/SMSBubble.d.ts

@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
 export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type SMSBubbleProps = {
-    content: ReactNode;
+    content: string;
     size?: 'small' | 'large';
 };
 declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-preview/SMS/SMSBubble.js

@@ -1,12 +1,12 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/union.svg.js";import r from"react";import{renderToString as i}from"react-dom/server";import n from"styled-components";import{COLORS as s}from"../../../constants/Theme.js";const a=n.div`
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/union.svg.js";import i from"styled-components";import{COLORS as n}from"../../../constants/Theme.js";const r=i.div`
 	position: absolute;
 	width: 30px;
 	height: 30px;
 	left: -10px;
 	bottom: -1px;
-`,m=n.div`
+`,s=i.div`
 	padding: 12px;
-	background: ${s.background.base};
+	background: ${n.background.base};
 	border-radius: 16px;
 	position: relative;
-`,p=n=>{const{content:p,size:d}=n;let l="";return"string"==typeof p||"number"==typeof p||"boolean"==typeof p?l=String(p):r.isValidElement(p)?l=i(p):Array.isArray(p)&&(l=p.join("")),t(m,{children:[o(a,{children:o(e,{color:s.background.base,height:27,width:27})}),o("div",{style:{fontSize:"small"===d?12:14},dangerouslySetInnerHTML:{__html:l}})]})};export{m as SMSContainer,a as SideCaret,p as default};
+`,d=i=>{const{content:d,size:a}=i;return t(s,{children:[o(r,{children:o(e,{color:n.background.base,height:27,width:27})}),o("div",{style:{fontSize:"small"===a?12:14},dangerouslySetInnerHTML:{__html:d}})]})};export{s as SMSContainer,r as SideCaret,d as default};

package/dist/esm/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import l from"../../assets/icons/more_vertical.svg.js";import o from"../../assets/icons/search.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import d from"./RenderVariableUIForPreview.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const v=v=>{let{template:g,variableStore:f,hideHeader:j,display_content:y,onlyTemplateContent:b,size:w,uniqueId:x}=v;var S,z,I;const O=null==g?void 0:g.content,{hideDeviceContainerInPreview:T,originalVariableList:C}=s();return console.log("templateContent in smsTemplatePreview",C),T?e(p,Object.assign({size:w},{children:e(m,{size:null!=w?w:"large",content:null!==(S=null!=y?y:d({content:O,variablStore:null!=f?f:[],uniqueId:null!=x?x:""}))&&void 0!==S?S:e(t,{})})})):n(t,{children:[!j&&!b&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!b&&e(u,{children:n(t,{children:[n("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(i,{width:16,height:16,color:r.content.secondary}),e(c,{children:null===(z=null==g?void 0:g.headers)||void 0===z?void 0:z[0]})]})),n("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:r.content.secondary}),e(l,{width:16,height:16,color:r.content.secondary})]}))]})}),e(p,Object.assign({size:w},{children:e(m,{size:null!=w?w:"large",content:null!==(I=null!=y?y:d({content:O,variablStore:null!=f?f:[],uniqueId:null!=x?x:""}))&&void 0!==I?I:""})}))]})};export{v as default};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import n from"../../assets/icons/arrow_left.svg.js";import i from"../../assets/icons/more_vertical.svg.js";import r from"../../assets/icons/search.svg.js";import{COLORS as o}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as d}from"./helpers/SmsTemplateHelper.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:g,variableStore:v,hideHeader:j,display_content:y,onlyTemplateContent:x,size:b,uniqueId:w}=f;var S;const z=null==g?void 0:g.content,{hideDeviceContainerInPreview:O}=s();return O?e(p,Object.assign({size:b},{children:e(m,{size:null!=b?b:"large",content:null!=y?y:d(z,null!=v?v:[],void 0,null!=w?w:"")})})):t(l,{children:[!j&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!x&&e(u,{children:t(l,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(n,{width:16,height:16,color:o.content.secondary}),e(c,{children:null===(S=null==g?void 0:g.headers)||void 0===S?void 0:S[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(r,{width:16,height:16,color:o.content.secondary}),e(i,{width:16,height:16,color:o.content.secondary})]}))]})}),e(p,Object.assign({size:b},{children:e(m,{size:null!=b?b:"large",content:null!=y?y:d(z,null!=v?v:[],"",null!=w?w:"")})}))]})};export{f as default};

package/dist/esm/components/template-preview/helpers/SmsTemplateHelper.d.ts

@@ -1,2 +1,2 @@
 import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;
+export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;

package/dist/esm/components/template-preview/helpers/SmsTemplateHelper.js

@@ -1 +1 @@
-import{COLORS as n}from"../../../constants/Theme.js";import{variablePatternGlobal as t,variablePattern as o}from"../constants/regexPatterns.js";const e=function(e,a){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n.content.brand;const l=(null==a?void 0:a.length)?null==a?void 0:a.map((n=>n.updatedValue)):e.match(t);return t.lastIndex=0,e.split(o).map(((n,t)=>{var o;return(null==l?void 0:l[t])?`${n}<span></span><span id="connectors_variable_${t+1}" style="color: ${r}; text-decoration: underline; word-break: break-word;">${null!==(o=null==l?void 0:l[t])&&void 0!==o?o:""}</span><span> </span>`:n})).join("")};export{e as renderVariableUIForPreview};
+import{COLORS as n}from"../../../constants/Theme.js";import{variablePatternGlobal as t,variablePattern as o}from"../constants/regexPatterns.js";const e=function(e,a){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n.content.brand,l=arguments.length>3?arguments[3]:void 0;const s=(null==a?void 0:a.length)?null==a?void 0:a.map((n=>n.updatedValue)):e.match(t);return t.lastIndex=0,e.split(o).map(((n,t)=>{var o;return(null==s?void 0:s[t])?`${n}<span></span><span id="${l||""}connectors_variable_${t+1}" style="color: ${r}; text-decoration: underline; word-break: break-word;">${null!==(o=null==s?void 0:s[t])&&void 0!==o?o:""}</span><span> </span>`:n})).join("")};export{e as renderVariableUIForPreview};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.530-beta0.rt16",
+	"version": "0.0.530-beta0.rt17",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",

package/dist/cjs/components/template-preview/RenderVariableUIForPreview.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../constants/Theme.js"),n=require("./constants/regexPatterns.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);exports.default=r=>{let{content:a,variablStore:l,brandColor:o=t.COLORS.content.brand,uniqueId:i}=r;const u=s.default.useMemo((()=>{if(null==l?void 0:l.length)return l.map((e=>e.updatedValue));{const e=a.match(n.variablePatternGlobal)||[];return n.variablePatternGlobal.lastIndex=0,e}}),[a,l]);return e.jsx(e.Fragment,{children:a.split(n.variablePattern).map(((r,t)=>u[t]?e.jsxs("span",{children:[r,e.jsx("span",Object.assign({id:`${i||""}connectors_variable_${t+1}`,style:{color:o,textDecoration:"underline",wordBreak:"break-word"}},{children:u[t]})),e.jsx("span",{children:" "})]},t):e.jsx("span",{children:r},t)))})};

package/dist/esm/components/template-preview/RenderVariableUIForPreview.js

@@ -1 +0,0 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import n from"react";import{COLORS as o}from"../../constants/Theme.js";import{variablePatternGlobal as a,variablePattern as s}from"./constants/regexPatterns.js";const c=c=>{let{content:i,variablStore:l,brandColor:d=o.content.brand,uniqueId:m}=c;const p=n.useMemo((()=>{if(null==l?void 0:l.length)return l.map((e=>e.updatedValue));{const e=i.match(a)||[];return a.lastIndex=0,e}}),[i,l]);return e(r,{children:i.split(s).map(((r,n)=>p[n]?t("span",{children:[r,e("span",Object.assign({id:`${m||""}connectors_variable_${n+1}`,style:{color:d,textDecoration:"underline",wordBreak:"break-word"}},{children:p[n]})),e("span",{children:" "})]},n):e("span",{children:r},n)))})};export{c as default};