@pega/dx-component-builder-sdk 0.24.1 → 0.24.2

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/icon-button-url.component.ts.mustache

@@ -0,0 +1,195 @@
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on URL here
+  countryCode: string;
+}
+
+@Component({
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
+  styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatTableModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: {{COMPONENT_CLASS_NAME}}Props;
+
+  label$ = '';
+  value$ = '';
+  controlName$: string;
+  bHasForm$ = true;
+  componentReference = '';
+  displayMode$?: string = '';
+  tooltip$ = '';
+  showTable$ = false;
+  tableLabel$ = '';
+  stateNameLabel$ = '';
+  stateCodeLabel$ = '';
+  waitingForData = false;
+  repeatList$: MatTableDataSource<any>;
+  fields$: any[];
+  displayedColumns$ = ['stateName', 'stateCode'];
+  countryCode = 'USA';
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+     // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.controlName$ = this.angularPConnect.getComponentID(this);
+
+    // Then, continue on with other initialization
+
+    // call updateSelf when initializing
+    // this.updateSelf();
+    this.checkAndUpdate();
+
+    if (this.formGroup$) {
+      // add control to formGroup
+      // this.formGroup$.addControl(this.controlName$, this.fieldControl);
+      // this.fieldControl.setValue(this.value$);
+      this.bHasForm$ = true;
+    } else {
+      this.bHasForm$ = false;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.formGroup$) {
+      this.formGroup$.removeControl(this.controlName$);
+    }
+
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyAngularIconButtonUrlProps;
+
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
+    if (this.configProps$.countryCode != undefined) {
+      this.countryCode = this.configProps$.countryCode;
+    }
+
+    // localized labels
+    this.label$ = this.pConn$.getLocalizedValue('State list for', '', '');
+    this.label$ = this.label$.concat(' ').concat(this.countryCode);
+    this.tooltip$ = this.pConn$.getLocalizedValue('Click to show/hide state list', '', '');
+    this.tableLabel$ = this.pConn$.getLocalizedValue('State list', '', '');
+    this.stateNameLabel$ = this.pConn$.getLocalizedValue('State name', '', '');
+    this.stateCodeLabel$ = this.pConn$.getLocalizedValue('State code', '', '');
+
+    this.displayMode$ = this.configProps$.displayMode;
+
+    this.componentReference = (this.pConn$.getStateProps() as any).value;
+
+  }
+
+  buttonClick() {
+    if (!this.showTable$) {
+      this.showTable$ = true;
+
+      this.configProps$ = this.pConn$.getConfigProps();
+      // @ts-ignore - second parameter pageReference for getValue method should be optional
+      const dataViewName = 'D_pyStateList';
+      const context = this.pConn$.getContextName();
+
+      this.waitingForData = true;
+
+      const stateListData = PCore.getDataApiUtils().getData(
+        dataViewName,
+        { dataViewParameters: [{ pyCountry: this.countryCode }] } as any,
+        context
+      ) as Promise<any>;
+
+      stateListData
+        .then((stateJSON: any) => {
+          this.fields$ = [{ stateName: 'pyLabel', stateCode: 'pyStateCode' }];
+
+          const tableDataResults = this.updateData(stateJSON.data.data, this.fields$);
+
+          this.repeatList$ = new MatTableDataSource(tableDataResults);
+
+          this.waitingForData = false;
+        })
+        .catch((error: any) => {
+          console.log(error);
+        });
+    } else {
+      this.showTable$ = false;
+    }
+  }
+
+  updateData(listData: any[], fieldData: any[]): any[] {
+    const returnList: any[] = new Array<any>();
+    listData.forEach(row => {
+      // copy
+      const rowData = JSON.parse(JSON.stringify(row));
+
+      const newRow = { stateName: '', stateCode: '' };
+
+      for (const field of fieldData) {
+        const stateName = this.pConn$.getLocalizedValue(rowData[field.stateName], '', '');
+        const stateCode = rowData[field.stateCode];
+
+        newRow.stateName = stateName;
+        newRow.stateCode = stateCode;
+      }
+      returnList.push(newRow);
+    });
+    return returnList;
+  }
+
+  getErrorMessage() {
+   return '';
+  }
+}

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/mock.ts.mustache

@@ -1,17 +1,37 @@
 export const configProps = {
-  value: '',
-  label: 'URL Sample',
-  placeholder: 'URL Placeholder',
-  helperText: 'URL Helper Text',
-  testId: 'url-12345678',
-  hasSuggestions: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  displayMode: ''
+  countryCode: 'USA',
+  value: 'https://www.yahoo.com'
+};
+
+export const stateListData = {
+  data: {
+    fetchDateTime: '2023-01-18T12:04:56.517Z',
+    pxObjClass: 'Pega-State',
+    resultCount: 3,
+    data: [
+      {
+        pyLabel: 'Massachusetts',
+        pyStateCode: 'MA'
+      },
+      {
+        pyLabel: 'Rhode Island',
+        pyStateCode: 'RI'
+      },
+      {
+        pyLabel: 'Connecticut',
+        pyStateCode: 'CT'
+      }
+    ]
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '1328',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
 };
 
 export const stateProps = {
-  value: '.URLSample',
-  hasSuggestions: false
+  value: '.URL'
 };

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.html.mustache

@@ -14,6 +14,7 @@
           type="url"
           [value]="value$"
           [required]="bRequired$"
+          [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache

@@ -36,6 +36,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -106,6 +107,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.value$ = this.configProps$.value;
     }
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     this.helperText = this.configProps$.helperText;

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.html.mustache

@@ -14,6 +14,7 @@
           type="time"
           [value]="value$"
           [required]="bRequired$"
+          [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache

@@ -36,6 +36,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -100,6 +101,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.scss.mustache

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 0.3125rem;
+  padding: 0rem 0rem;
   height: 100%;
 }
 

package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.ts.mustache

@@ -50,7 +50,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
 
       const tableDataResults = this.updateData(historyJSON.data.data, this.fields$);
 
-      this.displayedColumns$ = this.getDisplayColumns(this.fields$ as never[]);
+      this.displayedColumns$ = this.getDisplayColumns(this.fields$);
 
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
@@ -87,7 +87,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
   }
 
   getDisplayColumns(fields: any[] = []) {
-    return fields.map((field: { fieldName: any }) => {
+    return fields.map(field => {
       return field.fieldName;
     });
   }

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache

@@ -12,6 +12,6 @@
       </ul>
     </div>
   </div>
-  <a *ngIf="configProps$.whatsnewlink !== ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
 </article>
 <%={{ }}=%>     {{! revert delimiters for mustache }}

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

@@ -51,7 +51,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} value={value} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} value={value} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

package/src/tasks/create/templates/SDK-React/field/Boolean/mock.ts.mustache

@@ -1,11 +1,11 @@
 export const configProps = {
-  caption: "Boolean Caption SDK",
+  caption: 'Boolean Caption SDK',
   value: false,
-  trueLabel: "Yes",
-  falseLabel: "No",
-  label: "Boolean Sample",
-  helperText: "Boolean Helper Text",
-  testId: "boolean-12345678",
+  trueLabel: 'Yes',
+  falseLabel: 'No',
+  label: 'Boolean Sample',
+  helperText: 'Boolean Helper Text',
+  testId: 'boolean-12345678',
   hasSuggestions: false,
   readOnly: false,
   disabled: false,
@@ -17,6 +17,6 @@ export const configProps = {
 };
 
 export const stateProps = {
-  value: ".BooleanSample",
+  value: '.BooleanSample',
   hasSuggestions: false
-};
+};

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

@@ -2,7 +2,7 @@ import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/picker
 import DayjsUtils from '@date-io/dayjs';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
-import { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
+import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -118,7 +118,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           InputProps={{ ...testProp }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-     </MuiPickersUtilsProvider>
+      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Date/mock.ts.mustache

@@ -1,8 +1,8 @@
 export const configProps = {
-  value: "",
-  label: "Date Sample",
-  helperText: "Date Helper Text",
-  testId: "date-12345678",
+  value: '',
+  label: 'Date Sample',
+  helperText: 'Date Helper Text',
+  testId: 'date-12345678',
   readOnly: false,
   disabled: false,
   required: true,
@@ -10,9 +10,9 @@ export const configProps = {
   hideLabel: false,
   displayMode: '',
   validatemessage: ''
-}
+};
 
 export const stateProps = {
-  value: ".DateSample",
+  value: '.DateSample',
   hasSuggestions: false
-}
+};

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

@@ -22,7 +22,7 @@ window.PCore = {
         return value;
       }
     };
-  },
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {

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

@@ -2,7 +2,7 @@ import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pi
 import DayjsUtils from '@date-io/dayjs';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
-import { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
+import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -106,8 +106,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           onAccept={handleAccept}
           data-test-id={testId}
         />
-     </MuiPickersUtilsProvider>
+      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/DateTime/mock.ts.mustache

@@ -1,8 +1,8 @@
 export const configProps = {
-  value: "",
-  label: "Date Time Sample",
-  helperText: "Date Time Helper Text",
-  testId: "datetime-12345678",
+  value: '',
+  label: 'Date Time Sample',
+  helperText: 'Date Time Helper Text',
+  testId: 'datetime-12345678',
   readOnly: false,
   disabled: false,
   required: true,
@@ -13,6 +13,6 @@ export const configProps = {
 };
 
 export const stateProps = {
-  value: ".DateTimeSample",
+  value: '.DateTimeSample',
   hasSuggestions: false
-};
+};

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

@@ -1,5 +1,6 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { NumericFormat } from 'react-number-format';
+import { useState } from 'react';
 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';
@@ -7,13 +8,15 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using react-number-format 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;
   decimalPrecision?: number;
-  showGroupSeparators?: string;
+  showGroupSeparators?: boolean;
   formatter?: string;
 }
 
@@ -38,13 +41,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     displayMode,
     hideLabel,
     currencyISOCode = 'USD',
-    decimalPrecision = 2,
-    showGroupSeparators = true,
+    decimalPrecision,
+    showGroupSeparators,
     testId,
     placeholder,
     formatter
   } = props;
 
+  const [values, setValues] = useState(value.toString());
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
@@ -57,6 +62,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
   let formattedValue = '';
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
@@ -76,37 +87,42 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
-  function decimalOnBlur(event, inValue) {
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function decimalOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
   return (
-  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <CurrencyTextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      readOnly={!!readOnly}
-      type='text'
-      outputFormat='number'
-      textAlign='left'
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-      InputProps={{ inputProps: { ...testProp } }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
-      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}
-      decimalCharacter={theCurrDec}
-      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
-      decimalPlaces={decimalPrecision}
-      onBlur={!readOnly ? decimalOnBlur : undefined}
-    />
-   </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <NumericFormat
+        valueIsNumericString
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        error={status === 'error'}
+        label={label}
+        value={values}
+        onValueChange={val => {
+          handleChange(val);
+        }}
+        onBlur={!readOnly ? decimalOnBlur : undefined}
+        prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+        decimalSeparator={theCurrDec}
+        thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+        customInput={TextField}
+      />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Decimal/mock.ts.mustache

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Decimal',
   displayAs: 'pxNumber',
   label: 'Decimal sample'
-};
+};

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

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-currency-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Label value",

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

@@ -15,7 +15,7 @@ window.PCore = {
         return 'en-GB';
       }
     };
-}
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {