@pega/dx-component-builder-sdk 0.1.47 → 0.1.48

package/src/tasks/create/templates/SDK-Angular/template/PAGE/demo.stories.jsx.mustache

@@ -0,0 +1,80 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import AppAnnouncement from "@pega/react-sdk-components/lib/components/widget/AppAnnouncement";
+
+import { pyHome1Resolved, pyHome1Raw } from './mock.stories';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  
+  const configProps = pyHome1Resolved.children[0].children[0].config;
+
+  const props = {
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return {};
+        },
+        getActionsApi: () => {
+          return {
+            getNextWork: () => {
+              return new Promise(resolve => {
+                resolve({});
+              });
+            },
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getChildren: () => {
+          return pyHome1Raw.children;
+        },
+        getComponentName: () => {
+          return '';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getRawMetadata: () => {
+          return pyHome1Raw;
+        },
+        createComponent: config => {
+         if(config.type === 'AppAnnouncement') {
+              return (
+                <AppAnnouncement
+                  key='announcement'
+                  header='Announcements'
+                  description={configProps.description}
+                  image={configProps.image.replace(/ /g, '+')}
+                  datasource={configProps.datasource}
+                  label={configProps.label}
+                  whatsnewlink={configProps.whatsnewlink}
+                />
+              );
+          }
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  const regionAChildren = pyHome1Raw.children[0].children.map(child => {
+   return props.getPConnect().createComponent(child);
+  });
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

package/src/tasks/create/templates/SDK-Angular/template/PAGE/mock.stories.js.mustache

@@ -0,0 +1,115 @@
+export const pyHome1Raw = {
+  name: 'pyHome1',
+  type: 'View',
+  config: {
+    type: 'landingpage',
+    template: 'OneColumnPage',
+    icon: 'home-solid',
+    title: '@ENV APPLICATION_DESC',
+    ruleClass: 'DIXL-MediaCo-UIPages',
+    localeReference: '@LR DIXL-MEDIACO-UIPAGES!PAGE!PYHOME1',
+    enableGetNextWork: true,
+    context: 'pyPortal'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'AppAnnouncement',
+          config: {
+            label: '@L App announcement',
+            description:
+              "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.",
+            whatsnewlink: 'https://design.pega.com',
+            image:
+              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+',
+            datasource: {
+              source: [
+                {
+                    "name": "New React based UI rendering"
+                },
+                {
+                    "name": "Support for followers and recents"
+                },
+                {
+                    "name": "New authoring experience"
+                }
+            ],
+              fields: {
+                name: '@P .pyLabel'
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'DIXL-MediaCo-UIPages'
+};
+
+export const pyHome1Resolved = {
+  name: 'pyHome1',
+  type: 'View',
+  config: {
+    type: 'landingpage',
+    template: 'OneColumnPage',
+    icon: 'home-solid',
+    title: '@ENV APPLICATION_DESC',
+    ruleClass: 'DIXL-MediaCo-UIPages',
+    localeReference: '@LR DIXL-MEDIACO-UIPAGES!PAGE!PYHOME1',
+    enableGetNextWork: true,
+    context: 'pyPortal'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      getPConnect: () => {
+        return {
+          getComponentName: () => {
+            return '';
+          },
+          getComponent: () => {
+            return pyHome1Resolved.children[0];
+          },
+          getConfigProps: () => {
+            return {};
+          }
+        };
+      },
+      children: [
+        {
+          type: 'AppAnnouncement',
+          config: {
+            label: '@L App announcement',
+            description:
+              "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.",
+            whatsnewlink: 'https://design.pega.com',
+            image:
+              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+',
+            datasource: {
+              source: [
+                {
+                    "name": "New React based UI rendering"
+                },
+                {
+                    "name": "Support for followers and recents"
+                },
+                {
+                    "name": "New authoring experience"
+                }
+            ]
+            ,
+              fields: {
+                name: '@P .pyLabel'
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'DIXL-MediaCo-UIPages'
+};

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

@@ -0,0 +1,15 @@
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<div class="psdk-page-title">
+  <h2>{{ title$ }}</h2>
+</div>
+<div class="page-body">
+  <div *ngFor="let kid of arChildren$">
+    <div [ngSwitch]="kid.getPConnect().getComponentName()">
+      <app-view *ngSwitchCase="'View'" [pConn$]="kid.getPConnect()"></app-view>
+      <app-region *ngSwitchCase="'Region'" [pConn$]="kid.getPConnect()"></app-region>
+      <div *ngSwitchDefault><%COMPONENT_CLASS_NAME%> Missing: {{ kid.getPConnect().getComponentName() }}</div>
+    </div>
+  </div>
+</div>
+<%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.scss.mustache

@@ -0,0 +1,3 @@
+.psdk-page-title {
+  padding-left: 0.2rem;
+}

package/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.spec.ts.mustache

@@ -0,0 +1,25 @@
+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/template/PAGE/page.component.ts.mustache

@@ -0,0 +1,63 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { RegionComponent } from '@pega/angular-sdk-library';
+import { ViewComponent } from '@pega/angular-sdk-library';
+
+@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, RegionComponent, forwardRef(() => ViewComponent)]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+
+  configProps$: Object;
+  arChildren$: Array<any>;
+  title$: string;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit() {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.arChildren$ = this.pConn$.getChildren();
+
+    this.title$ = this.configProps$['title'];
+    let operator = this.configProps$['operator'];
+
+    if (operator && operator != '') {
+      this.title$ += ', ' + operator;
+    }
+
+    // when showing a page, similar to updating root, need to cause viewContainer to call "initContainer"
+    sessionStorage.setItem('hasViewContainer', 'false');
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    // 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
+    //    AND removing the "gate" that was put there since shouldComponentUpdate
+    //      should be the real "gate"
+    if (bUpdateSelf) {
+      // turn off spinner
+      //this.psService.sendMessage(false);
+    }
+  }
+}

package/src/tasks/create/templates/SDK-Angular/widget/CASE/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,15 @@
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<div>
+  <h2 class="psdk-case-history-title">{{ configProps$.label }}</h2>
+  <table mat-table [dataSource]="repeatList$">
+    <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>
+</div>
+<%={{ }}=%>     {{! revert delimiters for mustache }}

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

@@ -0,0 +1,22 @@
+table {
+  width: 100%;
+}
+
+.mat-mdc-row .mat-mdc-cell {
+  text-align: left;
+}
+
+.psdk-search {
+  padding-left: 0.625rem;
+}
+
+.psdk-icon-search {
+  vertical-align: sub;
+  padding: 0rem 0.125rem;
+  min-width: unset;
+  width: 1.1rem;
+}
+
+.psdk-case-history-title {
+  margin-left: 0.5rem;
+}

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

@@ -0,0 +1,25 @@
+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/widget/CASE/case.component.ts.mustache

@@ -0,0 +1,111 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Utils } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@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, MatTableModule]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+
+  PCore$: any;
+  configProps$: any;
+
+  repeatList$: MatTableDataSource<any>;
+  fields$: Array<any>;
+  displayedColumns$ = Array<any>();
+  waitingForData: boolean = false;
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+
+    this.configProps$ = this.pConn$.getConfigProps();
+
+    const caseID = this.pConn$.getValue(this.PCore$.getConstants().CASE_INFO.CASE_INFO_ID);
+    const dataViewName = 'D_pyWorkHistory';
+    const context = this.pConn$.getContextName();
+
+    this.waitingForData = true;
+
+    const caseHistoryData = this.PCore$.getDataApiUtils().getData(
+      dataViewName,
+      `{"dataViewParameters":[{"CaseInstanceKey":"${caseID}"}]}`,
+      context
+    );
+
+    caseHistoryData.then((historyJSON: Object) => {
+      this.fields$ = [
+        { label: 'Date', type: 'DateTime', fieldName: 'pxTimeCreated' },
+        { label: 'Description', type: 'TextInput', fieldName: 'pyMessageKey' },
+        { label: 'User', type: 'TextInput', fieldName: 'pyPerformer' }
+      ];
+
+      const tableDataResults = this.updateData(historyJSON['data'].data, this.fields$);
+
+      this.displayedColumns$ = this.getDisplayColums(this.fields$);
+
+      this.repeatList$ = new MatTableDataSource(tableDataResults);
+
+      this.waitingForData = false;
+    });
+  }
+
+  ngOnDestroy() {}
+
+  updateFields(arFields, arColumns): Array<any> {
+    let arReturn = arFields;
+    for (let i in arReturn) {
+      arReturn[i].config.name = arColumns[i];
+    }
+
+    return arReturn;
+  }
+
+  updateData(listData: Array<any>, fieldData: Array<any>): Array<any> {
+    let returnList: Array<any> = new Array<any>();
+    for (let row in listData) {
+      // copy
+      let rowData = JSON.parse(JSON.stringify(listData[row]));
+
+      for (let field of fieldData) {
+        let fieldName = field['fieldName'];
+        let formattedDate;
+
+        switch (field['type']) {
+          case 'Date':
+            formattedDate = this.utils.generateDate(rowData[fieldName], 'Date-Short-YYYY');
+            rowData[fieldName] = formattedDate;
+            break;
+          case 'DateTime':
+            formattedDate = this.utils.generateDateTime(rowData[fieldName], 'DateTime-Short-YYYY');
+            rowData[fieldName] = formattedDate;
+            break;
+        }
+      }
+
+      returnList.push(rowData);
+    }
+
+    return returnList;
+  }
+
+  getDisplayColums(fields = []) {
+    let arReturn = fields.map((field, colIndex) => {
+      let theField = field.fieldName;
+
+      return theField;
+    });
+    return arReturn;
+  }
+}

package/src/tasks/create/templates/SDK-Angular/widget/CASE/config.json.mustache

@@ -0,0 +1,23 @@
+{
+  "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": "OneColumnPage.svg",
+  "properties": [
+   {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    }
+  ],
+  "defaultConfig": {
+     "label": "Case Widget"
+  }
+}

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

@@ -0,0 +1,70 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { historyData } from './mock.stories';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getConstants = () => {
+  return {
+    CASE_INFO: {
+      CASE_INFO_ID: 'caseInfo.ID'
+    }
+  };
+};
+
+window.PCore.getDataApiUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: 'Case history',
+
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};