@pega/custom-dx-components 0.24.16 → 0.25.1

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/embed-utils.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { isEmbeddedField, isPageListInPath, PAGE, PAGELIST, buildAggOrCalcId } from './repeat-utils';
 
 export const AT_FILTEREDLIST = '@FILTERED_LIST';
@@ -15,7 +14,7 @@ export const AT_PROPERTY = '@P';
  * getFieldNameFromEmbeddedFieldName('!P!Organisation:Name') return 'Organisation.Name'
  * getFieldNameFromEmbeddedFieldName('!PL!Employees:Name') return 'Employees.Name'
  */
-export function getFieldNameFromEmbeddedFieldName(propertyName) {
+export function getFieldNameFromEmbeddedFieldName(propertyName: string) {
   let value = propertyName;
   if (value.startsWith(PAGE) || value.startsWith(PAGELIST)) {
     value = value.substring(value.lastIndexOf('!') + 1);
@@ -36,7 +35,7 @@ export function getFieldNameFromEmbeddedFieldName(propertyName) {
  * For pageList property, getEmbeddedFieldName('Employees.Name') return '!PL!Employees:Name'
  */
 
-export function getEmbeddedFieldName(propertyName, classID) {
+export function getEmbeddedFieldName(propertyName: string, classID: string) {
   let value = propertyName;
   if (isPageListInPath(value, classID)) {
     value = `!PL!${value.replace(/\./g, ':')}`;
@@ -52,7 +51,7 @@ export function getEmbeddedFieldName(propertyName, classID) {
  * @ignore
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
  */
-export function updateMetaEmbeddedFieldID(metaFields) {
+export function updateMetaEmbeddedFieldID(metaFields: any[]) {
   return metaFields.forEach((metaField) => {
     if (metaField.fieldID?.startsWith(PAGE) || metaField.fieldID?.startsWith(PAGELIST)) {
       metaField.fieldID = getFieldNameFromEmbeddedFieldName(metaField.fieldID);
@@ -68,16 +67,16 @@ export function updateMetaEmbeddedFieldID(metaFields) {
  * @param {string} classID    clasID of datapage
  * @returns {Array}           Metadata of configured embedded fields
  */
-export function getConfigEmbeddedFieldsMeta(configFields, classID) {
-  const configEmbeddedFieldsMeta = [];
-  configFields.forEach((field) => {
+export function getConfigEmbeddedFieldsMeta(configFields: any, classID: string) {
+  const configEmbeddedFieldsMeta: (object | null)[] = [];
+  configFields.forEach((field: any) => {
     let value = field;
     if (isEmbeddedField(value)) {
       // conversion Page.PageList[].property => Page.PageList.property
       if (value.includes('[')) {
         value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
       }
-      const meta = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
+      const meta: any = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
       meta.fieldID = field;
       configEmbeddedFieldsMeta.push(meta);
     }
@@ -92,7 +91,7 @@ export function getConfigEmbeddedFieldsMeta(configFields, classID) {
  * @param {Array} configEmbeddedFieldsMeta  config fields metadata.
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields
  */
-export function mergeConfigEmbeddedFieldsMeta(configEmbeddedFieldsMeta, metaFields) {
+export function mergeConfigEmbeddedFieldsMeta(configEmbeddedFieldsMeta: any[], metaFields: any[]) {
   const mergedMetaFields = [...metaFields];
   configEmbeddedFieldsMeta.forEach((configFieldMeta) => {
     const fieldMeta = metaFields.find((metaField) => metaField.fieldID === configFieldMeta.fieldID);
@@ -113,7 +112,7 @@ export function mergeConfigEmbeddedFieldsMeta(configEmbeddedFieldsMeta, metaFiel
  */
 // FIXME #EmbeddedPropertyPatch
 // TODO: Remove this utility when we have nested response for queryable pageList and supports @FILTERED_LIST annotation
-export function preparePropertyValue(value) {
+export function preparePropertyValue(value: any) {
   if (value.startsWith(AT_FILTEREDLIST)) {
     value = value.substring(value.indexOf(' ') + 1);
     value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
@@ -152,7 +151,7 @@ export function preparePropertyValue(value) {
  */
 // FIXME #EmbeddedPropertyPatch
 // TODO: Remove this utility when we have nested response for queryable pageList and supports scalarList component
-export function updatePageListFieldsConfig(configFields) {
+export function updatePageListFieldsConfig(configFields: any[]) {
   return configFields.forEach((item) => {
     if (item.type === 'ScalarList') {
       if (!item.config.originalValue) {
@@ -166,7 +165,7 @@ export function updatePageListFieldsConfig(configFields) {
 /**
  * Update the renderer type for the properties of type Page.
  */
-export function updatePageFieldsConfig(configFields, parentClassID) {
+export function updatePageFieldsConfig(configFields: any[], parentClassID: string) {
   return configFields.forEach((item) => {
     const {
       type,
@@ -180,8 +179,8 @@ export function updatePageFieldsConfig(configFields, parentClassID) {
   });
 }
 
-export function updateChangeSetValueKeys(changeSetObj, getOriginalProperty) {
-  const newChangeSetObject = {};
+export function updateChangeSetValueKeys(changeSetObj: any, getOriginalProperty: any) {
+  const newChangeSetObject: any = {};
   for (const [key, value] of Object.entries(changeSetObj)) {
     let newKey = key;
     if (newKey.startsWith(PAGE)) {
@@ -204,7 +203,7 @@ export function updateChangeSetValueKeys(changeSetObj, getOriginalProperty) {
  * isPageListProperty('!P!Employees.Name') return false
  * isPageListProperty('Name') return false
  */
-export function isPageListProperty(propertyName) {
+export function isPageListProperty(propertyName: string) {
   return propertyName.startsWith(PAGELIST);
 }
 
@@ -217,8 +216,8 @@ export function isPageListProperty(propertyName) {
  * @param {string} context  dataApi context
  * @returns {boolean} true if pageListProperty is present
  */
-export function preparePropertyMaps(fields, classID, context) {
-  const { setPropertyMaps } = context;
+export function preparePropertyMaps(fields: any[], classID: string, context: string) {
+  const { setPropertyMaps } : any = context;
   const maps = fields.reduce(
     (acc, field) => {
       let { value } = field.config;
@@ -254,9 +253,9 @@ export function preparePropertyMaps(fields, classID, context) {
  */
 // FIXME #EmbeddedPropertyPatch
 // TODO: Remove this utility when we have nested response for queryable pageList property
-export function getPageListFields(fields) {
+export function getPageListFields(fields: any[]) {
   const parentPaths = new Set();
-  const pageListFields = [];
+  const pageListFields: any = [];
   fields.forEach((field) => {
     const { name } = field;
     if (isPageListProperty(name)) {
@@ -270,7 +269,11 @@ export function getPageListFields(fields) {
   return pageListFields;
 }
 
-export function mergePageListFieldAggregation(pageListName, select, existingAggregations, existingAggregationsName) {
+export function mergePageListFieldAggregation(
+  pageListName :string,
+  select: { aggregation: string; }[],
+  existingAggregations: { [x: string]: { field: string; summaryFunction: string; }; },
+  existingAggregationsName: string | string[]) {
   // Build a dummy genericAggregationId to check if any type of aggregation for that pagelist is included in existing aggregations.
   const genericAggregationId = buildAggOrCalcId(pageListName, '');
   if (existingAggregationsName.includes(genericAggregationId)) {
@@ -281,10 +284,10 @@ export function mergePageListFieldAggregation(pageListName, select, existingAggr
   existingAggregations[countAggregationId] = { field: pageListName, summaryFunction: 'COUNT' };
 }
 
-export function mergePageListFieldsAggregation(fields, select, existingAggregations) {
+export function mergePageListFieldsAggregation(fields: any[], select: { aggregation: string; }[], existingAggregations: { [x: string]: { field: string; summaryFunction: string; }; }) {
   const parentPaths = new Set();
   const existingAggregationsName = Object.keys(existingAggregations).toString();
-  const pageListFields = [];
+  const pageListFields: any[] = [];
   fields.forEach((field) => {
     const { name } = field;
     if (isPageListProperty(name)) {
@@ -306,6 +309,6 @@ export function mergePageListFieldsAggregation(fields, select, existingAggregati
  * @param {Array} fieldDefs   fields array
  * @returns {object | undefined} value of first pageListProperty found
  */
-export function hasPageListProperty(fieldDefs) {
+export function hasPageListProperty(fieldDefs: any[]) {
   return fieldDefs?.find((field) => isPageListProperty(field.name));
 }

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetSt
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -178,7 +179,9 @@ export const doSearch = (
           const selectedItem = menuHelpers.getSelected(updatedItems)[0];
           let listIndex = -1;
           const findSelectedItem = progressivePaginatedRecords.find(
+            // @ts-ignore
             (record: { id: string }, index: number) => {
+              // @ts-ignore
               if (record.id === selectedItem?.id) {
                 listIndex = index;
                 return true;
@@ -496,14 +499,14 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const pConn = getPConnect();
   const contextName = getPConnect().getContextName();
   const actions = pConn.getActionsApi();
-  const [dataApiObj, setDataApiObj] = useState(() => ({}));
+  const [dataApiObj, setDataApiObj] = useState(() => ({} as any));
   const [filterValue, setFilterValue] = useState('');
   const [loading, setLoading] = useState(listType !== 'associated');
   // const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
   const [selected, setSelected] = useState();
   const hasMoreResults = useRef(true);
   const inputValueRef = useRef('');
-  const displayFieldMeta = useRef(null);
+  const displayFieldMeta: any = useRef(null);
   const [actualValue, setActualValue] = useState();
   const [newRecordCreated, setNewRecordCreated] = useState();
 
@@ -644,15 +647,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       }
       PCore.getDataApi()
         .init(dataConfig, contextName)
-        .then(dataObj => {
-          // @ts-ignore
+        .then((dataObj: any) => {
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue)
             doSearch(
               '',
               getDisplayFieldsMetaData(dataConfig.columns),
-              // @ts-ignore
               dataObj,
               setItems as any,
               setLoading,
@@ -678,12 +679,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     if (!dataRefMount && !displayMode && listType === 'datapage') {
       PCore.getDataApi()
         .init(dataConfig, contextName)
-        .then(dataObj => {
-          // @ts-ignore
+        .then((dataObj: any) => {
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue) {
-            // @ts-ignore
             if (displayFieldMeta?.current?.key === displayFieldMeta?.current?.primary) {
               const displayItem = {
                 id: value,
@@ -695,7 +694,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
-                // @ts-ignore
                 dataObj,
                 setItems as any,
                 setLoading,
@@ -715,7 +713,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
-                // @ts-ignore
                 dataObj,
                 setItems as any,
                 setLoading,
@@ -774,22 +771,16 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     ) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
-        .then(dataObj => {
-          // @ts-ignore
+        .then((dataObj: any) => {
           setDataApiObj(dataObj);
-          // @ts-ignore
           buildColumnForDisplayValue(dataObj);
           // SET matchPosition to EQUALS to return exact matching record
-          // @ts-ignore
           dataObj.matchPosition = 'equals';
-          // @ts-ignore
           dataObj
             .fetchData(value)
             .then((displayResponse: { data: Array<never> }) => {
               let columnsWithSetProperty: string | Array<any> = [];
-              // @ts-ignore
               if (dataApiObj.columns) {
-                // @ts-ignore
                 columnsWithSetProperty = dataApiObj.columns
                   .filter(
                     (col: { setProperty: string }) =>
@@ -804,12 +795,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               const searchedItem = displayResponseData.map((entry: { [x: string]: any }) => {
                 const secondaryArr: Array<any> = [];
                 const secondaryFieldValues: Array<any> = [];
-                // @ts-ignore
                 displayFieldMeta.current.secondary.forEach((col: string) => {
-                  // @ts-ignore
                   if (!displayFieldMeta.hidden.includes(col)) secondaryArr.push(entry[col]);
                   if (columnsWithSetProperty.includes(col)) {
-                    // @ts-ignore
                     if (dataApiObj.isQueryable) {
                       secondaryFieldValues.push(entry[col]);
                     } else {
@@ -818,9 +806,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
                   }
                 });
                 return {
-                  // @ts-ignore
                   id: entry[displayFieldMeta.current.key],
-                  // @ts-ignore
                   primary: entry[displayFieldMeta.current.primary],
                   secondary: secondaryArr,
                   secondaryFieldValues
@@ -831,13 +817,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               setSelected(searchedItem[0]);
               setActualValue(value);
               // RESET matchPosition
-              // @ts-ignore
               dataObj.matchPosition = dataConfig.matchPosition;
             })
             .catch(() => {
               setActualValue(value);
               // RESET matchPosition
-              // @ts-ignore
               dataObj.matchPosition = dataConfig.matchPosition;
             });
         });
@@ -848,28 +832,26 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const clearSelections = () => {
     // @ts-ignore
     setItems(cur =>
+      // @ts-ignore
       menuHelpers.mapTree(cur, item => {
         return {
+          // @ts-ignore
           ...item,
           selected: false
         };
       })
     );
-    // @ts-ignore
-    setSelected(null);
+    setSelected(undefined);
     inputValueRef.current = '';
   };
 
   const onChangeHandler = (ev: { target: { value: any } }) => {
     if (hasSuggestions) {
-      // @ts-ignore
-      pConn.ignoreSuggestion();
+      pConn.ignoreSuggestion('');
       setStatus(undefined);
     }
 
-    // @ts-ignore
     dataApiObj.columns = dataConfig.columns;
-    // @ts-ignore
     dataApiObj.matchPosition = dataConfig.matchPosition;
     const searchText = ev.target.value;
     inputValueRef.current = searchText;
@@ -878,15 +860,14 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       clearSelections();
     }
     setFilterValue(searchText);
-    // @ts-ignore
     if (listType === 'datapage' && dataApiObj.isQueryable) {
       hasMoreResults.current = true;
       if (searchText.length < 5) {
         searchHandlerThrottled(
           searchText,
-          // @ts-ignore
           displayFieldMeta.current,
           dataApiObj,
+          // @ts-ignore
           setItems,
           setLoading,
           hasMoreResults
@@ -894,9 +875,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       } else {
         searchHandlerDebounced(
           searchText,
-          // @ts-ignore
           displayFieldMeta.current,
           dataApiObj,
+          // @ts-ignore
           setItems,
           setLoading,
           hasMoreResults
@@ -904,14 +885,12 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       }
     } else if (
       listType === 'associated' ||
-      // @ts-ignore
       (listType === 'datapage' && dataApiObj?.isQueryable === false)
     ) {
       paginateHelperApis.resetIndexes();
       const progressivePaginatedRecords = paginateHelperApis.fetchData(
         inputValueRef.current,
         false,
-        // @ts-ignore
         dataApiObj.columns
       );
       setItems(progressivePaginatedRecords);
@@ -938,21 +917,19 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     setFilterValue('');
     if (!selected && inputValueRef.current !== '') {
-      // @ts-ignore
       if (listType === 'datapage' && dataApiObj.isQueryable) {
         hasMoreResults.current = true;
         searchHandlerThrottled(
           '',
-          // @ts-ignore
           displayFieldMeta.current,
           dataApiObj,
+          // @ts-ignore
           setItems,
           setLoading,
           hasMoreResults
         );
       } else if (
         listType === 'associated' ||
-        // @ts-ignore
         (listType === 'datapage' && dataApiObj?.isQueryable === false)
       ) {
         paginateHelperApis.resetIndexes();
@@ -975,7 +952,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // @ts-ignore
     setSelected(menuHelpers.getSelected(updatedItems)[0]);
     // const { id: itemId } = menuHelpers.getSelected(updatedItems)[0];
-    // @ts-ignore
     const assocProp = pConn.getStateProps().value;
     const propValue = setValueToAssocProp(
       assocProp,
@@ -1008,7 +984,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const loadMore = () => {
     if (
       (listType === 'associated' ||
-        // @ts-ignore
         (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
       paginateHelperApis.hasMoreResults(inputValueRef.current)
     ) {
@@ -1018,23 +993,18 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         progressivePaginatedRecords = removeDuplicates(previousItems, progressivePaginatedRecords);
         return [...previousItems, ...progressivePaginatedRecords];
       });
-      // @ts-ignore
     } else if (listType === 'datapage' && dataApiObj.isQueryable && hasMoreResults.current) {
       setLoading(true);
       dataApiObj
-        // @ts-ignore
         .fetchPaginatedData(inputValueRef.current)
         .then((response: { pageSize: number; data: Array<never> }) => {
           setLoading(false);
-          // @ts-ignore
           if (response.pageSize === 0 || response.pageSize < dataApiObj.pageSize) {
             hasMoreResults.current = false;
           }
           const listObjData = response.data || [];
           let columnsWithSetProperty: string | Array<any> = [];
-          // @ts-ignore
           if (dataApiObj.columns) {
-            // @ts-ignore
             columnsWithSetProperty = dataApiObj.columns
               .filter(
                 (col: { setProperty: string }) =>
@@ -1048,12 +1018,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           const searchedItems = listObjData.map((entry: { [x: string]: any }) => {
             const secondaryArr: Array<any> = [];
             const secondaryFieldValues: Array<any> = [];
-            // @ts-ignore
             displayFieldMeta.current.secondary.forEach((col: string) => {
-              // @ts-ignore
               if (!displayFieldMeta.current.hidden.includes(col)) secondaryArr.push(entry[col]);
               if (columnsWithSetProperty.includes(col)) {
-                // @ts-ignore
                 if (dataApiObj.isQueryable) {
                   secondaryFieldValues.push(entry[col]);
                 } else {
@@ -1062,9 +1029,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               }
             });
             return {
-              // @ts-ignore
               id: entry[displayFieldMeta.current.key],
-              // @ts-ignore
               primary: entry[displayFieldMeta.current.primary],
               secondary: secondaryArr,
               secondaryFieldValues
@@ -1075,7 +1040,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         })
         .catch(() => {
           setLoading(false);
-          // @ts-ignore
           dataApiObj.pageSize -= 1;
         });
     }
@@ -1154,14 +1118,16 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       onChange={onChangeHandler}
       onBlur={onBlurHandler}
       menu={{
+        // @ts-ignore
         items: menuHelpers.mapTree(items, (item) => ({
+          // @ts-ignore
           ...item,
+          // @ts-ignore
           testId: item.id ?? undefined,
           // @ts-ignore
           selected: item.items ? undefined : !!item.selected || item.id === selected?.id
         })),
         onItemClick: selectItem,
-        // @ts-ignore
         emptyText: pConn.getLocalizedValue('No items'),
         loading,
         loadMore,

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Picklist Sample',

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/utils.ts.mustache

@@ -187,7 +187,7 @@ export const updatePropertiesForNewRecord = (
       dataObj
         .fetchData(newCaseId)
         // @ts-ignore
-        .then(displayResponse => {
+        .then((displayResponse: any) => {
           let columnsWithSetProperty = [];
           if (dataApiObj.columns) {
             columnsWithSetProperty = dataApiObj.columns

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/config.json.mustache

@@ -108,6 +108,9 @@
   "defaultConfig": {
     "label": "@L $this.label",
     "listType": "associated",
-    "datasource": "@ASSOCIATED .$this.name"
+    "datasource": "@ASSOCIATED .$this.name",
+    "detailFVLItem": true,
+    "isFormWidth" : true,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -36,10 +34,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getPageReference: () => {
           return 'caseInfo.content';
         },
-        getLocalizedValue: val => {
+        getLocalizedValue: (val: any) => {
           return val;
         },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+        getLocaleRuleNameFromKeys: (localeClass: string, localeContext: string, localeName: string) => {
           return `${localeClass}!${localeContext}!${localeName}`;
         },
         getCaseInfo: () => {
@@ -54,7 +52,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => {/* nothing */}

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -2,6 +2,7 @@
 import { useMemo } from 'react';
 import { RadioButton, RadioButtonGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { formatExists, textFormatter } from './textformat-utils';
@@ -76,7 +77,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const propName: string = stateProps.value;
   const configProps = pConn.getConfigProps();
   const className = pConn.getCaseInfo().getClassName();
-  // @ts-ignore
   const { getLocaleRuleNameFromKeys, getLocalizedValue } = pConn;
 
   // @ts-ignore
@@ -107,7 +107,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const items: Array<any> = [];
   const isDatapage = listType === 'datapage';
-  // @ts-ignore
   const listSource = isDatapage ? configProps.listOutput : datasource;
   let autoFocusProp = additionalProps?.autoFocus
     ? {
@@ -175,12 +174,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       required={required}
       readOnly={readOnly}
       onChange={(event) => {
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, event.target.value);
       }}
-      // @ts-ignore
-      onBlur={(event) => {
-        // @ts-ignore
+      onBlur={(event: any) => {
         pConn.getValidationApi().validate(event.target.value);
       }}
       disabled={disabled}

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/mock.ts.mustache

@@ -1,5 +1,3 @@
-
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Picklist Sample',

package/src/tasks/create/templates/Constellation/Field/Text/config.json.mustache

@@ -58,19 +58,22 @@
     "label": "@L $this.label",
     "placeholder": "@L Select...",
     "listType": "associated",
-    "datasource": "@ASSOCIATED .$this.name"
+    "datasource": "@ASSOCIATED .$this.name",
     {{/IS_PICKLIST}}
     {{#IS_BOOLEAN}}
     "trueText": "True",
-    "falseText": "False"
+    "falseText": "False",
     {{/IS_BOOLEAN}}
     {{#IS_PHONE}}
     "datasource": {
       "source": "@DATASOURCE D_pyCountryCallingCodeList.pxResults",
       "fields": {
         "value": "@P .pyCallingCode"
-      }
+      },
     }
     {{/IS_PHONE}}
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Text/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -32,7 +31,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => {/* nothing */}

package/src/tasks/create/templates/Constellation/Field/Text/index.tsx.mustache

@@ -9,6 +9,7 @@ import {
 } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';