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

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

@@ -16,21 +16,24 @@ export const pyReviewRaw = {
           type: 'TextInput',
           config: {
             value: '@P .FirstName',
-            label: '@L First Name'
+            label: '@L First Name',
+            key: 'FirstName'
           }
         },
         {
           type: 'TextInput',
           config: {
             value: '@P .MiddleName',
-            label: '@L Middle Name'
+            label: '@L Middle Name',
+            key: 'MiddleName'
           }
         },
         {
           type: 'TextInput',
           config: {
             value: '@P .LastName',
-            label: '@L Last Name'
+            label: '@L Last Name',
+            key: 'LastName'
           }
         }
       ]
@@ -43,7 +46,8 @@ export const pyReviewRaw = {
           type: 'Email',
           config: {
             value: '@P .Email',
-            label: '@L Email'
+            label: '@L Email',
+            key: 'Email'
           }
         },
         {
@@ -56,14 +60,16 @@ export const pyReviewRaw = {
               fields: {
                 value: '@P .pyCallingCode'
               }
-            }
+            },
+            key: 'PhoneNumber'
           }
         },
         {
           type: 'Date',
           config: {
             value: '@P .ServiceDate',
-            label: '@L Service Date'
+            label: '@L Service Date',
+            key: 'ServiceDate'
           }
         }
       ]
@@ -77,25 +83,29 @@ export const regionChildrenResolved = [
     readOnly: undefined,
     value: 'John',
     label: 'First Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'First Name'
   },
   {
     readOnly: undefined,
     value: '',
     label: 'Middle Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Middle Name'
   },
   {
     readOnly: undefined,
     value: 'Doe',
     label: 'Last Name',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Last Name'
   },
   {
     readOnly: undefined,
     value: 'John@doe.com',
     label: 'Email',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Email'
   },
   {
     readOnly: undefined,
@@ -120,12 +130,14 @@ export const regionChildrenResolved = [
         }
       ]
     },
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Phone Number'
   },
   {
     readOnly: undefined,
     value: '2023-01-25',
     label: 'Service Date',
-    hasSuggestions: false
+    hasSuggestions: false,
+    key: 'Service Date'
   }
 ];

package/src/tasks/create/templates/Constellation/template/FORM-region/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/template/PAGE/demo.stories.jsx.mustache

@@ -64,6 +64,7 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
           if (config.type === 'AppAnnouncement') {
             return (
               <PegaAppAnnouncement
+                key='app-announcements'
                 heading='Announcements'
                 description={configProps.description}
                 whatsNewLink={configProps.whatsnewlink}

package/src/tasks/create/templates/Constellation/template/PAGE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/widget/CASE/index.jsx.mustache

@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         if (response.data.data !== null) {
           setHistory(
             response.data.data.map((entry, index) => {
-              {{! pick new delimiteres for mustache }}
+              {{! pick new delimiters for mustache }}
               {{=<% %>=}}
               return {
                 date: new Date(entry.pxTimeCreated).toLocaleString(),
@@ -41,7 +41,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
                 user: entry.pyPerformer,
                 id: index
               };
-              <%={{ }}=%>     {{! revert delimiteres for mustache }}
+              <%={{ }}=%>     {{! revert delimiters for mustache }}
             })
           );
         } else {

package/src/tasks/create/templates/Constellation/widget/CASE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/widget/PAGE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/Operator.jsx.mustache

@@ -31,7 +31,7 @@ const Operator = (props) => {
   }, [id]);
 
 
-  {{! pick new delimiteres for mustache }}
+  {{! pick new delimiters for mustache }}
   {{=<% %>=}}
 
   const OperatorPreview = () => {
@@ -145,7 +145,7 @@ const Operator = (props) => {
     }
   };
 
-  <%={{ }}=%>     {{! revert delimiteres for mustache }}
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
 
   const clickAction = (e) => {
     setPopoverTarget(e.currentTarget);

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/index.jsx.mustache

@@ -46,11 +46,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
       <Card>
       <CardHeader>{title}</CardHeader>
       <CardContent>
-{{! pick new delimiteres for mustache }} {{=<% %>=}}
+{{! pick new delimiters for mustache }} {{=<% %>=}}
       <Flex container={{ direction: 'row'}}>
       <Operator label={hideLabel ? null : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} />
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
       {dateTimeValue && (
         <Fragment>
           {' '}

package/src/tasks/create/templates/Constellation/widget/PAGE-CASE/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

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

@@ -0,0 +1,42 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+      <div class="mat-form-field-infix" *ngIf="showLabel$">
+        <span>
+          <label class="mat-form-field-label psdk-label-readonly">{{ label$ }}</label>
+        </span>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+        <mat-checkbox
+          [labelPosition]="checkboxLabelPos$"
+          [checked]="isChecked$"
+          [disabled]="bDisabled$"
+          [attr.data-test-id]="testId"
+          (change)="fieldOnChange($event)"
+          (click)="fieldOnClick($event)"
+          (blur)="fieldOnBlur($event)"
+          >{{ caption$ }}</mat-checkbox
+        >
+      </div>
+      <div class="mat-form-field-infix" *ngIf="!bReadonly$ && !showLabel$">
+        <mat-checkbox
+          [labelPosition]="checkboxLabelPos$"
+          [checked]="isChecked$"
+          [disabled]="bDisabled$"
+          [attr.data-test-id]="testId"
+          (change)="fieldOnChange($event)"
+          (click)="fieldOnClick($event)"
+          (blur)="fieldOnBlur($event)"
+          >{{ caption$ }}</mat-checkbox
+        >
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </div>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <app-text [pConn$]="pConn$" [formatAs$]="'text'"></app-text>
+</ng-template>

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

@@ -0,0 +1,24 @@
+.psdk-full-width {
+  min-width: 9.375rem;
+  width: 100%;
+  text-align: left;
+}
+
+.psdk-label-readonly {
+  top: 0rem;
+  margin-top: 0.625rem;
+  font-size: 0.875rem;
+  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/Boolean/boolean.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/field/Boolean/boolean.component.ts.mustache

@@ -0,0 +1,165 @@
+import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { Utils } from '@pega/angular-sdk-library';
+import { TextComponent } from '@pega/angular-sdk-library';
+import { FieldValueListComponent } 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, ReactiveFormsModule, MatCheckboxModule, TextComponent, FieldValueListComponent]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+  configProps$: Object;
+
+  label$: string = '';
+  value$: any = '';
+  caption$: string = '';
+  testId: string = '';
+  showLabel$: boolean = false;
+  checkboxLabelPos$ = 'after';
+  isChecked$: boolean = false;
+  bRequired$: boolean = false;
+  bReadonly$: boolean = false;
+  bDisabled$: boolean = false;
+  bVisible$: boolean = true;
+  displayMode$: string = '';
+  controlName$: string;
+  bHasForm$: boolean = true;
+  componentReference: string = '';
+
+  fieldControl = new FormControl('', null);
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.controlName$ = this.angularPConnect.getComponentID(this);
+
+    // Then, continue on with other initialization
+
+    // call updateSelf when initializing
+    //this.updateSelf();
+    this.checkAndUpdate();
+
+    if (this.formGroup$ != null) {
+      // add control to formGroup
+      this.formGroup$.addControl(this.controlName$, this.fieldControl);
+      this.fieldControl.setValue(this.value$);
+      this.bHasForm$ = true;
+    } else {
+      this.bReadonly$ = true;
+      this.bHasForm$ = false;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.formGroup$ != null) {
+      this.formGroup$.removeControl(this.controlName$);
+    }
+
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+
+    if (this.configProps$['value'] != undefined) {
+      this.value$ = this.configProps$['value'];
+    }
+    this.testId = this.configProps$['testId'];
+    this.label$ = this.configProps$['label'];
+    this.displayMode$ = this.configProps$['displayMode'];
+
+    this.caption$ = this.configProps$['caption'];
+
+    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+    setTimeout(() => {
+      if (this.configProps$['required'] != null) {
+        this.bRequired$ = this.utils.getBooleanValue(this.configProps$['required']);
+      }
+      this.cdRef.detectChanges();
+    });
+
+    if (this.configProps$['visibility'] != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$['visibility']);
+    }
+
+    // disabled
+    if (this.configProps$['disabled'] != undefined) {
+      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$['disabled']);
+    }
+
+    if (this.bDisabled$) {
+      this.fieldControl.disable();
+    } else {
+      this.fieldControl.enable();
+    }
+
+    if (this.configProps$['readOnly'] != null) {
+      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$['readOnly']);
+    }
+
+    this.componentReference = this.pConn$.getStateProps().value;
+
+    if (this.label$ != '') {
+      this.showLabel$ = true;
+    }
+
+    if (this.value$ === 'true' || this.value$ == true) {
+      this.isChecked$ = true;
+    } else {
+      this.isChecked$ = false;
+    }
+  }
+
+  fieldOnChange(event: any) {
+    event.value = event.checked;
+
+    this.angularPConnectData.actions.onChange(this, event);
+  }
+
+  fieldOnClick(event: any) {}
+
+  fieldOnBlur(event: any) {
+    event.value = event.checked;
+    this.angularPConnectData.actions.onBlur(this, event);
+  }
+}

package/src/tasks/create/templates/SDK-Angular/field/Boolean/config.json.mustache

@@ -0,0 +1,87 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-checkbox-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT"
+    },
+    {
+      "name": "hideLabel",
+      "label": "Hide Label",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "caption",
+          "label": "Caption",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

package/src/tasks/create/templates/SDK-Angular/field/Boolean/demo.stories.jsx.mustache

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, stateProps } 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 [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    label: configProps.label,
+    helperText: configProps.helperText,
+    caption: configProps.caption,
+    testId: configProps.testId,
+    trueLabel: configProps.trueLabel,
+    falseLabel: configProps.falseLabel,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getConfigProps: () => {
+          return configProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => { /* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => { /* nothing */}
+          };
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};