@bikdotai/bik-component-library 0.0.13-beta.21 → 0.0.13-beta.26

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

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{UnChildDropdown as d}from"./UnChildDropdown/UnChildDropdown.js";function p(){}const c=c=>{var u,m,{placeHolder:h,size:v,onSelect:f,defaultOptions:g,disabled:b}=c,j=o(c,["placeHolder","size","onSelect","defaultOptions","disabled"]);const w=null!=v?v:"default",x=t(),[O,y]=n(null!=g?g:[]);r((()=>{var o;const e=[];null===(o=null==j?void 0:j.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),y([...e])}),[j.options]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===w?32:48,width:null!==(u=j.width)&&void 0!==u?u:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:x,onSelect:function(o){Array.isArray(o)?y([...o]):y([o]),null==f||f(o)},disabled:b},j,{children:e(s,{state:b?"disabled":"none",value:I,errorMessage:j.error,variant:w,placeholder:null!=h?h:"Select an option",width:null!==(m=j.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return e(l,{style:{transform:(null===(o=null==x?void 0:x.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===w?20:24,height:"small"===w?20:24,color:i.content.primary})}}})}))}))};export{c as default};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,{placeHolder:h,size:v,onSelect:f,defaultOptions:g,disabled:b}=c,j=o(c,["placeHolder","size","onSelect","defaultOptions","disabled"]);const w=null!=v?v:"default",x=t(),[O,y]=n(null!=g?g:[]);r((()=>{var o;const e=[];null===(o=null==j?void 0:j.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),y([...e])}),[j.options]),r((()=>{console.log({defaultOptions:g}),g&&y([...g])}),[g]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===w?32:48,width:null!==(u=j.width)&&void 0!==u?u:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:x,onSelect:function(o){Array.isArray(o)?y([...o]):y([o]),null==f||f(o)},disabled:b},j,{children:e(s,{state:b?"disabled":"none",value:I,errorMessage:j.error,variant:w,placeholder:null!=h?h:"Select an option",width:null!==(m=j.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return e(l,{style:{transform:(null===(o=null==x?void 0:x.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===w?20:24,height:"small"===w?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};

package/dist/esm/components/dropdown/{UnChildDropdown/UnChildDropdown.d.ts → DropdownPopover/index.d.ts}

@@ -1,11 +1,6 @@
 import React from 'react';
 import { OpenDropdownProps } from '../type';
-export type DropdownProps = OpenDropdownProps & {
-    isLoading?: boolean;
-    children?: React.ReactNode;
-    disabled?: boolean;
-};
-export declare const UnChildDropdown: React.ForwardRefExoticComponent<OpenDropdownProps & {
+export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
     isLoading?: boolean | undefined;
     children?: React.ReactNode;
     disabled?: boolean | undefined;

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

@@ -0,0 +1 @@
+import{__rest as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as n}from"react/jsx-runtime";import t,{useState as l,useImperativeHandle as i,useEffect as p}from"react";import{usePopper as s}from"react-popper";import{OverLapAbs as c,OpenDropdownContainer as d}from"../Common.styled.js";import{OpenedDropdown as a}from"../OpenedDropdown/components/OpennedDropdown.js";const m=t.forwardRef(((t,m)=>{var{children:u}=t,f=e(t,["children"]);const v=m,[j,b]=l(!1),[O,w]=l(null),[D,g]=l(null),{styles:h,attributes:y}=s(O,D,{});return i(v,(()=>({openDropdown:j})),[]),p((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),o(r,{children:[o("div",Object.assign({style:{position:"relative"},ref:w},{children:[n(c,{onClick:e=>{j?e.preventDefault():f.disabled||b(!0)}}),u]})),j&&n(d,Object.assign({ref:g,style:Object.assign(Object.assign({},h.popper),{zIndex:3})},y.popper,{children:n(a,Object.assign({},f,{onSelect:e=>{var o;null===(o=f.onSelect)||void 0===o||o.call(f,e),b(!1)},onClose:function(){var e;b(!1),null===(e=null==f?void 0:f.onClose)||void 0===e||e.call(f)}}))}))]})}));m.displayName="DropdownPopover";export{m as DropdownPopover};

package/dist/{cjs/components/dropdown/opennedDropdown → esm/components/dropdown/OpenedDropdown}/components/OpennedDropdown.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { OpenDropdownProps } from '../../type';
-export declare const OpennedDropdown: React.FC<OpenDropdownProps>;
+export declare const OpenedDropdown: React.FC<OpenDropdownProps>;

package/dist/esm/components/dropdown/{opennedDropdown → OpenedDropdown}/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useRef as n,useEffect as o}from"react";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as s}from"../utils/iterationOnOptions.js";import{Description as r}from"./description/Description.js";import{FreeFormMenu as c}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as d,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as h}from"./searchbox/SearchZeroState.js";const b=304,j=290,S=S=>{let{options:g,isSearchable:v,isMultiSelect:O,width:x,allowFreeForm:y,height:F,onClose:w,onSelect:M}=S;const[D,A]=l(null!=g?g:[]),[B,C]=l(null!=x?x:j),[W,k]=l(""),[E,H]=l(null),I=n(null);i(I,(()=>{H(null),null==w||w()}));const L=null!=F?F:b,Z="number"==typeof L?v&&O?L-96:v&&!O||!v&&O?L-48:L:L;function q(e){if(O){const t=s(D,{selected:e.selected},(t=>t.value===e.value));A([...t])}else null==M||M(e)}o((()=>{const e=null!=x?x:j;if(null===E)C(e);else if("number"==typeof e)C(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));C(t)}}),[E]);const z=D.map((e=>{var t;if(W){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(W))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(W))?e:null}return e})).filter((e=>null!==e)),G=!!v&&W&&0===z.length;return e(d,Object.assign({ref:I,style:{maxWidth:E?800:400,width:B}},{children:[e("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!v&&t(f,{onSearch:function(e){k(e)}}),e(m,Object.assign({maxHeight:Z},{children:[!!O&&!G&&t(a,{options:D,onSelect:function(e){if("selectAll"===e){const e=s(D,{selected:!0},(e=>!e.disabled));A([...e])}else if("notSelected"===e){const e=s(D,{selected:!1},(e=>!e.disabled));A([...e])}}}),!y&&G&&t(h,{searchedString:W}),y&&G&&t(c,{isMultiSelect:O,onSelect:function(e){if(!O)return void q({label:W,value:W,isFreeForm:!0,selected:!0});const t=D.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===W&&t.value===W&&e})));e&&(t.some((e=>e.label===W&&e.value===W))||t.unshift({label:W,value:W,isFreeForm:!0,selected:!0})),A([...t])},searchedString:W}),t(u,{onSelect:q,showDescription:function(e,t){H(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:z})]})),!!O&&t(p,{onClear:function(){const e=s(D,{selected:!1});A([...e])},onApply:function(){const e=[];D.forEach((t=>{if(t.options){const l=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...l]}))}else t.selected&&e.push(Object.assign({},t))})),null==M||M([...e])},list:D})]})),!!E&&t(r,{title:E.title,description:E.description})]}))};export{S as OpennedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useRef as n,useEffect as o}from"react";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as s}from"../utils/iterationOnOptions.js";import{Description as r}from"./description/Description.js";import{FreeFormMenu as c}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as d,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as h}from"./searchbox/SearchZeroState.js";const b=304,j=290,S=S=>{let{options:g,isSearchable:v,isMultiSelect:O,width:x,allowFreeForm:y,height:F,onClose:w,onSelect:M}=S;const[D,A]=l(null!=g?g:[]),[B,C]=l(null!=x?x:j),[W,k]=l(""),[E,H]=l(null),I=n(null);i(I,(()=>{H(null),null==w||w()}));const L=null!=F?F:b,Z="number"==typeof L?v&&O?L-96:v&&!O||!v&&O?L-48:L:L;function q(e){if(O){const t=s(D,{selected:e.selected},(t=>t.value===e.value));A([...t])}else null==M||M(e)}o((()=>{const e=null!=x?x:j;if(null===E)C(e);else if("number"==typeof e)C(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));C(t)}}),[E]);const z=D.map((e=>{var t;if(W){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(W))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(W))?e:null}return e})).filter((e=>null!==e)),G=!!v&&W&&0===z.length;return e(d,Object.assign({ref:I,style:{maxWidth:E?800:400,width:B}},{children:[e("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!v&&t(f,{onSearch:function(e){k(e)}}),e(m,Object.assign({maxHeight:Z},{children:[!!O&&!G&&t(a,{options:D,onSelect:function(e){if("selectAll"===e){const e=s(D,{selected:!0},(e=>!e.disabled));A([...e])}else if("notSelected"===e){const e=s(D,{selected:!1},(e=>!e.disabled));A([...e])}}}),!y&&G&&t(h,{searchedString:W}),y&&G&&t(c,{isMultiSelect:O,onSelect:function(e){if(!O)return void q({label:W,value:W,isFreeForm:!0,selected:!0});const t=D.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===W&&t.value===W&&e})));e&&(t.some((e=>e.label===W&&e.value===W))||t.unshift({label:W,value:W,isFreeForm:!0,selected:!0})),A([...t])},searchedString:W}),t(u,{onSelect:q,showDescription:function(e,t){H(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:z})]})),!!O&&t(p,{onClear:function(){const e=s(D,{selected:!1});A([...e])},onApply:function(){const e=[];D.forEach((t=>{if(t.options){const l=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...l]}))}else t.selected&&e.push(Object.assign({},t))})),null==M||M([...e])},list:D})]})),!!E&&t(r,{title:E.title,description:E.description})]}))};export{S as OpenedDropdown};

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

@@ -0,0 +1,3 @@
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import o from"styled-components";import{CheckBox as i}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as s}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{FreeFormContainer as l}from"./FreeFormMenu.styled.js";const c=o(n)`
+	padding: 14px 16px !important;
+`,a=o=>{let{option:n,isMultiSelect:a,showDescription:m,onSelect:d}=o;var p;function u(e){n.disabled||d(Object.assign(Object.assign({},n),{selected:e}))}return e(c,{onClick:e=>{e.preventDefault(),u(!n.selected)},onMouseOver:function(){n.descriptions?m(n.label,n.descriptions):m()},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:a?e(i,{isDisabled:null!==(p=n.disabled)&&void 0!==p&&p,isChecked:!!n.selected,onValueChange:u}):e(t,{}),customComponent:n.customComponent,trailingIcon:n.isFreeForm?e(l,{children:e(s,Object.assign({style:{color:r.content.secondary}},{children:"Freeform"}))}):n.trailingIcon?e(t,{children:n.trailingIcon}):e(t,{}),variant:n.disabled?"inactive":n.selected?"selected":"default"})};export{a as MenuItem};

package/dist/esm/components/dropdown/{opennedDropdown → OpenedDropdown}/components/menu/SelectAllMenu.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as l}from"react";import o from"styled-components";import{CheckBox as c}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";const r=o(i)``,n=o=>{let{options:i,onSelect:n}=o;const[a,s]=t("notSelected");function d(){"partiallySelected"===a&&n("notSelected"),"selectAll"===a&&n("notSelected"),"notSelected"===a&&n("selectAll")}return l((()=>{const e=[];i.filter((e=>!e.disabled)).forEach((t=>{t.options?t.options.filter((e=>!e.disabled)).forEach((t=>{e.push(t.selected||!1)})):e.push(t.selected||!1)})),e.every(Boolean)?s("selectAll"):e.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")}),[i]),e(r,{onClick:e=>{e.preventDefault(),d()},listItem:{label:"Select All",value:"All"},trailingIcon:e(c,{isChecked:"selectAll"===a||"partiallySelected"===a,isPartiallyChecked:"partiallySelected"===a,onValueChange:d}),variant:"default"})};export{n as SelectAllMenu};
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as l}from"react";import o from"styled-components";import{CheckBox as c}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";const r=o(i)``,n=o=>{let{options:i,onSelect:n}=o;const[a,s]=t("notSelected");function d(){"partiallySelected"===a&&n("notSelected"),"selectAll"===a&&n("notSelected"),"notSelected"===a&&n("selectAll")}return l((()=>{const e=[];i.filter((e=>!e.disabled)).forEach((t=>{t.options?t.options.filter((e=>!e.disabled)).forEach((t=>{e.push(t.selected||!1)})):e.push(t.selected||!1)})),e.every(Boolean)?s("selectAll"):e.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")}),[i]),e(r,{onClick:e=>{e.preventDefault(),d()},listItem:{label:"Select All",value:"All"},leadingIcon:e(c,{isChecked:"selectAll"===a||"partiallySelected"===a,isPartiallyChecked:"partiallySelected"===a,onValueChange:d}),variant:"default"})};export{n as SelectAllMenu};

package/dist/esm/components/dropdown/{opennedDropdown → OpenedDropdown}/utils/iterationOnOptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownOption, SingleOption } from '../../type';
 export declare function iterateOnOptions(options: DropdownOption[], newVal: Partial<SingleOption>, checkCB?: (optionForValidation: SingleOption) => boolean): ({
     label: string;
@@ -6,6 +7,9 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -13,5 +17,8 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
     options: SingleOption[];
 })[];

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

@@ -1 +1,3 @@
 export * from './Dropdown';
+export * from './DropdownPopover';
+export * from './OpenedDropdown';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -21,6 +22,9 @@ export type SingleOption = {
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/esm/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:u,buttonPosition:p,menuWidth:c,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:u,position:p,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j},{children:t(o,{options:d,height:s||90,width:`${c}px`,onSelect:e})}))})};export{i as FABMenu};
+import{jsx as t}from"react/jsx-runtime";import{OpenedDropdown as o}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:u,buttonPosition:p,menuWidth:c,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:u,position:p,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j},{children:t(o,{options:d,height:s||90,width:`${c}px`,onSelect:e})}))})};export{i as FABMenu};

package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js

@@ -62,12 +62,12 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 
 	.dropdown-toggle::after {
 		border-top: 0.3em solid ${e.content.primary};
-		display: none;
+		display: none !important;
 	}
 
 	.dropdown-toggle::before {
 		border-top: 0.3em solid ${e.content.primary};
-		display: none;
+		display: none !important;
 	}
 	.dropdown-menu {
 		min-width: 12rem;

package/dist/esm/components/helpers/FileUploaderHelper.d.ts

@@ -0,0 +1,12 @@
+export declare const FILE_TYPE_NOT_SUPPORT = "File type no supported";
+export declare const FILE_SIZE_REACHED: (size: number) => string;
+export declare const getFileFormatErrorMessage: (format: string) => string;
+export declare const SIZE_LIMIT_MAP: {
+    image: number;
+    video: number;
+    application: number;
+};
+export declare const SUPPORTED_FILE_FORMAT: string[];
+export declare class FileUploaderHelper {
+    validate(file: Blob): string | undefined;
+}

package/dist/esm/components/helpers/FileUploaderHelper.js

@@ -0,0 +1 @@
+import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",p=e=>`Max file size of ${e}mb is allowed`,t=e=>`Only ${e.toUpperCase()} format allowed`,o={image:5,video:16,application:100},r=["mp4","png","jpeg","jpg","pdf"];class a{validate(a){const l=a.size,[s,n]=a.type.split("/");if(!o[s])return i;if(e(l)>o[s])return p(o[s]);if(!r.includes(n.toLocaleLowerCase())){if("video"===s)return t("mp4");if("image"===s)return t("png, jpeg, jpg");if("application"===s)return t("pdf")}}}export{p as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,a as FileUploaderHelper,o as SIZE_LIMIT_MAP,r as SUPPORTED_FILE_FORMAT,t as getFileFormatErrorMessage};

package/dist/esm/components/input/Input.d.ts

@@ -26,7 +26,7 @@ export interface InputProps {
         validate:  function takes the input and returns boolean + string (error message in case of invalid input)
      **/
     validate?: (input?: string | number) => [boolean, string];
-    onChangeText: (input: string) => void;
+    onChangeText: (input: string, event?: Event) => void;
     button?: {
         text: string;
         onClick?: () => void;
@@ -34,7 +34,9 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
-    onBlur?: () => void;
+    onBlur?: (e: any) => void;
     onFocus?: () => void;
+    isActive?: boolean;
+    id?: string;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as h,InputWrapper as v,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=i(((i,C)=>{var w,I,O;const{placeholder:T,leftIcon:k,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:F,type:z,state:A,validate:E,variant:K,button:M,suffixText:R,prefixText:q,onChangeText:H,value:N}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),P=null==k?void 0:k.icon,W=null==B?void 0:B.icon,[G,J]=l(""),[Q,U]=l(!1),[V,X]=l(!1),[Y,Z]=l(),$="small"===K?"18px":"22px",_=r(d);o((()=>{Z(i.errorMessage)}),[i.errorMessage]),o((()=>{U(!1),("invalid"===i.state||Y)&&U(!0)}),[i.state,Y]),o((()=>{U(!!Y)}),[Y]),o((()=>{if(H(G),!E||!j(E))return;const[e,t]=E(G);U(!e),Z(t)}),[G]);const ee=function(e){if(j(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},te=e=>{![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},ne=e=>{J(e.target.value)},ie=()=>{var l;return e(n,{children:["multiline"!==z&&t("input",{style:null!==(l=null==_?void 0:_.input)&&void 0!==l?l:{},ref:C,type:z,value:N,onFocus:()=>(X(!0),void ee(i.onFocus)),onBlur:()=>(X(!1),void ee(i.onBlur)),placeholder:T||"Enter here",onChange:ne,onKeyDown:e=>te(e)}),"multiline"===z&&t("textarea",{value:N,ref:C,onFocus:()=>X(!0),onBlur:()=>X(!1),placeholder:T||"Enter here",onChange:ne,onKeyDown:e=>te(e)})]})};return e(u,Object.assign({width:i.width,height:i.height,state:A,type:z,style:null!==(w=null==_?void 0:_.RootContainer)&&void 0!==w?w:{}},{children:[(!!F||!!Y)&&e(h,Object.assign({invalid:!!Y},{children:[!!Y&&t(c,{width:16,height:16}),Y||F]})),e(v,Object.assign({variant:K,state:A,width:i.width,isActive:"active"===A||V,isInvalid:Q,style:null!==(I=null==_?void 0:_.InputWrapper)&&void 0!==I?I:{}},{children:[!!P&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==k?void 0:k.callback),isLeft:!0,style:null!==(O=null==_?void 0:_.IconHolder)&&void 0!==O?O:{}},{children:t(P,{})})),!!q&&t(f,Object.assign({variant:K},{children:q})),"default"===K&&t(g,{children:ie()}),"small"===K&&t(m,{children:ie()}),!!W&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==B?void 0:B.callback),isLeft:!1},{children:t(W,{})})),!!R&&t(x,Object.assign({variant:K},{children:R})),M&&M.text&&t(a,{buttonText:M.text,onClick:()=>ee(null==M?void 0:M.onClick)})]})),(!!L||!!S)&&"default"===K&&e(y,Object.assign({invalid:Q},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[G.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{forwardRef as n,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as v,InputWrapper as h,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=n(((n,C)=>{var w,I,O,T;const{placeholder:k,leftIcon:A,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:F,type:z,state:E,validate:K,variant:M,button:R,suffixText:q,prefixText:H,onChangeText:N,value:P}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},n),W=null==A?void 0:A.icon,G=null==B?void 0:B.icon,[J,Q]=l(!1),[U,V]=l(!1),[X,Y]=l(),Z="small"===M?"18px":"22px",$=r(d);o((()=>{V(!!n.isActive)}),[n.isActive]),o((()=>{Y(n.errorMessage)}),[n.errorMessage]),o((()=>{Q(!1),("invalid"===n.state||X)&&Q(!0)}),[n.state,X]),o((()=>{Q(!!X)}),[X]);const _=function(e){if(j(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},ee=e=>{![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},te=e=>{const t=e.target.value;if(N(t,e),!K||!j(K))return;const[i,n]=K(t);Q(!i),Y(n)},ie=()=>{var l;return e(i,{children:["multiline"!==z&&t("input",{id:n.id,style:null!==(l=null==$?void 0:$.input)&&void 0!==l?l:{},ref:C,type:z,value:P,onFocus:()=>(V(!0),void _(n.onFocus)),onBlur:e=>(e=>{var t;V(!1),_(null===(t=n.onBlur)||void 0===t?void 0:t.call(n,e))})(e),placeholder:k||"Enter here",onChange:te,onKeyDown:e=>ee(e)}),"multiline"===z&&t("textarea",{value:P,ref:C,onFocus:()=>V(!0),onBlur:()=>V(!1),placeholder:k||"Enter here",onChange:te,onKeyDown:e=>ee(e)})]})};return e(u,Object.assign({width:n.width,height:n.height,state:E,type:z,style:null!==(w=null==$?void 0:$.RootContainer)&&void 0!==w?w:{}},{children:[(!!F||!!X)&&e(v,Object.assign({invalid:!!X},{children:[!!X&&t(c,{width:16,height:16}),X||F]})),e(h,Object.assign({variant:M,state:E,width:n.width,isActive:"active"===E||U,isInvalid:J,style:null!==(I=null==$?void 0:$.InputWrapper)&&void 0!==I?I:{}},{children:[!!W&&t(p,Object.assign({variant:M,iconSize:Z,onClick:()=>_(null==A?void 0:A.callback),isLeft:!0,style:null!==(O=null==$?void 0:$.IconHolder)&&void 0!==O?O:{}},{children:t(W,{})})),!!H&&t(f,Object.assign({variant:M},{children:H})),"default"===M&&t(g,{children:ie()}),"small"===M&&t(m,{children:ie()}),!!G&&t(p,Object.assign({variant:M,iconSize:Z,onClick:()=>_(null==B?void 0:B.callback),isLeft:!1},{children:t(G,{})})),!!q&&t(x,Object.assign({variant:M},{children:q})),R&&R.text&&t(a,{buttonText:R.text,onClick:()=>_(null==R?void 0:R.onClick)})]})),(!!L||!!S)&&"default"===M&&e(y,Object.assign({invalid:J},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[null===(T=n.value)||void 0===T?void 0:T.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};

package/dist/esm/components/list-item/ListItem.d.ts

@@ -12,5 +12,6 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     leadingIcon?: JSX.Element;
     trailingIcon?: JSX.Element;
     borderBottom?: string;
+    customComponent?: JSX.Element;
 }
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/list-item/ListItem.js

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{forwardRef as r}from"react";import{getColor as o}from"./themes.js";import{BodySecondary as s,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";import{ListItem as a}from"./ListItem.styled.js";const m=r(((r,m)=>{var{id:c,onSelect:d,variant:p="default",trailingIcon:f,leadingIcon:b,subText:y,listItem:g,borderBottom:j}=r,x=t(r,["id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom"]);return e(a,Object.assign({ref:m,id:c,variant:p,onClick:()=>d&&d(g),borderBottom:j},x,{children:[!!f&&f,e("div",Object.assign({style:{display:"flex",rowGap:"4px",flexDirection:"column"}},{children:[!!g&&i(s,Object.assign({style:{color:o(p)}},{children:g.label})),!!y&&i(l,Object.assign({style:{color:n.text.secondary}},{children:y}))]})),!!b&&i("div",Object.assign({style:{display:"flex",marginLeft:"auto"}},{children:b}))]}))}));m.displayName="ListItem";export{m as ListItem};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,Fragment as o,jsxs as i}from"react/jsx-runtime";import{forwardRef as r}from"react";import{getColor as s}from"./themes.js";import{BodySecondary as n,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";import{ListItem as m}from"./ListItem.styled.js";const c=r(((r,c)=>{var{id:d,onSelect:p,variant:f="default",trailingIcon:b,leadingIcon:y,subText:g,listItem:j,borderBottom:h,customComponent:u}=r,x=t(r,["id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent"]);return e(m,Object.assign({ref:c,id:d,variant:f,onClick:()=>p&&p(j),borderBottom:h},x,{children:u?e(o,{children:u}):i(o,{children:[!!y&&y,i("div",Object.assign({style:{display:"flex",rowGap:"4px",flexDirection:"column"}},{children:[!!j&&e(n,Object.assign({style:{color:s(f)}},{children:j.label})),!!g&&e(l,Object.assign({style:{color:a.text.secondary}},{children:g}))]})),!!b&&e("div",Object.assign({style:{display:"flex",marginLeft:"auto"}},{children:b}))]})}))}));c.displayName="ListItem";export{c as ListItem};

package/dist/esm/components/states/StateComponent.d.ts

@@ -0,0 +1,29 @@
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import React from 'react';
+export declare enum StateInterface {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning"
+}
+export declare enum ButtonActions {
+    CANCEL = "cancel",
+    OTHER = "other"
+}
+export declare enum ButtonTypes {
+    SINGLE = "SINGLE",
+    DOUBLE = "DOUBLE"
+}
+export type StateComponentProps = {
+    states: StateInterface;
+    heading: string;
+    subline: string;
+    icon?: JSX.Element;
+    isButtonEnabled: boolean;
+    type?: ButtonTypes;
+    buttonText?: string;
+    buttonIcon?: ReactJSXElement;
+    onButtonClick?: (buttonClicked: ButtonActions) => void;
+    leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    width: number;
+};
+export declare const StateComponent: React.FC<StateComponentProps>;

package/dist/esm/components/states/StateComponent.styled.d.ts

@@ -0,0 +1,7 @@
+export declare const StateComponentContainer: import("styled-components").StyledComponent<"div", any, {
+    width: number;
+}, never>;
+export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StateHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StateSubline: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/states/index.d.ts

@@ -0,0 +1 @@
+export * from './StateComponent';

package/dist/esm/components/states-modal/StateModalComponent.d.ts

@@ -0,0 +1,17 @@
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import React from 'react';
+import { ButtonActions, ButtonTypes, StateInterface } from '../states/StateComponent';
+export type StateModalComponentProps = {
+    states: StateInterface;
+    heading: string;
+    subline: string;
+    icon?: JSX.Element;
+    isButtonEnabled: boolean;
+    type?: ButtonTypes;
+    buttonText?: string;
+    buttonIcon?: ReactJSXElement;
+    onButtonClick?: (buttonClicked: ButtonActions) => void;
+    leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    width?: number;
+};
+export declare const StateModalComponent: React.FC<StateModalComponentProps>;

package/dist/esm/components/states-modal/index.d.ts

@@ -0,0 +1 @@
+export * from './StateModalComponent';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface BadgeProps {
+    errorText: string;
+}
+export declare const Badge: (props: BadgeProps) => JSX.Element;

package/dist/esm/components/template-context-mapper/Badge/index.js

@@ -0,0 +1,10 @@
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import e from"../../../assets/icons/alert.svg.js";import o from"styled-components";import{BodySecondary as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";const s=o.div`
+	background: ${i.background.negative.light};
+	display: flex;
+	align-items: center;
+	padding: 0px 12px;
+	gap: 8px;
+	border-radius: 4px;
+	margin-right: 12px;
+	color: ${i.content.negative};
+`,p=o=>{const{errorText:p}=o;return r(s,{children:[t(e,{height:20,width:20,color:i.content.negative}),t(n,{children:p})]})};export{p as Badge,s as BadgeContainer};

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CHANNEL_TYPE } from '../template-preview/models/Channels';
+import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
+import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
+import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
+import { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+export interface TemplateContextMapperProps {
+    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
+    closeDialog?: () => void;
+    showVariableMapping: boolean;
+    channel: CHANNEL_TYPE;
+    globalPlaceholders: GlobalPlaceholderType;
+    /** List of variables being used in this template */
+    templateVariables: CUSTOM_VARIABLE[];
+    /** Only for initial-UI-purpose for the modal */
+    htmlContent: string;
+    showOnlyContent?: boolean;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables, display_content?: string): string | void;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+}
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateContextMapperProps) => JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as i,useMemo as a}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as d}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:u,closeDialog:g,showVariableMapping:f,channel:v,htmlContent:b,templateVariables:j,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:C,whatsappSpecificPickerMeta:w}=h;var P,y;o((()=>{A(b)}),[b]);const[E,T]=i(v===s.EMAIL?"desktop":"mobile"),[L,A]=i(b),[O,V]=i(!1),[k,x]=i(u),[D,I]=i(null!=j?j:[]);const F=a((()=>d(S)),[S]);return e(c.Provider,Object.assign({value:{template:k,setTemplate:x,device:E,setDevice:T,display_content:L,setDisplayContent:A,originalVariableList:D,setOriginalVariableList:I,isError:O,setIsError:V,channel:v,globalNormalizedPlaceholders:F}},{children:C?e(p,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({centralContainerStyles:{width:v===s.EMAIL&&f?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==k?void 0:k.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(P=null==k?void 0:k.category)&&void 0!==P?P:"")} • ${null!==(y=null==k?void 0:k.templateCategory)&&void 0!==y?y:""}`:""},{children:[e(p,{showVariableMapping:f,channel:v,whatsappSpecificPickerMeta:w}),M?e(m,{onSelect:function(){const e=null==M?void 0:M(k,D,null!=L?L:"");e&&V(!!e)}}):e(l,{})]}))}))};export{h as TemplateContextMapper};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
+import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type DEVICE_TYPES = 'desktop' | 'mobile';
+export declare const TemplateModalContext: React.Context<{
+    device: DEVICE_TYPES;
+    setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
+    display_content: string | null;
+    setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    channel: CHANNEL_TYPE;
+    setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | undefined;
+    isError: boolean;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
+}>;
+export declare const useTemplateModalContext: () => {
+    device: DEVICE_TYPES;
+    setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
+    display_content: string | null;
+    setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    channel: CHANNEL_TYPE;
+    setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | undefined;
+    isError: boolean;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
+};

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

@@ -0,0 +1 @@
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};

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

@@ -0,0 +1,3 @@
+export * from './TemplateContextMapper';
+export * from './utils/getDataFromTemplateComponent';
+export * from './utils/validateIsUrl';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface BodyProps {
+    showVariableMapping: boolean;
+    showOnlyContent?: boolean;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+}
+declare const Body: (props: BodyProps) => JSX.Element;
+export default Body;

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

@@ -0,0 +1,18 @@
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import l from"styled-components";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as a}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as p}from"../utils/getVariableNameEmail.js";import{highlightFor as m}from"../utils/highlightFor.js";import d from"./DesktopPreview.js";import s from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import h from"./VariableConnectorsPanel.js";const f=l.div`
+	display: flex;
+	//	height: 100%;
+`,u=l.div`
+	padding: 16px 14px;
+	border-left-width: 1px;
+	border-left-color: ${r.stroke.primary};
+	max-width: 350px;
+
+	height: ${e=>e.channel===i.WHATSAPP?"500px":"475px"};
+	overflow-y: 'auto';
+	padding-bottom: 24px;
+`,g=l.div`
+	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
+	flex: 1;
+	height: 475px;
+	overflow-y: auto;
+`,v=l=>{const{showVariableMapping:v,showOnlyContent:w,whatsappSpecificPickerMeta:x}=l,b=n(),y=n(),{device:j,display_content:P,channel:E,template:M,setTemplate:T}=a();const k=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(f,{children:[t(g,Object.assign({showOnlyContent:w,showVariableMapping:v},{children:"mobile"===j?t(c,{ref:y,display_content:null!=P?P:"",channel:E,template:M}):E!==i.MESSAGE?t(d,{ref:b,channel:E,display_content:null!=P?P:""}):t(o,{})})),v&&t(u,Object.assign({channel:E},{children:E!==i.WHATSAPP?t(h,{onFocus:E===i.EMAIL?function(e){var t,o,n;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===j?"template_html_mobile":"template_html_desktop"),a=p(e+1),d=E===i.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a),s=k(d),c=null==d?void 0:d.offsetLeft;"desktop"===j?s&&b.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,s),m(a,r.background.warning.light,2,E,j)):s&&y.current&&(null===(n=null==l?void 0:l.contentWindow)||void 0===n||n.scrollTo(null!=c?c:0,s),m(a,r.background.warning.light,2,E,j))}:void 0}):t(s,{whatsappSpecificPickerMeta:x,template:M,onTemplateChange:e=>{null==T||T(e)}})}))]})};export{v as default};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+declare const DesktopPreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+} & React.RefAttributes<HTMLDivElement>>;
+export default DesktopPreview;

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

@@ -0,0 +1,20 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as o}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import{COLORS as p}from"../../../constants/Theme.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";const s=i.div`
+	background: ${p.surface.standard};
+	border: 1px solid ${p.stroke.primary};
+	border-radius: 8px;
+	overflow-y: auto;
+	/* max-height: 420px; */
+	scroll-behavior: smooth;
+	height: 100%;
+`,m=i.div`
+	padding: 18px 24px 12px;
+	display: flex;
+	gap: 4px;
+	border-bottom-width: 1px;
+	border-bottom-color: ${p.stroke.primary};
+`,l=i.div`
+	width: 6px;
+	height: 6px;
+	background: #d9d9d9;
+	border-radius: 3px;
+`,n=r.forwardRef(((r,i)=>{let{display_content:p}=r;return e(s,Object.assign({ref:i},{children:[e(m,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:p?t(a,{channel:d.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:p,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(o,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
+export interface EditMediaV2Props {
+    imageName: string[];
+    errorSecondaryText?: string;
+    error?: string;
+    isLoading?: boolean;
+    mediaType?: HEADER_TYPES;
+    handleImageChange?: () => void;
+}
+declare const EditMediaV2: (props: EditMediaV2Props) => JSX.Element;
+export default EditMediaV2;

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

@@ -0,0 +1,8 @@
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as c}from"../../spinner/Spinner.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
+	padding-left: 14px;
+	padding-right: 6px;
+	width: 44px;
+	height: 24px;
+	border-left: 1px solid ${g.stroke.primary};
+	cursor: pointer;
+`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O}=l,C=null==u?void 0:u[0].split("/"),L=null==C?void 0:C[C.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(c,{size:"small"}):w===d.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===d.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||L}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.style.d.ts

@@ -0,0 +1,6 @@
+export declare const RightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    error: boolean;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditTemplateMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,31 @@
+import e from"styled-components";import{COLORS as r}from"../../../constants/Theme.js";const t=e.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	/* justify-content: center; */
+	flex: 1;
+`,i=e.div`
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-self: center;
+	background-color: ${r.surface.hovered};
+	border-radius: 4px;
+	border: 1px solid ${r.stroke.primary};
+	box-sizing: content-box;
+	cursor: ${e=>e.error?"pointer":"default"};
+`,o=e.div`
+	padding: 8px;
+	flex-direction: row;
+	display: flex;
+	justify-content: space-between;
+	background: ${r.surface.subdued};
+	border: 1px solid ${r.stroke.primary};
+	border-radius: 4px;
+	margin-left: 8px;
+`,n=e.div`
+	padding-bottom: 0px;
+	min-width: 285px;
+`;export{o as Container,n as EditTemplateMediaContainer,i as ImageContainer,t as RightComponent};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+declare const EditMediaTemplateMediaV2: React.FC<{
+    mediaComponent: WhatsAppTemplate['components'][0];
+    template: WhatsAppTemplate;
+    whatsappSpecificPickerMeta: WhatsAppPickerMeta;
+    updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
+}>;
+export default EditMediaTemplateMediaV2;

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

@@ -0,0 +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 l}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as n}from"../../template-preview/models/TemplateMeta.js";import p from"./EditMediaV2.js";const c=c=>{let{mediaComponent:m,template:d,updateTemplateImageUrl:s,whatsappSpecificPickerMeta:u}=c;var f,v;const g=a.createRef(),[h,M]=l(!1),[j,y]=l("");let I;return I=m.format===n.IMAGE?"image/png, image/jpeg":m.format===n.VIDEO?"video/mp4":"application/pdf",i(t,{children:[o("input",{ref:g,style:{display:"none"},type:"file",onChange:function(i){var t,o;return e(this,void 0,void 0,(function*(){y(""),M(!0);const e=new r,a=null===(t=i.target.files)||void 0===t?void 0:t[0];if(a instanceof Blob){const i=e.validate(a);if(i)y(i),M(!1);else{const e=m.format===n.IMAGE,i=yield u.uploadMediaFiles({file:a,fileName:a.name,isImage:e});if(i.success){const[e]=a.type.split("/");s(null!==(o=i.url)&&void 0!==o?o:"","application"===e?n.DOCUMENT:n[e.toUpperCase()])}else y("An unknown technical error occured");M(!1)}}else y("An unknown technical error occured"),M(!1)}))},accept:I}),o(p,{imageName:null!==(v=null===(f=null==m?void 0:m.example)||void 0===f?void 0:f.header_handle)&&void 0!==v?v:[],handleImageChange:function(){var e;(null===(e=null==g?void 0:g.current)||void 0===e?void 0:e.click)&&g.current.click()},mediaType:null==m?void 0:m.format,error:j,isLoading:h})]})};export{c as default};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export interface EditWhatsAppTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
+}
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, }: EditWhatsAppTemplateV2Props) => JSX.Element;
+export default EditWhatsAppTemplateV2;

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

@@ -0,0 +1 @@
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as s}from"./VariableConnectorsPanel.js";import a from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m}=r;var b,v,g,h,f,j,T,O,x,y,E,C;const{originalVariableList:V}=e(),{descriptionComponents:w,urlBtns:B,qrbBtns:I,imageComponent:R,bodyVariables:L,headerVariables:A}=n(c);function U(t,o){var e,n,i,l;const s=Object.assign({},c),a=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const d=null===(e=null==s?void 0:s.components[a].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[a])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},s.components[a]),{buttons:p}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[a]=r,s.components=u}}null==u||u(s)}function S(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const s=Object.assign(Object.assign({},i.components[l]),{buttons:o}),a=[...i.components];a[l]=s,i.components=a}null==u||u(i)}return t(s,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!R&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:R,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c})}),(L.length>0||A.length>0)&&o(d,{containerStyle:{paddingTop:R?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==w?void 0:w.map(((t,e)=>o(a,{originalVariableList:V,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body},e))),(null===(v=null===(b=B[0])||void 0===b?void 0:b.component)||void 0===v?void 0:v.buttons)&&(null===(f=null===(h=null===(g=B[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)||void 0===f?void 0:f.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(j=null==V?void 0:V.buttons)||void 0===j?void 0:j.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:V,updateSelectedURLTemplateBtn:U},`${e}`)})),(null===(O=null===(T=I[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(y=null===(x=I[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)||void 0===E?void 0:E.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(C=null==V?void 0:V.buttons)||void 0===C?void 0:C.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:V,updateSelectedQRBTemplateBtn:S},`${e}`)}))]}))};export{r as default};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface FooterProps {
+    onSelect: () => void;
+}
+declare const Footer: ({ onSelect }: FooterProps) => JSX.Element;
+export default Footer;

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

@@ -0,0 +1,13 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{Button as r}from"../../button/Button.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as n}from"../Badge/index.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const p=o.div`
+	background: ${i.surface.standard};
+	border-top-width: 1px;
+	border-top-color: ${i.stroke.primary};
+	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
+	width: 100%;
+	padding: 16px 24px;
+	display: flex;
+	justify-content: end;
+	gap: 12;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+`,a=o=>{let{onSelect:i}=o;const{isError:a}=s();return t(p,{children:[a&&e(n,{errorText:"Some inputs are missing or incorrect. Please check"}),e(r,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:i})]})};export{a as default};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface HeaderProps {
+    showOnlyContent?: boolean;
+}
+declare const Header: ({ showOnlyContent }: HeaderProps) => JSX.Element;
+export default Header;