@pega/dx-component-builder-sdk 23.1.13 → 23.1.15

package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache

@@ -15,7 +15,14 @@ window.PCore = {
         return 'en-GB';
       }
     };
-  }
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
+  },
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {

package/src/tasks/create/templates/SDK-React/field/Decimal/config.json.mustache

@@ -50,6 +50,161 @@
         }
       ]
     },
+    {
+      "label": "Read-only settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "format": "SELECT",
+          "name": "formatter",
+          "label": "Format",
+          "defaultValue": "defaultDecimal",
+          "source": [
+            {
+              "key": "defaultDecimal",
+              "value": "Default"
+            },
+            {
+              "key": "Integer",
+              "value": "Integer"
+            },
+            {
+              "key": "Currency",
+              "value": "Currency"
+            },
+            {
+              "key": "Percentage",
+              "value": "Percentage"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "format": "CASCADE",
+      "visibility": "(formatter = Currency)",
+      "source": {
+        "format": "SELECT",
+        "label": "ISO Code Selection",
+        "name": "isoCodeSelection",
+        "defaultValue": "constant",
+        "source": [
+          {
+            "key": "constant",
+            "value": "Constant"
+          },
+          {
+            "key": "propertyRef",
+            "value": "Property Reference"
+          }
+        ]
+      },
+      "cascadeElements": [
+        {
+          "key": "currencyISOCode",
+          "format": "TEXT",
+          "name": "currencyISOCode",
+          "label": "Currency ISO Code",
+          "defaultValue": "USD",
+          "match": "constant"
+        },
+        {
+          "key": "currencyISOCode",
+          "format": "PROPERTY",
+          "name": "currencyISOCode",
+          "label": "Currency ISO Code",
+          "match": "propertyRef"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDisplay",
+      "label": "Currency display",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "symbol",
+      "source": [
+        {
+          "key": "symbol",
+          "value": "Auto"
+        },
+        {
+          "key": "code",
+          "value": "Code"
+        },
+        {
+          "key": "name",
+          "value": "Name"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "negative",
+      "label": "Negative number display",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "minus-sign",
+      "source": [
+        {
+          "key": "minus-sign",
+          "value": "Standard"
+        },
+        {
+          "key": "parentheses",
+          "value": "Accounting"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "notation",
+      "label": "Notation",
+      "visibility": "(!negative = parentheses)&&(!formatter = Percentage)",
+      "defaultValue": "standard",
+      "source": [
+        {
+          "key": "standard",
+          "value": "Standard"
+        },
+        {
+          "key": "compact",
+          "value": "Compact"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDecimalPrecision",
+      "label": "Decimal places shown",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "auto",
+      "source": [
+        {
+          "key": "auto",
+          "value": "Auto"
+        },
+        {
+          "key": "0",
+          "value": "None"
+        },
+        {
+          "key": "1",
+          "value": "1"
+        },
+        {
+          "key": "2",
+          "value": "2"
+        },
+        {
+          "key": "3",
+          "value": "3"
+        },
+        {
+          "key": "4",
+          "value": "4"
+        }
+      ]
+    },
     {
       "label": "Conditions",
       "format": "GROUP",

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
@@ -15,6 +14,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   currencyISOCode?: string;
   decimalPrecision?: number;
   showGroupSeparators?: string;
+  formatter?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -41,7 +41,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     decimalPrecision = 2,
     showGroupSeparators = true,
     testId,
-    placeholder
+    placeholder,
+    formatter
   } = props;
 
   const pConn = getPConnect();
@@ -49,17 +50,19 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+  const theCurrSym = theSymbols.theCurrencySymbol;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
+  let formattedValue = '';
+  if (formatter === 'Currency') {
+    formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
+  } else {
+    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  }
 
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
@@ -98,7 +101,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       {{=<% %>=}}
       InputProps={{ inputProps: { ...testProp } }}
       <%={{ }}=%>     {{! revert delimiters for mustache }}
-      currencySymbol=''
+      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}
       decimalCharacter={theCurrDec}
       digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalPlaces={decimalPrecision}

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
-import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
@@ -52,17 +52,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
-  const [theCurrSym, setCurrSym] = useState('$');
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrSym(theSymbols.theCurrencySymbol);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrSym = theSymbols.theCurrencySymbol;
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -10,6 +10,20 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   excludeStories: /.*Data$/
 };
 
+window.PCore = {
+  ...window.PCore,
+  getEnvironmentInfo: (): any => {
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
+};
+
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
@@ -22,10 +36,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     fieldMetadata,
     getPConnect: () => {
       return {
+        getComponentName: () => {
+          return 'Percentage';
+        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -1,69 +1,61 @@
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
-const useStyles = makeStyles((/* theme */) => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  }
-}));
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  currencyISOCode: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
-  const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const classes = useStyles();
-
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    // onChange,
+    // onBlur,
     readOnly,
+    currencyISOCode = 'USD',
     testId,
     helperText,
     displayMode,
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
-  }
-
-  if (readOnly) {
-    return <TextInput {...props} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   let testProp = {};
@@ -72,10 +64,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <TextField
-        className={classes.input}
+      <CurrencyTextField
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -83,18 +82,24 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
         value={value}
-        type='number'
+        type='text'
+        outputFormat='number'
+        textAlign='left'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        inputProps={{ ...testProp }}
+        InputProps={{
+          inputProps: { ...testProp }
+        }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
+        currencySymbol=''
+        decimalCharacter={theCurrDec}
+        digitGroupSeparator={theCurrSep}
+        onBlur={!readOnly ? PercentageOnBlur : undefined}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/template/DETAILS/demo.stories.tsx.mustache

@@ -26,6 +26,13 @@ window.PCore = {
       }
     };
   },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
+  },
   getEnvironmentInfo: (): any => {
     return {
       getUseLocale: () => {
@@ -63,6 +70,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         resolveConfigProps: () => {
           /* nothing */
+        },
+        createComponent: () => {
+          /* nothing */
         }
       };
     }

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/demo.stories.tsx.mustache

@@ -6,9 +6,20 @@ import operatorDetails, { pyReviewRaw } from './mock';
 window.PCore = {
   ...window.PCore,
   getUserApi: (): any => {
-    return new Promise(resolve => {
-      resolve(operatorDetails);
-    });
+    return {
+      getOperatorDetails: () => {
+        return new Promise(resolve => {
+          resolve(operatorDetails);
+        });
+      }
+    };
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
   },
   getEnvironmentInfo: (): any => {
     return {
@@ -57,6 +68,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         resolveConfigProps: () => {
           /* nothing */
+        },
+        createComponent: () => {
+          /* nothing */
         }
       };
     }

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -151,9 +151,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] as any : '---'}</StyledTableCell>
           </TableRow>
         );
       });

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -11,6 +11,13 @@ window.PCore = {
         return new Promise(resolve => {
           resolve(operatorDetails);
         });
+      },
+    };
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: val => {
+        return val;
       }
     };
   }

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -20,6 +20,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   updateDateTime: string;
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
+  displayLabel?: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -42,18 +43,19 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // const componentName = "Operator";
   const classes = useStyles();
 
-  const fieldLabel = props.label.toLowerCase();
+  const fieldLabel = props?.label?.toLowerCase();
+  const displayLabel = props?.displayLabel?.toLowerCase();
   let caseOpLabel = '---';
   let caseOpName = '---';
   let caseOpId = '';
   let caseTime = '';
 
-  if (fieldLabel === 'create operator') {
+  if (fieldLabel === 'create operator' || displayLabel === 'create operator') {
     caseOpLabel = props.createLabel;
     caseOpName = props.createOperator.userName;
     caseTime = props.createDateTime;
     caseOpId = props.createOperator.userId;
-  } else if (fieldLabel === 'update operator') {
+  } else if (fieldLabel === 'update operator' || displayLabel === 'update operator') {
     caseOpLabel = props.updateLabel;
     caseOpName = props.updateOperator.userName;
     caseTime = props.updateDateTime;

package/src/tasks/index.js

@@ -17,3 +17,4 @@ export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build-comp/index.js';
 export { default as buildAllComponents } from './build-all/index.js';
 export { default as scanAndFix } from './scan-and-fix/index.js';
+export { default as buildJestAssets } from './build-jest-assets/index.js';

package/src/tasks/map/map.js

@@ -50,6 +50,27 @@ export const getPrettierFormattedString = async (content) => {
   }
 }
 
+//
+// some components reference have a slightly different case/spelling than the component name, class, etc.
+//
+export const getSpecialCase = (componentKey, framework) => {
+
+  switch (framework) {
+    case 'SDK-React':
+      switch(componentKey) {
+        case "ToDo":
+          return "Todo";
+      }
+      break;
+    case 'SDK-Angular':
+      break;
+    case 'SDK-WebComponents' :
+      break;
+  }
+
+  return componentKey;
+}
+
 export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTOM) => {
 
   const framework = await getFramework();
@@ -73,7 +94,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       importComponent = "./".concat(importComponent).split(path.sep).join("/");
 
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
-      let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
+      let mapFull = "\"".concat(getSpecialCase(componentNameNoPrefix, framework)).concat("\" : " ).concat(componentName).concat(",");
 
       if (mapData.indexOf(importComponent.concat("/")) < 0) {
         // not present so we can add
@@ -141,7 +162,7 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
       importComponentAng = "./".concat(importComponentAng).split(path.sep).join("/");
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
       if (mapDataAng.indexOf(importComponentAng.concat(".component")) < 0) {
         // not present so we can add
@@ -222,8 +243,8 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFull = "import ".concat(componentName).concat(" from '").concat(importComponent).concat("/';");
-      let mapFull = "\"".concat(componentNameNoPrefix).concat("\" : " ).concat(componentName).concat(",");
-      let mapFullPretty = componentNameNoPrefix.concat(": ").concat(componentName);
+      let mapFull = "\"".concat(getSpecialCase(componentNameNoPrefix, framework)).concat("\" : " ).concat(componentName).concat(",");
+      let mapFullPretty = getSpecialCase(componentNameNoPrefix, framework).concat(": ").concat(componentName);
 
       if (mapData.indexOf(importFull) >= 0) {
 
@@ -267,9 +288,9 @@ export const deleteFromComponentMap = async (componentKey, category = CATEGORY_C
 
 
       let importFullAng = "import { ".concat(componentComponentNameAng).concat(" } from '").concat(importComponentAng).concat(".component';");
-      let mapFullAng = "\"".concat(originalComponentName).concat("\" : " ).concat(componentComponentNameAng).concat(",");
+      let mapFullAng = "\"".concat(getSpecialCase(originalComponentName, framework)).concat("\" : " ).concat(componentComponentNameAng).concat(",");
 
-      let mapFullAngPretty = originalComponentName.concat(": ").concat(componentComponentNameAng);
+      let mapFullAngPretty = getSpecialCase(originalComponentName, framework).concat(": ").concat(componentComponentNameAng);
 
       if (mapDataAng.indexOf(importFullAng) >= 0) {
 
@@ -332,7 +353,7 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
         mapData = mapData.replaceAll( '"' + oldComponentNameNoPrefix + '"' , '"' + newComponentNameNoPrefix + '"');
 
         // pretty
-        mapData = mapData.replaceAll( oldComponentNameNoPrefix + ':' , newComponentNameNoPrefix + ':');
+        mapData = mapData.replaceAll( getSpecialCase(oldComponentNameNoPrefix, framework) + ':' , getSpecialCase(newComponentNameNoPrefix, framework) + ':');
 
         // prettier
         mapData = await getPrettierFormattedString(mapData);
@@ -369,7 +390,7 @@ export const renameComponentInMap = async (oldComponentKey, newComponentKey) =>
         mapDataAng = mapDataAng.replaceAll( oldComponentNameAng + 'Component' , newComponentNameAng + 'Component');
 
         // pretty
-        mapDataAng = mapDataAng.replaceAll( oldComponentNameNoPrefixAng + ':' , newComponentNameNoPrefixAng + ':');
+        mapDataAng = mapDataAng.replaceAll( getSpecialCase(oldComponentNameNoPrefixAng, framework) + ':' , getSpecialCase(newComponentNameNoPrefixAng, framework) + ':');
 
         // prettier
         mapDataAng = await getPrettierFormattedString(mapDataAng);