@pega/custom-dx-components 24.1.11 → 24.2.10

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.tsx.mustache

@@ -1,5 +1,3 @@
-
-
 // @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -22,14 +20,13 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', key } = resolvedProps;
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [inputValue, setInputValue] = useState(value);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
 
   let val =
@@ -131,6 +128,30 @@ const renderField = resolvedProps => {
       </Text>
     );
   }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label: label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
   return (
     <FieldValueList
       variant={variant}
@@ -144,7 +165,10 @@ const renderField = resolvedProps => {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
   const props = {
+    readOnly: readOnly,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -157,39 +181,92 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {
             case '@P .FirstName':
-              return renderField(regionChildrenResolved[0]);
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .MiddleName':
-              return renderField(regionChildrenResolved[1]);
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .LastName':
-              return renderField(regionChildrenResolved[2]);
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .Email':
-              return renderField(regionChildrenResolved[3]);
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .PhoneNumber':
-              return renderField(regionChildrenResolved[4]);
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
             case '@P .ServiceDate':
-              return renderField(regionChildrenResolved[5]);
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
           }
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
 
   return (
     <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+      {[regionAChildren, regionBChildren]}
     </{{COMPONENT_CLASS_NAME}}>
   );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
   showLabel: true,
   label: 'Form Region template',
 };

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -32,7 +33,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // @ts-ignore
   flexContainer.gap = 2;
 
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
 {{! pick new delimiters for mustache }}

package/src/tasks/create/templates/Constellation/Template/PAGE/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/Template/PAGE/demo.stories.tsx.mustache

@@ -1,7 +1,6 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 /* eslint-disable react/no-unstable-nested-components */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
@@ -18,14 +17,14 @@ 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) => {
   if (!window.PCore) {
     window.PCore = {};
   }
 
   window.PCore.getLocaleUtils = () => {
     return {
-      getLocaleValue: val => {
+      getLocaleValue: (val: any) => {
         return val;
       }
     };
@@ -59,13 +58,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getComponentName: () => {
           return '';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getRawMetadata: () => {
           return pyHome1Raw;
         },
-        createComponent: config => {
+        createComponent: (config: any) => {
           if (config.type === 'AppAnnouncement') {
             return (
               <PegaAppAnnouncement

package/src/tasks/create/templates/Constellation/Template/PAGE/index.tsx.mustache

@@ -3,6 +3,7 @@ import { OneColumnPage as OneColumn, withConfiguration } from '@pega/cosmos-reac
 import { ConfigurableLayout } from '@pega/cosmos-react-work'
 // import { registerIcon } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 
 
@@ -54,7 +55,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <OneColumn
-      // @ts-ignore
       a={useConfigurableLayout ? <ConfigurableLayout items={layoutItemsA} /> : childArray[0]}
       title={title}
       icon={tempIcon?.replace('pi pi-', '')}

package/src/tasks/create/templates/Constellation/Template/PAGE/mock.ts.mustache

@@ -1,5 +1,3 @@
-
-// @ts-nocheck
 export const pyHome1Raw = {
   name: 'pyHome1',
   type: 'View',

package/src/tasks/create/templates/Constellation/Template/PAGE/utils.ts.mustache

@@ -2,7 +2,7 @@ import { createUID } from '@pega/cosmos-react-core';
 
 // import { LazyMap as LazyComponentMap } from '../../components_map';
 
-const LazyComponentMap = {};
+const LazyComponentMap: any = {};
 
 /**
  * Given the PConnect object of a Template component, retrieve the children
@@ -53,47 +53,40 @@ export function getAllFields(pConnect: Function) {
 export function prepareComponentInCaseSummary(configObject: any, getPConnect: Function, displayMode: string) {
   const { config, children } = configObject;
   let { type } = configObject;
-  const caseSummaryComponentObject = {};
+  const caseSummaryComponentObject: any = {};
   let showAddressLabel = true;
   if (config && config.value === '@P .pyStatusWork') {
     config.displayAsStatus = true;
     type = 'TextInput'; // force the type to be TextInput for status field.
     // As TextInput is loaded forcefully sometimes, TextInput component might not be available in lazy map.
     // Load TextInput if it is not available.
-    // @ts-ignore
     if (!LazyComponentMap[type]) {
       PCore.getAssetLoader().getLoader('component-loader')([type]);
     }
   }
 
-  // @ts-ignore
   caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
     label: config.label
   }).label;
   if (type === 'CaseOperator') {
-     // @ts-ignore
     switch (caseSummaryComponentObject.name) {
       case 'Create operator':
-         // @ts-ignore
         caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
           createLabel: config.createLabel
         }).createLabel;
         break;
       case 'Update operator':
-         // @ts-ignore
         caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
           updateLabel: config.updateLabel
         }).updateLabel;
         break;
       default:
-         // @ts-ignore
         caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
           resolveLabel: config.resolveLabel
         }).resolveLabel;
         break;
     }
   } else if (type === 'Checkbox') {
-     // @ts-ignore
     caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
       label: config.caption
     }).label;
@@ -115,10 +108,8 @@ export function prepareComponentInCaseSummary(configObject: any, getPConnect: Fu
     createdComponent.props.getPConnect().setInheritedProp('showAddressLabel', showAddressLabel);
   }
   // createdComponent.props.getPConnect().setInheritedProp("hideLabel", true);
-   // @ts-ignore
   caseSummaryComponentObject.value = createdComponent;
   if (type === 'reference') {
-     // @ts-ignore
     caseSummaryComponentObject.name = createdComponent.props.getPConnect().getInheritedProps().label;
   }
 
@@ -188,16 +179,13 @@ export function getLayoutDataFromRegion(regionData: object[]) {
 export function getIsAssignmentView(pConnect: Function) {
   // Get caseInfo content from the store which contains the view info about the current assignment/step
   // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
-   // @ts-ignore
-  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
-   // @ts-ignore
-  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+  const assignmentViewClass = pConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect().getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
 
   const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
 
   // Get the info about the current view from pConnect
-   // @ts-ignore
-  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+  const currentViewId = `${pConnect().getCurrentView()}!${pConnect().getCurrentClassID()}`;
 
   return assignmentViewId === currentViewId;
 }
@@ -208,8 +196,7 @@ export function getIsAssignmentView(pConnect: Function) {
  * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
  */
 export function getInstructions(pConnect: Function, instructions: string = 'casestep') {
-   // @ts-ignore
-  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+  const caseStepInstructions = pConnect().getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
 
   // Determine if this view is the current assignment/step view
   const isCurrentAssignmentView = getIsAssignmentView(pConnect);

package/src/tasks/create/templates/Constellation/Widget/CASE/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/Widget/CASE/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -20,45 +18,44 @@ if (!window.PCore) {
   window.PCore = {};
 }
 
-window.PCore.getConstants = () => {
-  return {
-    CASE_INFO: {
-      CASE_INFO_ID: 'caseInfo.ID'
-    }
-  };
-};
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
+  window.PCore.getConstants = () => {
+    return {
+      CASE_INFO: {
+        CASE_INFO_ID: 'caseInfo.ID'
+      }
+    };
   };
-};
 
-window.PCore.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(historyData);
-      });
-    }
+  window.PCore.getLocaleUtils = () => {
+    return {
+      getLocaleValue: (value: any) => {
+        return value;
+      }
+    };
   };
-};
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore.getDataApiUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(historyData);
+        });
+      }
+    };
+  };
 
   const props = {
-
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {
@@ -73,7 +70,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         resolveConfigProps: () => {/* nothing */}
       };
     }
-};
+  };
 
 return (
     <>

package/src/tasks/create/templates/Constellation/Widget/CASE/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Table, Text, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -31,13 +32,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   ];
 
   useEffect(() => {
-    // @ts-ignore
-    const payload = { dataViewParameters: [{ CaseInstanceKey: caseID }] };
+    const payload = { dataViewParameters: { CaseInstanceKey: caseID } };
     PCore.getDataApiUtils()
-      // @ts-ignore
       .getData('D_pyWorkHistory', payload, context)
-      // @ts-ignore
-      .then((response) => {
+      .then((response: any) => {
         setIsLoading(false);
         if (response.data.data !== null) {
           setHistory(

package/src/tasks/create/templates/Constellation/Widget/CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/src/tasks/create/templates/Constellation/Widget/PAGE/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/Widget/PAGE/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -46,36 +45,34 @@ const worklistData = {
   }
 };
 
-window.PCore.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    }
-  };
-};
-
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
-
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore.getDataApiUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(worklistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(worklistData);
+        });
+      }
+    };
+  };
 
   const props = {
     ...configProps,
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -2,13 +2,14 @@ import { useEffect, useState } from 'react';
 import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // interface for props
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-    datasource: Array<any>;
+    datasource: any;
     header: string;
     description: string;
     whatsnewlink: string;
@@ -27,10 +28,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const context = PConnect.getContextName();
 
   let details = [];
-  // @ts-ignore
   if (datasource && datasource.source) {
-    // @ts-ignore
-    details = datasource.source.map((item) => {
+    details = datasource.source.map((item: { name: any; }) => {
       return item.name;
     });
   }
@@ -51,7 +50,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     PCore.getDataApiUtils()
       .getData(dataViewName, {}, context)
-      // @ts-ignore
       .then((response: any) => {
         setIsLoading(false);
         if (response.data.data !== null) {

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -22,8 +22,8 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
   // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
   // This is non CaseView case (Dashboard, MyWork etc)
   if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    userName = PCore.getEnvironmentInfo().getOperatorName() ?? "";
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier() ?? "";
   } else {
     userName = metaObj.name;
     userIdentifier = metaObj.ID;
@@ -46,22 +46,19 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
     const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
 
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
+    const handleUserStateChange = ({ state }: any) => {
       setUserState(state === 'online' ? 'active' : 'inactive');
     };
 
     useEffect(() => {
       const subId = PCore.getMessagingServiceManager()
         .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
+        .subscribe(userIdentifier, handleUserStateChange, '');
 
       return function cleanup() {
         PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
       };
     }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/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/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -21,7 +20,7 @@ if (!window.PCore) {
 
 window.PCore.getLocaleUtils = () => {
   return {
-    getLocaleValue: value => {
+    getLocaleValue: (value: any) => {
       return value;
     }
   };
@@ -37,7 +36,7 @@ window.PCore.getUserApi = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     label: configProps.label,

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   label: 'Create operator',
   createLabel: 'Created',

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/config.json.mustache

@@ -27,6 +27,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }