@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

package/src/tasks/create/templates/SDK-Angular/field/Decimal/decimal.component.ts.mustache

@@ -58,9 +58,9 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
-  currDec: string;
-  currSep: string;
-  currSym: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
+  currencySymbol = '';
   decimalPrecision: number | undefined;
   formatter;
   formattedValue: any;
@@ -140,19 +140,19 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     const showGroupSeparators = this.configProps$.showGroupSeparators;
-    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+    const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
 
     const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currDec = theSymbols.theDecimalIndicator;
-    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
 
     const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
     this.formatter = this.configProps$.formatter;
 
-    if (this.formatter === 'Currency') {
+    if (this.formatter) {
       this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
     } else {
-      this.formattedValue = format(this.value$, this.pConn$.getComponentName().toLowerCase(), theCurrencyOptions);
+      this.formattedValue = format(this.value$, 'decimal', theCurrencyOptions);
     }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
@@ -183,24 +183,27 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
 
     if (this.bReadonly$ && this.formatter === 'Currency') {
-      this.currSym = theSymbols.theCurrencySymbol;
-    } else {
-      this.currSym = '';
+      this.currencySymbol = theSymbols.theCurrencySymbol;
     }
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
   }
 
   fieldOnBlur(event: any) {
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    // replacing thousand separator with empty string as not required in api call
+    if (this.configProps$.showGroupSeparators) {
+      const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+      const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
+      value = value?.replace(regExp, '');
+    }
+    // replacing decimal separator with '.'
+    if (this.decimalSeparator !== '.') {
+      const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
+      value = value.replace(regExp, '.');
     }
     handleEvent(actionsApi, 'changeNblur', propName, value);
   }

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

@@ -9,32 +9,33 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getComponentName: () => {
-        return 'Currency';
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getComponentName: () => {
+          return 'Currency';
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.html.mustache

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -15,9 +15,9 @@
             matInput
             currencyMask
             [options]="{
-              prefix: currSym,
-              thousands: currSep,
-              decimal: currDec,
+              prefix: currencySymbol,
+              thousands: thousandSeparator,
+              decimal: decimalSeparator,
               align: 'left',
               nullable: true,
               precision: decimalPrecision,

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.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(() => {

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.ts.mustache

@@ -9,13 +9,15 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 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 { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
   allowDecimals: boolean;
+  formatter?: string;
 }
 
 @Component({
@@ -50,11 +52,13 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   currencyOptions: Object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
-  currSym: string;
-  currSep: string;
-  currDec: string;
+  currencySymbol: string;
+  thousandSeparator: string;
+  decimalSeparator: string;
   inputMode: any;
   decimalPrecision: number | undefined;
+  formattedValue: string;
+  formatter;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -129,12 +133,22 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
-    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+    const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
 
     const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currSym = theSymbols.theCurrencySymbol;
-    this.currSep = theSymbols.theDigitGroupSeparator;
-    this.currDec = theSymbols.theDecimalIndicator;
+    this.currencySymbol = theSymbols.theCurrencySymbol;
+    this.thousandSeparator = theSymbols.theDigitGroupSeparator;
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.formatter = this.configProps$.formatter;
+
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+      if (this.formatter) {
+        this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+      } else {
+        this.formattedValue = format(this.value$, 'currency', theCurrencyOptions);
+      }
+    }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -169,7 +183,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -184,14 +198,17 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   fieldOnBlur(event: any) {
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
     value = value?.substring(1);
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    // replacing thousand separator with empty string as not required in api call
+    const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+    let regExp = new RegExp(String.raw`${thousandSep}`, 'g');
+    value = value?.replace(regExp, '');
+    // replacing decimal separator with '.'
+    if (this.decimalSeparator !== '.') {
+      regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
+      value = value.replace(regExp, '.');
     }
     handleEvent(actionsApi, 'changeNblur', propName, value);
   }

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

@@ -5,37 +5,34 @@ import { configProps, 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,
-  getEnvironmentInfo: (): any => {
-    return {
-      getUseLocale: () => {
-        return 'en-GB';
-      },
-      getLocale: () => {
-        return 'en-GB';
-      }
-    };
-  }
-};
-
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };
@@ -51,6 +48,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     bReadonly$: configProps.readOnly,
     bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
-    displayMode$: configProps.displayMode 
+    displayMode$: configProps.displayMode
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.html.mustache

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -15,8 +15,8 @@
           [options]="{
             prefix: '',
             suffix: '%',
-            thousands: currSep,
-            decimal: currDec,
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
             align: 'left',
             nullable: true,
             precision: decimalPrecision,
@@ -28,7 +28,7 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
         />

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.spec.ts.mustache

@@ -3,14 +3,13 @@ import { ComponentFixture, TestBed } 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}}omponent;
+  let component: {{COMPONENT_CLASS_NAME}}Component;
   let fixture: ComponentFixture<{{COMPONENT_CLASS_NAME}}Component>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ {{COMPONENT_CLASS_NAME}}Component ]
-    })
-    .compileComponents();
+      declarations: [{{COMPONENT_CLASS_NAME}}Component]
+    }).compileComponents();
   });
 
   beforeEach(() => {

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.ts.mustache

@@ -11,10 +11,12 @@ 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';
+import { format } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  currencyISOCode?: string;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -46,11 +48,14 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
-  currDec: string;
-  currSep: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
   inputMode: any;
   decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
+  actionsApi: Object;
+  propName: string;
+  formattedValue: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,20 +118,25 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     this.inputMode = NgxCurrencyInputMode.Natural;
-    let nValue: any = this.configProps$.value;
+    const nValue: any = this.configProps$.value;
     if (nValue) {
-      if (typeof nValue === 'string') {
-        nValue = parseInt(nValue, 10);
-      }
       this.value$ = nValue;
+      this.fieldControl.setValue(nValue);
     }
     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 : '';
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue = nValue ? format(nValue, 'percentage') : '';
+    }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -157,7 +167,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -169,22 +179,27 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
     let value = event?.target?.value;
     value = value ? value.replace(/%/g, '') : '';
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    // replacing thousand separator with empty string as not required in api call
+    if (this.configProps$.showGroupSeparators) {
+      const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+      const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
+      value = value?.replace(regExp, '');
+    }
+    // replacing decimal separator with '.'
+    if (this.decimalSeparator !== '.') {
+      const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
+      value = value.replace(regExp, '.');
     }
-    handleEvent(actionsApi, 'changeNblur', propName, value);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -9,19 +9,30 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -5,29 +5,19 @@ 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.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return Promise.resolve(stateListData);
+    }
+  };
+};
+
 const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}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;
-      }
-    };
-    return {
+  render: (args) => ({
       props: {
         ...args,
         pConn$: {
@@ -48,10 +38,9 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
             return value;
           }
         } as any,
-      formGroup$: new FormBuilder().group({})
+        formGroup$: new FormBuilder().group({})
       }
-    }
-  }
+  })
 };
 
 export default meta;

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

@@ -1,4 +1,3 @@
-
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { {{COMPONENT_CLASS_NAME}}Component } from './{{COMPONENT_CLASS_NAME_KEBAB}}.component';
@@ -9,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(() => {

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

@@ -62,7 +62,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-     // First thing in initialization is registering and subscribing to the AngularPConnect service
+    // 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);
 
@@ -131,7 +131,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.displayMode$ = this.configProps$.displayMode;
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
-
   }
 
   buttonClick() {
@@ -190,6 +189,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   getErrorMessage() {
-   return '';
+    return '';
   }
 }

package/src/tasks/create/templates/SDK-Angular/field/Integer/demo.stories.tsx.mustache

@@ -9,19 +9,30 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };