@erpsquad/common 1.8.79 → 1.8.81

package/dist/views/template-editor/components/controllers/TextControls/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/TextControls.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  Box,\n  TextField,\n  ToggleButtonGroup,\n  ToggleButton,\n  InputAdornment,\n  Tooltip,\n  FormControl,\n  MenuItem,\n  styled,\n  toggleButtonGroupClasses\n} from '@mui/material';\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport { debounce } from 'lodash';\nimport Select from '../../../../components/select/select';\nimport AlignmentControl from './AlignmentControl';\n\n// Styled component with better typing\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)<{ item?: number }>(\n  ({ theme, item = 4 }) => ({\n    display: 'grid',\n    borderRadius: 4,\n    border: `1px solid #e3e3e3`,\n    width: '100%',\n    gridTemplateColumns: `repeat(${item}, 1fr)`,\n    [`& .${toggleButtonGroupClasses.grouped}`]: {\n      margin: theme.spacing(0.5),\n      border: 0,\n      borderRadius: theme.shape.borderRadius,\n      [`&.${toggleButtonGroupClasses.disabled}`]: {\n        border: 0,\n      },\n    },\n    [`& .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]:\n      {\n        marginLeft: -1,\n        borderLeft: '1px solid transparent',\n      },\n    [`& .${toggleButtonGroupClasses.selected}`]: {\n      backgroundColor: `${theme.palette.theme.primary[800]} !important`,\n      color: '#fff !important',\n    },\n  })\n);\n\n// Type definitions\ninterface TextStyles {\n  fontFamily?: string;\n  fontSize?: number;\n  lineHeight?: string | number;\n  textAlign?: string;\n  fontWeight?: string;\n  fontStyle?: string;\n  textDecoration?: string;\n  color?: string;\n}\n\ninterface TextControlsProps {\n  attrs: {\n    styles?: TextStyles;\n    [key: string]: any;\n  };\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\ntype FormatType = 'bold' | 'italic' | 'underline';\n\n// Constants\nconst FONT_SIZES = [10, 12, 14, 16, 20, 24, 28, 32] as const;\nconst LINE_HEIGHTS = [1, 1.2, 1.5, 2] as const;\nconst FONT_FAMILIES = [\n  'Arial',\n  'Times New Roman', \n  'Roboto',\n  'Helvetica',\n  'Georgia',\n  'Courier New'\n] as const;\n\nconst DEBOUNCE_DELAY = 300;\n\nconst TextControls: React.FC<TextControlsProps> = ({ attrs, updateAttrs }) => {\n  const styles = useMemo(() => attrs.styles || {}, [JSON.stringify(attrs.styles)]);\n  \n  // Derive format options from current styles instead of separate state\n  const formatOptions = useMemo(() => {\n    const options: FormatType[] = [];\n    if (styles.fontWeight === 'bold') options.push('bold');\n    if (styles.fontStyle === 'italic') options.push('italic');\n    if (styles.textDecoration === 'underline') options.push('underline');\n    return options;\n  }, [styles.fontWeight, styles.fontStyle, styles.textDecoration]);\n\n  // Stable update function using useCallback\n  const updateStyles = useCallback(\n    (newStyles: Partial<TextStyles>) => {\n      updateAttrs({ \n        styles: { \n          ...styles, \n          ...newStyles \n        } \n      });\n    },\n    [styles, updateAttrs]\n  );\n\n  // Fixed debounced color update function\n  const debouncedColorUpdate = useCallback(\n    debounce((color: string) => {\n      updateStyles({color});\n    }, DEBOUNCE_DELAY),\n    [updateStyles]\n  );\n\n  // Format toggle handler\n  const toggleFormat = useCallback(\n    (format: FormatType) => {\n      const isCurrentlyApplied = formatOptions.includes(format);\n      \n      const formatStyleMap: Record<FormatType, Partial<TextStyles>> = {\n        bold: { fontWeight: isCurrentlyApplied ? 'normal' : 'bold' },\n        italic: { fontStyle: isCurrentlyApplied ? 'normal' : 'italic' },\n        underline: { textDecoration: isCurrentlyApplied ? 'none' : 'underline' }\n      };\n\n      updateStyles(formatStyleMap[format]);\n    },\n    [formatOptions, updateStyles]\n  );\n\n  // Alignment change handler\n  const handleAlignmentChange = useCallback(\n    (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {\n      if (newAlignment !== null) {\n        updateStyles({ textAlign: newAlignment });\n      }\n    },\n    [updateStyles]\n  );\n\n  // Color change handler\n  const handleColorChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      debouncedColorUpdate(event.target.value);\n    },\n    [debouncedColorUpdate]\n  );\n\n  // Generic style change handlers\n  const handleFontFamilyChange = useCallback(\n    (event: any) => updateStyles({ fontFamily: event.target.value }),\n    [updateStyles]\n  );\n\n  const handleFontSizeChange = useCallback(\n    (event: any) => updateStyles({ fontSize: Number(event.target.value) }),\n    [updateStyles]\n  );\n\n  const handleLineHeightChange = useCallback(\n    (event: any) => updateStyles({ lineHeight: String(event.target.value) }),\n    [updateStyles]\n  );\n\n  return (\n    <>\n      {/* Font Family Selection */}\n      <Box sx={{ mb: 2 }}>\n        <FormControl size=\"small\" fullWidth>\n          <Select\n            value={styles.fontFamily || ''}\n            onChange={handleFontFamilyChange}\n            displayEmpty\n            label=\"Select Font\"\n          >\n            {FONT_FAMILIES.map((family) => (\n              <MenuItem key={family} value={family}>\n                {family}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </Box>\n\n      {/* Font Size and Line Height */}\n      <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\n        <FormControl size=\"small\" fullWidth>\n          <Select\n            value={styles.fontSize || ''}\n            onChange={handleFontSizeChange}\n            renderValue={(v) => `${v}px`}\n            label=\"Size\"\n            displayEmpty\n          >\n            {FONT_SIZES.map((size) => (\n              <MenuItem key={size} value={size}>\n                {size}px\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n\n        <FormControl size=\"small\" fullWidth>\n          <Select\n            value={styles.lineHeight || ''}\n            onChange={handleLineHeightChange}\n            renderValue={(v) => `${v}x`}\n            label=\"Line Height\"\n            displayEmpty\n          >\n            {LINE_HEIGHTS.map((height) => (\n              <MenuItem key={height} value={height}>\n                {height}x\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </Box>\n\n      {/* Text Alignment */}\n      <AlignmentControl \n        alignment={styles.textAlign} \n        onAlignmentChange={handleAlignmentChange} \n      />\n\n      {/* Format Options */}\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\n        <StyledToggleButtonGroup item={3}>\n          <Tooltip title=\"Bold\">\n            <ToggleButton\n              value=\"bold\"\n              selected={formatOptions.includes('bold')}\n              onClick={() => toggleFormat('bold')}\n              aria-label=\"bold\"\n              size=\"small\"\n              sx={{ borderRadius: 1 }}\n            >\n              <FormatBoldIcon fontSize=\"small\" />\n            </ToggleButton>\n          </Tooltip>\n\n          <Tooltip title=\"Italic\">\n            <ToggleButton\n              value=\"italic\"\n              selected={formatOptions.includes('italic')}\n              onClick={() => toggleFormat('italic')}\n              aria-label=\"italic\"\n              size=\"small\"\n              sx={{ borderRadius: 1 }}\n            >\n              <FormatItalicIcon fontSize=\"small\" />\n            </ToggleButton>\n          </Tooltip>\n\n          <Tooltip title=\"Underline\">\n            <ToggleButton\n              value=\"underline\"\n              selected={formatOptions.includes('underline')}\n              onClick={() => toggleFormat('underline')}\n              aria-label=\"underline\"\n              size=\"small\"\n              sx={{ borderRadius: 1 }}\n            >\n              <FormatUnderlinedIcon fontSize=\"small\" />\n            </ToggleButton>\n          </Tooltip>\n        </StyledToggleButtonGroup>\n      </Box>\n\n      {/* Color Picker */}\n      <Box sx={{ mb: 2, width: '100%' }}>\n        <TextField\n          label=\"Text Color\"\n          variant=\"outlined\"\n          type=\"color\"\n          value={styles.color || '#000000'}\n          onChange={handleColorChange}\n          size=\"small\"\n          fullWidth\n          InputProps={{\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <ColorLensIcon fontSize=\"small\" />\n              </InputAdornment>\n            ),\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport default React.memo(TextControls);"],"names":["FormatBoldIcon","FormatItalicIcon","FormatUnderlinedIcon","ColorLensIcon","React"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAM,0BAA0B,OAAO,iBAAiB;AAAA,EACtD,CAAC,EAAE,OAAO,OAAO,SAAS;AAAA,IACxB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,qBAAqB,UAAU,IAAI;AAAA,IACnC,CAAC,MAAM,yBAAyB,OAAO,EAAE,GAAG;AAAA,MAC1C,QAAQ,MAAM,QAAQ,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,CAAC,KAAK,yBAAyB,QAAQ,EAAE,GAAG;AAAA,QAC1C,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,CAAC,MAAM,yBAAyB,YAAY,QAAQ,yBAAyB,UAAU,EAAE,GACvF;AAAA,MACE,YAAY;AAAA,MACZ,YAAY;AAAA,IAAA;AAAA,IAEhB,CAAC,MAAM,yBAAyB,QAAQ,EAAE,GAAG;AAAA,MAC3C,iBAAiB,GAAG,MAAM,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAAA,MACpD,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAyBA,MAAM,aAAa,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AAClD,MAAM,eAAe,CAAC,GAAG,KAAK,KAAK,CAAC;AACpC,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB;AAEvB,MAAM,eAA4C,CAAC,EAAE,OAAO,kBAAkB;AAC5E,QAAM,SAAS,QAAQ,MAAM,MAAM,UAAU,CAAA,GAAI,CAAC,KAAK,UAAU,MAAM,MAAM,CAAC,CAAC;AAG/E,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,UAAwB,CAAA;AAC9B,QAAI,OAAO,eAAe,OAAQ,SAAQ,KAAK,MAAM;AACrD,QAAI,OAAO,cAAc,SAAU,SAAQ,KAAK,QAAQ;AACxD,QAAI,OAAO,mBAAmB,YAAa,SAAQ,KAAK,WAAW;AACnE,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,YAAY,OAAO,WAAW,OAAO,cAAc,CAAC;AAG/D,QAAM,eAAe;AAAA,IACnB,CAAC,cAAmC;AAClC,kBAAY;AAAA,QACV,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CACD;AAAA,IACH;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAItB,QAAM,uBAAuB;AAAA,IAC3B,SAAS,CAAC,UAAkB;AAC1B,mBAAa,EAAC,OAAM;AAAA,IACtB,GAAG,cAAc;AAAA,IACjB,CAAC,YAAY;AAAA,EAAA;AAIf,QAAM,eAAe;AAAA,IACnB,CAAC,WAAuB;AACtB,YAAM,qBAAqB,cAAc,SAAS,MAAM;AAExD,YAAM,iBAA0D;AAAA,QAC9D,MAAM,EAAE,YAAY,qBAAqB,WAAW,OAAA;AAAA,QACpD,QAAQ,EAAE,WAAW,qBAAqB,WAAW,SAAA;AAAA,QACrD,WAAW,EAAE,gBAAgB,qBAAqB,SAAS,YAAA;AAAA,MAAY;AAGzE,mBAAa,eAAe,MAAM,CAAC;AAAA,IACrC;AAAA,IACA,CAAC,eAAe,YAAY;AAAA,EAAA;AAI9B,QAAM,wBAAwB;AAAA,IAC5B,CAAC,OAAsC,iBAAgC;AACrE,UAAI,iBAAiB,MAAM;AACzB,qBAAa,EAAE,WAAW,cAAc;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAIf,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAA+C;AAC9C,2BAAqB,MAAM,OAAO,KAAK;AAAA,IACzC;AAAA,IACA,CAAC,oBAAoB;AAAA,EAAA;AAIvB,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAe,aAAa,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA,IAC/D,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAAe,aAAa,EAAE,UAAU,OAAO,MAAM,OAAO,KAAK,GAAG;AAAA,IACrE,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAe,aAAa,EAAE,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG;AAAA,IACvE,CAAC,YAAY;AAAA,EAAA;AAGf,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,EAAA,GACb,UAAA,oBAAC,aAAA,EAAY,MAAK,SAAQ,WAAS,MACjC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,OAAO,cAAc;AAAA,QAC5B,UAAU;AAAA,QACV,cAAY;AAAA,QACZ,OAAM;AAAA,QAEL,UAAA,cAAc,IAAI,CAAC,WAClB,oBAAC,YAAsB,OAAO,QAC3B,UAAA,OAAA,GADY,MAEf,CACD;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,IAGA,qBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,GAAG,SAAS,QAAQ,KAAK,EAAA,GACtC,UAAA;AAAA,MAAA,oBAAC,aAAA,EAAY,MAAK,SAAQ,WAAS,MACjC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO,YAAY;AAAA,UAC1B,UAAU;AAAA,UACV,aAAa,CAAC,MAAM,GAAG,CAAC;AAAA,UACxB,OAAM;AAAA,UACN,cAAY;AAAA,UAEX,qBAAW,IAAI,CAAC,SACf,qBAAC,UAAA,EAAoB,OAAO,MACzB,UAAA;AAAA,YAAA;AAAA,YAAK;AAAA,UAAA,EAAA,GADO,IAEf,CACD;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MAEA,oBAAC,aAAA,EAAY,MAAK,SAAQ,WAAS,MACjC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO,cAAc;AAAA,UAC5B,UAAU;AAAA,UACV,aAAa,CAAC,MAAM,GAAG,CAAC;AAAA,UACxB,OAAM;AAAA,UACN,cAAY;AAAA,UAEX,uBAAa,IAAI,CAAC,WACjB,qBAAC,UAAA,EAAsB,OAAO,QAC3B,UAAA;AAAA,YAAA;AAAA,YAAO;AAAA,UAAA,EAAA,GADK,MAEf,CACD;AAAA,QAAA;AAAA,MAAA,EACH,CACF;AAAA,IAAA,GACF;AAAA,IAGA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,mBAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,wBAIpB,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,GAAG,IAAI,EAAA,GACxD,UAAA,qBAAC,yBAAA,EAAwB,MAAM,GAC7B,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAQ,OAAM,QACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAU,cAAc,SAAS,MAAM;AAAA,UACvC,SAAS,MAAM,aAAa,MAAM;AAAA,UAClC,cAAW;AAAA,UACX,MAAK;AAAA,UACL,IAAI,EAAE,cAAc,EAAA;AAAA,UAEpB,UAAA,oBAACA,WAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,GAErC;AAAA,MAEA,oBAAC,SAAA,EAAQ,OAAM,UACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAU,cAAc,SAAS,QAAQ;AAAA,UACzC,SAAS,MAAM,aAAa,QAAQ;AAAA,UACpC,cAAW;AAAA,UACX,MAAK;AAAA,UACL,IAAI,EAAE,cAAc,EAAA;AAAA,UAEpB,UAAA,oBAACC,aAAA,EAAiB,UAAS,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,GAEvC;AAAA,MAEA,oBAAC,SAAA,EAAQ,OAAM,aACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAU,cAAc,SAAS,WAAW;AAAA,UAC5C,SAAS,MAAM,aAAa,WAAW;AAAA,UACvC,cAAW;AAAA,UACX,MAAK;AAAA,UACL,IAAI,EAAE,cAAc,EAAA;AAAA,UAEpB,UAAA,oBAACC,aAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,EACzC,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IAGA,oBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,OAAO,UACvB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO,OAAO,SAAS;AAAA,QACvB,UAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAS;AAAA,QACT,YAAY;AAAA,UACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACC,aAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,IAAA,iBAAeC,eAAM,KAAK,YAAY;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/TextControls.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport {\r\n  Box,\r\n  TextField,\r\n  ToggleButtonGroup,\r\n  ToggleButton,\r\n  InputAdornment,\r\n  Tooltip,\r\n  FormControl,\r\n  MenuItem,\r\n  styled,\r\n  toggleButtonGroupClasses\r\n} from '@mui/material';\r\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\r\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\r\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport { debounce } from 'lodash';\r\nimport Select from '../../../../components/select/select';\r\nimport AlignmentControl from './AlignmentControl';\r\n\r\n// Styled component with better typing\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)<{ item?: number }>(\r\n  ({ theme, item = 4 }) => ({\r\n    display: 'grid',\r\n    borderRadius: 4,\r\n    border: `1px solid #e3e3e3`,\r\n    width: '100%',\r\n    gridTemplateColumns: `repeat(${item}, 1fr)`,\r\n    [`& .${toggleButtonGroupClasses.grouped}`]: {\r\n      margin: theme.spacing(0.5),\r\n      border: 0,\r\n      borderRadius: theme.shape.borderRadius,\r\n      [`&.${toggleButtonGroupClasses.disabled}`]: {\r\n        border: 0,\r\n      },\r\n    },\r\n    [`& .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]:\r\n      {\r\n        marginLeft: -1,\r\n        borderLeft: '1px solid transparent',\r\n      },\r\n    [`& .${toggleButtonGroupClasses.selected}`]: {\r\n      backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n      color: '#fff !important',\r\n    },\r\n  })\r\n);\r\n\r\n// Type definitions\r\ninterface TextStyles {\r\n  fontFamily?: string;\r\n  fontSize?: number;\r\n  lineHeight?: string | number;\r\n  textAlign?: string;\r\n  fontWeight?: string;\r\n  fontStyle?: string;\r\n  textDecoration?: string;\r\n  color?: string;\r\n}\r\n\r\ninterface TextControlsProps {\r\n  attrs: {\r\n    styles?: TextStyles;\r\n    [key: string]: any;\r\n  };\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\ntype FormatType = 'bold' | 'italic' | 'underline';\r\n\r\n// Constants\r\nconst FONT_SIZES = [10, 12, 14, 16, 20, 24, 28, 32] as const;\r\nconst LINE_HEIGHTS = [1, 1.2, 1.5, 2] as const;\r\nconst FONT_FAMILIES = [\r\n  'Arial',\r\n  'Times New Roman', \r\n  'Roboto',\r\n  'Helvetica',\r\n  'Georgia',\r\n  'Courier New'\r\n] as const;\r\n\r\nconst DEBOUNCE_DELAY = 300;\r\n\r\nconst TextControls: React.FC<TextControlsProps> = ({ attrs, updateAttrs }) => {\r\n  const styles = useMemo(() => attrs.styles || {}, [JSON.stringify(attrs.styles)]);\r\n  \r\n  // Derive format options from current styles instead of separate state\r\n  const formatOptions = useMemo(() => {\r\n    const options: FormatType[] = [];\r\n    if (styles.fontWeight === 'bold') options.push('bold');\r\n    if (styles.fontStyle === 'italic') options.push('italic');\r\n    if (styles.textDecoration === 'underline') options.push('underline');\r\n    return options;\r\n  }, [styles.fontWeight, styles.fontStyle, styles.textDecoration]);\r\n\r\n  // Stable update function using useCallback\r\n  const updateStyles = useCallback(\r\n    (newStyles: Partial<TextStyles>) => {\r\n      updateAttrs({ \r\n        styles: { \r\n          ...styles, \r\n          ...newStyles \r\n        } \r\n      });\r\n    },\r\n    [styles, updateAttrs]\r\n  );\r\n\r\n  // Fixed debounced color update function\r\n  const debouncedColorUpdate = useCallback(\r\n    debounce((color: string) => {\r\n      updateStyles({color});\r\n    }, DEBOUNCE_DELAY),\r\n    [updateStyles]\r\n  );\r\n\r\n  // Format toggle handler\r\n  const toggleFormat = useCallback(\r\n    (format: FormatType) => {\r\n      const isCurrentlyApplied = formatOptions.includes(format);\r\n      \r\n      const formatStyleMap: Record<FormatType, Partial<TextStyles>> = {\r\n        bold: { fontWeight: isCurrentlyApplied ? 'normal' : 'bold' },\r\n        italic: { fontStyle: isCurrentlyApplied ? 'normal' : 'italic' },\r\n        underline: { textDecoration: isCurrentlyApplied ? 'none' : 'underline' }\r\n      };\r\n\r\n      updateStyles(formatStyleMap[format]);\r\n    },\r\n    [formatOptions, updateStyles]\r\n  );\r\n\r\n  // Alignment change handler\r\n  const handleAlignmentChange = useCallback(\r\n    (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {\r\n      if (newAlignment !== null) {\r\n        updateStyles({ textAlign: newAlignment });\r\n      }\r\n    },\r\n    [updateStyles]\r\n  );\r\n\r\n  // Color change handler\r\n  const handleColorChange = useCallback(\r\n    (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      debouncedColorUpdate(event.target.value);\r\n    },\r\n    [debouncedColorUpdate]\r\n  );\r\n\r\n  // Generic style change handlers\r\n  const handleFontFamilyChange = useCallback(\r\n    (event: any) => updateStyles({ fontFamily: event.target.value }),\r\n    [updateStyles]\r\n  );\r\n\r\n  const handleFontSizeChange = useCallback(\r\n    (event: any) => updateStyles({ fontSize: Number(event.target.value) }),\r\n    [updateStyles]\r\n  );\r\n\r\n  const handleLineHeightChange = useCallback(\r\n    (event: any) => updateStyles({ lineHeight: String(event.target.value) }),\r\n    [updateStyles]\r\n  );\r\n\r\n  return (\r\n    <>\r\n      {/* Font Family Selection */}\r\n      <Box sx={{ mb: 2 }}>\r\n        <FormControl size=\"small\" fullWidth>\r\n          <Select\r\n            value={styles.fontFamily || ''}\r\n            onChange={handleFontFamilyChange}\r\n            displayEmpty\r\n            label=\"Select Font\"\r\n          >\r\n            {FONT_FAMILIES.map((family) => (\r\n              <MenuItem key={family} value={family}>\r\n                {family}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Font Size and Line Height */}\r\n      <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\r\n        <FormControl size=\"small\" fullWidth>\r\n          <Select\r\n            value={styles.fontSize || ''}\r\n            onChange={handleFontSizeChange}\r\n            renderValue={(v) => `${v}px`}\r\n            label=\"Size\"\r\n            displayEmpty\r\n          >\r\n            {FONT_SIZES.map((size) => (\r\n              <MenuItem key={size} value={size}>\r\n                {size}px\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n\r\n        <FormControl size=\"small\" fullWidth>\r\n          <Select\r\n            value={styles.lineHeight || ''}\r\n            onChange={handleLineHeightChange}\r\n            renderValue={(v) => `${v}x`}\r\n            label=\"Line Height\"\r\n            displayEmpty\r\n          >\r\n            {LINE_HEIGHTS.map((height) => (\r\n              <MenuItem key={height} value={height}>\r\n                {height}x\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Text Alignment */}\r\n      <AlignmentControl \r\n        alignment={styles.textAlign} \r\n        onAlignmentChange={handleAlignmentChange} \r\n      />\r\n\r\n      {/* Format Options */}\r\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n        <StyledToggleButtonGroup item={3}>\r\n          <Tooltip title=\"Bold\">\r\n            <ToggleButton\r\n              value=\"bold\"\r\n              selected={formatOptions.includes('bold')}\r\n              onClick={() => toggleFormat('bold')}\r\n              aria-label=\"bold\"\r\n              size=\"small\"\r\n              sx={{ borderRadius: 1 }}\r\n            >\r\n              <FormatBoldIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n\r\n          <Tooltip title=\"Italic\">\r\n            <ToggleButton\r\n              value=\"italic\"\r\n              selected={formatOptions.includes('italic')}\r\n              onClick={() => toggleFormat('italic')}\r\n              aria-label=\"italic\"\r\n              size=\"small\"\r\n              sx={{ borderRadius: 1 }}\r\n            >\r\n              <FormatItalicIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n\r\n          <Tooltip title=\"Underline\">\r\n            <ToggleButton\r\n              value=\"underline\"\r\n              selected={formatOptions.includes('underline')}\r\n              onClick={() => toggleFormat('underline')}\r\n              aria-label=\"underline\"\r\n              size=\"small\"\r\n              sx={{ borderRadius: 1 }}\r\n            >\r\n              <FormatUnderlinedIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n        </StyledToggleButtonGroup>\r\n      </Box>\r\n\r\n      {/* Color Picker */}\r\n      <Box sx={{ mb: 2, width: '100%' }}>\r\n        <TextField\r\n          label=\"Text Color\"\r\n          variant=\"outlined\"\r\n          type=\"color\"\r\n          value={styles.color || '#000000'}\r\n          onChange={handleColorChange}\r\n          size=\"small\"\r\n          fullWidth\r\n          InputProps={{\r\n            startAdornment: (\r\n              <InputAdornment position=\"start\">\r\n                <ColorLensIcon fontSize=\"small\" />\r\n              </InputAdornment>\r\n            ),\r\n          }}\r\n        />\r\n      </Box>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default React.memo(TextControls);"],"names":["FormatBoldIcon","FormatItalicIcon","FormatUnderlinedIcon","ColorLensIcon","React"],"mappings":"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"}

package/dist/views/template-editor/components/controllers/TextControls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/TextControls.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  Box,\n  TextField,\n  ToggleButtonGroup,\n  ToggleButton,\n  InputAdornment,\n  Tooltip,\n  FormControl,\n  MenuItem,\n  styled,\n  toggleButtonGroupClasses\n} from '@mui/material';\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport { debounce } from 'lodash';\nimport Select from '../../../../components/select/select';\nimport AlignmentControl from './AlignmentControl';\n\n// Styled component with better typing\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)<{ item?: number }>(\n  ({ theme, item = 4 }) => ({\n    display: 'grid',\n    borderRadius: 4,\n    border: `1px solid #e3e3e3`,\n    width: '100%',\n    gridTemplateColumns: `repeat(${item}, 1fr)`,\n    [`& .${toggleButtonGroupClasses.grouped}`]: {\n      margin: theme.spacing(0.5),\n      border: 0,\n      borderRadius: theme.shape.borderRadius,\n      [`&.${toggleButtonGroupClasses.disabled}`]: {\n        border: 0,\n      },\n    },\n    [`& .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]:\n      {\n        marginLeft: -1,\n        borderLeft: '1px solid transparent',\n      },\n    [`& .${toggleButtonGroupClasses.selected}`]: {\n      backgroundColor: `${theme.palette.theme.primary[800]} !important`,\n      color: '#fff !important',\n    },\n  })\n);\n\n// Type definitions\ninterface TextStyles {\n  fontFamily?: string;\n  fontSize?: number;\n  lineHeight?: string | number;\n  textAlign?: string;\n  fontWeight?: string;\n  fontStyle?: string;\n  textDecoration?: string;\n  color?: string;\n}\n\ninterface TextControlsProps {\n  attrs: {\n    styles?: TextStyles;\n    [key: string]: any;\n  };\n  updateAttrs: (attr: Record<string, any>) => void;\n}\n\ntype FormatType = 'bold' | 'italic' | 'underline';\n\n// Constants\nconst FONT_SIZES = [10, 12, 14, 16, 20, 24, 28, 32] as const;\nconst LINE_HEIGHTS = [1, 1.2, 1.5, 2] as const;\nconst FONT_FAMILIES = [\n  'Arial',\n  'Times New Roman', \n  'Roboto',\n  'Helvetica',\n  'Georgia',\n  'Courier New'\n] as const;\n\nconst DEBOUNCE_DELAY = 300;\n\nconst TextControls: React.FC<TextControlsProps> = ({ attrs, updateAttrs }) => {\n  const styles = useMemo(() => attrs.styles || {}, [JSON.stringify(attrs.styles)]);\n  \n  // Derive format options from current styles instead of separate state\n  const formatOptions = useMemo(() => {\n    const options: FormatType[] = [];\n    if (styles.fontWeight === 'bold') options.push('bold');\n    if (styles.fontStyle === 'italic') options.push('italic');\n    if (styles.textDecoration === 'underline') options.push('underline');\n    return options;\n  }, [styles.fontWeight, styles.fontStyle, styles.textDecoration]);\n\n  // Stable update function using useCallback\n  const updateStyles = useCallback(\n    (newStyles: Partial<TextStyles>) => {\n      updateAttrs({ \n        styles: { \n          ...styles, \n          ...newStyles \n        } \n      });\n    },\n    [styles, updateAttrs]\n  );\n\n  // Fixed debounced color update function\n  const debouncedColorUpdate = useCallback(\n    debounce((color: string) => {\n      updateStyles({color});\n    }, DEBOUNCE_DELAY),\n    [updateStyles]\n  );\n\n  // Format toggle handler\n  const toggleFormat = useCallback(\n    (format: FormatType) => {\n      const isCurrentlyApplied = formatOptions.includes(format);\n      \n      const formatStyleMap: Record<FormatType, Partial<TextStyles>> = {\n        bold: { fontWeight: isCurrentlyApplied ? 'normal' : 'bold' },\n        italic: { fontStyle: isCurrentlyApplied ? 'normal' : 'italic' },\n        underline: { textDecoration: isCurrentlyApplied ? 'none' : 'underline' }\n      };\n\n      updateStyles(formatStyleMap[format]);\n    },\n    [formatOptions, updateStyles]\n  );\n\n  // Alignment change handler\n  const handleAlignmentChange = useCallback(\n    (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {\n      if (newAlignment !== null) {\n        updateStyles({ textAlign: newAlignment });\n      }\n    },\n    [updateStyles]\n  );\n\n  // Color change handler\n  const handleColorChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      debouncedColorUpdate(event.target.value);\n    },\n    [debouncedColorUpdate]\n  );\n\n  // Generic style change handlers\n  const handleFontFamilyChange = useCallback(\n    (event: any) => updateStyles({ fontFamily: event.target.value }),\n    [updateStyles]\n  );\n\n  const handleFontSizeChange = useCallback(\n    (event: any) => updateStyles({ fontSize: Number(event.target.value) }),\n    [updateStyles]\n  );\n\n  const handleLineHeightChange = useCallback(\n    (event: any) => updateStyles({ lineHeight: String(event.target.value) }),\n    [updateStyles]\n  );\n\n  return (\n    <>\n      {/* Font Family Selection */}\n      <Box sx={{ mb: 2 }}>\n        <FormControl size=\"small\" fullWidth>\n          <Select\n            value={styles.fontFamily || ''}\n            onChange={handleFontFamilyChange}\n            displayEmpty\n            label=\"Select Font\"\n          >\n            {FONT_FAMILIES.map((family) => (\n              <MenuItem key={family} value={family}>\n                {family}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </Box>\n\n      {/* Font Size and Line Height */}\n      <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\n        <FormControl size=\"small\" fullWidth>\n          <Select\n            value={styles.fontSize || ''}\n            onChange={handleFontSizeChange}\n            renderValue={(v) => `${v}px`}\n            label=\"Size\"\n            displayEmpty\n          >\n            {FONT_SIZES.map((size) => (\n              <MenuItem key={size} value={size}>\n                {size}px\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n\n        <FormControl size=\"small\" fullWidth>\n          <Select\n            value={styles.lineHeight || ''}\n            onChange={handleLineHeightChange}\n            renderValue={(v) => `${v}x`}\n            label=\"Line Height\"\n            displayEmpty\n          >\n            {LINE_HEIGHTS.map((height) => (\n              <MenuItem key={height} value={height}>\n                {height}x\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </Box>\n\n      {/* Text Alignment */}\n      <AlignmentControl \n        alignment={styles.textAlign} \n        onAlignmentChange={handleAlignmentChange} \n      />\n\n      {/* Format Options */}\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\n        <StyledToggleButtonGroup item={3}>\n          <Tooltip title=\"Bold\">\n            <ToggleButton\n              value=\"bold\"\n              selected={formatOptions.includes('bold')}\n              onClick={() => toggleFormat('bold')}\n              aria-label=\"bold\"\n              size=\"small\"\n              sx={{ borderRadius: 1 }}\n            >\n              <FormatBoldIcon fontSize=\"small\" />\n            </ToggleButton>\n          </Tooltip>\n\n          <Tooltip title=\"Italic\">\n            <ToggleButton\n              value=\"italic\"\n              selected={formatOptions.includes('italic')}\n              onClick={() => toggleFormat('italic')}\n              aria-label=\"italic\"\n              size=\"small\"\n              sx={{ borderRadius: 1 }}\n            >\n              <FormatItalicIcon fontSize=\"small\" />\n            </ToggleButton>\n          </Tooltip>\n\n          <Tooltip title=\"Underline\">\n            <ToggleButton\n              value=\"underline\"\n              selected={formatOptions.includes('underline')}\n              onClick={() => toggleFormat('underline')}\n              aria-label=\"underline\"\n              size=\"small\"\n              sx={{ borderRadius: 1 }}\n            >\n              <FormatUnderlinedIcon fontSize=\"small\" />\n            </ToggleButton>\n          </Tooltip>\n        </StyledToggleButtonGroup>\n      </Box>\n\n      {/* Color Picker */}\n      <Box sx={{ mb: 2, width: '100%' }}>\n        <TextField\n          label=\"Text Color\"\n          variant=\"outlined\"\n          type=\"color\"\n          value={styles.color || '#000000'}\n          onChange={handleColorChange}\n          size=\"small\"\n          fullWidth\n          InputProps={{\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <ColorLensIcon fontSize=\"small\" />\n              </InputAdornment>\n            ),\n          }}\n        />\n      </Box>\n    </>\n  );\n};\n\nexport default React.memo(TextControls);"],"names":["StyledToggleButtonGroup","styled","ToggleButtonGroup","theme","item","display","borderRadius","border","width","gridTemplateColumns","toggleButtonGroupClasses","grouped","margin","spacing","shape","disabled","middleButton","lastButton","marginLeft","borderLeft","selected","backgroundColor","palette","primary","color","FONT_SIZES","LINE_HEIGHTS","FONT_FAMILIES","TextControls","React","memo","attrs","updateAttrs","styles","useMemo","JSON","stringify","formatOptions","options","fontWeight","push","fontStyle","textDecoration","updateStyles","useCallback","newStyles","debouncedColorUpdate","debounce","toggleFormat","format","isCurrentlyApplied","includes","bold","italic","underline","handleAlignmentChange","event","newAlignment","textAlign","handleColorChange","target","value","handleFontFamilyChange","fontFamily","handleFontSizeChange","fontSize","Number","handleLineHeightChange","lineHeight","String","jsxs","Fragment","children","jsx","Box","sx","mb","FormControl","size","fullWidth","Select","onChange","displayEmpty","label","map","family","MenuItem","gap","renderValue","v","height","AlignmentControl","alignment","onAlignmentChange","flexWrap","Tooltip","title","ToggleButton","onClick","FormatBoldIcon","FormatItalicIcon","FormatUnderlinedIcon","TextField","variant","type","InputProps","startAdornment","InputAdornment","position","ColorLensIcon"],"mappings":"8gDAuBA,MAAMA,EAA0BC,EAAAA,QAAOC,UAAPD,CAC9B,EAAGE,QAAOC,OAAO,OACfC,QAAS,OACTC,aAAc,EACdC,OAAQ,oBACRC,MAAO,OACPC,oBAAqB,UAAUL,UAC/B,CAAC,MAAMM,UAAyBC,WAAY,CAC1CC,OAAQT,EAAMU,QAAQ,IACtBN,OAAQ,EACRD,aAAcH,EAAMW,MAAMR,aAC1B,CAAC,KAAKI,UAAyBK,YAAa,CAC1CR,OAAQ,IAGZ,CAAC,MAAMG,UAAyBM,oBAAoBN,EAAAA,QAAyBO,cAC3E,CACEC,YAAY,EACZC,WAAY,yBAEhB,CAAC,MAAMT,UAAyBU,YAAa,CAC3CC,gBAAiB,GAAGlB,EAAMmB,QAAQnB,MAAMoB,QAAQ,kBAChDC,MAAO,sBA4BPC,EAAa,CAAC,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,IAC1CC,EAAe,CAAC,EAAG,IAAK,IAAK,GAC7BC,EAAgB,CACpB,QACA,kBACA,SACA,YACA,UACA,eAwNF,IAAAC,EAAeC,EAAAA,QAAMC,KAnN6B,EAAGC,QAAOC,kBAC1D,MAAMC,EAASC,EAAAA,QAAQ,IAAMH,EAAME,QAAU,CAAA,EAAI,CAACE,KAAKC,UAAUL,EAAME,UAGjEI,EAAgBH,EAAAA,QAAQ,KAC5B,MAAMI,EAAwB,GAI9B,MAH0B,SAAtBL,EAAOM,YAAuBD,EAAQE,KAAK,QACtB,WAArBP,EAAOQ,WAAwBH,EAAQE,KAAK,UAClB,cAA1BP,EAAOS,gBAAgCJ,EAAQE,KAAK,aACjDF,GACN,CAACL,EAAOM,WAAYN,EAAOQ,UAAWR,EAAOS,iBAG1CC,EAAeC,EAAAA,YAClBC,IACCb,EAAY,CACVC,OAAQ,IACHA,KACAY,MAIT,CAACZ,EAAQD,IAILc,EAAuBF,EAAAA,YAC3BG,EAAAA,SAAUvB,IACRmB,EAAa,CAACnB,WA9BG,KAgCnB,CAACmB,IAIGK,EAAeJ,EAAAA,YAClBK,IACC,MAAMC,EAAqBb,EAAcc,SAASF,GAQlDN,EANgE,CAC9DS,KAAM,CAAEb,WAAYW,EAAqB,SAAW,QACpDG,OAAQ,CAAEZ,UAAWS,EAAqB,SAAW,UACrDI,UAAW,CAAEZ,eAAgBQ,EAAqB,OAAS,cAGjCD,KAE9B,CAACZ,EAAeM,IAIZY,EAAwBX,EAAAA,YAC5B,CAACY,EAAsCC,KAChB,OAAjBA,GACFd,EAAa,CAAEe,UAAWD,KAG9B,CAACd,IAIGgB,EAAoBf,EAAAA,YACvBY,IACCV,EAAqBU,EAAMI,OAAOC,QAEpC,CAACf,IAIGgB,EAAyBlB,EAAAA,YAC5BY,GAAeb,EAAa,CAAEoB,WAAYP,EAAMI,OAAOC,QACxD,CAAClB,IAGGqB,EAAuBpB,EAAAA,YAC1BY,GAAeb,EAAa,CAAEsB,SAAUC,OAAOV,EAAMI,OAAOC,SAC7D,CAAClB,IAGGwB,EAAyBvB,EAAAA,YAC5BY,GAAeb,EAAa,CAAEyB,WAAYC,OAAOb,EAAMI,OAAOC,SAC/D,CAAClB;AAGH,OACE2B,EAAAA,KAAAC,WAAA,CAEEC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,GACbJ,wBAAAC,EAAAA,IAACI,EAAAA,QAAA,CAAYC,KAAK,QAAQC,WAAS,EACjCP,wBAAAC,EAAAA,IAACO,EAAAA,OAAA,CACCnB,MAAO5B,EAAO8B,YAAc,GAC5BkB,SAAUnB,EACVoB,cAAY,EACZC,MAAM,cAELX,SAAA7C,EAAcyD,IAAKC,oBAClBZ,IAACa,EAAAA,SAAsBzB,MAAOwB,EAC3Bb,SAAAa,GADYA;eASvBf,EAAAA,KAACI,EAAAA,QAAA,CAAIC,GAAI,CAAEC,GAAI,EAAGvE,QAAS,OAAQkF,IAAK,GACtCf,SAAA;eAAAC,EAAAA,IAACI,EAAAA,QAAA,CAAYC,KAAK,QAAQC,WAAS,EACjCP,wBAAAC,EAAAA,IAACO,EAAAA,OAAA,CACCnB,MAAO5B,EAAOgC,UAAY,GAC1BgB,SAAUjB,EACVwB,YAAcC,GAAM,GAAGA,MACvBN,MAAM,OACND,cAAY,EAEXV,WAAWY,IAAKN,kBACfR,OAACgB,EAAAA,QAAA,CAAoBzB,MAAOiB,EACzBN,SAAA,CAAAM,EAAK,OADOA;eAOrBL,EAAAA,IAACI,EAAAA,QAAA,CAAYC,KAAK,QAAQC,WAAS,EACjCP,wBAAAC,EAAAA,IAACO,EAAAA,OAAA,CACCnB,MAAO5B,EAAOmC,YAAc,GAC5Ba,SAAUd,EACVqB,YAAcC,GAAM,GAAGA,KACvBN,MAAM,cACND,cAAY,EAEXV,WAAaY,IAAKM,kBACjBpB,OAACgB,EAAAA,QAAA,CAAsBzB,MAAO6B,EAC3BlB,SAAA,CAAAkB,EAAO,MADKA;eASvBjB,EAAAA,IAACkB,EAAAA,QAAA,CACCC,UAAW3D,EAAOyB,UAClBmC,kBAAmBtC;qBAIpBmB,EAAAA,QAAA,CAAIC,GAAI,CAAEtE,QAAS,OAAQyF,SAAU,OAAQP,IAAK,EAAGX,GAAI,GACxDJ,wBAAAF,EAAAA,KAACtE,EAAA,CAAwBI,KAAM,EAC7BoE,SAAA;eAAAC,EAAAA,IAACsB,EAAAA,QAAA,CAAQC,MAAM,OACbxB,wBAAAC,EAAAA,IAACwB,EAAAA,QAAA,CACCpC,MAAM,OACNzC,SAAUiB,EAAcc,SAAS,QACjC+C,QAAS,IAAMlD,EAAa,QAC5B,aAAW,OACX8B,KAAK,QACLH,GAAI,CAAErE,aAAc,GAEpBkE,0BAAAC,IAAC0B,EAAAA,QAAA,CAAelC,SAAS;eAI7BQ,EAAAA,IAACsB,EAAAA,QAAA,CAAQC,MAAM,SACbxB,wBAAAC,EAAAA,IAACwB,EAAAA,QAAA,CACCpC,MAAM,SACNzC,SAAUiB,EAAcc,SAAS,UACjC+C,QAAS,IAAMlD,EAAa,UAC5B,aAAW,SACX8B,KAAK,QACLH,GAAI,CAAErE,aAAc,GAEpBkE,0BAAAC,IAAC2B,EAAAA,QAAA,CAAiBnC,SAAS;eAI/BQ,EAAAA,IAACsB,EAAAA,QAAA,CAAQC,MAAM,YACbxB,wBAAAC,EAAAA,IAACwB,EAAAA,QAAA,CACCpC,MAAM,YACNzC,SAAUiB,EAAcc,SAAS,aACjC+C,QAAS,IAAMlD,EAAa,aAC5B,aAAW,YACX8B,KAAK,QACLH,GAAI,CAAErE,aAAc,GAEpBkE,0BAAAC,IAAC4B,EAAAA,QAAA,CAAqBpC,SAAS;eAOvCQ,MAACC,EAAAA,SAAIC,GAAI,CAAEC,GAAI,EAAGpE,MAAO,QACvBgE,wBAAAC,EAAAA,IAAC6B,EAAAA,QAAA,CACCnB,MAAM,aACNoB,QAAQ,WACRC,KAAK,QACL3C,MAAO5B,EAAOT,OAAS,UACvByD,SAAUtB,EACVmB,KAAK,QACLC,WAAS,EACT0B,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvBpC,wBAAAC,EAAAA,IAACoC,EAAAA,QAAA,CAAc5C,SAAS"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/TextControls.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport {\r\n  Box,\r\n  TextField,\r\n  ToggleButtonGroup,\r\n  ToggleButton,\r\n  InputAdornment,\r\n  Tooltip,\r\n  FormControl,\r\n  MenuItem,\r\n  styled,\r\n  toggleButtonGroupClasses\r\n} from '@mui/material';\r\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\r\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\r\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\r\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\r\nimport { debounce } from 'lodash';\r\nimport Select from '../../../../components/select/select';\r\nimport AlignmentControl from './AlignmentControl';\r\n\r\n// Styled component with better typing\r\nconst StyledToggleButtonGroup = styled(ToggleButtonGroup)<{ item?: number }>(\r\n  ({ theme, item = 4 }) => ({\r\n    display: 'grid',\r\n    borderRadius: 4,\r\n    border: `1px solid #e3e3e3`,\r\n    width: '100%',\r\n    gridTemplateColumns: `repeat(${item}, 1fr)`,\r\n    [`& .${toggleButtonGroupClasses.grouped}`]: {\r\n      margin: theme.spacing(0.5),\r\n      border: 0,\r\n      borderRadius: theme.shape.borderRadius,\r\n      [`&.${toggleButtonGroupClasses.disabled}`]: {\r\n        border: 0,\r\n      },\r\n    },\r\n    [`& .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]:\r\n      {\r\n        marginLeft: -1,\r\n        borderLeft: '1px solid transparent',\r\n      },\r\n    [`& .${toggleButtonGroupClasses.selected}`]: {\r\n      backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n      color: '#fff !important',\r\n    },\r\n  })\r\n);\r\n\r\n// Type definitions\r\ninterface TextStyles {\r\n  fontFamily?: string;\r\n  fontSize?: number;\r\n  lineHeight?: string | number;\r\n  textAlign?: string;\r\n  fontWeight?: string;\r\n  fontStyle?: string;\r\n  textDecoration?: string;\r\n  color?: string;\r\n}\r\n\r\ninterface TextControlsProps {\r\n  attrs: {\r\n    styles?: TextStyles;\r\n    [key: string]: any;\r\n  };\r\n  updateAttrs: (attr: Record<string, any>) => void;\r\n}\r\n\r\ntype FormatType = 'bold' | 'italic' | 'underline';\r\n\r\n// Constants\r\nconst FONT_SIZES = [10, 12, 14, 16, 20, 24, 28, 32] as const;\r\nconst LINE_HEIGHTS = [1, 1.2, 1.5, 2] as const;\r\nconst FONT_FAMILIES = [\r\n  'Arial',\r\n  'Times New Roman', \r\n  'Roboto',\r\n  'Helvetica',\r\n  'Georgia',\r\n  'Courier New'\r\n] as const;\r\n\r\nconst DEBOUNCE_DELAY = 300;\r\n\r\nconst TextControls: React.FC<TextControlsProps> = ({ attrs, updateAttrs }) => {\r\n  const styles = useMemo(() => attrs.styles || {}, [JSON.stringify(attrs.styles)]);\r\n  \r\n  // Derive format options from current styles instead of separate state\r\n  const formatOptions = useMemo(() => {\r\n    const options: FormatType[] = [];\r\n    if (styles.fontWeight === 'bold') options.push('bold');\r\n    if (styles.fontStyle === 'italic') options.push('italic');\r\n    if (styles.textDecoration === 'underline') options.push('underline');\r\n    return options;\r\n  }, [styles.fontWeight, styles.fontStyle, styles.textDecoration]);\r\n\r\n  // Stable update function using useCallback\r\n  const updateStyles = useCallback(\r\n    (newStyles: Partial<TextStyles>) => {\r\n      updateAttrs({ \r\n        styles: { \r\n          ...styles, \r\n          ...newStyles \r\n        } \r\n      });\r\n    },\r\n    [styles, updateAttrs]\r\n  );\r\n\r\n  // Fixed debounced color update function\r\n  const debouncedColorUpdate = useCallback(\r\n    debounce((color: string) => {\r\n      updateStyles({color});\r\n    }, DEBOUNCE_DELAY),\r\n    [updateStyles]\r\n  );\r\n\r\n  // Format toggle handler\r\n  const toggleFormat = useCallback(\r\n    (format: FormatType) => {\r\n      const isCurrentlyApplied = formatOptions.includes(format);\r\n      \r\n      const formatStyleMap: Record<FormatType, Partial<TextStyles>> = {\r\n        bold: { fontWeight: isCurrentlyApplied ? 'normal' : 'bold' },\r\n        italic: { fontStyle: isCurrentlyApplied ? 'normal' : 'italic' },\r\n        underline: { textDecoration: isCurrentlyApplied ? 'none' : 'underline' }\r\n      };\r\n\r\n      updateStyles(formatStyleMap[format]);\r\n    },\r\n    [formatOptions, updateStyles]\r\n  );\r\n\r\n  // Alignment change handler\r\n  const handleAlignmentChange = useCallback(\r\n    (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {\r\n      if (newAlignment !== null) {\r\n        updateStyles({ textAlign: newAlignment });\r\n      }\r\n    },\r\n    [updateStyles]\r\n  );\r\n\r\n  // Color change handler\r\n  const handleColorChange = useCallback(\r\n    (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      debouncedColorUpdate(event.target.value);\r\n    },\r\n    [debouncedColorUpdate]\r\n  );\r\n\r\n  // Generic style change handlers\r\n  const handleFontFamilyChange = useCallback(\r\n    (event: any) => updateStyles({ fontFamily: event.target.value }),\r\n    [updateStyles]\r\n  );\r\n\r\n  const handleFontSizeChange = useCallback(\r\n    (event: any) => updateStyles({ fontSize: Number(event.target.value) }),\r\n    [updateStyles]\r\n  );\r\n\r\n  const handleLineHeightChange = useCallback(\r\n    (event: any) => updateStyles({ lineHeight: String(event.target.value) }),\r\n    [updateStyles]\r\n  );\r\n\r\n  return (\r\n    <>\r\n      {/* Font Family Selection */}\r\n      <Box sx={{ mb: 2 }}>\r\n        <FormControl size=\"small\" fullWidth>\r\n          <Select\r\n            value={styles.fontFamily || ''}\r\n            onChange={handleFontFamilyChange}\r\n            displayEmpty\r\n            label=\"Select Font\"\r\n          >\r\n            {FONT_FAMILIES.map((family) => (\r\n              <MenuItem key={family} value={family}>\r\n                {family}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Font Size and Line Height */}\r\n      <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\r\n        <FormControl size=\"small\" fullWidth>\r\n          <Select\r\n            value={styles.fontSize || ''}\r\n            onChange={handleFontSizeChange}\r\n            renderValue={(v) => `${v}px`}\r\n            label=\"Size\"\r\n            displayEmpty\r\n          >\r\n            {FONT_SIZES.map((size) => (\r\n              <MenuItem key={size} value={size}>\r\n                {size}px\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n\r\n        <FormControl size=\"small\" fullWidth>\r\n          <Select\r\n            value={styles.lineHeight || ''}\r\n            onChange={handleLineHeightChange}\r\n            renderValue={(v) => `${v}x`}\r\n            label=\"Line Height\"\r\n            displayEmpty\r\n          >\r\n            {LINE_HEIGHTS.map((height) => (\r\n              <MenuItem key={height} value={height}>\r\n                {height}x\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Text Alignment */}\r\n      <AlignmentControl \r\n        alignment={styles.textAlign} \r\n        onAlignmentChange={handleAlignmentChange} \r\n      />\r\n\r\n      {/* Format Options */}\r\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>\r\n        <StyledToggleButtonGroup item={3}>\r\n          <Tooltip title=\"Bold\">\r\n            <ToggleButton\r\n              value=\"bold\"\r\n              selected={formatOptions.includes('bold')}\r\n              onClick={() => toggleFormat('bold')}\r\n              aria-label=\"bold\"\r\n              size=\"small\"\r\n              sx={{ borderRadius: 1 }}\r\n            >\r\n              <FormatBoldIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n\r\n          <Tooltip title=\"Italic\">\r\n            <ToggleButton\r\n              value=\"italic\"\r\n              selected={formatOptions.includes('italic')}\r\n              onClick={() => toggleFormat('italic')}\r\n              aria-label=\"italic\"\r\n              size=\"small\"\r\n              sx={{ borderRadius: 1 }}\r\n            >\r\n              <FormatItalicIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n\r\n          <Tooltip title=\"Underline\">\r\n            <ToggleButton\r\n              value=\"underline\"\r\n              selected={formatOptions.includes('underline')}\r\n              onClick={() => toggleFormat('underline')}\r\n              aria-label=\"underline\"\r\n              size=\"small\"\r\n              sx={{ borderRadius: 1 }}\r\n            >\r\n              <FormatUnderlinedIcon fontSize=\"small\" />\r\n            </ToggleButton>\r\n          </Tooltip>\r\n        </StyledToggleButtonGroup>\r\n      </Box>\r\n\r\n      {/* Color Picker */}\r\n      <Box sx={{ mb: 2, width: '100%' }}>\r\n        <TextField\r\n          label=\"Text Color\"\r\n          variant=\"outlined\"\r\n          type=\"color\"\r\n          value={styles.color || '#000000'}\r\n          onChange={handleColorChange}\r\n          size=\"small\"\r\n          fullWidth\r\n          InputProps={{\r\n            startAdornment: (\r\n              <InputAdornment position=\"start\">\r\n                <ColorLensIcon fontSize=\"small\" />\r\n              </InputAdornment>\r\n            ),\r\n          }}\r\n        />\r\n      </Box>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default React.memo(TextControls);"],"names":["StyledToggleButtonGroup","styled","ToggleButtonGroup","theme","item","display","borderRadius","border","width","gridTemplateColumns","toggleButtonGroupClasses","grouped","margin","spacing","shape","disabled","middleButton","lastButton","marginLeft","borderLeft","selected","backgroundColor","palette","primary","color","FONT_SIZES","LINE_HEIGHTS","FONT_FAMILIES","TextControls","React","memo","attrs","updateAttrs","styles","useMemo","JSON","stringify","formatOptions","options","fontWeight","push","fontStyle","textDecoration","updateStyles","useCallback","newStyles","debouncedColorUpdate","debounce","toggleFormat","format","isCurrentlyApplied","includes","bold","italic","underline","handleAlignmentChange","event","newAlignment","textAlign","handleColorChange","target","value","handleFontFamilyChange","fontFamily","handleFontSizeChange","fontSize","Number","handleLineHeightChange","lineHeight","String","jsxs","Fragment","children","jsx","Box","sx","mb","FormControl","size","fullWidth","Select","onChange","displayEmpty","label","map","family","MenuItem","gap","renderValue","v","height","AlignmentControl","alignment","onAlignmentChange","flexWrap","Tooltip","title","ToggleButton","onClick","FormatBoldIcon","FormatItalicIcon","FormatUnderlinedIcon","TextField","variant","type","InputProps","startAdornment","InputAdornment","position","ColorLensIcon"],"mappings":"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"}

package/dist/views/template-editor/components/controllers/border-control/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\nimport Select from \"../../../../components/select/select\";\nimport Typography from \"../../../../components/typography/typography\";\nimport formatText from \"../../../../utils/format-text\";\nimport { useEffect } from \"react\";\n\nconst Android12Switch = styled(Switch)(({ theme }) => ({\n  padding: 8,\n  '& .MuiSwitch-track': {\n    borderRadius: 22 / 2,\n    '&::before, &::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      transform: 'translateY(-50%)',\n      width: 16,\n      height: 16,\n    },\n    '&::before': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\n      left: 12,\n    },\n    '&::after': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\n      right: 12,\n    },\n  },\n  '& .MuiSwitch-thumb': {\n    boxShadow: 'none',\n    width: 16,\n    height: 16,\n    margin: 2,\n    // color: theme.palette.theme.primary[800]\n  },\n  '& .Mui-checked': {\n    color: `${theme.palette.theme.primary[800]} !important`,\n  },\n  '& .Mui-checked+.MuiSwitch-track': {\n    backgroundColor: `${theme.palette.theme.primary[800]} !important`,\n  },\n}));\n\nexport interface BorderControlProps {\n  styles: Record<string, any>,\n  onChange: (key: string, value: any) => void\n  isBordered: boolean;\n  disableWidth?: boolean;\n  disableStyle?: boolean;\n  disableColor?: boolean;\n  disableCollapse?: boolean;\n  disableRadius?: boolean;\n  initiateStyles?: (styles: Record<string, any>) => void;\n}\n\nconst borderStyles = [\n  'none',\n  'solid',\n  'dashed',\n  'dotted',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset'\n];\n\nconst BorderControl:React.FC<BorderControlProps> = ({\n  styles,\n  onChange,\n  isBordered,\n  disableWidth = false,\n  disableStyle = false,\n  disableColor = false,\n  disableCollapse = false,\n  disableRadius = false,\n  initiateStyles\n}) => {\n\n  useEffect(() => {\n    if(initiateStyles instanceof Function) {\n        if (!isBordered) {\n          initiateStyles({\n            'border': 0,\n            'borderStyle':'none',\n            'borderColor':'#000000',\n            'borderCollapse':'separate',\n            'borderRadius':0,\n          });\n        } else{\n          initiateStyles({\n            'border': 1,\n            'borderStyle':'solid',\n            'borderColor':'#000000',\n            'borderCollapse':'collapse',\n            'borderRadius':0,\n          });\n        }\n    }\n  }, [isBordered]);\n  return (\n    <Grid container spacing={2}>\n      <Grid item xs={12}>\n        <FormControlLabel\n          control={\n            <Android12Switch\n              checked={isBordered}\n              onChange={(e) => onChange('is_bordered', e.target.checked)}\n            />\n          }\n          label={<Typography type='s5'  weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\n          labelPlacement=\"start\"\n          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\n        />\n      </Grid>\n      \n      {isBordered && (\n        <>\n        {/* Width */}\n        {!disableWidth && (\n          <Grid item xs={6}>\n            <Select\n                value={styles.border || 1}\n                onChange={(e) => onChange('border', e.target.value)}\n                label=\"Border Width\"\n                fullWidth\n                size=\"small\"\n              >\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\n                  <MenuItem key={wd} value={wd}>\n                    <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\n                  </MenuItem>\n                ))}\n              </Select>\n          </Grid>\n        )}\n          \n          {/* Style */}\n          {!disableStyle && (  \n            <Grid item xs={6}>\n              <FormControl fullWidth size=\"small\">\n                <Select\n                  value={styles.borderStyle || 'solid'}\n                  onChange={(e) => onChange('borderStyle', e.target.value)}\n                  renderValue={(value) => formatText(value)}\n                  label=\"Border Style\"\n                >\n                  {borderStyles.map((style) => (\n                    <MenuItem key={style} value={style}>\n                      <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\n                    </MenuItem>\n                  ))}\n                </Select>\n              </FormControl>\n            </Grid>\n          )}\n          \n          {/* Color */}\n          {!disableColor && (  \n            <Grid item xs={6}>\n              <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\n              <ColorPickerInput\n                value={styles.borderColor || '#e0e0e0'}\n                onChange={(color) => onChange('borderColor', color)}\n                fullWidth\n              />\n            </Grid>\n          )}\n\n          {/* Collapse */}\n          {!disableCollapse && (  \n            <Grid item xs={6}>\n              <FormControl fullWidth size=\"small\">\n                <Select\n                  value={styles.borderCollapse || 'collapse'}\n                  onChange={(e) => onChange('borderCollapse', e.target.value)}\n                  label=\"Border Collapse\"\n                  renderValue={(value) => formatText(value)}\n                >\n                  <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\n                  <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\n                </Select>\n              </FormControl>\n            </Grid>\n          )}\n\n          {/* Radius */}\n          {!disableRadius && (\n            <Grid item xs={12}>\n            <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\n            <Slider\n              value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\n              min={0}\n              max={20}\n              step={1}\n              marks\n              onChange={(_, value) => onChange('borderRadius', value)}\n              valueLabelDisplay=\"auto\"\n              sx={(theme) => ({\n                '& .MuiSlider-rail': {\n                  color: theme.palette.theme.primary[500],\n                },\n                '& .MuiSlider-thumb': {\n                  color: theme.palette.theme.primary[800],\n                },\n                '& .MuiSlider-track': {\n                  color: theme.palette.theme.primary[600],\n                },\n              })}\n            />\n          </Grid>\n          )}\n        </>\n      )}\n      \n    </Grid>\n  );\n}\n \nexport default BorderControl;"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\r\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\r\nimport Select from \"../../../../components/select/select\";\r\nimport Typography from \"../../../../components/typography/typography\";\r\nimport formatText from \"../../../../utils/format-text\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Android12Switch = styled(Switch)(({ theme }) => ({\r\n  padding: 8,\r\n  '& .MuiSwitch-track': {\r\n    borderRadius: 22 / 2,\r\n    '&::before, &::after': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)',\r\n      width: 16,\r\n      height: 16,\r\n    },\r\n    '&::before': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\r\n      left: 12,\r\n    },\r\n    '&::after': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\r\n      right: 12,\r\n    },\r\n  },\r\n  '& .MuiSwitch-thumb': {\r\n    boxShadow: 'none',\r\n    width: 16,\r\n    height: 16,\r\n    margin: 2,\r\n    // color: theme.palette.theme.primary[800]\r\n  },\r\n  '& .Mui-checked': {\r\n    color: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n  '& .Mui-checked+.MuiSwitch-track': {\r\n    backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n}));\r\n\r\nexport interface BorderControlProps {\r\n  styles: Record<string, any>,\r\n  onChange: (key: string, value: any) => void\r\n  isBordered: boolean;\r\n  disableWidth?: boolean;\r\n  disableStyle?: boolean;\r\n  disableColor?: boolean;\r\n  disableCollapse?: boolean;\r\n  disableRadius?: boolean;\r\n  initiateStyles?: (styles: Record<string, any>) => void;\r\n}\r\n\r\nconst borderStyles = [\r\n  'none',\r\n  'solid',\r\n  'dashed',\r\n  'dotted',\r\n  'double',\r\n  'groove',\r\n  'ridge',\r\n  'inset',\r\n  'outset'\r\n];\r\n\r\nconst BorderControl:React.FC<BorderControlProps> = ({\r\n  styles,\r\n  onChange,\r\n  isBordered,\r\n  disableWidth = false,\r\n  disableStyle = false,\r\n  disableColor = false,\r\n  disableCollapse = false,\r\n  disableRadius = false,\r\n  initiateStyles\r\n}) => {\r\n\r\n  useEffect(() => {\r\n    if(initiateStyles instanceof Function) {\r\n        if (!isBordered) {\r\n          initiateStyles({\r\n            'border': 0,\r\n            'borderStyle':'none',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'separate',\r\n            'borderRadius':0,\r\n          });\r\n        } else{\r\n          initiateStyles({\r\n            'border': 1,\r\n            'borderStyle':'solid',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'collapse',\r\n            'borderRadius':0,\r\n          });\r\n        }\r\n    }\r\n  }, [isBordered]);\r\n  return (\r\n    <Grid container spacing={2}>\r\n      <Grid item xs={12}>\r\n        <FormControlLabel\r\n          control={\r\n            <Android12Switch\r\n              checked={isBordered}\r\n              onChange={(e) => onChange('is_bordered', e.target.checked)}\r\n            />\r\n          }\r\n          label={<Typography type='s5'  weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\r\n          labelPlacement=\"start\"\r\n          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\r\n        />\r\n      </Grid>\r\n      \r\n      {isBordered && (\r\n        <>\r\n        {/* Width */}\r\n        {!disableWidth && (\r\n          <Grid item xs={6}>\r\n            <Select\r\n                value={styles.border || 1}\r\n                onChange={(e) => onChange('border', e.target.value)}\r\n                label=\"Border Width\"\r\n                fullWidth\r\n                size=\"small\"\r\n              >\r\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\r\n                  <MenuItem key={wd} value={wd}>\r\n                    <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\r\n                  </MenuItem>\r\n                ))}\r\n              </Select>\r\n          </Grid>\r\n        )}\r\n          \r\n          {/* Style */}\r\n          {!disableStyle && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderStyle || 'solid'}\r\n                  onChange={(e) => onChange('borderStyle', e.target.value)}\r\n                  renderValue={(value) => formatText(value)}\r\n                  label=\"Border Style\"\r\n                >\r\n                  {borderStyles.map((style) => (\r\n                    <MenuItem key={style} value={style}>\r\n                      <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\r\n                    </MenuItem>\r\n                  ))}\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n          \r\n          {/* Color */}\r\n          {!disableColor && (  \r\n            <Grid item xs={6}>\r\n              <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\r\n              <ColorPickerInput\r\n                value={styles.borderColor || '#e0e0e0'}\r\n                onChange={(color) => onChange('borderColor', color)}\r\n                fullWidth\r\n              />\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Collapse */}\r\n          {!disableCollapse && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderCollapse || 'collapse'}\r\n                  onChange={(e) => onChange('borderCollapse', e.target.value)}\r\n                  label=\"Border Collapse\"\r\n                  renderValue={(value) => formatText(value)}\r\n                >\r\n                  <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\r\n                  <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Radius */}\r\n          {!disableRadius && (\r\n            <Grid item xs={12}>\r\n            <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\r\n            <Slider\r\n              value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\r\n              min={0}\r\n              max={20}\r\n              step={1}\r\n              marks\r\n              onChange={(_, value) => onChange('borderRadius', value)}\r\n              valueLabelDisplay=\"auto\"\r\n              sx={(theme) => ({\r\n                '& .MuiSlider-rail': {\r\n                  color: theme.palette.theme.primary[500],\r\n                },\r\n                '& .MuiSlider-thumb': {\r\n                  color: theme.palette.theme.primary[800],\r\n                },\r\n                '& .MuiSlider-track': {\r\n                  color: theme.palette.theme.primary[600],\r\n                },\r\n              })}\r\n            />\r\n          </Grid>\r\n          )}\r\n        </>\r\n      )}\r\n      \r\n    </Grid>\r\n  );\r\n}\r\n \r\nexport default BorderControl;"],"names":[],"mappings":"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"}

package/dist/views/template-editor/components/controllers/border-control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\nimport Select from \"../../../../components/select/select\";\nimport Typography from \"../../../../components/typography/typography\";\nimport formatText from \"../../../../utils/format-text\";\nimport { useEffect } from \"react\";\n\nconst Android12Switch = styled(Switch)(({ theme }) => ({\n  padding: 8,\n  '& .MuiSwitch-track': {\n    borderRadius: 22 / 2,\n    '&::before, &::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      transform: 'translateY(-50%)',\n      width: 16,\n      height: 16,\n    },\n    '&::before': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\n      left: 12,\n    },\n    '&::after': {\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\n        theme.palette.getContrastText(theme.palette.primary.main),\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\n      right: 12,\n    },\n  },\n  '& .MuiSwitch-thumb': {\n    boxShadow: 'none',\n    width: 16,\n    height: 16,\n    margin: 2,\n    // color: theme.palette.theme.primary[800]\n  },\n  '& .Mui-checked': {\n    color: `${theme.palette.theme.primary[800]} !important`,\n  },\n  '& .Mui-checked+.MuiSwitch-track': {\n    backgroundColor: `${theme.palette.theme.primary[800]} !important`,\n  },\n}));\n\nexport interface BorderControlProps {\n  styles: Record<string, any>,\n  onChange: (key: string, value: any) => void\n  isBordered: boolean;\n  disableWidth?: boolean;\n  disableStyle?: boolean;\n  disableColor?: boolean;\n  disableCollapse?: boolean;\n  disableRadius?: boolean;\n  initiateStyles?: (styles: Record<string, any>) => void;\n}\n\nconst borderStyles = [\n  'none',\n  'solid',\n  'dashed',\n  'dotted',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset'\n];\n\nconst BorderControl:React.FC<BorderControlProps> = ({\n  styles,\n  onChange,\n  isBordered,\n  disableWidth = false,\n  disableStyle = false,\n  disableColor = false,\n  disableCollapse = false,\n  disableRadius = false,\n  initiateStyles\n}) => {\n\n  useEffect(() => {\n    if(initiateStyles instanceof Function) {\n        if (!isBordered) {\n          initiateStyles({\n            'border': 0,\n            'borderStyle':'none',\n            'borderColor':'#000000',\n            'borderCollapse':'separate',\n            'borderRadius':0,\n          });\n        } else{\n          initiateStyles({\n            'border': 1,\n            'borderStyle':'solid',\n            'borderColor':'#000000',\n            'borderCollapse':'collapse',\n            'borderRadius':0,\n          });\n        }\n    }\n  }, [isBordered]);\n  return (\n    <Grid container spacing={2}>\n      <Grid item xs={12}>\n        <FormControlLabel\n          control={\n            <Android12Switch\n              checked={isBordered}\n              onChange={(e) => onChange('is_bordered', e.target.checked)}\n            />\n          }\n          label={<Typography type='s5'  weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\n          labelPlacement=\"start\"\n          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\n        />\n      </Grid>\n      \n      {isBordered && (\n        <>\n        {/* Width */}\n        {!disableWidth && (\n          <Grid item xs={6}>\n            <Select\n                value={styles.border || 1}\n                onChange={(e) => onChange('border', e.target.value)}\n                label=\"Border Width\"\n                fullWidth\n                size=\"small\"\n              >\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\n                  <MenuItem key={wd} value={wd}>\n                    <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\n                  </MenuItem>\n                ))}\n              </Select>\n          </Grid>\n        )}\n          \n          {/* Style */}\n          {!disableStyle && (  \n            <Grid item xs={6}>\n              <FormControl fullWidth size=\"small\">\n                <Select\n                  value={styles.borderStyle || 'solid'}\n                  onChange={(e) => onChange('borderStyle', e.target.value)}\n                  renderValue={(value) => formatText(value)}\n                  label=\"Border Style\"\n                >\n                  {borderStyles.map((style) => (\n                    <MenuItem key={style} value={style}>\n                      <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\n                    </MenuItem>\n                  ))}\n                </Select>\n              </FormControl>\n            </Grid>\n          )}\n          \n          {/* Color */}\n          {!disableColor && (  \n            <Grid item xs={6}>\n              <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\n              <ColorPickerInput\n                value={styles.borderColor || '#e0e0e0'}\n                onChange={(color) => onChange('borderColor', color)}\n                fullWidth\n              />\n            </Grid>\n          )}\n\n          {/* Collapse */}\n          {!disableCollapse && (  \n            <Grid item xs={6}>\n              <FormControl fullWidth size=\"small\">\n                <Select\n                  value={styles.borderCollapse || 'collapse'}\n                  onChange={(e) => onChange('borderCollapse', e.target.value)}\n                  label=\"Border Collapse\"\n                  renderValue={(value) => formatText(value)}\n                >\n                  <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\n                  <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\n                </Select>\n              </FormControl>\n            </Grid>\n          )}\n\n          {/* Radius */}\n          {!disableRadius && (\n            <Grid item xs={12}>\n            <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\n            <Slider\n              value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\n              min={0}\n              max={20}\n              step={1}\n              marks\n              onChange={(_, value) => onChange('borderRadius', value)}\n              valueLabelDisplay=\"auto\"\n              sx={(theme) => ({\n                '& .MuiSlider-rail': {\n                  color: theme.palette.theme.primary[500],\n                },\n                '& .MuiSlider-thumb': {\n                  color: theme.palette.theme.primary[800],\n                },\n                '& .MuiSlider-track': {\n                  color: theme.palette.theme.primary[600],\n                },\n              })}\n            />\n          </Grid>\n          )}\n        </>\n      )}\n      \n    </Grid>\n  );\n}\n \nexport default BorderControl;"],"names":["Android12Switch","styled","Switch","theme","padding","borderRadius","content","position","top","transform","width","height","backgroundImage","encodeURIComponent","palette","getContrastText","primary","main","left","right","boxShadow","margin","color","backgroundColor","borderStyles","styles","onChange","isBordered","disableWidth","disableStyle","disableColor","disableCollapse","disableRadius","initiateStyles","useEffect","Function","border","borderStyle","borderColor","borderCollapse","jsxs","Grid","container","spacing","children","jsx","item","xs","FormControlLabel","control","checked","e","target","label","Typography","type","weight","labelPlacement","sx","display","alignItems","justifyContent","Fragment","Select","value","fullWidth","size","map","wd","MenuItem","FormControl","renderValue","formatText","style","mb","ColorPickerInput","variant","Slider","min","max","step","marks","_","valueLabelDisplay"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/views/template-editor/components/controllers/border-control.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport { FormControl, FormControlLabel, Grid, MenuItem, Slider, Switch, styled } from \"@mui/material\";\r\nimport ColorPickerInput from \"../../../../components/color-picker-input/color-picker-input\";\r\nimport Select from \"../../../../components/select/select\";\r\nimport Typography from \"../../../../components/typography/typography\";\r\nimport formatText from \"../../../../utils/format-text\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Android12Switch = styled(Switch)(({ theme }) => ({\r\n  padding: 8,\r\n  '& .MuiSwitch-track': {\r\n    borderRadius: 22 / 2,\r\n    '&::before, &::after': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)',\r\n      width: 16,\r\n      height: 16,\r\n    },\r\n    '&::before': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/></svg>')`,\r\n      left: 12,\r\n    },\r\n    '&::after': {\r\n      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 24 24\"><path fill=\"${encodeURIComponent(\r\n        theme.palette.getContrastText(theme.palette.primary.main),\r\n      )}\" d=\"M19,13H5V11H19V13Z\" /></svg>')`,\r\n      right: 12,\r\n    },\r\n  },\r\n  '& .MuiSwitch-thumb': {\r\n    boxShadow: 'none',\r\n    width: 16,\r\n    height: 16,\r\n    margin: 2,\r\n    // color: theme.palette.theme.primary[800]\r\n  },\r\n  '& .Mui-checked': {\r\n    color: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n  '& .Mui-checked+.MuiSwitch-track': {\r\n    backgroundColor: `${theme.palette.theme.primary[800]} !important`,\r\n  },\r\n}));\r\n\r\nexport interface BorderControlProps {\r\n  styles: Record<string, any>,\r\n  onChange: (key: string, value: any) => void\r\n  isBordered: boolean;\r\n  disableWidth?: boolean;\r\n  disableStyle?: boolean;\r\n  disableColor?: boolean;\r\n  disableCollapse?: boolean;\r\n  disableRadius?: boolean;\r\n  initiateStyles?: (styles: Record<string, any>) => void;\r\n}\r\n\r\nconst borderStyles = [\r\n  'none',\r\n  'solid',\r\n  'dashed',\r\n  'dotted',\r\n  'double',\r\n  'groove',\r\n  'ridge',\r\n  'inset',\r\n  'outset'\r\n];\r\n\r\nconst BorderControl:React.FC<BorderControlProps> = ({\r\n  styles,\r\n  onChange,\r\n  isBordered,\r\n  disableWidth = false,\r\n  disableStyle = false,\r\n  disableColor = false,\r\n  disableCollapse = false,\r\n  disableRadius = false,\r\n  initiateStyles\r\n}) => {\r\n\r\n  useEffect(() => {\r\n    if(initiateStyles instanceof Function) {\r\n        if (!isBordered) {\r\n          initiateStyles({\r\n            'border': 0,\r\n            'borderStyle':'none',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'separate',\r\n            'borderRadius':0,\r\n          });\r\n        } else{\r\n          initiateStyles({\r\n            'border': 1,\r\n            'borderStyle':'solid',\r\n            'borderColor':'#000000',\r\n            'borderCollapse':'collapse',\r\n            'borderRadius':0,\r\n          });\r\n        }\r\n    }\r\n  }, [isBordered]);\r\n  return (\r\n    <Grid container spacing={2}>\r\n      <Grid item xs={12}>\r\n        <FormControlLabel\r\n          control={\r\n            <Android12Switch\r\n              checked={isBordered}\r\n              onChange={(e) => onChange('is_bordered', e.target.checked)}\r\n            />\r\n          }\r\n          label={<Typography type='s5'  weight='medium' color='theme.secondary.800'>Bordered Table</Typography>}\r\n          labelPlacement=\"start\"\r\n          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: 'auto'}}\r\n        />\r\n      </Grid>\r\n      \r\n      {isBordered && (\r\n        <>\r\n        {/* Width */}\r\n        {!disableWidth && (\r\n          <Grid item xs={6}>\r\n            <Select\r\n                value={styles.border || 1}\r\n                onChange={(e) => onChange('border', e.target.value)}\r\n                label=\"Border Width\"\r\n                fullWidth\r\n                size=\"small\"\r\n              >\r\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((wd) => (\r\n                  <MenuItem key={wd} value={wd}>\r\n                    <Typography type='s5' color='theme.secondary.1000'>{wd}</Typography>\r\n                  </MenuItem>\r\n                ))}\r\n              </Select>\r\n          </Grid>\r\n        )}\r\n          \r\n          {/* Style */}\r\n          {!disableStyle && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderStyle || 'solid'}\r\n                  onChange={(e) => onChange('borderStyle', e.target.value)}\r\n                  renderValue={(value) => formatText(value)}\r\n                  label=\"Border Style\"\r\n                >\r\n                  {borderStyles.map((style) => (\r\n                    <MenuItem key={style} value={style}>\r\n                      <Typography type='s5' color='theme.secondary.1000'>{formatText(style)}</Typography>\r\n                    </MenuItem>\r\n                  ))}\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n          \r\n          {/* Color */}\r\n          {!disableColor && (  \r\n            <Grid item xs={6}>\r\n              <Typography type='s5' weight='medium' color='theme.secondary.800' mb={0.5}>Border Color</Typography>\r\n              <ColorPickerInput\r\n                value={styles.borderColor || '#e0e0e0'}\r\n                onChange={(color) => onChange('borderColor', color)}\r\n                fullWidth\r\n              />\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Collapse */}\r\n          {!disableCollapse && (  \r\n            <Grid item xs={6}>\r\n              <FormControl fullWidth size=\"small\">\r\n                <Select\r\n                  value={styles.borderCollapse || 'collapse'}\r\n                  onChange={(e) => onChange('borderCollapse', e.target.value)}\r\n                  label=\"Border Collapse\"\r\n                  renderValue={(value) => formatText(value)}\r\n                >\r\n                  <MenuItem value=\"collapse\"><Typography type='s5' color='theme.secondary.1000'>Collapse</Typography></MenuItem>\r\n                  <MenuItem value=\"separate\"><Typography type='s5' color='theme.secondary.1000'>Separate</Typography></MenuItem>\r\n                </Select>\r\n              </FormControl>\r\n            </Grid>\r\n          )}\r\n\r\n          {/* Radius */}\r\n          {!disableRadius && (\r\n            <Grid item xs={12}>\r\n            <Typography type='s5' weight='medium' color='theme.secondary.800' variant=\"caption\">Border Radius</Typography>\r\n            <Slider\r\n              value={typeof styles.borderRadius === 'number' ? styles.borderRadius : 1}\r\n              min={0}\r\n              max={20}\r\n              step={1}\r\n              marks\r\n              onChange={(_, value) => onChange('borderRadius', value)}\r\n              valueLabelDisplay=\"auto\"\r\n              sx={(theme) => ({\r\n                '& .MuiSlider-rail': {\r\n                  color: theme.palette.theme.primary[500],\r\n                },\r\n                '& .MuiSlider-thumb': {\r\n                  color: theme.palette.theme.primary[800],\r\n                },\r\n                '& .MuiSlider-track': {\r\n                  color: theme.palette.theme.primary[600],\r\n                },\r\n              })}\r\n            />\r\n          </Grid>\r\n          )}\r\n        </>\r\n      )}\r\n      \r\n    </Grid>\r\n  );\r\n}\r\n \r\nexport default BorderControl;"],"names":["Android12Switch","styled","Switch","theme","padding","borderRadius","content","position","top","transform","width","height","backgroundImage","encodeURIComponent","palette","getContrastText","primary","main","left","right","boxShadow","margin","color","backgroundColor","borderStyles","styles","onChange","isBordered","disableWidth","disableStyle","disableColor","disableCollapse","disableRadius","initiateStyles","useEffect","Function","border","borderStyle","borderColor","borderCollapse","jsxs","Grid","container","spacing","children","jsx","item","xs","FormControlLabel","control","checked","e","target","label","Typography","type","weight","labelPlacement","sx","display","alignItems","justifyContent","Fragment","Select","value","fullWidth","size","map","wd","MenuItem","FormControl","renderValue","formatText","style","mb","ColorPickerInput","variant","Slider","min","max","step","marks","_","valueLabelDisplay"],"mappings":"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"}

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { lazy, Suspense } from 'react';\n\nimport Modal from '../../../components/modal/modal';\nimport Typography from '../../../components/typography/typography';\nimport Button from '../../../components/button/button';\nimport Select from '../../../components/select/select';\n\nimport {\n\tBox,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tIconButton,\n\tMenuItem\n} from '@mui/material';\nimport Close from '@mui/icons-material/Close';\n\nimport './edit-section-modal.scss';\nimport { IEmail } from '../utils/types';\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\nimport { SectionData } from '../types/editor';\n\ninterface EditSectionModalProps {\n\tisOpen: boolean;\n\tsetIsOpen: (value: boolean) => void;\n\tmodalProps: DialogProps;\n\tsection: SectionData;\n\tplaceholders: Record<string, any>[];\n\thandleSave: (e: any) => void;\n\thandleAddPlaceholder: (placeholder: string) => void;\n\thandleEditorReady: (placeholder: string) => void;\n}\n\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\n\tisOpen,\n\tsetIsOpen,\n\tmodalProps,\n\tsection,\n\tplaceholders,\n\thandleSave,\n\thandleAddPlaceholder,\n\thandleEditorReady,\n}) => {\n\n\tconst handleModalClose = () => {\n\t\tsetIsOpen(null);\n\t};\n\n\tconst handleContinue = (e) => {\n\t\thandleSave(e)\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\topen={isOpen}\n\t\t\tonClose={handleModalClose}\n\t\t\tmaxWidth='lg'\n\t\t\tmaxHeight='md'\n\t\t\tfullWidth\n\t\t\t{...modalProps}>\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\n\t\t\t\t\tEdit Content\n\t\t\t\t</Typography>\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tvalue=''\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: 'white',\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\tif (e.target.value) {\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\n\t\t\t\t\t\t\t\te.target.value = '';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{placeholders.map((option) => (\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Select>\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\n\t\t\t\t\t\t<Close fontSize='small' />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\n\t\t\t\t<Suspense>\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\n\t\t\t\t</Suspense>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\n\t\t\t\t<Box display='flex' gap={1.5}>\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\n\t\t\t\t</Box>\n\t\t\t</DialogActions>\n\t\t</Modal>\n\t);\n};\n\nexport default EditSectionModal;\n"],"names":["Close"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,eAAe,KAAK,MAAM,OAAO,0DAA0C,CAAC;AAclF,MAAM,mBAAoD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAM;AAEL,QAAM,mBAAmB,MAAM;AAC9B,cAAU,IAAI;AAAA,EACf;AAEA,QAAM,iBAAiB,CAAC,MAAM;AAC7B,eAAW,CAAC;AAAA,EACb;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAU;AAAA,MACV,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,UAAA;AAAA,QAAA,qBAAC,aAAA,EAAY,WAAU,iCACtB,UAAA;AAAA,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,WAAU,QAAO,UAAS,UAAA,eAAA,CAEtD;AAAA,UACA,qBAAC,KAAA,EAAI,SAAQ,QAAO,YAAY,UAAU,KAAK,GAAG,UAAS,YAAW,OAAM,MAAK,KAAI,OACpF,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,cAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,aAAa,MAAM;AAAA,gBACnB,WAAS;AAAA,gBACT,IAAI;AAAA,kBACH,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,uBAAuB,EAAE,IAAI,KAAA;AAAA,gBAAK;AAAA,gBAEnC,UAAU,CAAC,MAAM;AAChB,sBAAI,EAAE,OAAO,OAAO;AACnB,yCAAqB,EAAE,OAAO,KAAe;AAC7C,sBAAE,OAAO,QAAQ;AAAA,kBAClB;AAAA,gBACD;AAAA,gBACC,UAAA,aAAa,IAAI,CAAC,+BACjB,UAAA,EAA4B,OAAO,OAAO,OAC1C,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADnD,OAAO,KAEtB,CACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,oBAAC,cAAW,SAAS,kBACpB,8BAACA,WAAA,EAAM,UAAS,SAAQ,EAAA,CACzB;AAAA,UAAA,EAAA,CACD;AAAA,QAAA,GACD;AAAA,QACA,oBAAC,eAAA,EAAc,WAAU,oCACxB,UAAA,oBAAC,UAAA,EACA,UAAA,oBAAC,cAAA,EAAa,mBAAsC,MAAM,QAAQ,QAAA,CAAQ,GAC3E,GACD;AAAA,QACA,oBAAC,iBAAc,WAAU,kCACxB,+BAAC,KAAA,EAAI,SAAQ,QAAO,KAAK,KACxB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,4CAA2C,SAAS,kBAAkB,UAAA,UAAM;AAAA,UAC9F,oBAAC,UAAO,SAAS,CAAC,MAAM,eAAe,CAAC,GAAG,UAAA,OAAA,CAAI;AAAA,QAAA,EAAA,CAChD,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["Close"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,eAAe,KAAK,MAAM,OAAO,0DAA0C,CAAC;AAclF,MAAM,mBAAoD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAM;AAEL,QAAM,mBAAmB,MAAM;AAC9B,cAAU,IAAI;AAAA,EACf;AAEA,QAAM,iBAAiB,CAAC,MAAM;AAC7B,eAAW,CAAC;AAAA,EACb;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAU;AAAA,MACV,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,UAAA;AAAA,QAAA,qBAAC,aAAA,EAAY,WAAU,iCACtB,UAAA;AAAA,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,WAAU,QAAO,UAAS,UAAA,eAAA,CAEtD;AAAA,UACA,qBAAC,KAAA,EAAI,SAAQ,QAAO,YAAY,UAAU,KAAK,GAAG,UAAS,YAAW,OAAM,MAAK,KAAI,OACpF,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,cAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,aAAa,MAAM;AAAA,gBACnB,WAAS;AAAA,gBACT,IAAI;AAAA,kBACH,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,uBAAuB,EAAE,IAAI,KAAA;AAAA,gBAAK;AAAA,gBAEnC,UAAU,CAAC,MAAM;AAChB,sBAAI,EAAE,OAAO,OAAO;AACnB,yCAAqB,EAAE,OAAO,KAAe;AAC7C,sBAAE,OAAO,QAAQ;AAAA,kBAClB;AAAA,gBACD;AAAA,gBACC,UAAA,aAAa,IAAI,CAAC,+BACjB,UAAA,EAA4B,OAAO,OAAO,OAC1C,UAAA,oBAAC,cAAW,MAAK,MAAK,OAAM,wBAAwB,UAAA,OAAO,OAAM,KADnD,OAAO,KAEtB,CACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,oBAAC,cAAW,SAAS,kBACpB,8BAACA,WAAA,EAAM,UAAS,SAAQ,EAAA,CACzB;AAAA,UAAA,EAAA,CACD;AAAA,QAAA,GACD;AAAA,QACA,oBAAC,eAAA,EAAc,WAAU,oCACxB,UAAA,oBAAC,UAAA,EACA,UAAA,oBAAC,cAAA,EAAa,mBAAsC,MAAM,QAAQ,QAAA,CAAQ,GAC3E,GACD;AAAA,QACA,oBAAC,iBAAc,WAAU,kCACxB,+BAAC,KAAA,EAAI,SAAQ,QAAO,KAAK,KACxB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,4CAA2C,SAAS,kBAAkB,UAAA,UAAM;AAAA,UAC9F,oBAAC,UAAO,SAAS,CAAC,MAAM,eAAe,CAAC,GAAG,UAAA,OAAA,CAAI;AAAA,QAAA,EAAA,CAChD,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}

package/dist/views/template-editor/edit-section-modal/edit-section-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { lazy, Suspense } from 'react';\n\nimport Modal from '../../../components/modal/modal';\nimport Typography from '../../../components/typography/typography';\nimport Button from '../../../components/button/button';\nimport Select from '../../../components/select/select';\n\nimport {\n\tBox,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tIconButton,\n\tMenuItem\n} from '@mui/material';\nimport Close from '@mui/icons-material/Close';\n\nimport './edit-section-modal.scss';\nimport { IEmail } from '../utils/types';\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\nimport { SectionData } from '../types/editor';\n\ninterface EditSectionModalProps {\n\tisOpen: boolean;\n\tsetIsOpen: (value: boolean) => void;\n\tmodalProps: DialogProps;\n\tsection: SectionData;\n\tplaceholders: Record<string, any>[];\n\thandleSave: (e: any) => void;\n\thandleAddPlaceholder: (placeholder: string) => void;\n\thandleEditorReady: (placeholder: string) => void;\n}\n\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\n\tisOpen,\n\tsetIsOpen,\n\tmodalProps,\n\tsection,\n\tplaceholders,\n\thandleSave,\n\thandleAddPlaceholder,\n\thandleEditorReady,\n}) => {\n\n\tconst handleModalClose = () => {\n\t\tsetIsOpen(null);\n\t};\n\n\tconst handleContinue = (e) => {\n\t\thandleSave(e)\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\topen={isOpen}\n\t\t\tonClose={handleModalClose}\n\t\t\tmaxWidth='lg'\n\t\t\tmaxHeight='md'\n\t\t\tfullWidth\n\t\t\t{...modalProps}>\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\n\t\t\t\t\tEdit Content\n\t\t\t\t</Typography>\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\n\t\t\t\t\t<Select\n\t\t\t\t\t\tdisplayEmpty\n\t\t\t\t\t\tvalue=''\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: 'white',\n\t\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\tif (e.target.value) {\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\n\t\t\t\t\t\t\t\te.target.value = '';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{placeholders.map((option) => (\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Select>\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\n\t\t\t\t\t\t<Close fontSize='small' />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\n\t\t\t\t<Suspense>\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\n\t\t\t\t</Suspense>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\n\t\t\t\t<Box display='flex' gap={1.5}>\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\n\t\t\t\t</Box>\n\t\t\t</DialogActions>\n\t\t</Modal>\n\t);\n};\n\nexport default EditSectionModal;\n"],"names":["CustomEditor","lazy","Promise","resolve","then","require","isOpen","setIsOpen","modalProps","section","placeholders","handleSave","handleAddPlaceholder","handleEditorReady","handleModalClose","jsxs","Modal","open","onClose","maxWidth","maxHeight","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","Box","display","alignItems","gap","position","right","top","Select","displayEmpty","value","size","renderValue","sx","bgcolor","borderRadius","py","onChange","e","target","map","option","MenuItem","label","IconButton","onClick","Close","fontSize","DialogContent","Suspense","data","content","DialogActions","Button","handleContinue"],"mappings":"s9BAuBA,MAAMA,EAAeC,EAAAA,KAAK,IAAMC,QAAAC,UAAAC,KAAA,WAAA,OAAAC,QAAO,2EAcmB,EACzDC,SACAC,YACAC,aACAC,UACAC,eACAC,aACAC,uBACAC,wBAGA,MAAMC,EAAmB,KACxBP,EAAU;AAOX,OACCQ,EAAAA,KAACC,EAAAA,MAAA,CACAC,KAAMX,EACNY,QAASJ,EACTK,SAAS,KACTC,UAAU,KACVC,WAAS,KACLb,EACJc,SAAA;iBAAAP,KAACQ,EAAAA,QAAA,CAAYC,UAAU,gCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDP,KAACe,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,WAAY,SAAUC,IAAK,EAAGC,SAAS,WAAWC,MAAM,KAAKC,IAAI,MACpFd,SAAA;eAAAG,EAAAA,IAACY,EAAAA,OAAA,CACAC,cAAY,EACZC,MAAM,GACNC,KAAK,QACLC,YAAa,IAAM,kBACnBpB,WAAS,EACTqB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOT,QACZ3B,EAAqBmC,EAAEC,OAAOT,OAC9BQ,EAAEC,OAAOT,MAAQ,KAGlBjB,SAAAZ,EAAauC,IAAKC,wBACjBC,EAAAA,QAAA,CAA4BZ,MAAOW,EAAOX,MAC1CjB,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAA4B,EAAOE,SAD7CF,EAAOX;iBAKxBd,IAAC4B,EAAAA,SAAWC,QAASxC,EACpBQ,8BAACiC,UAAA,CAAMC,SAAS;eAInB/B,EAAAA,IAACgC,EAAAA,QAAA,CAAcjC,UAAU,mCACxBF,wBAAAG,EAAAA,IAACiC,EAAAA,SAAA,CACApC,wBAAAG,EAAAA,IAACzB,EAAA,CAAaa,oBAAsC8C,KAAMlD,EAAQmD;iBAGpEnC,IAACoC,EAAAA,SAAcrC,UAAU,iCACxBF,+BAACQ,EAAAA,QAAA,CAAIC,QAAQ,OAAOE,IAAK,IACxBX,SAAA;eAAAG,MAACqC,EAAAA,OAAA,CAAOtC,UAAU,2CAA2C8B,QAASxC,EAAkBQ,SAAA;eACxFG,MAACqC,EAAAA,QAAOR,QAAUP,GArDC,CAACA,IACvBpC,EAAWoC,IAoDgBgB,CAAehB,GAAIzB,SAAA"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/edit-section-modal/edit-section-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { lazy, Suspense } from 'react';\r\n\r\nimport Modal from '../../../components/modal/modal';\r\nimport Typography from '../../../components/typography/typography';\r\nimport Button from '../../../components/button/button';\r\nimport Select from '../../../components/select/select';\r\n\r\nimport {\r\n\tBox,\r\n\tDialogActions,\r\n\tDialogContent,\r\n\tDialogProps,\r\n\tDialogTitle,\r\n\tIconButton,\r\n\tMenuItem\r\n} from '@mui/material';\r\nimport Close from '@mui/icons-material/Close';\r\n\r\nimport './edit-section-modal.scss';\r\nimport { IEmail } from '../utils/types';\r\nconst CustomEditor = lazy(() => import('../../../components/editor/custom-editor'));\r\nimport { SectionData } from '../types/editor';\r\n\r\ninterface EditSectionModalProps {\r\n\tisOpen: boolean;\r\n\tsetIsOpen: (value: boolean) => void;\r\n\tmodalProps: DialogProps;\r\n\tsection: SectionData;\r\n\tplaceholders: Record<string, any>[];\r\n\thandleSave: (e: any) => void;\r\n\thandleAddPlaceholder: (placeholder: string) => void;\r\n\thandleEditorReady: (placeholder: string) => void;\r\n}\r\n\r\nconst EditSectionModal: React.FC<EditSectionModalProps> = ({\r\n\tisOpen,\r\n\tsetIsOpen,\r\n\tmodalProps,\r\n\tsection,\r\n\tplaceholders,\r\n\thandleSave,\r\n\thandleAddPlaceholder,\r\n\thandleEditorReady,\r\n}) => {\r\n\r\n\tconst handleModalClose = () => {\r\n\t\tsetIsOpen(null);\r\n\t};\r\n\r\n\tconst handleContinue = (e) => {\r\n\t\thandleSave(e)\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Modal\r\n\t\t\topen={isOpen}\r\n\t\t\tonClose={handleModalClose}\r\n\t\t\tmaxWidth='lg'\r\n\t\t\tmaxHeight='md'\r\n\t\t\tfullWidth\r\n\t\t\t{...modalProps}>\r\n\t\t\t<DialogTitle className='editSectionModal--DialogTitle'>\r\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\r\n\t\t\t\t\tEdit Content\r\n\t\t\t\t</Typography>\r\n\t\t\t\t<Box display='flex' alignItems={'center'} gap={1} position='absolute' right='1%' top='4px'>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tdisplayEmpty\r\n\t\t\t\t\t\tvalue=''\r\n\t\t\t\t\t\tsize='small'\r\n\t\t\t\t\t\trenderValue={() => 'Add placeholder'}\r\n\t\t\t\t\t\tfullWidth\r\n\t\t\t\t\t\tsx={{\r\n\t\t\t\t\t\t\tbgcolor: 'white',\r\n\t\t\t\t\t\t\tborderRadius: 1,\r\n\t\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonChange={(e) => {\r\n\t\t\t\t\t\t\tif (e.target.value) {\r\n\t\t\t\t\t\t\t\thandleAddPlaceholder(e.target.value as string);\r\n\t\t\t\t\t\t\t\te.target.value = '';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t{placeholders.map((option) => (\r\n\t\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\r\n\t\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\r\n\t\t\t\t\t\t\t</MenuItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t\t<IconButton onClick={handleModalClose}>\r\n\t\t\t\t\t\t<Close fontSize='small' />\r\n\t\t\t\t\t</IconButton>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogTitle>\r\n\t\t\t<DialogContent className='editSectionModal--DialogContents'>\r\n\t\t\t\t<Suspense>\r\n\t\t\t\t\t<CustomEditor handleEditorReady={handleEditorReady} data={section.content}/>\r\n\t\t\t\t</Suspense>\r\n\t\t\t</DialogContent>\r\n\t\t\t<DialogActions className='editSectionModal--DialogAction'>\r\n\t\t\t\t<Box display='flex' gap={1.5}>\r\n\t\t\t\t\t<Button className='editSectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\r\n\t\t\t\t\t<Button onClick={(e) => handleContinue(e)}>Save</Button>\r\n\t\t\t\t</Box>\r\n\t\t\t</DialogActions>\r\n\t\t</Modal>\r\n\t);\r\n};\r\n\r\nexport default EditSectionModal;\r\n"],"names":["CustomEditor","lazy","Promise","resolve","then","require","isOpen","setIsOpen","modalProps","section","placeholders","handleSave","handleAddPlaceholder","handleEditorReady","handleModalClose","jsxs","Modal","open","onClose","maxWidth","maxHeight","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","Box","display","alignItems","gap","position","right","top","Select","displayEmpty","value","size","renderValue","sx","bgcolor","borderRadius","py","onChange","e","target","map","option","MenuItem","label","IconButton","onClick","Close","fontSize","DialogContent","Suspense","data","content","DialogActions","Button","handleContinue"],"mappings":"s9BAuBA,MAAMA,EAAeC,EAAAA,KAAK,IAAMC,QAAAC,UAAAC,KAAA,WAAA,OAAAC,QAAO,2EAcmB,EACzDC,SACAC,YACAC,aACAC,UACAC,eACAC,aACAC,uBACAC,wBAGA,MAAMC,EAAmB,KACxBP,EAAU;AAOX,OACCQ,EAAAA,KAACC,EAAAA,MAAA,CACAC,KAAMX,EACNY,QAASJ,EACTK,SAAS,KACTC,UAAU,KACVC,WAAS,KACLb,EACJc,SAAA;iBAAAP,KAACQ,EAAAA,QAAA,CAAYC,UAAU,gCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDP,KAACe,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,WAAY,SAAUC,IAAK,EAAGC,SAAS,WAAWC,MAAM,KAAKC,IAAI,MACpFd,SAAA;eAAAG,EAAAA,IAACY,EAAAA,OAAA,CACAC,cAAY,EACZC,MAAM,GACNC,KAAK,QACLC,YAAa,IAAM,kBACnBpB,WAAS,EACTqB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOT,QACZ3B,EAAqBmC,EAAEC,OAAOT,OAC9BQ,EAAEC,OAAOT,MAAQ,KAGlBjB,SAAAZ,EAAauC,IAAKC,wBACjBC,EAAAA,QAAA,CAA4BZ,MAAOW,EAAOX,MAC1CjB,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAA4B,EAAOE,SAD7CF,EAAOX;iBAKxBd,IAAC4B,EAAAA,SAAWC,QAASxC,EACpBQ,8BAACiC,UAAA,CAAMC,SAAS;eAInB/B,EAAAA,IAACgC,EAAAA,QAAA,CAAcjC,UAAU,mCACxBF,wBAAAG,EAAAA,IAACiC,EAAAA,SAAA,CACApC,wBAAAG,EAAAA,IAACzB,EAAA,CAAaa,oBAAsC8C,KAAMlD,EAAQmD;iBAGpEnC,IAACoC,EAAAA,SAAcrC,UAAU,iCACxBF,+BAACQ,EAAAA,QAAA,CAAIC,QAAQ,OAAOE,IAAK,IACxBX,SAAA;eAAAG,MAACqC,EAAAA,OAAA,CAAOtC,UAAU,2CAA2C8B,QAASxC,EAAkBQ,SAAA;eACxFG,MAACqC,EAAAA,QAAOR,QAAUP,GArDC,CAACA,IACvBpC,EAAWoC,IAoDgBgB,CAAehB,GAAIzB,SAAA"}

package/dist/views/template-editor/routes/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/views/template-editor/routes.tsx"],"sourcesContent":["import React from \"react\";\nimport AddTemplate from \"./add-template/add-template\";\nimport Templates from \"./templates\";\nimport { TEMPLATE_EDITOR_PATHS } from \"./utils/constant\";\n\nexport const templateEditorRoutes = (modulePath: string, module: string)  => [\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('email')}`,\n\t\telement: <Templates type=\"email\" module={module} modulePath={modulePath}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('email')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('email')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('pdf')}`,\n\t\telement: <Templates module={module} type=\"pdf\" modulePath={modulePath}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('pdf')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('pdf')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\n\t}\n]"],"names":[],"mappings":";;;;AAKO,MAAM,uBAAuB,CAAC,YAAoB,WAAoB;AAAA,EAC5E;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,OAAO,CAAC;AAAA,IACtD,SAAS,oBAAC,WAAA,EAAU,MAAK,SAAQ,QAAgB,WAAA,CAAuB;AAAA,EAAA;AAAA,EAEzE;AAAA,IACC,MAAM,GAAG,sBAAsB,cAAc,OAAO,CAAC;AAAA,IACrD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,SAAQ,OAAA,CAAe;AAAA,EAAA;AAAA,EAE3E;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,OAAO,CAAC;AAAA,IACtD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,SAAQ,OAAA,CAAe;AAAA,EAAA;AAAA,EAE3E;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,KAAK,CAAC;AAAA,IACpD,SAAS,oBAAC,WAAA,EAAU,QAAgB,MAAK,OAAM,WAAA,CAAuB;AAAA,EAAA;AAAA,EAEvE;AAAA,IACC,MAAM,GAAG,sBAAsB,cAAc,KAAK,CAAC;AAAA,IACnD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,OAAM,OAAA,CAAe;AAAA,EAAA;AAAA,EAEzE;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,KAAK,CAAC;AAAA,IACpD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,OAAM,OAAA,CAAe;AAAA,EAAA;AAE1E;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/views/template-editor/routes.tsx"],"sourcesContent":["import React from \"react\";\r\nimport AddTemplate from \"./add-template/add-template\";\r\nimport Templates from \"./templates\";\r\nimport { TEMPLATE_EDITOR_PATHS } from \"./utils/constant\";\r\n\r\nexport const templateEditorRoutes = (modulePath: string, module: string)  => [\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('email')}`,\r\n\t\telement: <Templates type=\"email\" module={module} modulePath={modulePath}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('email')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('email')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('pdf')}`,\r\n\t\telement: <Templates module={module} type=\"pdf\" modulePath={modulePath}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('pdf')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('pdf')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\r\n\t}\r\n]"],"names":[],"mappings":";;;;AAKO,MAAM,uBAAuB,CAAC,YAAoB,WAAoB;AAAA,EAC5E;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,OAAO,CAAC;AAAA,IACtD,SAAS,oBAAC,WAAA,EAAU,MAAK,SAAQ,QAAgB,WAAA,CAAuB;AAAA,EAAA;AAAA,EAEzE;AAAA,IACC,MAAM,GAAG,sBAAsB,cAAc,OAAO,CAAC;AAAA,IACrD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,SAAQ,OAAA,CAAe;AAAA,EAAA;AAAA,EAE3E;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,OAAO,CAAC;AAAA,IACtD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,SAAQ,OAAA,CAAe;AAAA,EAAA;AAAA,EAE3E;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,KAAK,CAAC;AAAA,IACpD,SAAS,oBAAC,WAAA,EAAU,QAAgB,MAAK,OAAM,WAAA,CAAuB;AAAA,EAAA;AAAA,EAEvE;AAAA,IACC,MAAM,GAAG,sBAAsB,cAAc,KAAK,CAAC;AAAA,IACnD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,OAAM,OAAA,CAAe;AAAA,EAAA;AAAA,EAEzE;AAAA,IACC,MAAM,GAAG,sBAAsB,eAAe,KAAK,CAAC;AAAA,IACpD,SAAS,oBAAC,aAAA,EAAY,YAAwB,MAAK,OAAM,OAAA,CAAe;AAAA,EAAA;AAE1E;"}

package/dist/views/template-editor/routes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/views/template-editor/routes.tsx"],"sourcesContent":["import React from \"react\";\nimport AddTemplate from \"./add-template/add-template\";\nimport Templates from \"./templates\";\nimport { TEMPLATE_EDITOR_PATHS } from \"./utils/constant\";\n\nexport const templateEditorRoutes = (modulePath: string, module: string)  => [\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('email')}`,\n\t\telement: <Templates type=\"email\" module={module} modulePath={modulePath}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('email')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('email')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('pdf')}`,\n\t\telement: <Templates module={module} type=\"pdf\" modulePath={modulePath}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('pdf')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\n\t},\n\t{\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('pdf')}`,\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\n\t}\n]"],"names":["modulePath","module","path","TEMPLATE_EDITOR_PATHS","TEMPLATES_LIST","element","jsx","Templates","type","TEMPLATES_ADD","AddTemplate","TEMPLATES_EDIT"],"mappings":"kQAKoC,CAACA,EAAoBC,IAAoB,CAC5E,CACCC,KAAM,GAAGC,EAAAA,sBAAsBC,eAAe,WAC9CC,uBAASC,EAAAA,IAACC,UAAA,CAAUC,KAAK,QAAQP,OAAAA,EAAgBD,gBAElD,CACCE,KAAM,GAAGC,EAAAA,sBAAsBM,cAAc,WAC7CJ,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,QAAQP,OAAAA,KAE5D,CACCC,KAAM,GAAGC,EAAAA,sBAAsBQ,eAAe,WAC9CN,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,QAAQP,OAAAA,KAE5D,CACCC,KAAM,GAAGC,EAAAA,sBAAsBC,eAAe,SAC9CC,uBAASC,EAAAA,IAACC,UAAA,CAAUN,OAAAA,EAAgBO,KAAK,MAAMR,gBAEhD,CACCE,KAAM,GAAGC,EAAAA,sBAAsBM,cAAc,SAC7CJ,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,MAAMP,OAAAA,KAE1D,CACCC,KAAM,GAAGC,EAAAA,sBAAsBQ,eAAe,SAC9CN,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,MAAMP,OAAAA"}
+{"version":3,"file":"index.js","sources":["../../../../src/views/template-editor/routes.tsx"],"sourcesContent":["import React from \"react\";\r\nimport AddTemplate from \"./add-template/add-template\";\r\nimport Templates from \"./templates\";\r\nimport { TEMPLATE_EDITOR_PATHS } from \"./utils/constant\";\r\n\r\nexport const templateEditorRoutes = (modulePath: string, module: string)  => [\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('email')}`,\r\n\t\telement: <Templates type=\"email\" module={module} modulePath={modulePath}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('email')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('email')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"email\" module={module}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST('pdf')}`,\r\n\t\telement: <Templates module={module} type=\"pdf\" modulePath={modulePath}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD('pdf')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\r\n\t},\r\n\t{\r\n\t\tpath: `${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT('pdf')}`,\r\n\t\telement: <AddTemplate modulePath={modulePath} type=\"pdf\" module={module}/>\r\n\t}\r\n]"],"names":["modulePath","module","path","TEMPLATE_EDITOR_PATHS","TEMPLATES_LIST","element","jsx","Templates","type","TEMPLATES_ADD","AddTemplate","TEMPLATES_EDIT"],"mappings":"kQAKoC,CAACA,EAAoBC,IAAoB,CAC5E,CACCC,KAAM,GAAGC,EAAAA,sBAAsBC,eAAe,WAC9CC,uBAASC,EAAAA,IAACC,UAAA,CAAUC,KAAK,QAAQP,OAAAA,EAAgBD,gBAElD,CACCE,KAAM,GAAGC,EAAAA,sBAAsBM,cAAc,WAC7CJ,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,QAAQP,OAAAA,KAE5D,CACCC,KAAM,GAAGC,EAAAA,sBAAsBQ,eAAe,WAC9CN,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,QAAQP,OAAAA,KAE5D,CACCC,KAAM,GAAGC,EAAAA,sBAAsBC,eAAe,SAC9CC,uBAASC,EAAAA,IAACC,UAAA,CAAUN,OAAAA,EAAgBO,KAAK,MAAMR,gBAEhD,CACCE,KAAM,GAAGC,EAAAA,sBAAsBM,cAAc,SAC7CJ,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,MAAMP,OAAAA,KAE1D,CACCC,KAAM,GAAGC,EAAAA,sBAAsBQ,eAAe,SAC9CN,uBAASC,EAAAA,IAACI,UAAA,CAAYV,aAAwBQ,KAAK,MAAMP,OAAAA"}

package/dist/views/template-editor/template-modal/html-thumbnail-preview/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\nimport { Trash } from '../../../components/icons';\nimport Typography from '../../../components/typography/typography';\n\nconst HtmlThumbnailPreview = ({ \n  template, \n  width = 300, \n  height = 200, \n  scale = 0.25,\n  showControls = false,\n  onClick = null,\n  selectedTemplateId = '',\n  isFetching = false,\n  onDelete,\n  minScale = 0.1,\n  maxScale = 1,\n  scaleStep = 1.2,\n  loadingDelay = 500,\n  refreshDelay = 300\n}) => {\n  const [isLoading, setIsLoading] = useState(isFetching || true);\n  const [currentScale, setCurrentScale] = useState(scale);\n  const [error, setError] = useState(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const containerRef = useRef(null);\n  const contentRef = useRef(null);\n  const loadingTimeoutRef = useRef(null);\n  const refreshTimeoutRef = useRef(null);\n\n  // Calculate dimensions based on scale\n  const scaledWidth = width / currentScale;\n  const scaledHeight = height / currentScale;\n\n  // Cleanup timeouts on unmount\n  useEffect(() => {\n    return () => {\n      if (loadingTimeoutRef.current) {\n        clearTimeout(loadingTimeoutRef.current);\n      }\n      if (refreshTimeoutRef.current) {\n        clearTimeout(refreshTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  // Handle initial loading\n  useEffect(() => {\n    if (loadingTimeoutRef.current) {\n      clearTimeout(loadingTimeoutRef.current);\n    }\n    \n    loadingTimeoutRef.current = setTimeout(() => {\n      setIsLoading(false);\n    }, loadingDelay);\n\n    return () => {\n      if (loadingTimeoutRef.current) {\n        clearTimeout(loadingTimeoutRef.current);\n      }\n    };\n  }, [template.contents, loadingDelay]);\n\n  // Handle external loading state\n  useEffect(() => {\n    setIsLoading(isFetching);\n  }, [isFetching]);\n\n  // Memoized event handlers\n  const handleZoomIn = useCallback(() => {\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\n  }, [scaleStep, maxScale]);\n\n  const handleZoomOut = useCallback(() => {\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\n  }, [scaleStep, minScale]);\n\n  const handleRefresh = useCallback(() => {\n    setIsLoading(true);\n    setError(null);\n    \n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n    }\n    \n    refreshTimeoutRef.current = setTimeout(() => {\n      setIsLoading(false);\n    }, refreshDelay);\n  }, [refreshDelay]);\n\n  const handleClick = useCallback(() => {\n    if (onClick && !isLoading) {\n      onClick(template);\n    }\n  }, [onClick, template, isLoading]);\n\n  const handleDelete = useCallback((e) => {\n    e.stopPropagation(); // Prevent triggering onClick\n    if (onDelete && !template?.is_default) {\n      onDelete(template);\n    }\n  }, [onDelete, template]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <Box \n        sx={{ \n          width, \n          height,\n          borderRadius: 1,\n          overflow: 'hidden',\n          border: '1px solid',\n          borderColor: 'divider'\n        }}\n      >\n        <Skeleton \n          variant=\"rectangular\" \n          width=\"100%\" \n          height=\"100%\" \n          animation=\"wave\"\n        />\n      </Box>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <Box \n        sx={{ \n          width, \n          height,\n          borderRadius: 1,\n          overflow: 'hidden',\n          border: '1px solid',\n          borderColor: 'error.main',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          backgroundColor: 'error.light',\n          color: 'error.contrastText'\n        }}\n      >\n        Failed to load template\n      </Box>\n    );\n  }\n\n  const isSelected = selectedTemplateId === template._id;\n  const canZoomIn = currentScale < maxScale;\n  const canZoomOut = currentScale > minScale;\n  const canDelete = !template?.is_default;\n\n  return (\n    <Box \n      sx={{ position: 'relative', display: 'inline-block' }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {/* Main Container */}\n      <Box\n        ref={containerRef}\n        onClick={handleClick}\n        sx={(theme) => ({\n          width,\n          height,\n          border: '1px solid',\n          borderRadius: 1,\n          overflow: 'hidden',\n          position: 'relative',\n          cursor: onClick ? 'pointer' : 'default',\n          backgroundColor: '#fff',\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\n          transition: 'all 0.2s ease-in-out',\n          '&:hover': onClick ? {\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\n            transform: 'translateY(-1px)',\n          } : {},\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\n          borderWidth: isSelected ? 2 : 1,\n        })}\n      >\n        {/* Scaled Content Wrapper */}\n        <Box\n          sx={{\n            width: scaledWidth,\n            height: scaledHeight,\n            transform: `scale(${currentScale})`,\n            transformOrigin: 'top left',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            overflow: 'hidden',\n          }}\n        >\n          {/* HTML Content */}\n          <Box\n            ref={contentRef}\n            sx={{\n              width: '100%',\n              height: '100%',\n              userSelect: 'none',\n              pointerEvents: 'none',\n              pt: 2,\n              '& *': {\n                maxWidth: '100% !important',\n                boxSizing: 'border-box !important',\n              },\n              // Reset common problematic styles\n              '& body': {\n                margin: '0 !important',\n                padding: '0 !important',\n                overflow: 'hidden !important',\n              },\n              // Handle images\n              '& img': {\n                maxWidth: '100% !important',\n                height: 'auto !important',\n              },\n              // Handle tables\n              '& table': {\n                width: '100% !important',\n                tableLayout: 'fixed !important',\n              },\n              // Prevent absolute positioning issues\n              '& *[style*=\"position: absolute\"]': {\n                position: 'relative !important',\n              },\n              '& .email-container': {\n                width: '85% !important',\n              }\n            }}\n            dangerouslySetInnerHTML={{ __html: template.contents }}\n          />\n        </Box>\n\n        {/* Loading Overlay */}\n        {isLoading && (\n          <Box\n            sx={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              backgroundColor: 'rgba(255,255,255,0.8)',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              zIndex: 2,\n            }}\n          >\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\n          </Box>\n        )}\n\n        {/* Selection Indicator */}\n        {template?.is_default && (\n          <Box\n            sx={(theme) => ({\n              position: 'absolute',\n              top: 8,\n              left: 8,\n              width: 12,\n              height: 12,\n              borderRadius: '50%',\n              backgroundColor: theme.palette.theme?.primary[800],\n              zIndex: 3,\n            })}\n          />\n        )}\n      </Box>\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\n\n      {/* Hover Controls */}\n      {showControls && (\n        <Fade in={isHovered} timeout={200}>\n          <Box\n            sx={{\n              position: 'absolute',\n              top: -8,\n              right: -8,\n              display: 'flex',\n              gap: 0.5,\n              zIndex: 4,\n              backgroundColor: 'rgba(255,255,255,0.95)',\n              border: '1px solid',\n              borderColor: 'grey.300',\n              borderRadius: 2,\n              padding: 0.5,\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\n              backdropFilter: 'blur(4px)',\n            }}\n          >\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleZoomIn}\n                  disabled={!canZoomIn}\n                  sx={{\n                    backgroundColor: 'transparent',\n                    '&:hover': { \n                      backgroundColor: 'primary.light',\n                      color: 'primary.contrastText' \n                    },\n                    '&:disabled': {\n                      opacity: 0.5\n                    }\n                  }}\n                >\n                  <ZoomIn fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleZoomOut}\n                  disabled={!canZoomOut}\n                  sx={{\n                    backgroundColor: 'transparent',\n                    '&:hover': { \n                      backgroundColor: 'primary.light',\n                      color: 'primary.contrastText' \n                    },\n                    '&:disabled': {\n                      opacity: 0.5\n                    }\n                  }}\n                >\n                  <ZoomOut fontSize=\"small\" />\n                </IconButton>\n              </span>\n            </Tooltip>\n\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n\n            <Tooltip title=\"Refresh Preview\" arrow>\n              <IconButton\n                size=\"small\"\n                onClick={handleRefresh}\n                sx={{\n                  backgroundColor: 'transparent',\n                  '&:hover': { \n                    backgroundColor: 'primary.light',\n                    color: 'primary.contrastText' \n                  },\n                }}\n              >\n                <Refresh fontSize=\"small\" />\n              </IconButton>\n            </Tooltip>\n\n            {onDelete && (\n              <>\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n                <Tooltip \n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \n                  arrow\n                >\n                  <span>\n                    <IconButton\n                      size=\"small\"\n                      onClick={handleDelete}\n                      disabled={!canDelete}\n                      sx={{\n                        backgroundColor: 'transparent',\n                        '&:hover': !canDelete ? {} : { \n                          backgroundColor: 'error.light',\n                          color: 'error.contrastText' \n                        },\n                        '&:disabled': {\n                          opacity: 0.5\n                        }\n                      }}\n                    >\n                      <Trash fontSize=\"small\" />\n                    </IconButton>\n                  </span>\n                </Tooltip>\n              </>\n            )}\n          </Box>\n        </Fade>\n      )}\n    </Box>\n  );\n};\n\nexport { HtmlThumbnailPreview };\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/template-editor/template-modal/html-thumbnail-preview.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\r\n/* eslint-disable unused-imports/no-unused-vars */\r\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { Box, Skeleton, IconButton, Tooltip, Divider, Fade } from '@mui/material';\r\nimport { ZoomIn, ZoomOut, Refresh } from '@mui/icons-material';\r\nimport { Trash } from '../../../components/icons';\r\nimport Typography from '../../../components/typography/typography';\r\n\r\nconst HtmlThumbnailPreview = ({ \r\n  template, \r\n  width = 300, \r\n  height = 200, \r\n  scale = 0.25,\r\n  showControls = false,\r\n  onClick = null,\r\n  selectedTemplateId = '',\r\n  isFetching = false,\r\n  onDelete,\r\n  minScale = 0.1,\r\n  maxScale = 1,\r\n  scaleStep = 1.2,\r\n  loadingDelay = 500,\r\n  refreshDelay = 300\r\n}) => {\r\n  const [isLoading, setIsLoading] = useState(isFetching || true);\r\n  const [currentScale, setCurrentScale] = useState(scale);\r\n  const [error, setError] = useState(null);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const containerRef = useRef(null);\r\n  const contentRef = useRef(null);\r\n  const loadingTimeoutRef = useRef(null);\r\n  const refreshTimeoutRef = useRef(null);\r\n\r\n  // Calculate dimensions based on scale\r\n  const scaledWidth = width / currentScale;\r\n  const scaledHeight = height / currentScale;\r\n\r\n  // Cleanup timeouts on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n      if (refreshTimeoutRef.current) {\r\n        clearTimeout(refreshTimeoutRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  // Handle initial loading\r\n  useEffect(() => {\r\n    if (loadingTimeoutRef.current) {\r\n      clearTimeout(loadingTimeoutRef.current);\r\n    }\r\n    \r\n    loadingTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, loadingDelay);\r\n\r\n    return () => {\r\n      if (loadingTimeoutRef.current) {\r\n        clearTimeout(loadingTimeoutRef.current);\r\n      }\r\n    };\r\n  }, [template.contents, loadingDelay]);\r\n\r\n  // Handle external loading state\r\n  useEffect(() => {\r\n    setIsLoading(isFetching);\r\n  }, [isFetching]);\r\n\r\n  // Memoized event handlers\r\n  const handleZoomIn = useCallback(() => {\r\n    setCurrentScale(prev => Math.min(prev * scaleStep, maxScale));\r\n  }, [scaleStep, maxScale]);\r\n\r\n  const handleZoomOut = useCallback(() => {\r\n    setCurrentScale(prev => Math.max(prev / scaleStep, minScale));\r\n  }, [scaleStep, minScale]);\r\n\r\n  const handleRefresh = useCallback(() => {\r\n    setIsLoading(true);\r\n    setError(null);\r\n    \r\n    if (refreshTimeoutRef.current) {\r\n      clearTimeout(refreshTimeoutRef.current);\r\n    }\r\n    \r\n    refreshTimeoutRef.current = setTimeout(() => {\r\n      setIsLoading(false);\r\n    }, refreshDelay);\r\n  }, [refreshDelay]);\r\n\r\n  const handleClick = useCallback(() => {\r\n    if (onClick && !isLoading) {\r\n      onClick(template);\r\n    }\r\n  }, [onClick, template, isLoading]);\r\n\r\n  const handleDelete = useCallback((e) => {\r\n    e.stopPropagation(); // Prevent triggering onClick\r\n    if (onDelete && !template?.is_default) {\r\n      onDelete(template);\r\n    }\r\n  }, [onDelete, template]);\r\n\r\n  const handleMouseEnter = useCallback(() => {\r\n    setIsHovered(true);\r\n  }, []);\r\n\r\n  const handleMouseLeave = useCallback(() => {\r\n    setIsHovered(false);\r\n  }, []);\r\n\r\n  // Loading state\r\n  if (isLoading) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'divider'\r\n        }}\r\n      >\r\n        <Skeleton \r\n          variant=\"rectangular\" \r\n          width=\"100%\" \r\n          height=\"100%\" \r\n          animation=\"wave\"\r\n        />\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  // Error state\r\n  if (error) {\r\n    return (\r\n      <Box \r\n        sx={{ \r\n          width, \r\n          height,\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          border: '1px solid',\r\n          borderColor: 'error.main',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          backgroundColor: 'error.light',\r\n          color: 'error.contrastText'\r\n        }}\r\n      >\r\n        Failed to load template\r\n      </Box>\r\n    );\r\n  }\r\n\r\n  const isSelected = selectedTemplateId === template._id;\r\n  const canZoomIn = currentScale < maxScale;\r\n  const canZoomOut = currentScale > minScale;\r\n  const canDelete = !template?.is_default;\r\n\r\n  return (\r\n    <Box \r\n      sx={{ position: 'relative', display: 'inline-block' }}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {/* Main Container */}\r\n      <Box\r\n        ref={containerRef}\r\n        onClick={handleClick}\r\n        sx={(theme) => ({\r\n          width,\r\n          height,\r\n          border: '1px solid',\r\n          borderRadius: 1,\r\n          overflow: 'hidden',\r\n          position: 'relative',\r\n          cursor: onClick ? 'pointer' : 'default',\r\n          backgroundColor: '#fff',\r\n          // boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\r\n          transition: 'all 0.2s ease-in-out',\r\n          '&:hover': onClick ? {\r\n            boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\r\n            transform: 'translateY(-1px)',\r\n          } : {},\r\n          borderColor: isSelected ? theme.palette.theme.primary[800] : 'grey.300',\r\n          borderWidth: isSelected ? 2 : 1,\r\n        })}\r\n      >\r\n        {/* Scaled Content Wrapper */}\r\n        <Box\r\n          sx={{\r\n            width: scaledWidth,\r\n            height: scaledHeight,\r\n            transform: `scale(${currentScale})`,\r\n            transformOrigin: 'top left',\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            overflow: 'hidden',\r\n          }}\r\n        >\r\n          {/* HTML Content */}\r\n          <Box\r\n            ref={contentRef}\r\n            sx={{\r\n              width: '100%',\r\n              height: '100%',\r\n              userSelect: 'none',\r\n              pointerEvents: 'none',\r\n              pt: 2,\r\n              '& *': {\r\n                maxWidth: '100% !important',\r\n                boxSizing: 'border-box !important',\r\n              },\r\n              // Reset common problematic styles\r\n              '& body': {\r\n                margin: '0 !important',\r\n                padding: '0 !important',\r\n                overflow: 'hidden !important',\r\n              },\r\n              // Handle images\r\n              '& img': {\r\n                maxWidth: '100% !important',\r\n                height: 'auto !important',\r\n              },\r\n              // Handle tables\r\n              '& table': {\r\n                width: '100% !important',\r\n                tableLayout: 'fixed !important',\r\n              },\r\n              // Prevent absolute positioning issues\r\n              '& *[style*=\"position: absolute\"]': {\r\n                position: 'relative !important',\r\n              },\r\n              '& .email-container': {\r\n                width: '85% !important',\r\n              }\r\n            }}\r\n            dangerouslySetInnerHTML={{ __html: template.contents }}\r\n          />\r\n        </Box>\r\n\r\n        {/* Loading Overlay */}\r\n        {isLoading && (\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: 0,\r\n              right: 0,\r\n              bottom: 0,\r\n              backgroundColor: 'rgba(255,255,255,0.8)',\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              zIndex: 2,\r\n            }}\r\n          >\r\n            <Skeleton variant=\"rectangular\" width=\"90%\" height=\"90%\" />\r\n          </Box>\r\n        )}\r\n\r\n        {/* Selection Indicator */}\r\n        {template?.is_default && (\r\n          <Box\r\n            sx={(theme) => ({\r\n              position: 'absolute',\r\n              top: 8,\r\n              left: 8,\r\n              width: 12,\r\n              height: 12,\r\n              borderRadius: '50%',\r\n              backgroundColor: theme.palette.theme?.primary[800],\r\n              zIndex: 3,\r\n            })}\r\n          />\r\n        )}\r\n      </Box>\r\n      {template?.name && <Typography type='s3' weight='medium' color='theme.secondary.1000' align='center' sx={{width, mt:0.5}}>{template?.name}</Typography>}\r\n\r\n      {/* Hover Controls */}\r\n      {showControls && (\r\n        <Fade in={isHovered} timeout={200}>\r\n          <Box\r\n            sx={{\r\n              position: 'absolute',\r\n              top: -8,\r\n              right: -8,\r\n              display: 'flex',\r\n              gap: 0.5,\r\n              zIndex: 4,\r\n              backgroundColor: 'rgba(255,255,255,0.95)',\r\n              border: '1px solid',\r\n              borderColor: 'grey.300',\r\n              borderRadius: 2,\r\n              padding: 0.5,\r\n              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',\r\n              backdropFilter: 'blur(4px)',\r\n            }}\r\n          >\r\n            <Tooltip title={`Zoom In (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomIn}\r\n                  disabled={!canZoomIn}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomIn fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title={`Zoom Out (${Math.round(currentScale * 100)}%)`} arrow>\r\n              <span>\r\n                <IconButton\r\n                  size=\"small\"\r\n                  onClick={handleZoomOut}\r\n                  disabled={!canZoomOut}\r\n                  sx={{\r\n                    backgroundColor: 'transparent',\r\n                    '&:hover': { \r\n                      backgroundColor: 'primary.light',\r\n                      color: 'primary.contrastText' \r\n                    },\r\n                    '&:disabled': {\r\n                      opacity: 0.5\r\n                    }\r\n                  }}\r\n                >\r\n                  <ZoomOut fontSize=\"small\" />\r\n                </IconButton>\r\n              </span>\r\n            </Tooltip>\r\n\r\n            <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n\r\n            <Tooltip title=\"Refresh Preview\" arrow>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={handleRefresh}\r\n                sx={{\r\n                  backgroundColor: 'transparent',\r\n                  '&:hover': { \r\n                    backgroundColor: 'primary.light',\r\n                    color: 'primary.contrastText' \r\n                  },\r\n                }}\r\n              >\r\n                <Refresh fontSize=\"small\" />\r\n              </IconButton>\r\n            </Tooltip>\r\n\r\n            {onDelete && (\r\n              <>\r\n                <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\r\n                <Tooltip \r\n                  title={canDelete ? \"Delete Template\" : \"Cannot delete default template\"} \r\n                  arrow\r\n                >\r\n                  <span>\r\n                    <IconButton\r\n                      size=\"small\"\r\n                      onClick={handleDelete}\r\n                      disabled={!canDelete}\r\n                      sx={{\r\n                        backgroundColor: 'transparent',\r\n                        '&:hover': !canDelete ? {} : { \r\n                          backgroundColor: 'error.light',\r\n                          color: 'error.contrastText' \r\n                        },\r\n                        '&:disabled': {\r\n                          opacity: 0.5\r\n                        }\r\n                      }}\r\n                    >\r\n                      <Trash fontSize=\"small\" />\r\n                    </IconButton>\r\n                  </span>\r\n                </Tooltip>\r\n              </>\r\n            )}\r\n          </Box>\r\n        </Fade>\r\n      )}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport { HtmlThumbnailPreview };\nexport default HtmlThumbnailPreview;"],"names":[],"mappings":"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"}