@pega/dx-component-builder-sdk 0.24.3 → 0.24.4

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-icon-button-url/pega-dxil-my-icon-button-url.component.ts

@@ -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 PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on URL here
+  countryCode: string;
+}
+
+@Component({
+  selector: 'app-pega-dxil-my-icon-button-url',
+  templateUrl: './pega-dxil-my-icon-button-url.component.html',
+  styleUrls: ['./pega-dxil-my-icon-button-url.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatTableModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class PegaDxilMyIconButtonUrlComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: PegaDxilMyIconButtonUrlProps;
+
+  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 PegaDxilMyIconButtonUrlProps;
+
+    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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.html

@@ -2,22 +2,33 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
-        <!-- <span matPrefix>% &nbsp;</span> -->
         <input
+          type="text"
           matInput
+          currencyMask
+          [options]="{
+            prefix: '',
+            suffix: '%',
+            thousands: currSep,
+            decimal: currDec,
+            align: 'left',
+            nullable: true,
+            precision: decimalPrecision,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
-          type="number"
           step=".01"
-          [value]="value$"
+          [formControlName]="controlName$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
+          [readonly]="bReadonly$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.scss

@@ -1,20 +1,20 @@
 .psdk-full-width {
-    width: 100%;
-  }
-  
-  .psdk-label-readonly {
-    font-size: 1rem; 
-    display: block;
-    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);
-    -ms-transform: translateY(-1.28125em) scale(.75);
-    width: 133.33333%;
-  }
-  
-  .psdk-data-readonly {
-    padding-top: 0.625rem;
-    width: 100%;
-  }
+  width: 100%;
+}
 
-  ::ng-deep .mat-mdc-form-field-infix {
-    width: auto;
-  }
+.psdk-label-readonly {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.ts

@@ -4,12 +4,17 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
+import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { getCurrencyCharacters } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyPercentageProps extends PConnFieldProps {
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -18,7 +23,7 @@ interface PegaDxilMyPercentageProps extends PConnFieldProps {
   templateUrl: './pega-dxil-my-percentage.component.html',
   styleUrls: ['./pega-dxil-my-percentage.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyPercentageComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -41,7 +46,10 @@ export class PegaDxilMyPercentageComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
-
+  currDec: string;
+  currSep: string;
+  inputMode: any;
+  decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
 
   constructor(
@@ -104,6 +112,7 @@ export class PegaDxilMyPercentageComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.inputMode = NgxCurrencyInputMode.Natural;
     let nValue: any = this.configProps$.value;
     if (nValue) {
       if (typeof nValue === 'string') {
@@ -113,6 +122,11 @@ export class PegaDxilMyPercentageComponent implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const showGroupSeparators = this.configProps$.showGroupSeparators;
+
+    const theSymbols = getCurrencyCharacters('');
+    this.currDec = theSymbols.theDecimalIndicator || '2';
+    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -141,6 +155,8 @@ export class PegaDxilMyPercentageComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
+    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
+
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // trigger display of error message with field control
@@ -158,9 +174,17 @@ export class PegaDxilMyPercentageComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    let value = event?.target?.value;
+    value = value?.replace('%', '');
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/pega-dxil-my-time-of-day.component.html

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/pega-dxil-my-time-of-day.component.ts

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-url.component.html

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-url.component.ts

@@ -36,6 +36,7 @@ export class PegaDxilMyUrlComponent implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -106,6 +107,7 @@ export class PegaDxilMyUrlComponent 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/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/pega-dxil-my-two-column-form.component.scss

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/pega-dxil-my-case-widget.component.ts

@@ -50,7 +50,7 @@ export class PegaDxilMyCaseWidgetComponent 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 PegaDxilMyCaseWidgetComponent implements OnInit {
   }
 
   getDisplayColumns(fields: any[] = []) {
-    return fields.map((field: { fieldName: any }) => {
+    return fields.map(field => {
       return field.fieldName;
     });
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { Utils } from '@pega/angular-sdk-components';
 
 @Component({
- selector: 'app-pega-dxil-my-page-case-widget',
+  selector: 'app-pega-dxil-my-page-case-widget',
   templateUrl: './pega-dxil-my-page-case-widget.component.html',
   styleUrls: ['./pega-dxil-my-page-case-widget.component.scss'],
   standalone: true,
@@ -12,7 +12,7 @@ import { Utils } from '@pega/angular-sdk-components';
 })
 export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
-
+  @Input() displayLabel;
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
@@ -51,15 +51,17 @@ export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnD
 
   updateSelf(): void {
     const configProps$ = this.pConn$.getConfigProps() as any;
-    if (configProps$?.label?.toLowerCase() == 'create operator') {
+    this.displayLabel = this.displayLabel?.toLowerCase();
+    const label = configProps$?.label?.toLowerCase();
+    if (label === 'create operator' || this.displayLabel === 'create operator') {
       this.name$ = configProps$.createOperator.userName;
       this.id$ = configProps$.createOperator.userId;
       this.label$ = configProps$.createLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'update operator') {
+    } else if (label === 'update operator' || this.displayLabel === 'update operator') {
       this.name$ = configProps$.updateOperator.userName;
       this.id$ = configProps$.updateOperator.userId;
       this.label$ = configProps$.updateLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'resolve operator') {
+    } else if (label === 'resolve operator' || this.displayLabel === 'resolve operator') {
       this.name$ = configProps$.resolveOperator.userName;
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/demo.stories.tsx

@@ -1,9 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { configProps } from './mock';
+import { configProps, worklistData } from './mock';
 
 import { PegaDxilMyPageWidgetComponent } from './pega-dxil-my-page-widget.component';
 
+window.PCore = {
+  ...window.PCore,
+  getDataApiUtils: () => {
+    return {
+      getData: () => {
+        return Promise.resolve(worklistData);
+      }
+    } as any;
+  }
+};
+
 const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   title: 'PegaDxilMyPageWidget',
   component: PegaDxilMyPageWidgetComponent,
@@ -12,10 +23,16 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
     props: {
       ...args,
       pConn$: {
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getConfigProps: () => {
+          return configProps;
+        }
+      } as any
     }
   })
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/mock.ts

@@ -21,3 +21,28 @@ export const configProps = {
     fields: {}
   }
 };
+
+export const worklistData = {
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
+};

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/pega-dxil-my-page-widget.component.html

@@ -10,5 +10,15 @@
       </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>
+<br />
+<table mat-table [dataSource]="workList">
+  <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.fieldName">
+    <th mat-header-cell *matHeaderCellDef>{{ dCol.label }}</th>
+    <td mat-cell *matCellDef="let element">{{ element[dCol.fieldName] }}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>