@pega/dx-component-builder-sdk 0.26.1 → 0.26.2

package/SECURITY.md

@@ -0,0 +1,10 @@
+# Reporting Security Issues
+
+Pegasystems takes security seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, [email us](mailto:opensource@pega.com;security@pega.com) and include the word "SECURITY" in the subject line.
+
+The Pega team will send a response indicating the next steps in handling your report. We may ask for additional information or guidance.
+
+## Learning More About Security
+To learn more about securing a Pega application or our security capabilities, please see the [security article](https://community.pega.com/knowledgebase/capabilities/security) on Pega Community and the [Pega Trust Center](https://www.pega.com/products/cloud/pega-trust-center).

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.26.1",
+  "version": "0.26.2",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
+  "files": [
+    "bin",
+    "src",
+    "tests",
+    "README.md",
+    "LICENSE",
+    "SECURITY.md"
+  ],
   "scripts": {
     "lint:es": "eslint .",
     "lint:format": "prettier -c .",

package/src/tasks/create/templates/Constellation/field/Date/date.ts.mustache

@@ -153,7 +153,7 @@ export const getDayJSObject = text => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = time => {
-  let relativetime = '';
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {

package/src/tasks/create/templates/Constellation/field/DateTime/date-utils.ts.mustache

@@ -62,7 +62,7 @@ export const getDayJSObject = (text: string) => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = (time: string) => {
-  let relativetime = '';
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {

package/src/tasks/create/templates/Constellation/field/DateTime/date.ts.mustache

@@ -98,7 +98,7 @@ export const getDayJSObject = text => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = time => {
-  let relativetime = '';
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {

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

@@ -95,7 +95,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
     let unit = 'percent';
-    let displayComp: any = null;
+    let displayComp: any;
 
     if (isTableFormatter) {
       switch (formatter) {

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

@@ -343,7 +343,7 @@ export function prepareFilters(keys = [], data = {}, logicOperator = '') {
   const filterConditions = {};
   keys.forEach((key, index) => {
     const value = data[key];
-    let filterExpression = {};
+    let filterExpression;
     if (value) {
       filterExpression = getFilterExpression(key, value, 'EQ');
     } else {

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/textformat-utils.tsx.mustache

@@ -33,7 +33,6 @@ const isImage = url => /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
 const TableImage = imageProps => {
   const { value, altText, altTextOfImage, propaltTextOfImage, urlLabelSelection, urlLabel, propUrlLabel } = imageProps;
   const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
   const [images, setImages] = useState(null);
   const imgDescription = {
     id: 'url',
@@ -60,7 +59,7 @@ const TableImage = imageProps => {
   };
   let btnVal = value;
   btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
+  const imageDisplayComp = (
     <>
       {btnVal !== null && (
         <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
@@ -125,7 +124,7 @@ export const urlFormatter = (value, options) => {
     customWidth
   } = options;
 
-  let urlFormatComp = null;
+  let urlFormatComp;
   if ((displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) && (urlLabel !== '' || propUrlLabel !== '')) {
     urlFormatComp = (
       <URLDisplay target='_blank' value={value} displayText={urlLabelSelection === 'constant' ? urlLabel : propUrlLabel} variant='link' />

package/src/tasks/create/templates/Constellation/field/Picklist-RadioButtons/textformat-utils.tsx.mustache

@@ -33,7 +33,6 @@ const isImage = url => /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
 const TableImage = imageProps => {
   const { value, altText, altTextOfImage, propaltTextOfImage, urlLabelSelection, urlLabel, propUrlLabel } = imageProps;
   const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
   const [images, setImages] = useState(null);
   const imgDescription = {
     id: 'url',
@@ -60,7 +59,7 @@ const TableImage = imageProps => {
   };
   let btnVal = value;
   btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
+  const imageDisplayComp = (
     <>
       {btnVal !== null && (
         <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
@@ -125,7 +124,7 @@ export const urlFormatter = (value, options) => {
     customWidth
   } = options;
 
-  let urlFormatComp = null;
+  let urlFormatComp;
   if ((displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) && (urlLabel !== '' || propUrlLabel !== '')) {
     urlFormatComp = (
       <URLDisplay target='_blank' value={value} displayText={urlLabelSelection === 'constant' ? urlLabel : propUrlLabel} variant='link' />

package/src/tasks/create/templates/Constellation/field/Text-URL/text-url.tsx.mustache

@@ -33,7 +33,6 @@ const isImage = url => /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
 const TableImage = imageProps => {
   const { value, altText, altTextOfImage, propaltTextOfImage, urlLabelSelection, urlLabel, propUrlLabel } = imageProps;
   const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
   const [images, setImages] = useState(null);
   const imgDescription = {
     id: 'url',
@@ -60,7 +59,7 @@ const TableImage = imageProps => {
   };
   let btnVal = value;
   btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
+  const imageDisplayComp = (
     <Fragment>
       {btnVal !== null && (
         <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
@@ -129,7 +128,7 @@ export const urlFormatter = (value, options) => {
     customWidth
   } = options;
 
-  let urlFormatComp = null;
+  let urlFormatComp;
   if ((displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) && (urlLabel !== '' || propUrlLabel !== '')) {
     urlFormatComp = (
       <URLDisplay target='_blank' value={value} displayText={urlLabelSelection === 'constant' ? urlLabel : propUrlLabel} variant='link' />

package/src/tasks/create/templates/Constellation/field/TimeOfDay/time-of-day.ts.mustache

@@ -62,7 +62,7 @@ export const getDayJSObject = (text: string) => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = (time: string) => {
-  let relativetime = '';
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {

package/src/tasks/create/templates/Constellation/template/DETAILS/utils.js.mustache

@@ -9,7 +9,7 @@ export function getAllFields(pConnect) {
     return [];
   }
 
-  let allFields = [];
+  let allFields;
 
   const makeField = f => ({
     ...pConnect().resolveConfigProps(f.config),

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

@@ -9,7 +9,7 @@ export function getAllFields(pConnect: Function) {
     return [];
   }
 
-  let allFields = [];
+  let allFields;
 
   const makeField = (f: any) => ({
     ...pConnect().resolveConfigProps(f.config),

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

@@ -15,7 +15,7 @@ export function getAllFields(pConnect: Function) {
     return [];
   }
 
-  let allFields = [];
+  let allFields;
 
   const makeField = (f: any) => ({
     ...pConnect().resolveConfigProps(f.config),

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

@@ -20,7 +20,7 @@
         </span>
       </div>
       <div *ngIf="selectionMode === 'multi'; else single">
-        <mat-option *ngFor="let item of listOfCheckboxes">
+        <div class="mat-mdc-option" *ngFor="let item of listOfCheckboxes">
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
@@ -30,7 +30,7 @@
             (blur)="fieldOnBlur($event)"
             >{{ item.text ?? item.value }}
           </mat-checkbox>
-        </mat-option>
+        </div>
       </div>
       <ng-template #single>
         <mat-checkbox

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

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatOptionModule } from '@angular/material/core';
 import { FieldBase } from '@pega/angular-sdk-components';
 import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -38,7 +37,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
     ReactiveFormsModule,
     MatCheckboxModule,
     MatFormFieldModule,
-    MatOptionModule,
     FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.ts.mustache

@@ -97,6 +97,12 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
   }
 
   fieldOnDateChange(event: any) {
+    // owl picker emits null when the typed text can't be parsed; clear the input instead of defaulting to now
+    if (!event.value) {
+      this.fieldControl.setValue('');
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, '');
+      return;
+    }
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
@@ -106,4 +112,25 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
+
+  override getErrorMessage() {
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      return this.angularPConnectData.validateMessage ?? '';
+    }
+
+    if (this.fieldControl.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    if (this.fieldControl.hasError('owlDateTimeParse')) {
+      return `${this.fieldControl.errors?.['owlDateTimeParse'].text} is not a valid date time value`;
+    }
+
+    if (this.fieldControl.errors) {
+      return 'Invalid date time value';
+    }
+
+    return '';
+  }
 }

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.ts.mustache

@@ -415,7 +415,7 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     let key = '';
     if (val) {
       const index = this.options$?.findIndex(element => element.value === val);
-      key = index > -1 ? (key = this.options$[index].key) : val;
+      key = index > -1 ? this.options$[index].key : val;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);

package/.access_token

@@ -1 +0,0 @@
-{"access_token":"eyJraWQiOiJkYjVlMjE5MDZlNjA5NDQ4N2I1OTdhNjY2YWU3YjA3OSIsInR5cCI6IkpXVCIsImFsZyI6IlJTMjU2In0.eyJhdWQiOiJ1cm46MTI3ODI1ODAwMjM4NzAzMTE4NTEiLCJzdWIiOiJBZG1pbkBsb2FudjIiLCJhcHBfbmFtZSI6IkxvYW5WMiIsIm5iZiI6MTY3MDM1Mjc0OCwiYXBwX3ZlcnNpb24iOiIwMS4wMS4wMSIsImlzcyI6InVybjpsb2NhbGhvc3QiLCJleHAiOjE2NzAzNTYzNDgsImlhdCI6MTY3MDM1Mjc0OCwianRpIjoiYTU4MzcyOGVhNGIwNzRmZjU1ZjU3MmNmNzNmMzhlNWIiLCJvcGVyYXRvcl9hY2Nlc3MiOiJMb2FuVjI6QXV0aG9ycyJ9.LiLs5f9I_6z-wLHFM30Yj_VIExxCITbARGaIGd0cBrPyN-28BrJcMmEx783PwNgQhlnoYr2JoGS6sC11Xb5TC9p2lOrou0aOGwNrdpo5MDiZ450m3czLKAZWd1OVsX_FPYFWE6wLP-5u20cE25ShLyEnKF_5tjr_kYBbJJ4UNwfk8lqdaqDw_myJc44lYBz5Ou3jUIlIR3ykLBjRTJviua91hF4ntdzdlQJ8_eWqmTOrLzmlke7dUUlILtebFPCFpe5qEaYs5IskbVlFvKH32jl1_dG4k4uzmHPdhGhKZMRwWQ1MKu_xF0Rzm5dMo94A3w6JqLW_x9rVj0KyfCnvZO6IeXMncv-dXHQ5ejFwPh_m7-7Gj9Z7i-L7Hpn6Gq_xR72m-6P8--0yvl8RbddC4JbyHgIrZfidbJu_HhpOH6V3eijgZmvir-A7soFNWatZsro5Btlr7_uJqS0HBWtNqKfEV6IJFidi9UbfiImO1pr8X2lhVgHPmih6c_hkVsqY62bGyXwiJuPB87HkG3aybCf9SkeaqdhHdIWJBXxRd55HVDfkaFV1LQdRJqW31xaFZpp4Uaw3INjqhUTPbJZ7l-7uOPXQwrgZmhwNianMGzCa6tcZm2XmgiC4KzQJUHfNPMbhiPCsKm8pjwIylK2hZvsnA9qmNTxm9YSB4SskIGs","token_type":"bearer","expires_in":3600}

package/.agilestudio

@@ -1,3 +0,0 @@
-PRD_ID=PRD-6848
-BL_ID=BL-10043
-TEAM_ID=PROJ-2279

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "root": true,
-  "extends": ["@pega"],
-  "ignorePatterns": ["node_modules", "**/template/**"],
-  "env": {
-    "browser": false,
-    "node": true
-  },
-  "rules": {
-    "prettier/prettier": "off",
-    "sonarjs/cognitive-complexity": "off",
-    "sonarjs/no-identical-functions": "off",
-    "sonarjs/no-duplicate-string": "off",
-    "sonarjs/no-nested-template-literals": "off",
-    "no-console": "off",
-    "import/extensions": ["error", "ignorePackages"]
-  }
-}

package/.prettierignore

@@ -1,2 +0,0 @@
-node_modules
-*.md

package/.prettierrc.json

@@ -1 +0,0 @@
-"@pega/prettier-config"

package/cspell.json

@@ -1,26 +0,0 @@
-{
-  "version": "0.2",
-  "import": "@pega/cspell-config",
-  "language": "en-US",
-  "ignorePaths": [
-    "package-lock.json",
-    "**/*.tsbuildinfo",
-    "**/node_modules/**",
-    "**/.DS_Store",
-    "**/*.zip",
-    "**/*.tgz"
-  ],
-  "words": [
-    "avif",
-    "datapage",
-    "datasource",
-    "execa",
-    "listr",
-    "pascalcase",
-    "picklist",
-    "prpc",
-    "rawlist",
-    "ruleset",
-    "storysource"
-  ]
-}

package/jest.config.cjs

@@ -1,26 +0,0 @@
-module.exports = {
-  verbose: true,
-  roots: ['./tests'],
-  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.[t|j]sx?$': 'babel-jest'
-  },
-  collectCoverage: true,
-  haste: {
-    retainAllFiles: true
-  },
-  testPathIgnorePatterns: [],
-  transformIgnorePatterns: [],
-  modulePathIgnorePatterns: [],
-  coveragePathIgnorePatterns: [],
-  collectCoverageFrom: ['./src/*.js'],
-  coverageThreshold: {
-    global: {
-      statements: 79,
-      branches: 74,
-      functions: 81,
-      lines: 80
-    }
-  }
-};