npm - @bikdotai/bik-component-library - Versions diffs - 0.0.815 → 0.0.816 - Mend

@bikdotai/bik-component-library 0.0.815 → 0.0.816

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("bootstrap/dist/css/bootstrap.min.css");const l=require("react"),b=require("react-bootstrap"),H=require("react-dom"),D=require("../../constants/Theme.js"),R=require("../TypographyStyle.js"),A=require("./CommonStyles.js"),U=require("../datePicker/DatePicker.js"),V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},Y=V(H),z=({options:e,placeholder:r="Select an option",selected:n,onOptionSelected:u,resetDropdown:x,maxHeight:w,backgroundcolor:E,calendarPopperConfig:m,variant:L="default",datePickerPlacement:O,closeDropdown:N,labelColor:M,styleProps:q,showTimePicker:f=!1})=>{const[j,g]=l.useState(!1),[s,C]=l.useState(n),[d,S]=l.useState(),[p,y]=l.useState(!1),[B,k]=l.useState(n),v=l.useRef(null),T=L==="small"?R.Caption:R.BodySecondary;l.useEffect(()=>{x&&C(void 0)},[x]),l.useEffect(()=>{n?.isCustom&&n.dateRangeSelectionOptions?.selectedDates?S(n.dateRangeSelectionOptions.selectedDates):S(void 0),C(n)},[n]),l.useEffect(()=>{y(!1),g(!1)},[N]);const h=t=>{t!==void 0?(y(t),j&&g(!1)):y(i=>!i)},F=t=>{v.current&&!v.current.contains(t.target)&&(j&&g(!1),h(!1))};return l.useEffect(()=>(p&&document.addEventListener("mousedown",F),()=>{document.removeEventListener("mousedown",F)}),[p]),o.jsx(o.Fragment,{children:o.jsxs(A.MainDropdown,{drop:"down",show:p,onToggle:h,bgColor:E,id:"analytic-dropdown",children:[o.jsx(b.Dropdown.Toggle,{id:"dropdown-autoclose-outside",className:"main--dropdown",style:L==="small"?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${D.DEFAULT_THEME.colorsV2.stroke.primary}`}:q||void 0,children:o.jsx(T,{style:L==="small"||M?{color:M||D.DEFAULT_THEME.colorsV2.content.secondary}:void 0,children:s?.isCustom?d?c(d[0],f)===c(d[1],f)?`${c(d[0],f)}`:`${c(d[0],f)} to ${c(d[1],f)}`:B?.label?B?.label:r:s?s?.label:r})}),Y.default.createPortal(o.jsx(b.Dropdown.Menu,{className:"main--dropdown",style:{padding:0},ref:v,children:o.jsxs(A.MainDropdown,{drop:O??"end",id:"sub--dropdown",show:j,onToggle:t=>{!t&&y(!1),g(!j)},children:[o.jsx("div",{style:{maxHeight:w||"auto",overflowY:"scroll"},children:e.map((t,i)=>o.jsx("div",{children:t?.isCustom?o.jsx(b.Dropdown.Toggle,{className:"sub--dropdown",children:o.jsx(I,{isFirstItem:i===0,isLastItem:i===e.length-1,eachOption:t,selectedOption:s,selectedDate:d,onClickingEachItem:a=>{C(a),g(!0)},rangeSelection:!!t?.dateRangeSelectionOptions?.selectRange,showTimePicker:f})}):o.jsx(I,{isFirstItem:i===0,isLastItem:i===e.length-1,eachOption:t,selectedOption:s,selectedDate:d,onClickingEachItem:a=>{if(S(void 0),C(a),k(a),h(),!a.noOfDays){u(a);return}const $=new Date,_=new Date;_.setDate($.getDate()-a.noOfDays),u({...a,selectedRange:[_,$]})},showTimePicker:f})},t?.key))}),o.jsx(b.Dropdown.Menu,{className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[m?.offsetSkid||0,m?.offsetDistance||0]}}]},children:o.jsx(U.DatePicker,{selectRange:s?.dateRangeSelectionOptions?.selectRange||!1,showTimePicker:f,maxDate:s?.dateRangeSelectionOptions?.maxDate,minDate:s?.dateRangeSelectionOptions?.minDate,selectedDates:d,onSelectRange:(t,i)=>{const a=[t,i];s?.dateRangeSelectionOptions&&(s.dateRangeSelectionOptions.selectedDates=a,u({...s,selectedRange:[t,i]})),k(s),g(!1),S(a),y(!p)},onSelectDate:t=>{s?.dateRangeSelectionOptions&&(s.dateRangeSelectionOptions.selectedDates=[t,t],u({...s,selectedRange:[t,t]})),k(s),g(!1),S([t,t]),y(!p)}})})]})}),document.body)]})})},I=({eachOption:e,selectedOption:r,selectedDate:n,onClickingEachItem:u,rangeSelection:x,isLastItem:w,isFirstItem:E,showTimePicker:m})=>o.jsxs(A.ItemMenuContainer,{isFirstItem:E,isLastItem:w,onClick:()=>u(e),isSelected:e.isCustom?e.key==r?.key&&!!n:e.key==r?.key,children:[o.jsx(R.BodySecondary,{color:e.key==r?.key?D.BASE_COLORS.positive[900]:D.BASE_COLORS.grayscale[900],children:e.label}),e.subLabel?o.jsx(R.BodyCaption,{style:{color:D.BASE_COLORS.grayscale[700]},children:e.subLabel}):o.jsx(o.Fragment,{}),n&&r?.isCustom&&e.key==r?.key&&o.jsx(R.BodyCaption,{style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"},children:x?`${c(n[0],m)} to ${c(n[1],m)}`:`${c(n[0],m)}`})]},e.key),c=(e,r)=>{const n=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(r){const u=e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0});return`${n} (${u})`}return n};exports.AnalyticsDropdown=z;exports.EachItem=I;exports.formatDate=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),b=require("react-bootstrap"),H=require("react-dom"),D=require("../../constants/Theme.js"),R=require("../TypographyStyle.js"),A=require("./CommonStyles.js"),U=require("../datePicker/DatePicker.js"),V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},Y=V(H),z=({options:e,placeholder:r="Select an option",selected:n,onOptionSelected:u,resetDropdown:x,maxHeight:w,backgroundcolor:E,calendarPopperConfig:m,variant:L="default",datePickerPlacement:O,closeDropdown:N,labelColor:M,styleProps:B,showTimePicker:f=!1})=>{const[j,g]=l.useState(!1),[s,C]=l.useState(n),[d,S]=l.useState(),[p,y]=l.useState(!1),[F,k]=l.useState(n),v=l.useRef(null),T=L==="small"?R.Caption:R.BodySecondary;l.useEffect(()=>{x&&C(void 0)},[x]),l.useEffect(()=>{n?.isCustom&&n.dateRangeSelectionOptions?.selectedDates?S(n.dateRangeSelectionOptions.selectedDates):S(void 0),C(n)},[n]),l.useEffect(()=>{y(!1),g(!1)},[N]);const h=t=>{t!==void 0?(y(t),j&&g(!1)):y(i=>!i)},$=t=>{v.current&&!v.current.contains(t.target)&&(j&&g(!1),h(!1))};return l.useEffect(()=>(p&&document.addEventListener("mousedown",$),()=>{document.removeEventListener("mousedown",$)}),[p]),o.jsx(o.Fragment,{children:o.jsxs(A.MainDropdown,{drop:"down",show:p,onToggle:h,bgColor:E,id:"analytic-dropdown",children:[o.jsx(b.Dropdown.Toggle,{id:"dropdown-autoclose-outside",className:"main--dropdown",style:L==="small"?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${D.DEFAULT_THEME.colorsV2.stroke.primary}`}:B||void 0,children:o.jsx(T,{style:L==="small"||M?{color:M||D.DEFAULT_THEME.colorsV2.content.secondary}:void 0,children:s?.isCustom?d?c(d[0],f)===c(d[1],f)?`${c(d[0],f)}`:`${c(d[0],f)} to ${c(d[1],f)}`:F?.label?F?.label:r:s?s?.label:r})}),Y.default.createPortal(o.jsx(b.Dropdown.Menu,{className:"main--dropdown",style:{padding:0},ref:v,children:o.jsxs(A.MainDropdown,{drop:O??"end",id:"sub--dropdown",show:j,onToggle:t=>{!t&&y(!1),g(!j)},children:[o.jsx("div",{style:{maxHeight:w||"auto",overflowY:"scroll"},children:e.map((t,i)=>o.jsx("div",{children:t?.isCustom?o.jsx(b.Dropdown.Toggle,{className:"sub--dropdown",children:o.jsx(I,{isFirstItem:i===0,isLastItem:i===e.length-1,eachOption:t,selectedOption:s,selectedDate:d,onClickingEachItem:a=>{C(a),g(!0)},rangeSelection:!!t?.dateRangeSelectionOptions?.selectRange,showTimePicker:f})}):o.jsx(I,{isFirstItem:i===0,isLastItem:i===e.length-1,eachOption:t,selectedOption:s,selectedDate:d,onClickingEachItem:a=>{if(S(void 0),C(a),k(a),h(),!a.noOfDays){u(a);return}const q=new Date,_=new Date;_.setDate(q.getDate()-a.noOfDays),u({...a,selectedRange:[_,q]})},showTimePicker:f})},t?.key))}),o.jsx(b.Dropdown.Menu,{className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[m?.offsetSkid||0,m?.offsetDistance||0]}}]},children:o.jsx(U.DatePicker,{selectRange:s?.dateRangeSelectionOptions?.selectRange||!1,showTimePicker:f,maxDate:s?.dateRangeSelectionOptions?.maxDate,minDate:s?.dateRangeSelectionOptions?.minDate,selectedDates:d,onSelectRange:(t,i)=>{const a=[t,i];s?.dateRangeSelectionOptions&&(s.dateRangeSelectionOptions.selectedDates=a,u({...s,selectedRange:[t,i]})),k(s),g(!1),S(a),y(!p)},onSelectDate:t=>{s?.dateRangeSelectionOptions&&(s.dateRangeSelectionOptions.selectedDates=[t,t],u({...s,selectedRange:[t,t]})),k(s),g(!1),S([t,t]),y(!p)}})})]})}),document.body)]})})},I=({eachOption:e,selectedOption:r,selectedDate:n,onClickingEachItem:u,rangeSelection:x,isLastItem:w,isFirstItem:E,showTimePicker:m})=>o.jsxs(A.ItemMenuContainer,{isFirstItem:E,isLastItem:w,onClick:()=>u(e),isSelected:e.isCustom?e.key==r?.key&&!!n:e.key==r?.key,children:[o.jsx(R.BodySecondary,{color:e.key==r?.key?D.BASE_COLORS.positive[900]:D.BASE_COLORS.grayscale[900],children:e.label}),e.subLabel?o.jsx(R.BodyCaption,{style:{color:D.BASE_COLORS.grayscale[700]},children:e.subLabel}):o.jsx(o.Fragment,{}),n&&r?.isCustom&&e.key==r?.key&&o.jsx(R.BodyCaption,{style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"},children:x?`${c(n[0],m)} to ${c(n[1],m)}`:`${c(n[0],m)}`})]},e.key),c=(e,r)=>{const n=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(r){const u=e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0});return`${n} (${u})`}return n};exports.AnalyticsDropdown=z;exports.EachItem=I;exports.formatDate=c;
 //# sourceMappingURL=AnalyticsDropdown.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","setDropdown","forceState","prevState","handleClickOutside","event","jsx","Fragment","jsxs","MainDropdown","Dropdown","DEFAULT_THEME","formatDate","ReactDOM","toggleCalender","eachOption","index","EachItem","option","endDate","startDate","DatePicker","selectedStartDate","selectedEndDate","updatedDates","onClickingEachItem","rangeSelection","isLastItem","isFirstItem","ItemMenuContainer","BASE_COLORS","BodyCaption","dateVal","includeTime","dateString","timeString"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","setDropdown","forceState","prevState","handleClickOutside","event","jsx","Fragment","jsxs","MainDropdown","Dropdown","DEFAULT_THEME","formatDate","ReactDOM","toggleCalender","eachOption","index","EachItem","option","endDate","startDate","DatePicker","selectedStartDate","selectedEndDate","updatedDates","onClickingEachItem","rangeSelection","isLastItem","isFirstItem","ItemMenuContainer","BASE_COLORS","BodyCaption","dateVal","includeTime","dateString","timeString"],"mappings":"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"}

package/dist/cjs/components/carousel-preview/CarouselPreview.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),I=require("../../assets/icons/aiContentIcon.svg.js"),v=require("react"),y=require("react-slick");require("slick-carousel/slick/slick-theme.css");require("slick-carousel/slick/slick.css");const q=require("./CarouselPreview.style.js"),S=require("./CarouselPreviewCard.js"),R=require("../template-preview/TemplatePreview.styled.js"),T=require("../template-context-mapper/context/templateModalContext.js"),m=require("../template-preview/helpers/templateMiscHelper.js"),_=require("../template-preview/RCS/RCSPreview.styled.js"),j=require("./CustomCarouselArrows.js"),g=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},A=g(v),M=g(y),P=A.default.forwardRef(({channel:e,template:t,isPreview:a,removeBottomBorder:i,borderRadius:o,showArrows:c,hideBorder:d,showSampleValues:n})=>{const{sliderRef:u,selectedCarouselIndex:C,cardCount:l,setIsCarouselHovered:f,cardIndex:s,showVariablePicker:p}=T.useTemplateModalContext(),h=s==-1?m.determineCardIndex(e):s,x=t?.components?.[h]?.cards,w=x?.length?r.jsx(b,{cards:x,cardCount:l??0,selectedCarouselIndex:C??-1,sliderRef:u,isPreview:a,showArrows:c,channel:e,template:t,setIsCarouselHovered:f,showSampleValues:!!n,showVariablePicker:p}):null;return m.isRCSChannel(e)?r.jsx(_.RCSCarousalContainer,{borderRadius:o,children:w}):r.jsxs(q.Container,{removeBottomBorder:i,borderRadius:o,hideBorder:d,children:[(!!t?.aiContentConfigId||!!t?.isAiGenerated)&&r.jsx(R.AiContentBadge,{children:r.jsx(I.default,{width:48,height:48})}),r.jsx(S.default,{channel:e,currentTemplate:t,carouselCardIndex:-1,isPreview:a,width:"77%"}),w]})}),b=({cards:e,cardCount:t,selectedCarouselIndex:a,sliderRef:i,isPreview:o,showArrows:c,channel:d,template:n,setIsCarouselHovered:u,showSampleValues:C,showVariablePicker:l})=>r.jsx(q.CarouselSlickContainer,{cardCount:t,selectedCarouselIndex:a,onMouseEnter:()=>!l&&u?.(!0),onMouseLeave:()=>!l&&u?.(!1),children:r.jsx(M.default,{ref:i,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!o,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:r.jsx(j.CustomCarouselRightArrow,{isPreview:o??!1}),prevArrow:r.jsx(j.CustomCarouselLeftArrow,{isPreview:o??!1}),children:e?.map((f,s)=>{const p={components:f.components,mapping:n?.mapping?.cards?.[s],content:n?.content,templateType:n?.templateType};return r.jsx(S.default,{channel:d,currentTemplate:p,carouselCardIndex:s,isPreview:o,width:"100%",showSampleValues:C},s)})})});exports.CarouselPreview=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),I=require("../../assets/icons/aiContentIcon.svg.js"),v=require("react"),y=require("react-slick"),S=require("./CarouselPreview.style.js"),g=require("./CarouselPreviewCard.js"),R=require("../template-preview/TemplatePreview.styled.js"),T=require("../template-context-mapper/context/templateModalContext.js"),m=require("../template-preview/helpers/templateMiscHelper.js"),_=require("../template-preview/RCS/RCSPreview.styled.js"),j=require("./CustomCarouselArrows.js"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},A=h(v),M=h(y),P=A.default.forwardRef(({channel:e,template:t,isPreview:a,removeBottomBorder:c,borderRadius:o,showArrows:d,hideBorder:i,showSampleValues:n})=>{const{sliderRef:u,selectedCarouselIndex:C,cardCount:l,setIsCarouselHovered:f,cardIndex:s,showVariablePicker:p}=T.useTemplateModalContext(),q=s==-1?m.determineCardIndex(e):s,x=t?.components?.[q]?.cards,w=x?.length?r.jsx(b,{cards:x,cardCount:l??0,selectedCarouselIndex:C??-1,sliderRef:u,isPreview:a,showArrows:d,channel:e,template:t,setIsCarouselHovered:f,showSampleValues:!!n,showVariablePicker:p}):null;return m.isRCSChannel(e)?r.jsx(_.RCSCarousalContainer,{borderRadius:o,children:w}):r.jsxs(S.Container,{removeBottomBorder:c,borderRadius:o,hideBorder:i,children:[(!!t?.aiContentConfigId||!!t?.isAiGenerated)&&r.jsx(R.AiContentBadge,{children:r.jsx(I.default,{width:48,height:48})}),r.jsx(g.default,{channel:e,currentTemplate:t,carouselCardIndex:-1,isPreview:a,width:"77%"}),w]})}),b=({cards:e,cardCount:t,selectedCarouselIndex:a,sliderRef:c,isPreview:o,showArrows:d,channel:i,template:n,setIsCarouselHovered:u,showSampleValues:C,showVariablePicker:l})=>r.jsx(S.CarouselSlickContainer,{cardCount:t,selectedCarouselIndex:a,onMouseEnter:()=>!l&&u?.(!0),onMouseLeave:()=>!l&&u?.(!1),children:r.jsx(M.default,{ref:c,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!o,centerMode:!0,arrows:d,adaptiveHeight:!0,nextArrow:r.jsx(j.CustomCarouselRightArrow,{isPreview:o??!1}),prevArrow:r.jsx(j.CustomCarouselLeftArrow,{isPreview:o??!1}),children:e?.map((f,s)=>{const p={components:f.components,mapping:n?.mapping?.cards?.[s],content:n?.content,templateType:n?.templateType};return r.jsx(g.default,{channel:i,currentTemplate:p,carouselCardIndex:s,isPreview:o,width:"100%",showSampleValues:C},s)})})});exports.CarouselPreview=P;
 //# sourceMappingURL=CarouselPreview.js.map

package/dist/cjs/components/carousel-preview/CarouselPreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPreview.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport AiContentIcon from '@src/assets/icons/aiContentIcon.svg';\nimport React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick-theme.css';\nimport 'slick-carousel/slick/slick.css';\nimport {\n\tCarouselSlickContainer,\n\tContainer,\n} from '@src/components/carousel-preview/CarouselPreview.style';\nimport CarouselPreviewCard from '@src/components/carousel-preview/CarouselPreviewCard';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateCards,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { AiContentBadge } from '@src/components/template-preview/TemplatePreview.styled';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\nimport {\n\tdetermineCardIndex,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { AllTemplateTypes } from '../template-preview/models/types';\nimport { RCSCarousalContainer } from '../template-preview/RCS/RCSPreview.styled';\nimport {\n\tCustomCarouselLeftArrow,\n\tCustomCarouselRightArrow,\n} from './CustomCarouselArrows';\n\nexport const CarouselPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t\tisPreview?: boolean;\n\t\tremoveBottomBorder?: boolean;\n\t\tborderRadius?: string;\n\t\tshowArrows?: boolean;\n\t\thideBorder?: boolean;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\ttemplate,\n\t\tisPreview,\n\t\tremoveBottomBorder,\n\t\tborderRadius,\n\t\tshowArrows,\n\t\thideBorder,\n\t\tshowSampleValues,\n\t}) => {\n\t\tconst {\n\t\t\tsliderRef,\n\t\t\tselectedCarouselIndex,\n\t\t\tcardCount,\n\t\t\tsetIsCarouselHovered,\n\t\t\tcardIndex: cardsIndex,\n\t\t\tshowVariablePicker,\n\t\t} = useTemplateModalContext();\n\n\t\tconst cardIndex =\n\t\t\tcardsIndex == -1 ? determineCardIndex(channel) : cardsIndex;\n\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\tcardIndex\n\t\t]?.cards;\n\n\t\tconst carouselSlider = cards?.length ? (\n\t\t\t<CarouselSlider\n\t\t\t\tcards={cards}\n\t\t\t\tcardCount={cardCount ?? 0}\n\t\t\t\tselectedCarouselIndex={selectedCarouselIndex ?? -1}\n\t\t\t\tsliderRef={sliderRef}\n\t\t\t\tisPreview={isPreview}\n\t\t\t\tshowArrows={showArrows}\n\t\t\t\tchannel={channel}\n\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\tsetIsCarouselHovered={setIsCarouselHovered}\n\t\t\t\tshowSampleValues={!!showSampleValues}\n\t\t\t\tshowVariablePicker={showVariablePicker}\n\t\t\t/>\n\t\t) : null;\n\n\t\tif (isRCSChannel(channel)) {\n\t\t\treturn (\n\t\t\t\t<RCSCarousalContainer borderRadius={borderRadius}>\n\t\t\t\t\t{carouselSlider}\n\t\t\t\t</RCSCarousalContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tremoveBottomBorder={removeBottomBorder}\n\t\t\t\tborderRadius={borderRadius}\n\t\t\t\thideBorder={hideBorder}\n\t\t\t>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\|\n\t\t\t\t\t!!template?.['isAiGenerated']) && (\n\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t</AiContentBadge>\n\t\t\t\t)}\n\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tcurrentTemplate={template}\n\t\t\t\t\tcarouselCardIndex={-1}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twidth=\"77%\"\n\t\t\t\t/>\n\t\t\t\t{carouselSlider}\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nconst CarouselSlider = ({\n\tcards,\n\tcardCount,\n\tselectedCarouselIndex,\n\tsliderRef,\n\tisPreview,\n\tshowArrows,\n\tchannel,\n\ttemplate,\n\tsetIsCarouselHovered,\n\tshowSampleValues,\n\tshowVariablePicker,\n}: {\n\tcards: WhatsAppCarouselTemplateCards[];\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n\tsliderRef: any;\n\tisPreview?: boolean;\n\tshowArrows?: boolean;\n\tchannel: CHANNEL_TYPE;\n\ttemplate: WhatsAppCarouselTemplate;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tshowSampleValues?: boolean;\n\tshowVariablePicker?: boolean;\n}) => (\n\t<CarouselSlickContainer\n\t\tcardCount={cardCount}\n\t\tselectedCarouselIndex={selectedCarouselIndex}\n\t\tonMouseEnter={() => !showVariablePicker && setIsCarouselHovered?.(true)}\n\t\tonMouseLeave={() => !showVariablePicker && setIsCarouselHovered?.(false)}\n\t>\n\t\t<Slider\n\t\t\tref={sliderRef}\n\t\t\tswipeToSlide\n\t\t\tdraggable\n\t\t\tswipe\n\t\t\tinfinite={false}\n\t\t\tfocusOnSelect={!isPreview}\n\t\t\tcenterMode\n\t\t\tarrows={showArrows}\n\t\t\tadaptiveHeight\n\t\t\tnextArrow={<CustomCarouselRightArrow isPreview={isPreview ?? false} />}\n\t\t\tprevArrow={<CustomCarouselLeftArrow isPreview={isPreview ?? false} />}\n\t\t>\n\t\t\t{cards?.map((carousel, index) => {\n\t\t\t\tconst currentCarousel = {\n\t\t\t\t\tcomponents: carousel.components,\n\t\t\t\t\tmapping: template?.mapping?.cards?.[index],\n\t\t\t\t\tcontent: template?.['content'],\n\t\t\t\t\ttemplateType: template?.['templateType'],\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tcurrentTemplate={currentCarousel}\n\t\t\t\t\t\tcarouselCardIndex={index}\n\t\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Slider>\n\t</CarouselSlickContainer>\n);\n"],"names":["CarouselPreview","React","channel","template","isPreview","removeBottomBorder","borderRadius","showArrows","hideBorder","showSampleValues","sliderRef","selectedCarouselIndex","cardCount","setIsCarouselHovered","cardsIndex","showVariablePicker","useTemplateModalContext","cardIndex","determineCardIndex","cards","carouselSlider","jsx","CarouselSlider","isRCSChannel","RCSCarousalContainer","jsxs","Container","AiContentBadge","AiContentIcon","CarouselPreviewCard","CarouselSlickContainer","Slider","CustomCarouselRightArrow","CustomCarouselLeftArrow","carousel","index","currentCarousel"],"mappings":"~~6uBA6BaA~~,EAAkBC,EAAAA,QAAM,WAapC,CAAC,CACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,iBAAAC,CAAA,IACK,CACL,KAAM,CACL,UAAAC,EACA,sBAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,UAAWC,EACX,mBAAAC,CAAA,EACGC,0BAAA,EAEEC,EACLH,GAAc,GAAKI,EAAAA,mBAAmBhB,CAAO,EAAIY,EAC5CK,EAAShB,GAAuC,aACrDc,CACD,GAAG,MAEGG,EAAiBD,GAAO,OAC7BE,EAAAA,IAACC,EAAA,CACA,MAAAH,EACA,UAAWP,GAAa,EACxB,sBAAuBD,GAAyB,GAChD,UAAAD,EACA,UAAAN,EACA,WAAAG,EACA,QAAAL,EACA,SAAAC,EACA,qBAAAU,EACA,iBAAkB,CAAC,CAACJ,EACpB,mBAAAM,CAAA,CAAA,EAEE,KAEJ,OAAIQ,EAAAA,aAAarB,CAAO,EAEtBmB,EAAAA,IAACG,EAAAA,qBAAA,CAAqB,aAAAlB,EACpB,SAAAc,CAAA,CACF,EAKDK,EAAAA,KAACC,EAAAA,UAAA,CACA,mBAAArB,EACA,aAAAC,EACA,WAAAE,EAEE,SAAA,EAAA,CAAC,CAACL,GAAW,mBACd,CAAC,CAACA,GAAW,gBACbkB,MAACM,EAAAA,gBACA,SAAAN,EAAAA,IAACO,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EACvC,EAEDP,EAAAA,IAACQ,EAAAA,QAAA,CACA,QAAA3B,EACA,gBAAiBC,EACjB,kBAAmB,GACnB,UAAAC,EACA,MAAM,KAAA,CAAA,EAENgB,CAAA,CAAA,CAAA,CAGJ,CACD,EAEME,EAAiB,CAAC,CACvB,MAAAH,EACA,UAAAP,EACA,sBAAAD,EACA,UAAAD,EACA,UAAAN,EACA,WAAAG,EACA,QAAAL,EACA,SAAAC,EACA,qBAAAU,EACA,iBAAAJ,EACA,mBAAAM,CACD,IAaCM,EAAAA,IAACS,EAAAA,uBAAA,CACA,UAAAlB,EACA,sBAAAD,EACA,aAAc,IAAM,CAACI,GAAsBF,IAAuB,EAAI,EACtE,aAAc,IAAM,CAACE,GAAsBF,IAAuB,EAAK,EAEvE,SAAAQ,EAAAA,IAACU,EAAAA,QAAA,CACA,IAAKrB,EACL,aAAY,GACZ,UAAS,GACT,MAAK,GACL,SAAU,GACV,cAAe,CAACN,EAChB,WAAU,GACV,OAAQG,EACR,eAAc,GACd,UAAWc,EAAAA,IAACW,EAAAA,yBAAA,CAAyB,UAAW5B,GAAa,GAAO,EACpE,UAAWiB,EAAAA,IAACY,EAAAA,wBAAA,CAAwB,UAAW7B,GAAa,GAAO,EAElE,SAAAe,GAAO,IAAI,CAACe,EAAUC,IAAU,CAChC,MAAMC,EAAkB,CACvB,WAAYF,EAAS,WACrB,QAAS/B,GAAU,SAAS,QAAQgC,CAAK,EACzC,QAAShC,GAAW,QACpB,aAAcA,GAAW,YAAc,EAExC,OACCkB,EAAAA,IAACQ,EAAAA,QAAA,CAEA,QAAA3B,EACA,gBAAiBkC,EACjB,kBAAmBD,EACnB,UAAA/B,EACA,MAAM,OACN,iBAAAK,CAAA,EANK0B,CAAA,CASR,CAAC,CAAA,CAAA,CACF,CACD"}
1	+ {"version":3,"file":"CarouselPreview.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport AiContentIcon from '@src/assets/icons/aiContentIcon.svg';\nimport React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick-theme.css';\nimport 'slick-carousel/slick/slick.css';\nimport {\n\tCarouselSlickContainer,\n\tContainer,\n} from '@src/components/carousel-preview/CarouselPreview.style';\nimport CarouselPreviewCard from '@src/components/carousel-preview/CarouselPreviewCard';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateCards,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { AiContentBadge } from '@src/components/template-preview/TemplatePreview.styled';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\nimport {\n\tdetermineCardIndex,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { AllTemplateTypes } from '../template-preview/models/types';\nimport { RCSCarousalContainer } from '../template-preview/RCS/RCSPreview.styled';\nimport {\n\tCustomCarouselLeftArrow,\n\tCustomCarouselRightArrow,\n} from './CustomCarouselArrows';\n\nexport const CarouselPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t\tisPreview?: boolean;\n\t\tremoveBottomBorder?: boolean;\n\t\tborderRadius?: string;\n\t\tshowArrows?: boolean;\n\t\thideBorder?: boolean;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\ttemplate,\n\t\tisPreview,\n\t\tremoveBottomBorder,\n\t\tborderRadius,\n\t\tshowArrows,\n\t\thideBorder,\n\t\tshowSampleValues,\n\t}) => {\n\t\tconst {\n\t\t\tsliderRef,\n\t\t\tselectedCarouselIndex,\n\t\t\tcardCount,\n\t\t\tsetIsCarouselHovered,\n\t\t\tcardIndex: cardsIndex,\n\t\t\tshowVariablePicker,\n\t\t} = useTemplateModalContext();\n\n\t\tconst cardIndex =\n\t\t\tcardsIndex == -1 ? determineCardIndex(channel) : cardsIndex;\n\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\tcardIndex\n\t\t]?.cards;\n\n\t\tconst carouselSlider = cards?.length ? (\n\t\t\t<CarouselSlider\n\t\t\t\tcards={cards}\n\t\t\t\tcardCount={cardCount ?? 0}\n\t\t\t\tselectedCarouselIndex={selectedCarouselIndex ?? -1}\n\t\t\t\tsliderRef={sliderRef}\n\t\t\t\tisPreview={isPreview}\n\t\t\t\tshowArrows={showArrows}\n\t\t\t\tchannel={channel}\n\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\tsetIsCarouselHovered={setIsCarouselHovered}\n\t\t\t\tshowSampleValues={!!showSampleValues}\n\t\t\t\tshowVariablePicker={showVariablePicker}\n\t\t\t/>\n\t\t) : null;\n\n\t\tif (isRCSChannel(channel)) {\n\t\t\treturn (\n\t\t\t\t<RCSCarousalContainer borderRadius={borderRadius}>\n\t\t\t\t\t{carouselSlider}\n\t\t\t\t</RCSCarousalContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tremoveBottomBorder={removeBottomBorder}\n\t\t\t\tborderRadius={borderRadius}\n\t\t\t\thideBorder={hideBorder}\n\t\t\t>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\|\n\t\t\t\t\t!!template?.['isAiGenerated']) && (\n\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t</AiContentBadge>\n\t\t\t\t)}\n\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tcurrentTemplate={template}\n\t\t\t\t\tcarouselCardIndex={-1}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twidth=\"77%\"\n\t\t\t\t/>\n\t\t\t\t{carouselSlider}\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nconst CarouselSlider = ({\n\tcards,\n\tcardCount,\n\tselectedCarouselIndex,\n\tsliderRef,\n\tisPreview,\n\tshowArrows,\n\tchannel,\n\ttemplate,\n\tsetIsCarouselHovered,\n\tshowSampleValues,\n\tshowVariablePicker,\n}: {\n\tcards: WhatsAppCarouselTemplateCards[];\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n\tsliderRef: any;\n\tisPreview?: boolean;\n\tshowArrows?: boolean;\n\tchannel: CHANNEL_TYPE;\n\ttemplate: WhatsAppCarouselTemplate;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tshowSampleValues?: boolean;\n\tshowVariablePicker?: boolean;\n}) => (\n\t<CarouselSlickContainer\n\t\tcardCount={cardCount}\n\t\tselectedCarouselIndex={selectedCarouselIndex}\n\t\tonMouseEnter={() => !showVariablePicker && setIsCarouselHovered?.(true)}\n\t\tonMouseLeave={() => !showVariablePicker && setIsCarouselHovered?.(false)}\n\t>\n\t\t<Slider\n\t\t\tref={sliderRef}\n\t\t\tswipeToSlide\n\t\t\tdraggable\n\t\t\tswipe\n\t\t\tinfinite={false}\n\t\t\tfocusOnSelect={!isPreview}\n\t\t\tcenterMode\n\t\t\tarrows={showArrows}\n\t\t\tadaptiveHeight\n\t\t\tnextArrow={<CustomCarouselRightArrow isPreview={isPreview ?? false} />}\n\t\t\tprevArrow={<CustomCarouselLeftArrow isPreview={isPreview ?? false} />}\n\t\t>\n\t\t\t{cards?.map((carousel, index) => {\n\t\t\t\tconst currentCarousel = {\n\t\t\t\t\tcomponents: carousel.components,\n\t\t\t\t\tmapping: template?.mapping?.cards?.[index],\n\t\t\t\t\tcontent: template?.['content'],\n\t\t\t\t\ttemplateType: template?.['templateType'],\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tcurrentTemplate={currentCarousel}\n\t\t\t\t\t\tcarouselCardIndex={index}\n\t\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Slider>\n\t</CarouselSlickContainer>\n);\n"],"names":["CarouselPreview","React","channel","template","isPreview","removeBottomBorder","borderRadius","showArrows","hideBorder","showSampleValues","sliderRef","selectedCarouselIndex","cardCount","setIsCarouselHovered","cardsIndex","showVariablePicker","useTemplateModalContext","cardIndex","determineCardIndex","cards","carouselSlider","jsx","CarouselSlider","isRCSChannel","RCSCarousalContainer","jsxs","Container","AiContentBadge","AiContentIcon","CarouselPreviewCard","CarouselSlickContainer","Slider","CustomCarouselRightArrow","CustomCarouselLeftArrow","carousel","index","currentCarousel"],"mappings":"6oBA6BaA,EAAkBC,EAAAA,QAAM,WAapC,CAAC,CACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,iBAAAC,CAAA,IACK,CACL,KAAM,CACL,UAAAC,EACA,sBAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,UAAWC,EACX,mBAAAC,CAAA,EACGC,0BAAA,EAEEC,EACLH,GAAc,GAAKI,EAAAA,mBAAmBhB,CAAO,EAAIY,EAC5CK,EAAShB,GAAuC,aACrDc,CACD,GAAG,MAEGG,EAAiBD,GAAO,OAC7BE,EAAAA,IAACC,EAAA,CACA,MAAAH,EACA,UAAWP,GAAa,EACxB,sBAAuBD,GAAyB,GAChD,UAAAD,EACA,UAAAN,EACA,WAAAG,EACA,QAAAL,EACA,SAAAC,EACA,qBAAAU,EACA,iBAAkB,CAAC,CAACJ,EACpB,mBAAAM,CAAA,CAAA,EAEE,KAEJ,OAAIQ,EAAAA,aAAarB,CAAO,EAEtBmB,EAAAA,IAACG,EAAAA,qBAAA,CAAqB,aAAAlB,EACpB,SAAAc,CAAA,CACF,EAKDK,EAAAA,KAACC,EAAAA,UAAA,CACA,mBAAArB,EACA,aAAAC,EACA,WAAAE,EAEE,SAAA,EAAA,CAAC,CAACL,GAAW,mBACd,CAAC,CAACA,GAAW,gBACbkB,MAACM,EAAAA,gBACA,SAAAN,EAAAA,IAACO,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EACvC,EAEDP,EAAAA,IAACQ,EAAAA,QAAA,CACA,QAAA3B,EACA,gBAAiBC,EACjB,kBAAmB,GACnB,UAAAC,EACA,MAAM,KAAA,CAAA,EAENgB,CAAA,CAAA,CAAA,CAGJ,CACD,EAEME,EAAiB,CAAC,CACvB,MAAAH,EACA,UAAAP,EACA,sBAAAD,EACA,UAAAD,EACA,UAAAN,EACA,WAAAG,EACA,QAAAL,EACA,SAAAC,EACA,qBAAAU,EACA,iBAAAJ,EACA,mBAAAM,CACD,IAaCM,EAAAA,IAACS,EAAAA,uBAAA,CACA,UAAAlB,EACA,sBAAAD,EACA,aAAc,IAAM,CAACI,GAAsBF,IAAuB,EAAI,EACtE,aAAc,IAAM,CAACE,GAAsBF,IAAuB,EAAK,EAEvE,SAAAQ,EAAAA,IAACU,EAAAA,QAAA,CACA,IAAKrB,EACL,aAAY,GACZ,UAAS,GACT,MAAK,GACL,SAAU,GACV,cAAe,CAACN,EAChB,WAAU,GACV,OAAQG,EACR,eAAc,GACd,UAAWc,EAAAA,IAACW,EAAAA,yBAAA,CAAyB,UAAW5B,GAAa,GAAO,EACpE,UAAWiB,EAAAA,IAACY,EAAAA,wBAAA,CAAwB,UAAW7B,GAAa,GAAO,EAElE,SAAAe,GAAO,IAAI,CAACe,EAAUC,IAAU,CAChC,MAAMC,EAAkB,CACvB,WAAYF,EAAS,WACrB,QAAS/B,GAAU,SAAS,QAAQgC,CAAK,EACzC,QAAShC,GAAW,QACpB,aAAcA,GAAW,YAAc,EAExC,OACCkB,EAAAA,IAACQ,EAAAA,QAAA,CAEA,QAAA3B,EACA,gBAAiBkC,EACjB,kBAAmBD,EACnB,UAAA/B,EACA,MAAM,OACN,iBAAAK,CAAA,EANK0B,CAAA,CASR,CAAC,CAAA,CAAA,CACF,CACD"}

package/dist/cjs/components/floating-action-button/FloatingActionButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("bootstrap/dist/css/bootstrap.min.css");const B=require("react"),C=require("react-bootstrap"),O=require("../../constants/Theme.js"),P=require("../TypographyStyle.js"),j=require("../../assets/icons/question-mark.svg.js"),o=require("./FloatingActionButton.styles.js"),w=require("../tooltips/Tooltip.js"),T=u=>{const{width:i,height:r,color:l,onClick:c,icon:n,tooltipPlacement:s,tooltipText:d,tootipWidth:a,isRound:e}=u;return d?t.jsx(w.Tooltip,{tooltipContent:t.jsx(o.TooltipStyled,{tooltipWidth:a,children:t.jsx(P.BodyCaption,{color:O.COLORS.content.primaryInverse,children:u.tooltipText})}),placement:s,body:"",children:t.jsx(o.FloatingActionButtonContainer,{width:i,height:r,color:l,onClick:c,isRound:e,children:n||t.jsx(j.default,{width:22,height:22})})}):t.jsx(t.Fragment,{children:t.jsx(o.FloatingActionButtonContainer,{width:i,height:r,color:l,onClick:c,isRound:e,children:n||t.jsx(j.default,{width:22,height:22})})})},D=u=>{const{icon:i,onClick:r,children:l,tooltipText:c,isRound:n=!0,width:s=48,height:d=48,color:a=O.COLORS.background.inverse,position:e=o.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:m=20,buttonPaddingVertical:F=20,zIndex:y=1,tooltipPlacement:h="right",dropPosition:g=o.DROP_POSITION.DOWN,menuAligment:S=o.MENU_ALIGNMENT.END,tootipWidth:p}=u,[x,q]=B.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(o.FloatingActionButtonOuterContainer,{width:s,height:d,color:a,position:e,buttonPaddingHorizontal:m,buttonPaddingVertical:F,zIndex:y,children:t.jsx(o.StyledDropdown,{onToggle:(A,I)=>{q(A)},drop:g,align:S,children:l?t.jsxs(t.Fragment,{children:[t.jsx(o.DropdownToggleContainer,{drop:g,children:t.jsx(T,{width:s,height:d,color:a,tooltipPlacement:h,onClick:r,tooltipText:c,icon:i,position:e,isRound:n,isDropdownOpen:x,tootipWidth:p})}),t.jsx(C.Dropdown.Menu,{children:l})]}):t.jsx(T,{width:s,height:d,color:a,tooltipPlacement:h,onClick:r,tooltipText:c,icon:i,position:e,isRound:n,isDropdownOpen:x,tootipWidth:p})})})})};exports.FloatingActionButton=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),C=require("react"),P=require("react-bootstrap"),O=require("../../constants/Theme.js"),q=require("../TypographyStyle.js"),j=require("../../assets/icons/question-mark.svg.js"),o=require("./FloatingActionButton.styles.js"),w=require("../tooltips/Tooltip.js"),T=u=>{const{width:i,height:r,color:l,onClick:c,icon:n,tooltipPlacement:s,tooltipText:d,tootipWidth:a,isRound:e}=u;return d?t.jsx(w.Tooltip,{tooltipContent:t.jsx(o.TooltipStyled,{tooltipWidth:a,children:t.jsx(q.BodyCaption,{color:O.COLORS.content.primaryInverse,children:u.tooltipText})}),placement:s,body:"",children:t.jsx(o.FloatingActionButtonContainer,{width:i,height:r,color:l,onClick:c,isRound:e,children:n||t.jsx(j.default,{width:22,height:22})})}):t.jsx(t.Fragment,{children:t.jsx(o.FloatingActionButtonContainer,{width:i,height:r,color:l,onClick:c,isRound:e,children:n||t.jsx(j.default,{width:22,height:22})})})},D=u=>{const{icon:i,onClick:r,children:l,tooltipText:c,isRound:n=!0,width:s=48,height:d=48,color:a=O.COLORS.background.inverse,position:e=o.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:m=20,buttonPaddingVertical:F=20,zIndex:y=1,tooltipPlacement:h="right",dropPosition:g=o.DROP_POSITION.DOWN,menuAligment:S=o.MENU_ALIGNMENT.END,tootipWidth:p}=u,[x,A]=C.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(o.FloatingActionButtonOuterContainer,{width:s,height:d,color:a,position:e,buttonPaddingHorizontal:m,buttonPaddingVertical:F,zIndex:y,children:t.jsx(o.StyledDropdown,{onToggle:(B,I)=>{A(B)},drop:g,align:S,children:l?t.jsxs(t.Fragment,{children:[t.jsx(o.DropdownToggleContainer,{drop:g,children:t.jsx(T,{width:s,height:d,color:a,tooltipPlacement:h,onClick:r,tooltipText:c,icon:i,position:e,isRound:n,isDropdownOpen:x,tootipWidth:p})}),t.jsx(P.Dropdown.Menu,{children:l})]}):t.jsx(T,{width:s,height:d,color:a,tooltipPlacement:h,onClick:r,tooltipText:c,icon:i,position:e,isRound:n,isDropdownOpen:x,tootipWidth:p})})})})};exports.FloatingActionButton=D;
 //# sourceMappingURL=FloatingActionButton.js.map

package/dist/cjs/components/floating-action-button/FloatingActionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingActionButton.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { COLORS } from '@src/constants/Theme';\nimport { Placement, Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport DefaultIcon from './../../assets/icons/question-mark.svg';\nimport {\n\tDROP_POSITION,\n\tDropdownToggleContainer,\n\tFAB_POSITION,\n\tFloatingActionButtonContainer,\n\tFloatingActionButtonOuterContainer,\n\tMENU_ALIGNMENT,\n\tStyledDropdown,\n\tTooltipStyled,\n} from './FloatingActionButton.styles';\n\nconst FloatingActionToggleButtonJSX: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth: number;\n\theight: number;\n\ticon?: JSX.Element;\n\tcolor: string;\n\tposition?: FAB_POSITION;\n\ttooltipText?: string;\n\ttootipWidth?: number;\n\ttooltipPlacement: Placement;\n\tisRound: boolean;\n\tisDropdownOpen: boolean;\n}> = (props) => {\n\tconst {\n\t\twidth,\n\t\theight,\n\t\tcolor,\n\t\tonClick,\n\t\ticon,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\ttootipWidth,\n\t\tisRound,\n\t} = props;\n\treturn tooltipText ? (\n\t\t<Tooltip\n\t\t\ttooltipContent={\n\t\t\t\t<TooltipStyled tooltipWidth={tootipWidth}>\n\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t{props.tooltipText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</TooltipStyled>\n\t\t\t}\n\t\t\tplacement={tooltipPlacement}\n\t\t\tbody={''}\n\t\t>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</Tooltip>\n\t) : (\n\t\t<>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</>\n\t);\n};\nexport const FloatingActionButton: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth?: number;\n\theight?: number;\n\ticon?: JSX.Element;\n\tcolor?: string;\n\tposition?: FAB_POSITION;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipText?: string;\n\ttooltipPlacement?: Placement;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\ttootipWidth?: number;\n}> = (props) => {\n\tconst {\n\t\ticon,\n\t\tonClick,\n\t\tchildren,\n\t\ttooltipText,\n\t\tisRound = true,\n\t\twidth = 48,\n\t\theight = 48,\n\t\tcolor = COLORS.background.inverse,\n\t\tposition = FAB_POSITION.TOP_LEFT,\n\t\tbuttonPaddingHorizontal = 20,\n\t\tbuttonPaddingVertical = 20,\n\t\tzIndex = 1,\n\t\ttooltipPlacement = 'right',\n\t\tdropPosition = DROP_POSITION.DOWN,\n\t\tmenuAligment = MENU_ALIGNMENT.END,\n\t\ttootipWidth,\n\t} = props;\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<FloatingActionButtonOuterContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tposition={position}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\tzIndex={zIndex}\n\t\t\t>\n\t\t\t\t<StyledDropdown\n\t\t\t\t\tonToggle={(nextShow: boolean, meta: any) => {\n\t\t\t\t\t\tsetIsDropdownOpen(nextShow);\n\t\t\t\t\t}}\n\t\t\t\t\tdrop={dropPosition}\n\t\t\t\t\talign={menuAligment}\n\t\t\t\t>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownToggleContainer drop={dropPosition}>\n\t\t\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownToggleContainer>\n\t\t\t\t\t\t\t<Dropdown.Menu>{children}</Dropdown.Menu>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</StyledDropdown>\n\t\t\t</FloatingActionButtonOuterContainer>\n\t\t</>\n\t);\n};\n"],"names":["FloatingActionToggleButtonJSX","props","width","height","color","onClick","icon","tooltipPlacement","tooltipText","tootipWidth","isRound","jsx","Tooltip","TooltipStyled","BodyCaption","COLORS","FloatingActionButtonContainer","DefaultIcon","Fragment","FloatingActionButton","children","position","FAB_POSITION","buttonPaddingHorizontal","buttonPaddingVertical","zIndex","dropPosition","DROP_POSITION","menuAligment","MENU_ALIGNMENT","isDropdownOpen","setIsDropdownOpen","useState","FloatingActionButtonOuterContainer","StyledDropdown","nextShow","meta","jsxs","DropdownToggleContainer","Dropdown"],"mappings":"~~2aAkBMA~~,EAaAC,GAAU,CACf,KAAM,CACL,MAAAC,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,QAAAC,CAAA,EACGT,EACJ,OAAOO,EACNG,EAAAA,IAACC,EAAAA,QAAA,CACA,eACCD,EAAAA,IAACE,gBAAA,CAAc,aAAcJ,EAC5B,SAAAE,EAAAA,IAACG,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,eACjC,SAAAd,EAAM,YACR,EACD,EAED,UAAWM,EACX,KAAM,GAEN,SAAAI,EAAAA,IAACK,EAAAA,8BAAA,CACA,MAAAd,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAK,EAEC,YAAcC,MAACM,EAAAA,SAAY,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,CACpD,CAAA,EAGDN,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACK,EAAAA,8BAAA,CACA,MAAAd,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAK,EAEC,YAAcC,MAACM,EAAAA,SAAY,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,EAErD,CAEF,EACaE,EAiBPlB,GAAU,CACf,KAAM,CACL,KAAAK,EACA,QAAAD,EACA,SAAAe,EACA,YAAAZ,EACA,QAAAE,EAAU,GACV,MAAAR,EAAQ,GACR,OAAAC,EAAS,GACT,MAAAC,EAAQW,EAAAA,OAAO,WAAW,QAC1B,SAAAM,EAAWC,EAAAA,aAAa,SACxB,wBAAAC,EAA0B,GAC1B,sBAAAC,EAAwB,GACxB,OAAAC,EAAS,EACT,iBAAAlB,EAAmB,QACnB,aAAAmB,EAAeC,EAAAA,cAAc,KAC7B,aAAAC,EAAeC,EAAAA,eAAe,IAC9B,YAAApB,CAAA,EACGR,EACE,CAAC6B,EAAgBC,CAAiB,EAAIC,EAAAA,SAAS,EAAK,EAE1D,OACCrB,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACsB,EAAAA,mCAAA,CACA,MAAA/B,EACA,OAAAC,EACA,MAAAC,EACA,SAAAiB,EACA,wBAAAE,EACA,sBAAAC,EACA,OAAAC,EAEA,SAAAd,EAAAA,IAACuB,EAAAA,eAAA,CACA,SAAU,CAACC,EAAmBC,IAAc,CAC3CL,EAAkBI,CAAQ,CAC3B,EACA,KAAMT,EACN,MAAOE,EAEN,WACAS,EAAAA,KAAAnB,EAAAA,SAAA,CACC,SAAA,CAAAP,EAAAA,IAAC2B,EAAAA,wBAAA,CAAwB,KAAMZ,EAC9B,SAAAf,EAAAA,IAACX,EAAA,CACA,MAAAE,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAG,EACA,QAAAF,EACA,YAAAG,EACA,KAAAF,EACA,SAAAe,EACA,QAAAX,EACA,eAAAoB,EACA,YAAArB,CAAA,CAAA,EAEF,EACAE,EAAAA,IAAC4B,EAAAA,SAAS,KAAT,CAAe,SAAAnB,CAAA,CAAS,CAAA,CAAA,CAC1B,EAEAT,EAAAA,IAACX,EAAA,CACA,MAAAE,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAG,EACA,QAAAF,EACA,YAAAG,EACA,KAAAF,EACA,SAAAe,EACA,QAAAX,EACA,eAAAoB,EACA,YAAArB,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,EAEF,CAEF"}
1	+ {"version":3,"file":"FloatingActionButton.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { COLORS } from '@src/constants/Theme';\nimport { Placement, Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport DefaultIcon from './../../assets/icons/question-mark.svg';\nimport {\n\tDROP_POSITION,\n\tDropdownToggleContainer,\n\tFAB_POSITION,\n\tFloatingActionButtonContainer,\n\tFloatingActionButtonOuterContainer,\n\tMENU_ALIGNMENT,\n\tStyledDropdown,\n\tTooltipStyled,\n} from './FloatingActionButton.styles';\n\nconst FloatingActionToggleButtonJSX: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth: number;\n\theight: number;\n\ticon?: JSX.Element;\n\tcolor: string;\n\tposition?: FAB_POSITION;\n\ttooltipText?: string;\n\ttootipWidth?: number;\n\ttooltipPlacement: Placement;\n\tisRound: boolean;\n\tisDropdownOpen: boolean;\n}> = (props) => {\n\tconst {\n\t\twidth,\n\t\theight,\n\t\tcolor,\n\t\tonClick,\n\t\ticon,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\ttootipWidth,\n\t\tisRound,\n\t} = props;\n\treturn tooltipText ? (\n\t\t<Tooltip\n\t\t\ttooltipContent={\n\t\t\t\t<TooltipStyled tooltipWidth={tootipWidth}>\n\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t{props.tooltipText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</TooltipStyled>\n\t\t\t}\n\t\t\tplacement={tooltipPlacement}\n\t\t\tbody={''}\n\t\t>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</Tooltip>\n\t) : (\n\t\t<>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</>\n\t);\n};\nexport const FloatingActionButton: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth?: number;\n\theight?: number;\n\ticon?: JSX.Element;\n\tcolor?: string;\n\tposition?: FAB_POSITION;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipText?: string;\n\ttooltipPlacement?: Placement;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\ttootipWidth?: number;\n}> = (props) => {\n\tconst {\n\t\ticon,\n\t\tonClick,\n\t\tchildren,\n\t\ttooltipText,\n\t\tisRound = true,\n\t\twidth = 48,\n\t\theight = 48,\n\t\tcolor = COLORS.background.inverse,\n\t\tposition = FAB_POSITION.TOP_LEFT,\n\t\tbuttonPaddingHorizontal = 20,\n\t\tbuttonPaddingVertical = 20,\n\t\tzIndex = 1,\n\t\ttooltipPlacement = 'right',\n\t\tdropPosition = DROP_POSITION.DOWN,\n\t\tmenuAligment = MENU_ALIGNMENT.END,\n\t\ttootipWidth,\n\t} = props;\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<FloatingActionButtonOuterContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tposition={position}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\tzIndex={zIndex}\n\t\t\t>\n\t\t\t\t<StyledDropdown\n\t\t\t\t\tonToggle={(nextShow: boolean, meta: any) => {\n\t\t\t\t\t\tsetIsDropdownOpen(nextShow);\n\t\t\t\t\t}}\n\t\t\t\t\tdrop={dropPosition}\n\t\t\t\t\talign={menuAligment}\n\t\t\t\t>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownToggleContainer drop={dropPosition}>\n\t\t\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownToggleContainer>\n\t\t\t\t\t\t\t<Dropdown.Menu>{children}</Dropdown.Menu>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</StyledDropdown>\n\t\t\t</FloatingActionButtonOuterContainer>\n\t\t</>\n\t);\n};\n"],"names":["FloatingActionToggleButtonJSX","props","width","height","color","onClick","icon","tooltipPlacement","tooltipText","tootipWidth","isRound","jsx","Tooltip","TooltipStyled","BodyCaption","COLORS","FloatingActionButtonContainer","DefaultIcon","Fragment","FloatingActionButton","children","position","FAB_POSITION","buttonPaddingHorizontal","buttonPaddingVertical","zIndex","dropPosition","DROP_POSITION","menuAligment","MENU_ALIGNMENT","isDropdownOpen","setIsDropdownOpen","useState","FloatingActionButtonOuterContainer","StyledDropdown","nextShow","meta","jsxs","DropdownToggleContainer","Dropdown"],"mappings":"qXAkBMA,EAaAC,GAAU,CACf,KAAM,CACL,MAAAC,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,QAAAC,CAAA,EACGT,EACJ,OAAOO,EACNG,EAAAA,IAACC,EAAAA,QAAA,CACA,eACCD,EAAAA,IAACE,gBAAA,CAAc,aAAcJ,EAC5B,SAAAE,EAAAA,IAACG,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,eACjC,SAAAd,EAAM,YACR,EACD,EAED,UAAWM,EACX,KAAM,GAEN,SAAAI,EAAAA,IAACK,EAAAA,8BAAA,CACA,MAAAd,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAK,EAEC,YAAcC,MAACM,EAAAA,SAAY,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,CACpD,CAAA,EAGDN,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACK,EAAAA,8BAAA,CACA,MAAAd,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAK,EAEC,YAAcC,MAACM,EAAAA,SAAY,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,EAErD,CAEF,EACaE,EAiBPlB,GAAU,CACf,KAAM,CACL,KAAAK,EACA,QAAAD,EACA,SAAAe,EACA,YAAAZ,EACA,QAAAE,EAAU,GACV,MAAAR,EAAQ,GACR,OAAAC,EAAS,GACT,MAAAC,EAAQW,EAAAA,OAAO,WAAW,QAC1B,SAAAM,EAAWC,EAAAA,aAAa,SACxB,wBAAAC,EAA0B,GAC1B,sBAAAC,EAAwB,GACxB,OAAAC,EAAS,EACT,iBAAAlB,EAAmB,QACnB,aAAAmB,EAAeC,EAAAA,cAAc,KAC7B,aAAAC,EAAeC,EAAAA,eAAe,IAC9B,YAAApB,CAAA,EACGR,EACE,CAAC6B,EAAgBC,CAAiB,EAAIC,EAAAA,SAAS,EAAK,EAE1D,OACCrB,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACsB,EAAAA,mCAAA,CACA,MAAA/B,EACA,OAAAC,EACA,MAAAC,EACA,SAAAiB,EACA,wBAAAE,EACA,sBAAAC,EACA,OAAAC,EAEA,SAAAd,EAAAA,IAACuB,EAAAA,eAAA,CACA,SAAU,CAACC,EAAmBC,IAAc,CAC3CL,EAAkBI,CAAQ,CAC3B,EACA,KAAMT,EACN,MAAOE,EAEN,WACAS,EAAAA,KAAAnB,EAAAA,SAAA,CACC,SAAA,CAAAP,EAAAA,IAAC2B,EAAAA,wBAAA,CAAwB,KAAMZ,EAC9B,SAAAf,EAAAA,IAACX,EAAA,CACA,MAAAE,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAG,EACA,QAAAF,EACA,YAAAG,EACA,KAAAF,EACA,SAAAe,EACA,QAAAX,EACA,eAAAoB,EACA,YAAArB,CAAA,CAAA,EAEF,EACAE,EAAAA,IAAC4B,EAAAA,SAAS,KAAT,CAAe,SAAAnB,CAAA,CAAS,CAAA,CAAA,CAC1B,EAEAT,EAAAA,IAACX,EAAA,CACA,MAAAE,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAG,EACA,QAAAF,EACA,YAAAG,EACA,KAAAF,EACA,SAAAe,EACA,QAAAX,EACA,eAAAoB,EACA,YAAArB,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,EAEF,CAEF"}

package/dist/cjs/components/image-cropper/BikImageCropper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),p=require("react-image-crop");require("react-image-crop/dist/ReactCrop.css");const j=require("../modals/styledModal.js"),I=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},b=I(p),m=t=>{const[c,u]=s.useState(!1),[d,C]=s.useState(void 0),[h,w]=s.useState({width:0,height:0}),[f,g]=s.useState(!1),x=async a=>{if(g(!0),t.src&&a?.width&&a?.height){const e=new Image;e.src=t.src;const i=e.naturalWidth/h.width,r=e.naturalHeight/h.height,n=await y(e,a,i,r);await t?.onCropComplete?.(n,c)}else await t?.onCropComplete?.(t.src,c);g(!1)},y=async(a,e,i,r)=>{const n=document.createElement("canvas");n.width=e.width,n.height=e.height;const l=n.getContext("2d");if(!l)throw new Error("Failed to get 2D context of canvas.");l.drawImage(a,e.x*i,e.y*r,e.width*i,e.height*r,0,0,e.width,e.height);try{return n.toDataURL("image/png")}catch{throw new Error("Failed to create blob for cropped image.")}};return o.jsx(j.StyledModal,{open:!0,onClose:t.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:f,onClick:()=>{x(d)}},children:o.jsx("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsx("div",{children:o.jsx(b.default,{crop:d,onChange:a=>{C(a)},circularCrop:!1,onDragStart:()=>{u(!0)},aspect:t.aspectRatio,children:o.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:t.src,alt:"image cropper",onLoad:a=>{const e=a.target,i=e.width;w({width:i,height:e.height})}})})})})})};exports.BikImageCropper=m;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("react"),p=require("react-image-crop"),j=require("../modals/styledModal.js"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},b=I(p),m=e=>{const[c,u]=r.useState(!1),[d,C]=r.useState(void 0),[h,w]=r.useState({width:0,height:0}),[f,g]=r.useState(!1),x=async a=>{if(g(!0),e.src&&a?.width&&a?.height){const t=new Image;t.src=e.src;const i=t.naturalWidth/h.width,s=t.naturalHeight/h.height,n=await y(t,a,i,s);await e?.onCropComplete?.(n,c)}else await e?.onCropComplete?.(e.src,c);g(!1)},y=async(a,t,i,s)=>{const n=document.createElement("canvas");n.width=t.width,n.height=t.height;const l=n.getContext("2d");if(!l)throw new Error("Failed to get 2D context of canvas.");l.drawImage(a,t.x*i,t.y*s,t.width*i,t.height*s,0,0,t.width,t.height);try{return n.toDataURL("image/png")}catch{throw new Error("Failed to create blob for cropped image.")}};return o.jsx(j.StyledModal,{open:!0,onClose:e.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:f,onClick:()=>{x(d)}},children:o.jsx("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsx("div",{children:o.jsx(b.default,{crop:d,onChange:a=>{C(a)},circularCrop:!1,onDragStart:()=>{u(!0)},aspect:e.aspectRatio,children:o.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:e.src,alt:"image cropper",onLoad:a=>{const t=a.target,i=t.width;w({width:i,height:t.height})}})})})})})};exports.BikImageCropper=m;exports.default=m;
 //# sourceMappingURL=BikImageCropper.js.map

package/dist/cjs/components/image-cropper/BikImageCropper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","e","imgElement","imgWidth"],"mappings":"~~4VAMaA~~,EAAmBC,GAAgC,CAC/D,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAA2B,MAAS,EACtD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,SAG3C,CAAE,MAAO,EAAG,OAAQ,EAAG,EACpB,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAE1CO,EAAqB,MAAOC,GAAqB,CAEtD,GADAF,EAAa,EAAI,EACbT,EAAM,KAAOW,GAAY,OAASA,GAAY,OAAQ,CACzD,MAAMC,EAAQ,IAAI,MAClBA,EAAM,IAAMZ,EAAM,IAElB,MAAMa,EAASD,EAAM,aAAeN,EAAgB,MAC9CQ,EAASF,EAAM,cAAgBN,EAAgB,OAC/CS,EAAmB,MAAMC,EAC9BJ,EACAD,EACAE,EACAC,CAAA,EAED,MAAMd,GAAO,iBAAiBe,EAAkBd,CAAS,CAC1D,MACC,MAAMD,GAAO,iBAAiBA,EAAM,IAAKC,CAAS,EAEnDQ,EAAa,EAAK,CACnB,EAEMO,EAAkB,MACvBJ,EACAR,EACAS,EACAC,IACqB,CACrB,MAAMG,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQb,EAAK,MACpBa,EAAO,OAASb,EAAK,OACrB,MAAMc,EAAMD,EAAO,WAAW,IAAI,EAElC,GAAI,CAACC,EACJ,MAAM,IAAI,MAAM,qCAAqC,EAGtDA,EAAI,UACHN,EACAR,EAAK,EAAIS,EACTT,EAAK,EAAIU,EACTV,EAAK,MAAQS,EACbT,EAAK,OAASU,EACd,EACA,EACAV,EAAK,MACLA,EAAK,MAAA,EAGN,GAAI,CAEH,OADqBa,EAAO,UAAU,WAAW,CAElD,MAAgB,CACf,MAAM,IAAI,MAAM,0CAA0C,CAC3D,CACD,EAEA,OACCE,EAAAA,IAACC,EAAAA,YAAA,CACA,KAAM,GACN,QAASpB,EAAM,SACf,uBAAwB,CAAE,MAAO,IAAK,UAAW,GAAA,EACjD,aAAc,aACd,cAAe,CACd,WAAY,OACZ,UAAAQ,EACA,QAAS,IAAM,CACdE,EAAmBN,CAAK,CACzB,CAAA,EAGD,SAAAe,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QAAA,EAGb,eAAC,MAAA,CACA,SAAAA,EAAAA,IAACE,EAAAA,QAAA,CACA,KAAAjB,EACA,SAAWkB,GAAM,CAChBjB,EAAQiB,CAAC,CACV,EACA,aAAc,GACd,YAAa,IAAM,CAClBpB,EAAa,EAAI,CAClB,EACA,OAAQF,EAAM,YAEd,SAAAmB,EAAAA,IAAC,MAAA,CACA,MAAO,CAAE,SAAU,IAAK,UAAW,IAAK,UAAW,SAAA,EACnD,IAAKnB,EAAM,IACX,IAAK,gBACL,OAASuB,GAAM,CACd,MAAMC,EAAaD,EAAE,OACfE,EAAWD,EAAW,MAC5BjB,EAAmB,CAClB,MAAOkB,EACP,OAAQD,EAAW,MAAA,CACnB,CACF,CAAA,CAAA,CACD,CAAA,CACD,CACD,CAAA,CAAA,CACD,CAAA,CAGH"}
1	+ {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","e","imgElement","imgWidth"],"mappings":"uSAMaA,EAAmBC,GAAgC,CAC/D,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAA2B,MAAS,EACtD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,SAG3C,CAAE,MAAO,EAAG,OAAQ,EAAG,EACpB,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAE1CO,EAAqB,MAAOC,GAAqB,CAEtD,GADAF,EAAa,EAAI,EACbT,EAAM,KAAOW,GAAY,OAASA,GAAY,OAAQ,CACzD,MAAMC,EAAQ,IAAI,MAClBA,EAAM,IAAMZ,EAAM,IAElB,MAAMa,EAASD,EAAM,aAAeN,EAAgB,MAC9CQ,EAASF,EAAM,cAAgBN,EAAgB,OAC/CS,EAAmB,MAAMC,EAC9BJ,EACAD,EACAE,EACAC,CAAA,EAED,MAAMd,GAAO,iBAAiBe,EAAkBd,CAAS,CAC1D,MACC,MAAMD,GAAO,iBAAiBA,EAAM,IAAKC,CAAS,EAEnDQ,EAAa,EAAK,CACnB,EAEMO,EAAkB,MACvBJ,EACAR,EACAS,EACAC,IACqB,CACrB,MAAMG,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQb,EAAK,MACpBa,EAAO,OAASb,EAAK,OACrB,MAAMc,EAAMD,EAAO,WAAW,IAAI,EAElC,GAAI,CAACC,EACJ,MAAM,IAAI,MAAM,qCAAqC,EAGtDA,EAAI,UACHN,EACAR,EAAK,EAAIS,EACTT,EAAK,EAAIU,EACTV,EAAK,MAAQS,EACbT,EAAK,OAASU,EACd,EACA,EACAV,EAAK,MACLA,EAAK,MAAA,EAGN,GAAI,CAEH,OADqBa,EAAO,UAAU,WAAW,CAElD,MAAgB,CACf,MAAM,IAAI,MAAM,0CAA0C,CAC3D,CACD,EAEA,OACCE,EAAAA,IAACC,EAAAA,YAAA,CACA,KAAM,GACN,QAASpB,EAAM,SACf,uBAAwB,CAAE,MAAO,IAAK,UAAW,GAAA,EACjD,aAAc,aACd,cAAe,CACd,WAAY,OACZ,UAAAQ,EACA,QAAS,IAAM,CACdE,EAAmBN,CAAK,CACzB,CAAA,EAGD,SAAAe,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QAAA,EAGb,eAAC,MAAA,CACA,SAAAA,EAAAA,IAACE,EAAAA,QAAA,CACA,KAAAjB,EACA,SAAWkB,GAAM,CAChBjB,EAAQiB,CAAC,CACV,EACA,aAAc,GACd,YAAa,IAAM,CAClBpB,EAAa,EAAI,CAClB,EACA,OAAQF,EAAM,YAEd,SAAAmB,EAAAA,IAAC,MAAA,CACA,MAAO,CAAE,SAAU,IAAK,UAAW,IAAK,UAAW,SAAA,EACnD,IAAKnB,EAAM,IACX,IAAK,gBACL,OAASuB,GAAM,CACd,MAAMC,EAAaD,EAAE,OACfE,EAAWD,EAAW,MAC5BjB,EAAmB,CAClB,MAAOkB,EACP,OAAQD,EAAW,MAAA,CACnB,CACF,CAAA,CAAA,CACD,CAAA,CACD,CACD,CAAA,CAAA,CACD,CAAA,CAGH"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { jsx as s, Fragment as Y, jsxs as x } from "react/jsx-runtime";
-import "bootstrap/dist/css/bootstrap.min.css";
 import { useState as S, useRef as K, useEffect as C } from "react";
 import { Dropdown as k } from "react-bootstrap";
 import Q from "react-dom";
@@ -7,7 +6,7 @@ import { DEFAULT_THEME as _, BASE_COLORS as h } from "../../constants/Theme.js";
 import { Caption as W, BodySecondary as q, BodyCaption as H } from "../TypographyStyle.js";
 import { MainDropdown as U, ItemMenuContainer as X } from "./CommonStyles.js";
 import { DatePicker as Z } from "../datePicker/DatePicker.js";
-const re = ({
+const ae = ({
   options: t,
   placeholder: r = "Select an option",
   selected: o,
@@ -253,7 +252,7 @@ const re = ({
   return o;
 };
 export {
-  re as AnalyticsDropdown,
+  ae as AnalyticsDropdown,
   V as EachItem,
   m as formatDate
 };

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","setDropdown","forceState","prevState","handleClickOutside","event","jsx","Fragment","jsxs","MainDropdown","Dropdown","DEFAULT_THEME","formatDate","ReactDOM","toggleCalender","eachOption","index","EachItem","option","endDate","startDate","DatePicker","selectedStartDate","selectedEndDate","updatedDates","onClickingEachItem","rangeSelection","isLastItem","isFirstItem","ItemMenuContainer","BASE_COLORS","BodyCaption","dateVal","includeTime","dateString","timeString"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","setDropdown","forceState","prevState","handleClickOutside","event","jsx","Fragment","jsxs","MainDropdown","Dropdown","DEFAULT_THEME","formatDate","ReactDOM","toggleCalender","eachOption","index","EachItem","option","endDate","startDate","DatePicker","selectedStartDate","selectedEndDate","updatedDates","onClickingEachItem","rangeSelection","isLastItem","isFirstItem","ItemMenuContainer","BASE_COLORS","BodyCaption","dateVal","includeTime","dateString","timeString"],"mappings":"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"}

package/dist/esm/components/carousel-preview/CarouselPreview.js CHANGED Viewed

@@ -1,9 +1,7 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
 import I from "../../assets/icons/aiContentIcon.svg.js";
 import S from "react";
 import A from "react-slick";
-import "slick-carousel/slick/slick-theme.css";
-import "slick-carousel/slick/slick.css";
 import { Container as T, CarouselSlickContainer as R } from "./CarouselPreview.style.js";
 import w from "./CarouselPreviewCard.js";
 import { AiContentBadge as v } from "../template-preview/TemplatePreview.styled.js";
@@ -11,10 +9,10 @@ import { useTemplateModalContext as M } from "../template-context-mapper/context
 import { determineCardIndex as j, isRCSChannel as y } from "../template-preview/helpers/templateMiscHelper.js";
 import { RCSCarousalContainer as L } from "../template-preview/RCS/RCSPreview.styled.js";
 import { CustomCarouselLeftArrow as _, CustomCarouselRightArrow as k } from "./CustomCarouselArrows.js";
-const P = S.forwardRef(
+const K = S.forwardRef(
   ({
     channel: t,
-    template: e,
+    template: r,
     isPreview: s,
     removeBottomBorder: c,
     borderRadius: o,
@@ -29,7 +27,7 @@ const P = S.forwardRef(
       setIsCarouselHovered: C,
       cardIndex: n,
       showVariablePicker: p
-    } = M(), g = n == -1 ? j(t) : n, f = e?.components?.[g]?.cards, h = f?.length ? /* @__PURE__ */ r(
+    } = M(), g = n == -1 ? j(t) : n, f = r?.components?.[g]?.cards, h = f?.length ? /* @__PURE__ */ e(
       B,
       {
         cards: f,
@@ -39,25 +37,25 @@ const P = S.forwardRef(
         isPreview: s,
         showArrows: l,
         channel: t,
-        template: e,
+        template: r,
         setIsCarouselHovered: C,
         showSampleValues: !!a,
         showVariablePicker: p
       }
     ) : null;
-    return y(t) ? /* @__PURE__ */ r(L, { borderRadius: o, children: h }) : /* @__PURE__ */ x(
+    return y(t) ? /* @__PURE__ */ e(L, { borderRadius: o, children: h }) : /* @__PURE__ */ x(
       T,
       {
         removeBottomBorder: c,
         borderRadius: o,
         hideBorder: u,
         children: [
-          (!!e?.aiContentConfigId || !!e?.isAiGenerated) && /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(I, { width: 48, height: 48 }) }),
-          /* @__PURE__ */ r(
+          (!!r?.aiContentConfigId || !!r?.isAiGenerated) && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(I, { width: 48, height: 48 }) }),
+          /* @__PURE__ */ e(
             w,
             {
               channel: t,
-              currentTemplate: e,
+              currentTemplate: r,
               carouselCardIndex: -1,
               isPreview: s,
               width: "77%"
@@ -70,7 +68,7 @@ const P = S.forwardRef(
   }
 ), B = ({
   cards: t,
-  cardCount: e,
+  cardCount: r,
   selectedCarouselIndex: s,
   sliderRef: c,
   isPreview: o,
@@ -80,14 +78,14 @@ const P = S.forwardRef(
   setIsCarouselHovered: i,
   showSampleValues: m,
   showVariablePicker: d
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ e(
   R,
   {
-    cardCount: e,
+    cardCount: r,
     selectedCarouselIndex: s,
     onMouseEnter: () => !d && i?.(!0),
     onMouseLeave: () => !d && i?.(!1),
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ e(
       A,
       {
         ref: c,
@@ -99,8 +97,8 @@ const P = S.forwardRef(
         centerMode: !0,
         arrows: l,
         adaptiveHeight: !0,
-        nextArrow: /* @__PURE__ */ r(k, { isPreview: o ?? !1 }),
-        prevArrow: /* @__PURE__ */ r(_, { isPreview: o ?? !1 }),
+        nextArrow: /* @__PURE__ */ e(k, { isPreview: o ?? !1 }),
+        prevArrow: /* @__PURE__ */ e(_, { isPreview: o ?? !1 }),
         children: t?.map((C, n) => {
           const p = {
             components: C.components,
@@ -108,7 +106,7 @@ const P = S.forwardRef(
             content: a?.content,
             templateType: a?.templateType
           };
-          return /* @__PURE__ */ r(
+          return /* @__PURE__ */ e(
             w,
             {
               channel: u,
@@ -126,6 +124,6 @@ const P = S.forwardRef(
   }
 );
 export {
-  P as CarouselPreview
+  K as CarouselPreview
 };
 //# sourceMappingURL=CarouselPreview.js.map

package/dist/esm/components/carousel-preview/CarouselPreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPreview.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport AiContentIcon from '@src/assets/icons/aiContentIcon.svg';\nimport React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick-theme.css';\nimport 'slick-carousel/slick/slick.css';\nimport {\n\tCarouselSlickContainer,\n\tContainer,\n} from '@src/components/carousel-preview/CarouselPreview.style';\nimport CarouselPreviewCard from '@src/components/carousel-preview/CarouselPreviewCard';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateCards,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { AiContentBadge } from '@src/components/template-preview/TemplatePreview.styled';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\nimport {\n\tdetermineCardIndex,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { AllTemplateTypes } from '../template-preview/models/types';\nimport { RCSCarousalContainer } from '../template-preview/RCS/RCSPreview.styled';\nimport {\n\tCustomCarouselLeftArrow,\n\tCustomCarouselRightArrow,\n} from './CustomCarouselArrows';\n\nexport const CarouselPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t\tisPreview?: boolean;\n\t\tremoveBottomBorder?: boolean;\n\t\tborderRadius?: string;\n\t\tshowArrows?: boolean;\n\t\thideBorder?: boolean;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\ttemplate,\n\t\tisPreview,\n\t\tremoveBottomBorder,\n\t\tborderRadius,\n\t\tshowArrows,\n\t\thideBorder,\n\t\tshowSampleValues,\n\t}) => {\n\t\tconst {\n\t\t\tsliderRef,\n\t\t\tselectedCarouselIndex,\n\t\t\tcardCount,\n\t\t\tsetIsCarouselHovered,\n\t\t\tcardIndex: cardsIndex,\n\t\t\tshowVariablePicker,\n\t\t} = useTemplateModalContext();\n\n\t\tconst cardIndex =\n\t\t\tcardsIndex == -1 ? determineCardIndex(channel) : cardsIndex;\n\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\tcardIndex\n\t\t]?.cards;\n\n\t\tconst carouselSlider = cards?.length ? (\n\t\t\t<CarouselSlider\n\t\t\t\tcards={cards}\n\t\t\t\tcardCount={cardCount ?? 0}\n\t\t\t\tselectedCarouselIndex={selectedCarouselIndex ?? -1}\n\t\t\t\tsliderRef={sliderRef}\n\t\t\t\tisPreview={isPreview}\n\t\t\t\tshowArrows={showArrows}\n\t\t\t\tchannel={channel}\n\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\tsetIsCarouselHovered={setIsCarouselHovered}\n\t\t\t\tshowSampleValues={!!showSampleValues}\n\t\t\t\tshowVariablePicker={showVariablePicker}\n\t\t\t/>\n\t\t) : null;\n\n\t\tif (isRCSChannel(channel)) {\n\t\t\treturn (\n\t\t\t\t<RCSCarousalContainer borderRadius={borderRadius}>\n\t\t\t\t\t{carouselSlider}\n\t\t\t\t</RCSCarousalContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tremoveBottomBorder={removeBottomBorder}\n\t\t\t\tborderRadius={borderRadius}\n\t\t\t\thideBorder={hideBorder}\n\t\t\t>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\|\n\t\t\t\t\t!!template?.['isAiGenerated']) && (\n\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t</AiContentBadge>\n\t\t\t\t)}\n\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tcurrentTemplate={template}\n\t\t\t\t\tcarouselCardIndex={-1}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twidth=\"77%\"\n\t\t\t\t/>\n\t\t\t\t{carouselSlider}\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nconst CarouselSlider = ({\n\tcards,\n\tcardCount,\n\tselectedCarouselIndex,\n\tsliderRef,\n\tisPreview,\n\tshowArrows,\n\tchannel,\n\ttemplate,\n\tsetIsCarouselHovered,\n\tshowSampleValues,\n\tshowVariablePicker,\n}: {\n\tcards: WhatsAppCarouselTemplateCards[];\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n\tsliderRef: any;\n\tisPreview?: boolean;\n\tshowArrows?: boolean;\n\tchannel: CHANNEL_TYPE;\n\ttemplate: WhatsAppCarouselTemplate;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tshowSampleValues?: boolean;\n\tshowVariablePicker?: boolean;\n}) => (\n\t<CarouselSlickContainer\n\t\tcardCount={cardCount}\n\t\tselectedCarouselIndex={selectedCarouselIndex}\n\t\tonMouseEnter={() => !showVariablePicker && setIsCarouselHovered?.(true)}\n\t\tonMouseLeave={() => !showVariablePicker && setIsCarouselHovered?.(false)}\n\t>\n\t\t<Slider\n\t\t\tref={sliderRef}\n\t\t\tswipeToSlide\n\t\t\tdraggable\n\t\t\tswipe\n\t\t\tinfinite={false}\n\t\t\tfocusOnSelect={!isPreview}\n\t\t\tcenterMode\n\t\t\tarrows={showArrows}\n\t\t\tadaptiveHeight\n\t\t\tnextArrow={<CustomCarouselRightArrow isPreview={isPreview ?? false} />}\n\t\t\tprevArrow={<CustomCarouselLeftArrow isPreview={isPreview ?? false} />}\n\t\t>\n\t\t\t{cards?.map((carousel, index) => {\n\t\t\t\tconst currentCarousel = {\n\t\t\t\t\tcomponents: carousel.components,\n\t\t\t\t\tmapping: template?.mapping?.cards?.[index],\n\t\t\t\t\tcontent: template?.['content'],\n\t\t\t\t\ttemplateType: template?.['templateType'],\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tcurrentTemplate={currentCarousel}\n\t\t\t\t\t\tcarouselCardIndex={index}\n\t\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Slider>\n\t</CarouselSlickContainer>\n);\n"],"names":["CarouselPreview","React","channel","template","isPreview","removeBottomBorder","borderRadius","showArrows","hideBorder","showSampleValues","sliderRef","selectedCarouselIndex","cardCount","setIsCarouselHovered","cardsIndex","showVariablePicker","useTemplateModalContext","cardIndex","determineCardIndex","cards","carouselSlider","jsx","CarouselSlider","isRCSChannel","RCSCarousalContainer","jsxs","Container","AiContentBadge","AiContentIcon","CarouselPreviewCard","CarouselSlickContainer","Slider","CustomCarouselRightArrow","CustomCarouselLeftArrow","carousel","index","currentCarousel"],"mappings":"~~;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"CarouselPreview.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport AiContentIcon from '@src/assets/icons/aiContentIcon.svg';\nimport React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick-theme.css';\nimport 'slick-carousel/slick/slick.css';\nimport {\n\tCarouselSlickContainer,\n\tContainer,\n} from '@src/components/carousel-preview/CarouselPreview.style';\nimport CarouselPreviewCard from '@src/components/carousel-preview/CarouselPreviewCard';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateCards,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { AiContentBadge } from '@src/components/template-preview/TemplatePreview.styled';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\nimport {\n\tdetermineCardIndex,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { AllTemplateTypes } from '../template-preview/models/types';\nimport { RCSCarousalContainer } from '../template-preview/RCS/RCSPreview.styled';\nimport {\n\tCustomCarouselLeftArrow,\n\tCustomCarouselRightArrow,\n} from './CustomCarouselArrows';\n\nexport const CarouselPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t\tisPreview?: boolean;\n\t\tremoveBottomBorder?: boolean;\n\t\tborderRadius?: string;\n\t\tshowArrows?: boolean;\n\t\thideBorder?: boolean;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\ttemplate,\n\t\tisPreview,\n\t\tremoveBottomBorder,\n\t\tborderRadius,\n\t\tshowArrows,\n\t\thideBorder,\n\t\tshowSampleValues,\n\t}) => {\n\t\tconst {\n\t\t\tsliderRef,\n\t\t\tselectedCarouselIndex,\n\t\t\tcardCount,\n\t\t\tsetIsCarouselHovered,\n\t\t\tcardIndex: cardsIndex,\n\t\t\tshowVariablePicker,\n\t\t} = useTemplateModalContext();\n\n\t\tconst cardIndex =\n\t\t\tcardsIndex == -1 ? determineCardIndex(channel) : cardsIndex;\n\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\tcardIndex\n\t\t]?.cards;\n\n\t\tconst carouselSlider = cards?.length ? (\n\t\t\t<CarouselSlider\n\t\t\t\tcards={cards}\n\t\t\t\tcardCount={cardCount ?? 0}\n\t\t\t\tselectedCarouselIndex={selectedCarouselIndex ?? -1}\n\t\t\t\tsliderRef={sliderRef}\n\t\t\t\tisPreview={isPreview}\n\t\t\t\tshowArrows={showArrows}\n\t\t\t\tchannel={channel}\n\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\tsetIsCarouselHovered={setIsCarouselHovered}\n\t\t\t\tshowSampleValues={!!showSampleValues}\n\t\t\t\tshowVariablePicker={showVariablePicker}\n\t\t\t/>\n\t\t) : null;\n\n\t\tif (isRCSChannel(channel)) {\n\t\t\treturn (\n\t\t\t\t<RCSCarousalContainer borderRadius={borderRadius}>\n\t\t\t\t\t{carouselSlider}\n\t\t\t\t</RCSCarousalContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tremoveBottomBorder={removeBottomBorder}\n\t\t\t\tborderRadius={borderRadius}\n\t\t\t\thideBorder={hideBorder}\n\t\t\t>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\|\n\t\t\t\t\t!!template?.['isAiGenerated']) && (\n\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t</AiContentBadge>\n\t\t\t\t)}\n\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tcurrentTemplate={template}\n\t\t\t\t\tcarouselCardIndex={-1}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twidth=\"77%\"\n\t\t\t\t/>\n\t\t\t\t{carouselSlider}\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nconst CarouselSlider = ({\n\tcards,\n\tcardCount,\n\tselectedCarouselIndex,\n\tsliderRef,\n\tisPreview,\n\tshowArrows,\n\tchannel,\n\ttemplate,\n\tsetIsCarouselHovered,\n\tshowSampleValues,\n\tshowVariablePicker,\n}: {\n\tcards: WhatsAppCarouselTemplateCards[];\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n\tsliderRef: any;\n\tisPreview?: boolean;\n\tshowArrows?: boolean;\n\tchannel: CHANNEL_TYPE;\n\ttemplate: WhatsAppCarouselTemplate;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tshowSampleValues?: boolean;\n\tshowVariablePicker?: boolean;\n}) => (\n\t<CarouselSlickContainer\n\t\tcardCount={cardCount}\n\t\tselectedCarouselIndex={selectedCarouselIndex}\n\t\tonMouseEnter={() => !showVariablePicker && setIsCarouselHovered?.(true)}\n\t\tonMouseLeave={() => !showVariablePicker && setIsCarouselHovered?.(false)}\n\t>\n\t\t<Slider\n\t\t\tref={sliderRef}\n\t\t\tswipeToSlide\n\t\t\tdraggable\n\t\t\tswipe\n\t\t\tinfinite={false}\n\t\t\tfocusOnSelect={!isPreview}\n\t\t\tcenterMode\n\t\t\tarrows={showArrows}\n\t\t\tadaptiveHeight\n\t\t\tnextArrow={<CustomCarouselRightArrow isPreview={isPreview ?? false} />}\n\t\t\tprevArrow={<CustomCarouselLeftArrow isPreview={isPreview ?? false} />}\n\t\t>\n\t\t\t{cards?.map((carousel, index) => {\n\t\t\t\tconst currentCarousel = {\n\t\t\t\t\tcomponents: carousel.components,\n\t\t\t\t\tmapping: template?.mapping?.cards?.[index],\n\t\t\t\t\tcontent: template?.['content'],\n\t\t\t\t\ttemplateType: template?.['templateType'],\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tcurrentTemplate={currentCarousel}\n\t\t\t\t\t\tcarouselCardIndex={index}\n\t\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Slider>\n\t</CarouselSlickContainer>\n);\n"],"names":["CarouselPreview","React","channel","template","isPreview","removeBottomBorder","borderRadius","showArrows","hideBorder","showSampleValues","sliderRef","selectedCarouselIndex","cardCount","setIsCarouselHovered","cardsIndex","showVariablePicker","useTemplateModalContext","cardIndex","determineCardIndex","cards","carouselSlider","jsx","CarouselSlider","isRCSChannel","RCSCarousalContainer","jsxs","Container","AiContentBadge","AiContentIcon","CarouselPreviewCard","CarouselSlickContainer","Slider","CustomCarouselRightArrow","CustomCarouselLeftArrow","carousel","index","currentCarousel"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 import { jsx as o, Fragment as m, jsxs as A } from "react/jsx-runtime";
-import "bootstrap/dist/css/bootstrap.min.css";
 import { useState as F } from "react";
 import { Dropdown as N } from "react-bootstrap";
 import { COLORS as w } from "../../constants/Theme.js";
@@ -9,15 +8,15 @@ import { FAB_POSITION as y, DROP_POSITION as b, MENU_ALIGNMENT as k, FloatingAct
 import { Tooltip as _ } from "../tooltips/Tooltip.js";
 const f = (h) => {
   const {
-    width: n,
-    height: r,
-    color: e,
+    width: i,
+    height: e,
+    color: r,
     onClick: l,
     icon: t,
     tooltipPlacement: d,
     tooltipText: c,
     tootipWidth: p,
-    isRound: i
+    isRound: n
   } = h;
   return c ? /* @__PURE__ */ o(
     _,
@@ -28,11 +27,11 @@ const f = (h) => {
       children: /* @__PURE__ */ o(
         O,
         {
-          width: n,
-          height: r,
-          color: e,
+          width: i,
+          height: e,
+          color: r,
           onClick: l,
-          isRound: i,
+          isRound: n,
           children: t || /* @__PURE__ */ o(T, { width: 22, height: 22 })
         }
       )
@@ -40,25 +39,25 @@ const f = (h) => {
   ) : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(
     O,
     {
-      width: n,
-      height: r,
-      color: e,
+      width: i,
+      height: e,
+      color: r,
       onClick: l,
-      isRound: i,
+      isRound: n,
       children: t || /* @__PURE__ */ o(T, { width: 22, height: 22 })
     }
   ) });
-}, X = (h) => {
+}, V = (h) => {
   const {
-    icon: n,
-    onClick: r,
-    children: e,
+    icon: i,
+    onClick: e,
+    children: r,
     tooltipText: l,
     isRound: t = !0,
     width: d = 48,
     height: c = 48,
     color: p = w.background.inverse,
-    position: i = y.TOP_LEFT,
+    position: n = y.TOP_LEFT,
     buttonPaddingHorizontal: P = 20,
     buttonPaddingVertical: C = 20,
     zIndex: D = 1,
@@ -73,7 +72,7 @@ const f = (h) => {
       width: d,
       height: c,
       color: p,
-      position: i,
+      position: n,
       buttonPaddingHorizontal: P,
       buttonPaddingVertical: C,
       zIndex: D,
@@ -85,7 +84,7 @@ const f = (h) => {
           },
           drop: g,
           align: I,
-          children: e ? /* @__PURE__ */ A(m, { children: [
+          children: r ? /* @__PURE__ */ A(m, { children: [
             /* @__PURE__ */ o(R, { drop: g, children: /* @__PURE__ */ o(
               f,
               {
@@ -93,16 +92,16 @@ const f = (h) => {
                 height: c,
                 color: p,
                 tooltipPlacement: a,
-                onClick: r,
+                onClick: e,
                 tooltipText: l,
-                icon: n,
-                position: i,
+                icon: i,
+                position: n,
                 isRound: t,
                 isDropdownOpen: u,
                 tootipWidth: s
               }
             ) }),
-            /* @__PURE__ */ o(N.Menu, { children: e })
+            /* @__PURE__ */ o(N.Menu, { children: r })
           ] }) : /* @__PURE__ */ o(
             f,
             {
@@ -110,10 +109,10 @@ const f = (h) => {
               height: c,
               color: p,
               tooltipPlacement: a,
-              onClick: r,
+              onClick: e,
               tooltipText: l,
-              icon: n,
-              position: i,
+              icon: i,
+              position: n,
               isRound: t,
               isDropdownOpen: u,
               tootipWidth: s
@@ -125,6 +124,6 @@ const f = (h) => {
   ) });
 };
 export {
-  X as FloatingActionButton
+  V as FloatingActionButton
 };
 //# sourceMappingURL=FloatingActionButton.js.map

package/dist/esm/components/floating-action-button/FloatingActionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingActionButton.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { COLORS } from '@src/constants/Theme';\nimport { Placement, Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport DefaultIcon from './../../assets/icons/question-mark.svg';\nimport {\n\tDROP_POSITION,\n\tDropdownToggleContainer,\n\tFAB_POSITION,\n\tFloatingActionButtonContainer,\n\tFloatingActionButtonOuterContainer,\n\tMENU_ALIGNMENT,\n\tStyledDropdown,\n\tTooltipStyled,\n} from './FloatingActionButton.styles';\n\nconst FloatingActionToggleButtonJSX: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth: number;\n\theight: number;\n\ticon?: JSX.Element;\n\tcolor: string;\n\tposition?: FAB_POSITION;\n\ttooltipText?: string;\n\ttootipWidth?: number;\n\ttooltipPlacement: Placement;\n\tisRound: boolean;\n\tisDropdownOpen: boolean;\n}> = (props) => {\n\tconst {\n\t\twidth,\n\t\theight,\n\t\tcolor,\n\t\tonClick,\n\t\ticon,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\ttootipWidth,\n\t\tisRound,\n\t} = props;\n\treturn tooltipText ? (\n\t\t<Tooltip\n\t\t\ttooltipContent={\n\t\t\t\t<TooltipStyled tooltipWidth={tootipWidth}>\n\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t{props.tooltipText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</TooltipStyled>\n\t\t\t}\n\t\t\tplacement={tooltipPlacement}\n\t\t\tbody={''}\n\t\t>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</Tooltip>\n\t) : (\n\t\t<>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</>\n\t);\n};\nexport const FloatingActionButton: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth?: number;\n\theight?: number;\n\ticon?: JSX.Element;\n\tcolor?: string;\n\tposition?: FAB_POSITION;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipText?: string;\n\ttooltipPlacement?: Placement;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\ttootipWidth?: number;\n}> = (props) => {\n\tconst {\n\t\ticon,\n\t\tonClick,\n\t\tchildren,\n\t\ttooltipText,\n\t\tisRound = true,\n\t\twidth = 48,\n\t\theight = 48,\n\t\tcolor = COLORS.background.inverse,\n\t\tposition = FAB_POSITION.TOP_LEFT,\n\t\tbuttonPaddingHorizontal = 20,\n\t\tbuttonPaddingVertical = 20,\n\t\tzIndex = 1,\n\t\ttooltipPlacement = 'right',\n\t\tdropPosition = DROP_POSITION.DOWN,\n\t\tmenuAligment = MENU_ALIGNMENT.END,\n\t\ttootipWidth,\n\t} = props;\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<FloatingActionButtonOuterContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tposition={position}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\tzIndex={zIndex}\n\t\t\t>\n\t\t\t\t<StyledDropdown\n\t\t\t\t\tonToggle={(nextShow: boolean, meta: any) => {\n\t\t\t\t\t\tsetIsDropdownOpen(nextShow);\n\t\t\t\t\t}}\n\t\t\t\t\tdrop={dropPosition}\n\t\t\t\t\talign={menuAligment}\n\t\t\t\t>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownToggleContainer drop={dropPosition}>\n\t\t\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownToggleContainer>\n\t\t\t\t\t\t\t<Dropdown.Menu>{children}</Dropdown.Menu>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</StyledDropdown>\n\t\t\t</FloatingActionButtonOuterContainer>\n\t\t</>\n\t);\n};\n"],"names":["FloatingActionToggleButtonJSX","props","width","height","color","onClick","icon","tooltipPlacement","tooltipText","tootipWidth","isRound","jsx","Tooltip","TooltipStyled","BodyCaption","COLORS","FloatingActionButtonContainer","DefaultIcon","Fragment","FloatingActionButton","children","position","FAB_POSITION","buttonPaddingHorizontal","buttonPaddingVertical","zIndex","dropPosition","DROP_POSITION","menuAligment","MENU_ALIGNMENT","isDropdownOpen","setIsDropdownOpen","useState","FloatingActionButtonOuterContainer","StyledDropdown","nextShow","meta","jsxs","DropdownToggleContainer","Dropdown"],"mappings":"~~;;;;;;;;;~~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"}
1	+ {"version":3,"file":"FloatingActionButton.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { COLORS } from '@src/constants/Theme';\nimport { Placement, Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport DefaultIcon from './../../assets/icons/question-mark.svg';\nimport {\n\tDROP_POSITION,\n\tDropdownToggleContainer,\n\tFAB_POSITION,\n\tFloatingActionButtonContainer,\n\tFloatingActionButtonOuterContainer,\n\tMENU_ALIGNMENT,\n\tStyledDropdown,\n\tTooltipStyled,\n} from './FloatingActionButton.styles';\n\nconst FloatingActionToggleButtonJSX: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth: number;\n\theight: number;\n\ticon?: JSX.Element;\n\tcolor: string;\n\tposition?: FAB_POSITION;\n\ttooltipText?: string;\n\ttootipWidth?: number;\n\ttooltipPlacement: Placement;\n\tisRound: boolean;\n\tisDropdownOpen: boolean;\n}> = (props) => {\n\tconst {\n\t\twidth,\n\t\theight,\n\t\tcolor,\n\t\tonClick,\n\t\ticon,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\ttootipWidth,\n\t\tisRound,\n\t} = props;\n\treturn tooltipText ? (\n\t\t<Tooltip\n\t\t\ttooltipContent={\n\t\t\t\t<TooltipStyled tooltipWidth={tootipWidth}>\n\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t{props.tooltipText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</TooltipStyled>\n\t\t\t}\n\t\t\tplacement={tooltipPlacement}\n\t\t\tbody={''}\n\t\t>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</Tooltip>\n\t) : (\n\t\t<>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</>\n\t);\n};\nexport const FloatingActionButton: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth?: number;\n\theight?: number;\n\ticon?: JSX.Element;\n\tcolor?: string;\n\tposition?: FAB_POSITION;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipText?: string;\n\ttooltipPlacement?: Placement;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\ttootipWidth?: number;\n}> = (props) => {\n\tconst {\n\t\ticon,\n\t\tonClick,\n\t\tchildren,\n\t\ttooltipText,\n\t\tisRound = true,\n\t\twidth = 48,\n\t\theight = 48,\n\t\tcolor = COLORS.background.inverse,\n\t\tposition = FAB_POSITION.TOP_LEFT,\n\t\tbuttonPaddingHorizontal = 20,\n\t\tbuttonPaddingVertical = 20,\n\t\tzIndex = 1,\n\t\ttooltipPlacement = 'right',\n\t\tdropPosition = DROP_POSITION.DOWN,\n\t\tmenuAligment = MENU_ALIGNMENT.END,\n\t\ttootipWidth,\n\t} = props;\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<FloatingActionButtonOuterContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tposition={position}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\tzIndex={zIndex}\n\t\t\t>\n\t\t\t\t<StyledDropdown\n\t\t\t\t\tonToggle={(nextShow: boolean, meta: any) => {\n\t\t\t\t\t\tsetIsDropdownOpen(nextShow);\n\t\t\t\t\t}}\n\t\t\t\t\tdrop={dropPosition}\n\t\t\t\t\talign={menuAligment}\n\t\t\t\t>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownToggleContainer drop={dropPosition}>\n\t\t\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownToggleContainer>\n\t\t\t\t\t\t\t<Dropdown.Menu>{children}</Dropdown.Menu>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</StyledDropdown>\n\t\t\t</FloatingActionButtonOuterContainer>\n\t\t</>\n\t);\n};\n"],"names":["FloatingActionToggleButtonJSX","props","width","height","color","onClick","icon","tooltipPlacement","tooltipText","tootipWidth","isRound","jsx","Tooltip","TooltipStyled","BodyCaption","COLORS","FloatingActionButtonContainer","DefaultIcon","Fragment","FloatingActionButton","children","position","FAB_POSITION","buttonPaddingHorizontal","buttonPaddingVertical","zIndex","dropPosition","DROP_POSITION","menuAligment","MENU_ALIGNMENT","isDropdownOpen","setIsDropdownOpen","useState","FloatingActionButtonOuterContainer","StyledDropdown","nextShow","meta","jsxs","DropdownToggleContainer","Dropdown"],"mappings":"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"}

package/dist/esm/components/image-cropper/BikImageCropper.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as h } from "react";
 import p from "react-image-crop";
-import "react-image-crop/dist/ReactCrop.css";
 import { StyledModal as I } from "../modals/styledModal.js";
-const L = (a) => {
+const E = (a) => {
   const [s, l] = h(!1), [c, C] = h(void 0), [g, w] = h({ width: 0, height: 0 }), [f, d] = h(!1), u = async (e) => {
     if (d(!0), a.src && e?.width && e?.height) {
       const t = new Image();
@@ -100,7 +99,7 @@ const L = (a) => {
   );
 };
 export {
-  L as BikImageCropper,
-  L as default
+  E as BikImageCropper,
+  E as default
 };
 //# sourceMappingURL=BikImageCropper.js.map

package/dist/esm/components/image-cropper/BikImageCropper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","imgElement","imgWidth"],"mappings":"~~;;;;;~~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"}
1	+ {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","imgElement","imgWidth"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.815",
+	"version": "0.0.816",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",