@pega/dx-component-builder-sdk 0.25.5 → 0.25.7

package/src/tasks/create/templates/Constellation/template/DETAILS-region/Avatar.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
@@ -22,8 +21,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 +45,20 @@ 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/template/DETAILS-region/HighlightRender.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
 import type { PConnProps } from './PConnProps';

package/src/tasks/create/templates/Constellation/template/DETAILS-region/StatusWork.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/template/DETAILS-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/DETAILS-region/mock.ts.mustache

@@ -1,4 +1,3 @@
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',

package/src/tasks/create/templates/Constellation/template/FORM/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/FORM-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/template/PAGE/GetNextWork.tsx.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Button, useToaster } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/Constellation/template/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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';
@@ -19,18 +18,6 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  if (!window.PCore) {
-    window.PCore = {};
-  }
-
-  window.PCore.getLocaleUtils = () => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    };
-  };
-
   const configProps = pyHome1Resolved.children[0].children[0].config;
 
   const props = {
@@ -86,6 +73,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
               />
             );
           }
+          return <></>;
         },
         ignoreSuggestion: () => {/* nothing */},
         acceptSuggestion: () => {/* nothing */},

package/src/tasks/create/templates/Constellation/widget/CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/Constellation/widget/CASE/demo.stories.tsx.mustache

@@ -1,12 +1,21 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import historyData from './mock';
 
+ window.PCore.getDataApiUtils = (): any => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(historyData);
+        });
+      }
+    };
+  };
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -16,38 +25,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  
-  window.PCore.getConstants = () => {
-    return {
-      CASE_INFO: {
-        CASE_INFO_ID: 'caseInfo.ID'
-      }
-    };
-  };
-
-  window.PCore.getLocaleUtils = () => {
-    return {
-      getLocaleValue: value => {
-        return value;
-      }
-    };
-  };
-
-  window.PCore.getDataApiUtils = () => {
-    return {
-      getData: () => {
-        return new Promise(resolve => {
-          resolve(historyData);
-        });
-      }
-    };
-  };
-
   const props = {
 
     getPConnect: () => {

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

@@ -50,9 +50,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
                 description: <Text style={{ wordBreak: 'break-word' }}>{entry.pyMessageKey}</Text>,
                 user: entry.pyPerformer,
                 id: index
-              };
+              } as any;
               <%={{ }}=%>     {{! revert delimiters for mustache }}
-            })
+            }) as any
           );
         } else {
           setHistory([]);

package/src/tasks/create/templates/Constellation/widget/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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';
@@ -17,10 +16,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
 const worklistData = {
   data: {
     data: [
@@ -46,23 +41,17 @@ const worklistData = {
   }
 };
 
-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);
-        });
-      }
-    };
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
   };
+};
 
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     ...configProps,
     getPConnect: () => {
@@ -113,5 +102,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   header: configProps.header,
   description: configProps.description,
   whatsnewlink: configProps.whatsnewlink,
-  datasource: configProps.datasource,
+  datasource: configProps.datasource as any,
 };

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
@@ -22,8 +21,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 +45,20 @@ 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/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -1,11 +1,20 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import { configProps, operatorDetails } from './mock';
 
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -15,27 +24,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
-  };
-};
-
-window.PCore.getUserApi = () => {
-  return {
-    getOperatorDetails: () => {
-      return new Promise(resolve => {
-        resolve(operatorDetails);
-      });
-    }
-  };
-};
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 

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

@@ -1,5 +1,3 @@
-
-/* eslint-disable no-nested-ternary */
 import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
 

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -1,9 +1,11 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
-  ></component-mapper>
+<div *ngIf="variant !== 'card'; else cardMode">
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper
+      *ngIf="bVisible$ !== false"
+      name="FieldValueList"
+      [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+    ></component-mapper>
+  </div>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -20,6 +22,7 @@
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
+            [required]="bRequired$"
             [attr.data-test-id]="testId + ':' + item.value"
             (change)="handleChangeMultiMode($event, item)"
             (blur)="fieldOnBlur($event)"
@@ -31,6 +34,8 @@
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
+          [disabled]="bDisabled$ || bReadonly$"
+          [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
@@ -47,3 +52,9 @@
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
+<ng-template #cardMode>
+  <h4>{{ label$ }}</h4>
+  <div>
+    <component-mapper name="SelectableCard" [props]="{ pConn$: pConn$, type: 'checkbox' }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.scss.mustache

@@ -11,7 +11,6 @@
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
   -ms-transform: translateY(-1.28125em) scale(0.75);
   width: 133.33333%;
-  color: rgba(0, 0, 0, 0.6);
 }
 
 .psdk-data-readonly {

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.spec.ts.mustache

@@ -8,9 +8,8 @@ describe('{{COMPONENT_CLASS_NAME}}Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   }));
 
   beforeEach(() => {