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

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

@@ -0,0 +1,71 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ReferenceComponent } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+import { TemplateUtils } 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, forwardRef(() => ComponentMapperComponent)]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  configProps$: Object;
+  arChildren$: Array<any>;
+  divClass$: string;
+  template: any;
+  showLabel: any;
+  label: any;
+  instructions: string;
+
+  NO_HEADER_TEMPLATES = [
+    'SubTabs',
+    'SimpleTable',
+    'Details',
+    'DetailsTwoColumn',
+    'DetailsThreeColumn',
+    'NarrowWideDetails',
+    'WideNarrowDetails',
+    'Confirmation'
+  ];
+  
+ constructor(private templateUtils: TemplateUtils) {}
+
+  ngOnInit(): void {
+    let configProps = this.pConn$.getConfigProps();
+    this.template = configProps?.template;
+    const propToUse = { ...this.pConn$.getInheritedProps() };
+    this.showLabel = propToUse?.showLabel;
+    this.label = propToUse?.label;
+    let kids = this.pConn$.getChildren();
+    this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+    console.log("instructions" + this.instructions);
+
+    let numCols = configProps.NumCols ? configProps.NumCols : '1';
+    switch (numCols) {
+      case '1':
+        this.divClass$ = 'psdk-default-form-one-column';
+        break;
+      case '2':
+        this.divClass$ = 'psdk-default-form-two-column';
+        break;
+      case '3':
+        this.divClass$ = 'psdk-default-form-three-column';
+        break;
+      default:
+        this.divClass$ = 'psdk-default-form-one-column';
+        break;
+    }
+
+    // repoint children before getting templateArray
+    // Children may contain 'reference' component, so we need to
+    //  normalize them
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+  }
+}

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/TwoColumn.svg

@@ -0,0 +1,38 @@
+<?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>2-col  icon</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-2" transform="translate(-198.000000, -207.000000)">
+            <g id="2-col--icon" transform="translate(198.000000, 207.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="0" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-18" x="0" y="11.7" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-19" x="0" y="23.4" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-20" x="0" y="35.1" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-21" x="0" y="46.8" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-22" x="0" y="58.5" width="42" height="5"></rect>
+                    <rect id="Rectangle-Copy" x="46" y="2.66453526e-15" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-27" x="46" y="11.7" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-26" x="46" y="23.4" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-25" x="46" y="35.1" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-24" x="46" y="46.8" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-23" x="46" y="58.5" width="42" height="5"></rect>
+                </g>
+                <g id="labels" transform="translate(16.000000, 11.000000)">
+                    <circle id="Oval-Copy-3" fill="#FFFFFF" cx="10.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="A" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="6.75" y="14">A</tspan>
+                    </text>
+                    <circle id="Oval-Copy-4" fill="#FFFFFF" cx="56.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="B" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="52.75" y="14">B</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/config.json.mustache

@@ -0,0 +1,49 @@
+{
+  "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": "TwoColumn.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER"
+    },
+    {
+      "name": "B",
+      "label": "Region B",
+      "format": "CONTENTPICKER"
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "saveToReference": true
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "saveToReference": true
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY",
+          "saveToReference": true
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+import { pyReviewRaw } from './mock.stories';
+import { TextField } from '@material-ui/core';
+import MuiPhoneNumber from 'material-ui-phone-number';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+const renderField = resolvedProps => {
+  const { displayMode, value = '', label = '', onChange} = resolvedProps;
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  let val = '';
+  if (label === 'Service Date')
+    val = <MuiPickersUtilsProvider utils={DayjsUtils}><KeyboardDatePicker
+      variant='inline'
+      inputVariant='outlined'
+      placeholder='mm/dd/yyyy'
+      fullWidth
+      format='MM/DD/YYYY'
+      mask='__/__/____'
+      size='small'
+      label={label}
+      value={value || null}
+      onChange={onChange}
+    />
+    </MuiPickersUtilsProvider>
+
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+
+  if (label === 'Email')
+    val = <TextField type='email' value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange}></TextField>;
+
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+    val = <TextField value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange}></TextField>;
+
+  if (label === 'Phone Number')
+    val = <MuiPhoneNumber value={value} variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange}></MuiPhoneNumber>;
+
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+
+  if (variant === 'inline') {
+    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  }
+
+  return val;
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [firstName, setFirstName] = useState('John');
+  const [middleName, setMiddleName] = useState('');
+  const [lastName, setLastName] = useState('Joe');
+  const [phone, setPhone] = useState('+16397975093');
+  const [serviceDate, setServiceDate] = useState('2023-01-25');
+  const [email, setEmail] = useState('john@doe.com');
+  const regionChildrenResolved = [
+    {
+      readOnly: undefined,
+      value: firstName,
+      label: 'First Name',
+      hasSuggestions: false,
+      onChange: val => {
+        setFirstName(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: middleName,
+      label: 'Middle Name',
+      hasSuggestions: false,
+      onChange: val => {
+        setMiddleName(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: lastName,
+      label: 'Last Name',
+      hasSuggestions: false,
+      onChange: val => {
+        setLastName(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: email,
+      label: 'Email',
+      hasSuggestions: false,
+      onChange: val => {
+        setEmail(val.target.value);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: phone,
+      label: 'Phone Number',
+      datasource: {
+        fields: {
+          value: undefined
+        },
+        source: [
+          {
+            value: '+1'
+          },
+          {
+            value: '+91'
+          },
+          {
+            value: '+48'
+          },
+          {
+            value: '+44'
+          }
+        ]
+      },
+      hasSuggestions: false,
+      onChange: val => {
+        setPhone(val);
+      }
+    },
+    {
+      readOnly: undefined,
+      value: serviceDate,
+      label: 'Service Date',
+      hasSuggestions: false,
+      onChange: date => {
+        const changeValue = date && date.isValid() ? date.toISOString() : null;
+        setServiceDate(changeValue);
+      }
+
+    }
+  ];
+  const props = {
+    template: 'DefaultForm',
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        createComponent: config => {
+          switch (config.config.value) {
+            case '@P .FirstName':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .MiddleName':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .LastName':
+              return renderField(regionChildrenResolved[2]);
+            case '@P .Email':
+              return renderField(regionChildrenResolved[3]);
+            case '@P .PhoneNumber':
+              return renderField(regionChildrenResolved[4]);
+            case '@P .ServiceDate':
+              return renderField(regionChildrenResolved[5]);
+            default:
+              break;
+          }
+        }
+      };
+    }
+  };
+
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}>
+        {regionAChildren}
+        {regionBChildren}
+      </{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

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

@@ -0,0 +1,16 @@
+<div class="psdk-two-column">
+  <div *ngFor="let kid of arChildren$">
+    <div class="psdk-two-column-left" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
+      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+    </div>
+    <div class="psdk-two-column-right" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
+      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+    </div>
+    <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
+      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+    </div>
+    <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
+      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+* {
+  box-sizing: border-box;
+}
+
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}
+
+.psdk-two-column-left {
+  float: left;
+  min-width: 50%;
+  padding: 0rem 0.3125rem;
+}
+
+.psdk-two-column-right {
+  float: left;
+  width: 50%;
+  padding: 0rem 0.3125rem;
+}

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.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/FORM-region/form.component.ts.mustache

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { RegionComponent } 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, forwardRef(() => RegionComponent)]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  configProps$: Object;
+  arChildren$: Array<any>;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.arChildren$ = this.pConn$.getChildren();
+  }
+}

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

@@ -0,0 +1,132 @@
+export const pyReviewRaw = {
+    name: 'CollectInformation',
+    type: 'View',
+    config: {
+      template: 'DefaultForm',
+      ruleClass: 'OM5W9U-SampleApp-Work-Test',
+      localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+      context: '@P .pyViewContext'
+    },
+    children: [
+      {
+        name: 'A',
+        type: 'Region',
+        children: [
+          {
+            type: 'TextInput',
+            config: {
+              value: '@P .FirstName',
+              label: '@L First Name'
+            }
+          },
+          {
+            type: 'TextInput',
+            config: {
+              value: '@P .MiddleName',
+              label: '@L Middle Name'
+            }
+          },
+          {
+            type: 'TextInput',
+            config: {
+              value: '@P .LastName',
+              label: '@L Last Name'
+            }
+          }
+        ]
+      },
+      {
+        name: 'B',
+        type: 'Region',
+        children: [
+          {
+            type: 'Email',
+            config: {
+              value: '@P .Email',
+              label: '@L Email'
+            }
+          },
+          {
+            type: 'Phone',
+            config: {
+              value: '@P .PhoneNumber',
+              label: '@L Phone Number',
+              datasource: {
+                source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+                fields: {
+                  value: '@P .pyCallingCode'
+                }
+              }
+            }
+          },
+          {
+            type: 'Date',
+            config: {
+              value: '@P .ServiceDate',
+              label: '@L Service Date'
+            }
+          }
+        ]
+      }
+    ],
+    classID: 'OM5W9U-SampleApp-Work-Test'
+  };
+  
+  export const regionChildrenResolved = [
+    {
+      readOnly: undefined,
+      value: 'John',
+      label: 'First Name',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: 'Din',
+      label: 'Middle Name',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: 'Doe',
+      label: 'Last Name',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: 'John@doe.com',
+      label: 'Email',
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: '+16397975093',
+      label: 'Phone Number',
+      datasource: {
+        fields: {
+          value: undefined
+        },
+        source: [
+          {
+            value: '+1'
+          },
+          {
+            value: '+91'
+          },
+          {
+            value: '+48'
+          },
+          {
+            value: '+44'
+          }
+        ]
+      },
+      hasSuggestions: false
+    },
+    {
+      readOnly: undefined,
+      value: '2023-01-25',
+      label: 'Service Date',
+      hasSuggestions: false
+    }
+  ];
+  

package/src/tasks/create/templates/SDK-Angular/template/PAGE/OneColumnPage.svg

@@ -0,0 +1,28 @@
+<?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  icon</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-2" transform="translate(-38.000000, -207.000000)">
+            <g id="1-col--icon" transform="translate(38.000000, 207.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="0" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-18" x="0" y="11.7" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-19" x="0" y="23.4" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-20" x="0" y="35.1" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-21" x="0" y="46.8" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-22" x="0" y="58.5" width="88" height="5"></rect>
+                </g>
+                <g id="labels" transform="translate(39.000000, 11.000000)">
+                    <circle id="Oval-Copy-3" fill="#FFFFFF" cx="10.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="A" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="6.75" y="14">A</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-Angular/template/PAGE/config.json.mustache

@@ -0,0 +1,32 @@
+{
+  "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": "useConfigurableLayout",
+      "label": "Use inline layout for insights",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "enableGetNextWork",
+      "label": "Enable Get next work",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Widgets", "Views", "Insights"]
+    }
+  ],
+  "defaultConfig": {}
+}