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

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

@@ -4,15 +4,18 @@ 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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
+  allowDecimals: boolean;
 }
 
 @Component({
@@ -20,7 +23,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -31,7 +34,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
 
   label$ = '';
-  value$: number | null;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -47,9 +50,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   currencyOptions: Object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
-  symbol: string;
-  thousandsSep: string;
-  decimalSep: string;
+  currSym: string;
+  currSep: string;
+  currDec: string;
+  inputMode: any;
+  decimalPrecision: number | undefined;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -114,10 +119,22 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
-    const nValue: any = this.configProps$.value;
-    this.value$ = nValue && typeof nValue === 'string' ? parseFloat(nValue) : nValue;
+    this.inputMode = NgxCurrencyInputMode.Natural;
+    let nValue: any = this.configProps$.value;
+    if (nValue) {
+      if (typeof nValue === 'string') {
+        nValue = parseFloat(nValue);
+      }
+      this.value$ = nValue;
+    }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    this.currSym = theSymbols.theCurrencySymbol;
+    this.currSep = theSymbols.theDigitGroupSeparator;
+    this.currDec = theSymbols.theDecimalIndicator;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -150,10 +167,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.currencyISOCode = this.configProps$.currencyISOCode;
     }
 
-    const theSymbols = getCurrencyCharacters(this.currencyISOCode);
-    this.symbol = theSymbols.theCurrencySymbol;
-    this.thousandsSep = theSymbols.theDigitGroupSeparator;
-    this.decimalSep = theSymbols.theDecimalIndicator;
+    this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
@@ -168,14 +182,18 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
   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?.substring(1);
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

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

@@ -4,22 +4,33 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <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/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.scss.mustache

@@ -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/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.ts.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -18,7 +23,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -41,7 +46,10 @@ export class {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 {{COMPONENT_CLASS_NAME}}Component 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 ? value.replace(/%/g, '') : '';
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

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

@@ -5,52 +5,53 @@ 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({})
+  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 {
+      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;

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

@@ -111,7 +111,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   // updateSelf
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
-    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyAngularIconButtonUrlProps;
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;

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

@@ -159,7 +159,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
     this.options$ = optionsList;
@@ -184,7 +183,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -223,7 +221,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

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

@@ -118,7 +118,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   private _filter(value: string): string[] {
     const filterVal = (value || this.filterValue).toLowerCase();
-    return this.options$?.filter(option => option.value.toLowerCase().includes(filterVal));
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
   // Callback passed when subscribing to store change

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.ts.mustache

@@ -25,6 +25,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  providers: [Utils],
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
 })
@@ -165,7 +166,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
     const propName = (this.pConn$.getStateProps() as any).value;
@@ -185,7 +185,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -216,7 +215,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

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

@@ -107,8 +107,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }
-    // @ts-ignore -  Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
-    // @ts-ignore - Property 'getRawConfigProps' is private and only accessible within class 'C11nEnv'
     this.nMaxLength$ = this.pConn$.getFieldMetadata(this.pConn$.getRawConfigProps()?.value)?.maxLength || 100;
     this.testId = this.configProps$.testId;
     this.displayMode$ = this.configProps$.displayMode;

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

@@ -2,11 +2,10 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
-  <div class="template-title-container">{{label}}</div>
+  <div class="template-title-container">{{ label }}</div>
 </div>
-<div *ngIf="instructions" class='psdk-default-form-instruction-text'>
-  <div key="instructions" id="instruction-text" [innerHTML]="instructions">
-  </div>
+<div *ngIf="instructions" class="psdk-default-form-instruction-text">
+  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>
 <div [className]="divClass$">
   <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">

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

@@ -51,7 +51,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
     this.label = propToUse?.label;
     const kids = this.pConn$.getChildren() as any[];
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
-    console.log(`instructions${this.instructions}`);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
     switch (numCols) {

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

@@ -13,4 +13,4 @@
       <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
-</div>
+</div>

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

@@ -28,7 +28,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
+
     const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
     const dataViewName = 'D_pyWorkHistory';
     const context = this.pConn$.getContextName();
@@ -36,16 +36,16 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
     this.waitingForData = true;
 
     const caseHistoryData = PCore.getDataApiUtils().getData(
-    dataViewName,
-    { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
-    context
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
+      context
     ) as Promise<any>;
 
     caseHistoryData.then((historyJSON: any) => {
       this.fields$ = [
         { label: this.pConn$.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
         { label: this.pConn$.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
-        { label: this.pConn$.getLocalizedValue('User', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
+        { label: this.pConn$.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
       ];
 
       const tableDataResults = this.updateData(historyJSON.data.data, this.fields$);

package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache

@@ -4,47 +4,48 @@ import { configProps, historyData } 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(historyData);
-      }
-    } 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$: {
-      getConfigProps: () => {
-        return configProps;
-      },
-      getValue: (value) => {
-        return value;
-      },
-      getContextName: () => {
-        return 'app/primary_1';
+  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
+    window.PCore = {
+      ...window.PCore,
+      getConstants: () => {
+        return {
+          CASE_INFO: {
+            CASE_INFO_ID: 'caseInfo.ID'
+          }
+        } as any;
       },
-      getLocalizedValue: (value) => {
-        return value;
+      getDataApiUtils: () => {
+        return {
+          getData: () => {
+            return Promise.resolve(historyData);
+          }
+        } as any;
+      }
+    };
+    return {
+      props: {
+        ...args,
+        pConn$: {
+          getConfigProps: () => {
+            return configProps;
+          },
+          getValue: (value) => {
+            return value;
+          },
+          getContextName: () => {
+            return 'app/primary_1';
+          },
+          getLocalizedValue: (value) => {
+            return value;
+          }
+        } as any
       }
-    } as any
     }
-  })
+  }
 };
 
 export default meta;