@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache

@@ -1,15 +1,15 @@
-import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { interval } from 'rxjs';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { Utils } from '@pega/angular-sdk-components';
+
+import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { format } 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 Time here
@@ -19,149 +19,31 @@ 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'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
-
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
+export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
-
-  label$ = '';
-  value$: string;
-  bRequired$ = false;
-  bReadonly$ = false;
-  bDisabled$ = false;
-  bVisible$ = true;
-  displayMode$?: string = '';
-  controlName$: string;
-  testId = '';
-  bHasForm$ = true;
-  componentReference = '';
-  helperText: string;
-  placeholder: string;
-
-  fieldControl = new FormControl('', null);
-  actionsApi: object;
-  propName: string;
   formattedValue$: any;
 
-  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$) {
-      // 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$) {
-      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...
+  /**
+   * Updates the component when there are changes in the state.
+   */
+  override updateSelf(): void {
+    // Resolve config properties
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
-    this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
-    this.displayMode$ = this.configProps$.displayMode;
+    // Update component common properties
+    this.updateComponentCommonProperties(this.configProps$);
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
-    this.helperText = this.configProps$.helperText;
-    this.placeholder = this.configProps$.placeholder || '';
-
-    this.actionsApi = this.pConn$.getActionsApi();
-    this.propName = this.pConn$.getStateProps().value;
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
-      }
-      this.cdRef.detectChanges();
-    });
+    // Extract the value property
+    const { value } = this.configProps$;
+    this.value$ = value;
 
-    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+    if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
       this.formattedValue$ = format(this.value$, 'timeonly', {
         format: 'hh:mm A'
       });
     }
-
-    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;
-
-    // trigger display of error message with field control
-    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
-      const timer = interval(100).subscribe(() => {
-        this.fieldControl.setErrors({ message: true });
-        this.fieldControl.markAsTouched();
-
-        timer.unsubscribe();
-      });
-    }
   }
 
   fieldOnChange(event: any) {
@@ -189,19 +71,4 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
   }
-
-  getErrorMessage() {
-    let errMessage = '';
-    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
-    if (this.fieldControl.hasError('message')) {
-      errMessage = this.angularPConnectData.validateMessage ?? '';
-      return errMessage;
-    }
-    if (this.fieldControl.hasError('required')) {
-      errMessage = 'You must enter a value';
-    } else if (this.fieldControl.errors) {
-      errMessage = this.fieldControl.errors.toString();
-    }
-    return errMessage;
-  }
 }

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/demo.stories.tsx.mustache

@@ -8,11 +8,15 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {
-        resolveConfigProps: props => props,
+        resolveConfigProps: () => ({
+          label: 'Details',
+          showLabel: true,
+          showHighlightedData: false
+        }),
         getRawMetadata: () => {
           return pyReviewRaw.config;
         },
@@ -32,7 +36,9 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         populateAdditionalProps: () => {
           /* nothing */
         },
-        getConfigProps: () => {
+        getConfigProps: () => pyReviewRaw.config,
+        getInheritedProps: () => ({}),
+        setInheritedProp: () => {
           /* nothing */
         },
         getContextName: () => ''

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.html.mustache

@@ -1,3 +1,23 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.scss.mustache

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.ts.mustache

@@ -1,79 +1,11 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent, DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  standalone: true,
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      this.arFields$ = [];
-      const pKid = kid.getPConnect();
-      const fields = pKid.getChildren();
-      fields?.forEach(field => {
-        const thePConn = field.getPConnect();
-        const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference' || theCompType === 'group') {
-          const configProps = thePConn.getConfigProps();
-          configProps.readOnly = true;
-          configProps.displayMode = 'DISPLAY_ONLY';
-          const propToUse = { ...thePConn.getInheritedProps() };
-          configProps.label = propToUse?.label;
-          const options = {
-            context: thePConn.getContextName(),
-            pageReference: thePConn.getPageReference(),
-            referenceList: thePConn.getReferenceList()
-          };
-          const viewContConfig = {
-            meta: {
-              ...thePConn.getMetadata(),
-              type: theCompType,
-              config: configProps
-            },
-            options
-          };
-          const theViewCont = PCore.createPConnect(viewContConfig);
-          const data = {
-            type: theCompType,
-            pConn: theViewCont?.getPConnect()
-          };
-          this.arFields$.push(data);
-        } else {
-          const data = {
-            type: theCompType,
-            config: thePConn.getConfigProps()
-          };
-          this.arFields$.push(data);
-        }
-      });
-    }
-  }
-}
+export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/mock.ts.mustache

@@ -1,3 +1,27 @@
+const mockField = (componentName: string, configProps: Record<string, unknown>) => ({
+  getPConnect: () => ({
+    getComponentName: () => componentName,
+    getConfigProps: () => configProps,
+    resolveConfigProps: () => configProps,
+    getStateProps: () => ({ value: '' }),
+    getDataObject: () => ({}),
+    getCaseInfo: () => ({ getClassName: () => 'MyCo-MyCompon-Work-MyComponents' }),
+    getLocalizedValue: (value: string) => value,
+    getLocaleRuleNameFromKeys: () => '',
+    getActionsApi: () => ({
+      updateFieldValue: () => {
+        /* nothing */
+      },
+      triggerFieldChange: () => {
+        /* nothing */
+      }
+    }),
+    clearErrorMessages: () => {
+      /* nothing */
+    }
+  })
+});
+
 export const pyReviewRaw = {
   name: 'pyReview',
   type: 'View',
@@ -61,140 +85,67 @@ export const pyReviewRaw = {
       type: 'Region',
       getPConnect: () => {
         return {
-          getChildren: () => {
-            return [
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'TextInput';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        placeholder: 'First Name',
-                        value: 'John',
-                        label: 'First Name',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'TextInput';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        placeholder: 'Middle Name',
-                        value: '',
-                        label: 'Middle Name',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'TextInput';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        placeholder: 'Last Name',
-                        value: 'Doe',
-                        label: 'Last Name',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'Email';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        value: 'john@doe.com',
-                        label: 'Email',
-                        required: true,
-                        testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'phone';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        value: '+16397975093',
-                        label: 'Phone',
-                        displayMode: 'DISPLAY_ONLY',
-                        hasSuggestions: false
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'currency';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        value: '90.99',
-                        label: 'Price',
-                        displayMode: 'DISPLAY_ONLY',
-                        hasSuggestions: false
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'radio';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        value: '1000 Mbps',
-                        label: 'Internet Plan',
-                        displayMode: 'DISPLAY_ONLY',
-                        hasSuggestions: false
-                      };
-                    }
-                  };
-                }
-              }
-            ];
-          }
+          getComponentName: () => 'Region',
+          getChildren: () => [
+            mockField('TextInput', {
+              readOnly: undefined,
+              placeholder: 'First Name',
+              value: 'John',
+              label: 'First Name',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('TextInput', {
+              readOnly: undefined,
+              placeholder: 'Middle Name',
+              value: '',
+              label: 'Middle Name',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('TextInput', {
+              readOnly: undefined,
+              placeholder: 'Last Name',
+              value: 'Doe',
+              label: 'Last Name',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('Email', {
+              value: 'john@doe.com',
+              label: 'Email',
+              required: true,
+              testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('Phone', {
+              readOnly: undefined,
+              value: '+16397975093',
+              label: 'Phone',
+              displayMode: 'DISPLAY_ONLY',
+              hasSuggestions: false
+            }),
+            mockField('Currency', {
+              readOnly: undefined,
+              value: '90.99',
+              label: 'Price',
+              displayMode: 'DISPLAY_ONLY',
+              hasSuggestions: false
+            }),
+            mockField('RadioButtons', {
+              readOnly: undefined,
+              value: '1000 Mbps',
+              label: 'Internet Plan',
+              listType: 'associated',
+              datasource: [
+                { key: '100 Mbps', value: '100 Mbps' },
+                { key: '1000 Mbps', value: '1000 Mbps' }
+              ],
+              displayMode: 'DISPLAY_ONLY',
+              hasSuggestions: false
+            })
+          ]
         };
       }
     }

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

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/demo.stories.tsx.mustache

@@ -8,11 +8,15 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {
-        resolveConfigProps: props => props,
+        resolveConfigProps: () => ({
+          label: 'Details',
+          showLabel: true,
+          showHighlightedData: false
+        }),
         getRawMetadata: () => {
           return pyReviewRaw.config;
         },
@@ -30,9 +34,8 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         populateAdditionalProps: () => {
           /* nothing */
         },
-        getConfigProps: () => {
-          /* nothing */
-        },
+        getConfigProps: () => pyReviewRaw.config,
+        getInheritedProps: () => ({}),
         setInheritedProp: () => {
           /* nothing */
         },

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.html.mustache

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-2">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>