@pega/dx-component-builder-sdk 26.1.10 → 26.1.11

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-url.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-url.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface PegaDxilMyUrlProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-url',
   templateUrl: './pega-dxil-my-url.component.html',
   styleUrls: ['./pega-dxil-my-url.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyUrlComponent extends FieldBase {
   configProps$: PegaDxilMyUrlProps;

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/demo.stories.tsx

@@ -8,11 +8,15 @@ const meta: Meta<PegaDxilMyDetailsComponent> = {
   title: 'PegaDxilMyDetails',
   component: PegaDxilMyDetailsComponent,
   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<PegaDxilMyDetailsComponent> = {
         populateAdditionalProps: () => {
           /* nothing */
         },
-        getConfigProps: () => {
+        getConfigProps: () => pyReviewRaw.config,
+        getInheritedProps: () => ({}),
+        setInheritedProp: () => {
           /* nothing */
         },
         getContextName: () => ''

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/mock.ts

@@ -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/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/pega-dxil-my-details.component.html

@@ -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/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/pega-dxil-my-details.component.scss

@@ -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/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/pega-dxil-my-details.component.ts

@@ -1,78 +1,11 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent, DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-pega-dxil-my-details',
   templateUrl: './pega-dxil-my-details.component.html',
   styleUrls: ['./pega-dxil-my-details.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyDetailsComponent 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 PegaDxilMyDetailsComponent extends DetailsTemplateBase {}

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/demo.stories.tsx

@@ -31,7 +31,7 @@ const meta: Meta<PegaDxilMyFormComponent> = {
   ],
   component: PegaDxilMyFormComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {
@@ -79,7 +79,9 @@ const meta: Meta<PegaDxilMyFormComponent> = {
           /* nothing */
         },
         getContextName: () => '',
-        clearErrorMessages: () => {/* nothing */}
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       } as any,
       formGroup$: new FormBuilder().group({})
     }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/pega-dxil-my-form.component.html

@@ -1,8 +1,24 @@
-<div *ngIf="instructions" class="psdk-default-form-instruction-text">
-  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
-</div>
+<ng-container *ngIf="instructions && bShowInstructions$">
+  <component-mapper
+    *ngIf="instructionBannerVariant$; else instructionText"
+    name="Alert"
+    [props]="{
+      message: instructions,
+      messageIsHtml: true,
+      severity: instructionBannerVariant$,
+      hideClose: !bDismissInstructions$
+    }"
+    [parent]="this"
+    [outputEvents]="{ onClose: dismissInstructions }"
+  ></component-mapper>
+  <ng-template #instructionText>
+    <div class="psdk-default-form-instruction-text">
+      <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+    </div>
+  </ng-template>
+</ng-container>
 <div [className]="divClass$">
-  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">
+  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'reference' }">
     <component-mapper
       [name]="kid.getPConnect().getComponentName()"
       [props]="{

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/pega-dxil-my-form.component.ts

@@ -2,9 +2,8 @@ import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { TemplateUtils } from '@pega/angular-sdk-components';
+import { InstructionObject, TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
@@ -21,7 +20,7 @@ function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
 interface PegaDxilMyFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  instructions: string;
+  instructions?: string | InstructionObject;
 }
 
 @Component({
@@ -39,7 +38,10 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit,
 
   arChildren$: any[];
   divClass$: string;
-  instructions: string;
+  instructions: string | undefined;
+  instructionBannerVariant$: 'warning' | 'info' | 'success' | undefined;
+  bDismissInstructions$ = false;
+  bShowInstructions$ = true;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -71,6 +73,9 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit,
     const configProps = this.pConn$.getConfigProps() as PegaDxilMyFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+    const instructionsType = this.templateUtils.getInstructionsType(configProps?.instructions);
+    this.instructionBannerVariant$ = instructionsType ? this.templateUtils.mapInstructionsTypeToBannerVariant(instructionsType) : undefined;
+    this.bDismissInstructions$ = this.templateUtils.getDismissBanner(configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
     switch (numCols) {
@@ -91,10 +96,14 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit,
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = kids[0].getPConnect().getChildren();
 
     if (areViewsChanged(this.arChildren$, children)) {
       this.arChildren$ = children;
     }
   }
+
+  dismissInstructions() {
+    this.bShowInstructions$ = false;
+  }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-page/demo.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<PegaDxilMyPageComponent> = {
   title: 'PegaDxilMyPage',
   component: PegaDxilMyPageComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-page/pega-dxil-my-page.component.html

@@ -5,6 +5,7 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault>PegaDxilMyPage Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/demo.stories.tsx

@@ -8,11 +8,15 @@ const meta: Meta<PegaDxilMyTwoColumnDetailsComponent> = {
   title: 'PegaDxilMyTwoColumnDetails',
   component: PegaDxilMyTwoColumnDetailsComponent,
   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<PegaDxilMyTwoColumnDetailsComponent> = {
         populateAdditionalProps: () => {
           /* nothing */
         },
-        getConfigProps: () => {
-          /* nothing */
-        },
+        getConfigProps: () => pyReviewRaw.config,
+        getInheritedProps: () => ({}),
         setInheritedProp: () => {
           /* nothing */
         },