@pega/dx-component-builder-sdk 23.1.15 → 24.1.10

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

@@ -3,10 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { interval } from 'rxjs';
 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';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -15,6 +19,13 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   caption?: string;
   trueLabel?: string;
   falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
 }
 
 @Component({
@@ -22,7 +33,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule,MatOptionModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -50,6 +61,17 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   trueLabel$?: string;
   falseLabel$?: string;
 
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  selectedvalues: any;
+  referenceList: string;
+  listOfCheckboxes: any[] = [];
+  actionsApi: any;
+  propName: any;
+
   fieldControl = new FormControl('', null);
 
   constructor(
@@ -69,6 +91,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+      this.pConn$.setReferenceList(this.selectionList);
+      updateNewInstructions(this.pConn$, this.selectionList);
+    }
+
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -111,68 +138,124 @@ 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;
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
     this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    if (this.label$ != '') {
+      this.showLabel$ = true;
+    }
 
-    this.caption$ = this.configProps$.caption;
-    this.helperText = this.configProps$.helperText;
-    this.trueLabel$ = this.configProps$.trueLabel;
-    this.falseLabel$ = this.configProps$.falseLabel;
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = (this.pConn$.getStateProps() as any).value;
+
+    // multi case
+    this.selectionMode = this.configProps$.selectionMode;
+    if (this.selectionMode === 'multi') {
+      this.referenceList = this.configProps$.referenceList;
+      this.selectionList = this.configProps$.selectionList;
+      this.selectedvalues = this.configProps$.readonlyContextList;
+      this.primaryField = this.configProps$.primaryField;
+
+      this.datasource = this.configProps$.datasource;
+      this.selectionKey = this.configProps$.selectionKey;
+      const listSourceItems = this.datasource?.source ?? [];
+      const dataField: any = this.selectionKey?.split?.('.')[1];
+      const listToDisplay: any[] = [];
+      listSourceItems.forEach(element => {
+        element.selected = this.selectedvalues?.some?.(data => data[dataField] === element.key);
+        listToDisplay.push(element);
+      });
+      this.listOfCheckboxes = listToDisplay;
+    } else {
+      if (this.configProps$.value != undefined) {
+        this.value$ = this.configProps$.value;
       }
-      this.cdRef.detectChanges();
-    });
-
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
 
-    // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
+      this.caption$ = this.configProps$.caption;
+      this.helperText = this.configProps$.helperText;
+      this.trueLabel$ = this.configProps$.trueLabel;
+      this.falseLabel$ = this.configProps$.falseLabel;
+
+      // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+      setTimeout(() => {
+        if (this.configProps$.required != null) {
+          this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+        }
+        this.cdRef.detectChanges();
+      });
+
+      if (this.configProps$.visibility != null) {
+        this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+      }
 
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
+      // disabled
+      if (this.configProps$.disabled != undefined) {
+        this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+      }
 
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
+      if (this.bDisabled$) {
+        this.fieldControl.disable();
+      } else {
+        this.fieldControl.enable();
+      }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+      if (this.configProps$.readOnly != null) {
+        this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+        this.fieldControl.disable();
+      }
 
-    if (this.label$ != '') {
-      this.showLabel$ = true;
-    }
+      this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // eslint-disable-next-line sonarjs/no-redundant-boolean
-    if (this.value$ === 'true' || this.value$ == true) {
-      this.isChecked$ = true;
-    } else {
-      this.isChecked$ = false;
+      // eslint-disable-next-line sonarjs/no-redundant-boolean
+      if (this.value$ === 'true' || this.value$ == true) {
+        this.isChecked$ = true;
+      } else {
+        this.isChecked$ = false;
+      }
+      // trigger display of error message with field control
+      if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+        const timer = interval(100).subscribe(() => {
+          this.fieldControl.setErrors({ message: true });
+          this.fieldControl.markAsTouched();
+
+          timer.unsubscribe();
+        });
+      }
     }
   }
 
   fieldOnChange(event: any) {
     event.value = event.checked;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.checked);
   }
 
   fieldOnBlur(event: any) {
-    event.value = event.checked;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    if (this.selectionMode === 'multi') {
+      this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+    } else {
+      event.value = event.checked;
+      this.angularPConnectData.actions?.onBlur(this, event);
+    }
+  }
+
+  handleChangeMultiMode(event, element) {
+    if (!element.selected) {
+      insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    this.pConn$.clearErrorMessages({
+      property: this.selectionList,
+      category: '',
+      context: ''
+    });
   }
 
   getErrorMessage() {

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/config.json.mustache

@@ -0,0 +1,64 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-url-active.svg",
+  "properties": [
+    {
+      "format": "SELECT",
+      "name": "countryCode",
+      "label": "Country code",
+      "defaultValue": "USA",
+      "source": [
+        {
+          "key": "USA",
+          "value": "United States"
+        },
+        {
+          "key": "CAN",
+          "value": "Canada"
+        },
+        {
+          "key": "AUS",
+          "value": "Australia"
+        },
+        {
+          "key": "JPN",
+          "value": "Japan"
+        },
+        {
+          "key": "IND",
+          "value": "India"
+        },
+        {
+          "key": "TUR",
+          "value": "Turkey"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FormBuilder } from '@angular/forms';
+
+import { configProps, stateListData, stateProps } from './mock';
+
+import {{! pick new delimiters for mustache }}{{=<% %>=}}{<%={{ }}=%> {{COMPONENT_CLASS_NAME}}Component {{=<% %>=}}}<%={{ }}=%>{{! revert delimiters for mustache }} from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
+
+window.PCore = {
+  ...window.PCore,
+  getConstants: () => {
+    return {
+      CASE_INFO: {
+        CASE_INFO_ID: 'caseInfo.ID'
+      }
+    } as any;
+  },
+  getDataApiUtils: () => {
+    return {
+      getData: () => {
+        return Promise.resolve(stateListData);
+      }
+    } as any;
+  }
+};
+
+const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}}Component,
+  excludeStories: /.*Data$/,
+  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+    props: {
+      ...args,
+      pConn$: {
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getLocalizedValue: value => {
+          return value;
+        }
+    } as any,
+    formGroup$: new FormBuilder().group({})
+    }
+  })
+};
+
+export default meta;
+type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
+
+export const {{COMPONENT_CLASS_NAME}}: Story = {
+  args: {
+    countryCode: 'USA'
+  }
+};

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

@@ -0,0 +1,40 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<ng-template #noDisplayMode>
+  <div *ngIf="bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$">
+      <mat-icon aria-hidden="false" aria-label="arrow right" fontIcon="arrow_forward"></mat-icon>
+      <mat-label style="vertical-align: super">{{ label$ }}</mat-label>
+      <button mat-icon-button aria-label="tooltip$" (click)="buttonClick()">
+        <mat-icon aria-hidden="false" [ariaLabel]="tooltip$" fontIcon="format_list_numbered"></mat-icon>
+      </button>
+      <a [href]="value$"><mat-icon aria-hidden="false" aria-label="tooltip$" fontIcon="language"></mat-icon></a>
+    </div>
+    <div *ngIf="showTable$">
+      <h2 class="psdk-state-list-title">{{ tableLabel$ }}</h2>
+      <table mat-table [dataSource]="repeatList$">
+        <!-- State name-->
+        <ng-container [matColumnDef]="displayedColumns$[0]">
+          <th mat-header-cell *matHeaderCellDef>{{ stateCodeLabel$ }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.stateCode }}</td>
+        </ng-container>
+
+        <!-- State code-->
+        <ng-container [matColumnDef]="displayedColumns$[1]">
+          <th mat-header-cell *matHeaderCellDef>{{ stateNameLabel$ }}</th>
+          <td mat-cell *matCellDef="let element">{{ element.stateName }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+      </table>
+    </div>
+  </div>
+</ng-template>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+<ng-template #noEdit>
+  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'url' }"></component-mapper>
+</ng-template>

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

@@ -0,0 +1,24 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+.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;
+}
+
+.psdk-state-list-title {
+  margin-left: 0.5rem;
+}

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

@@ -0,0 +1,26 @@
+
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { {{COMPONENT_CLASS_NAME}}Component } from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
+
+describe('{{COMPONENT_CLASS_NAME}}Component', () => {
+  let component: {{COMPONENT_CLASS_NAME}}Component;
+  let fixture: ComponentFixture<{{COMPONENT_CLASS_NAME}}Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent({{COMPONENT_CLASS_NAME}}Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,37 @@
+export const configProps = {
+  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: '.URL'
+};