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

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

@@ -1,3 +1,40 @@
+const mockField = (componentName: string, config: Record<string, unknown>) => {
+  const configProps = { displayMode: 'DISPLAY_ONLY', ...config };
+  return {
+    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 */
+      }
+    })
+  };
+};
+
+const mockRegion = (name: string, fields: ReturnType<typeof mockField>[]) => ({
+  name,
+  type: 'Region',
+  getPConnect: () => ({
+    getComponentName: () => 'Region',
+    getRawMetadata: () => ({ name, type: 'Region' }),
+    getChildren: () => fields
+  })
+});
+
 export const pyReviewRaw = {
   name: 'pyReview',
   type: 'View',
@@ -56,83 +93,20 @@ export const pyReviewRaw = {
     ]
   },
   children: [
-    {
-      getPConnect: () => {
-        return {
-          resolveConfigProps: () => {
-            return {
-              name: 'A',
-              type: 'Region',
-              children: [
-                {
-                  config: { value: 'John', label: 'First Name' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: 'Doe', label: 'Last Name' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: '+16397975093', label: 'Phone' },
-                  type: 'Phone'
-                },
-                {
-                  config: { value: '100 Mbps', label: 'Internet Plan' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: 'Texas', label: 'State' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: '', label: 'City' },
-                  type: 'TextInput'
-                }
-              ]
-            };
-          },
-          getRawMetadata: () => {
-            return {};
-          }
-        };
-      }
-    },
-    {
-      getPConnect: () => {
-        return {
-          resolveConfigProps: () => {
-            return {
-              name: 'B',
-              type: 'Region',
-              children: [
-                {
-                  config: { value: '', label: 'Middle Name' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: 'john@doe.com', label: 'Email' },
-                  type: 'Email'
-                },
-                {
-                  config: { value: '$90.99', label: 'Price' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: false, label: 'Internet Package' },
-                  type: 'Checkbox'
-                },
-                {
-                  config: { value: '2023-12-29', label: 'Service date' },
-                  type: 'Date'
-                }
-              ]
-            };
-          },
-          getRawMetadata: () => {
-            return {};
-          }
-        };
-      }
-    }
+    mockRegion('A', [
+      mockField('TextInput', { value: 'John', label: 'First Name' }),
+      mockField('TextInput', { value: 'Doe', label: 'Last Name' }),
+      mockField('Phone', { value: '+16397975093', label: 'Phone' }),
+      mockField('TextInput', { value: '100 Mbps', label: 'Internet Plan' }),
+      mockField('TextInput', { value: 'Texas', label: 'State' }),
+      mockField('TextInput', { value: '', label: 'City' })
+    ]),
+    mockRegion('B', [
+      mockField('TextInput', { value: '', label: 'Middle Name' }),
+      mockField('Email', { value: 'john@doe.com', label: 'Email' }),
+      mockField('TextInput', { value: '$90.99', label: 'Price' }),
+      mockField('Checkbox', { value: false, label: 'Internet Package' }),
+      mockField('Date', { value: '2023-12-29', label: 'Service date' })
+    ])
   ]
 };

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

@@ -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>

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/pega-dxil-my-two-column-details.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-2 {
   display: grid;
   grid-template-columns: repeat(2, 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-two-column-details/pega-dxil-my-two-column-details.component.ts

@@ -1,54 +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-two-column-details',
   templateUrl: './pega-dxil-my-two-column-details.component.html',
   styleUrls: ['./pega-dxil-my-two-column-details.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyTwoColumnDetailsComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: 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;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+export class PegaDxilMyTwoColumnDetailsComponent extends DetailsTemplateBase {}

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

@@ -31,7 +31,7 @@ const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
   ],
   component: PegaDxilMyTwoColumnFormComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

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

@@ -8,11 +8,23 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args) => {
+  render: args => {
+    window.PCore.getConstants = (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID',
+          INSTRUCTIONS: ''
+        }
+      };
+    };
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {
-          return Promise.resolve(historyData);
+          return {
+            then: (callback: any) => {
+              callback(historyData);
+            }
+          };
         }
       };
     };

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -23,7 +23,10 @@ export class PegaDxilMyCaseWidgetComponent implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +57,7 @@ export class PegaDxilMyCaseWidgetComponent implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/config.json

@@ -7,7 +7,7 @@
   "library": "DXIL",
   "componentKey": "Pega_DXIL_MyPageCaseWidget",
   "type": "Widget",
-  "subtype": ["PAGE","CASE"],
+  "subtype": ["PAGE", "CASE"],
   "icon": "OneColumnPage.svg",
   "properties": [
     {

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

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

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

@@ -2,10 +2,12 @@
   <div class="psdk-label">
     {{ label$ }}
   </div>
-  <div class="psdk-double">
-    <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+  <div class="psdk-operator-details">
+    <div class="psdk-double">
+      <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+    </div>
+    <div>{{ date$ }}</div>
   </div>
-  <div>{{ date$ }}</div>
 </div>
 
 <div>

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.ts

@@ -112,7 +112,7 @@ export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnD
         ];
 
         this.bShowPopover$ = true;
-        this.cdRef.detectChanges();
+        this.cdRef.markForCheck();
       } else {
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
@@ -144,6 +144,7 @@ export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnD
             value: fillerString
           }
         ];
+        this.cdRef.markForCheck();
       }
     });
   }

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

@@ -8,7 +8,7 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   title: 'PegaDxilMyPageWidget',
   component: PegaDxilMyPageWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args) => {
+  render: args => {
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {

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

@@ -3,13 +3,12 @@
   <div>
     <p>{{ configProps$.description }}</p>
     <div>
-      <h3>{{ configProps$.label }}</h3>
       <ul>
         <li *ngFor="let detail of details$">{{ detail }}</li>
       </ul>
     </div>
   </div>
-  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button [href]="configProps$.whatsnewlink">See what's new</a>
 </article>
 <br />
 <table mat-table [dataSource]="workList">

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -30,7 +30,10 @@ export class PegaDxilMyPageWidgetComponent implements OnInit {
   workList: MatTableDataSource<any>;
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -83,6 +86,7 @@ export class PegaDxilMyPageWidgetComponent implements OnInit {
           this.workList = new MatTableDataSource();
           this.waitingForData = false;
         }
+        this.cdRef.markForCheck();
       })
       .catch((error: any) => {
         this.workList = new MatTableDataSource();

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/alert/alert.component.html

@@ -10,7 +10,10 @@
   <div class="psdk-alert-icon">
     <mat-icon>{{ getMatIcon(severity) }}</mat-icon>
   </div>
-  <div>{{ message }}</div>
+  <div *ngIf="messageIsHtml; else textMessage" [innerHTML]="messageText"></div>
+  <ng-template #textMessage>
+    <div>{{ messageText }}</div>
+  </ng-template>
   <div *ngIf="!hideClose" style="margin-left: auto">
     <button class="close-button" mat-icon-button (click)="onCloseClick()">
       <mat-icon>close</mat-icon>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/alert/alert.component.scss

@@ -1,8 +1,10 @@
 .psdk-alert {
-  border: 1px solid;
+  background-color: var(--mat-sys-surface-container-high);
+  border: 1px solid var(--mat-sys-outline-variant);
   display: flex;
   align-items: center;
   border-radius: 4px;
+  color: var(--mat-sys-on-surface);
   padding: 10px;
   margin: 5px 0px;
 }
@@ -22,26 +24,23 @@
 }
 
 .psdk-grid-warning {
-  color: var(--app-alert-warning-color);
-  border: 1px solid var(--app-alert-warning-border-color);
+  border-color: var(--mat-sys-secondary);
   .mat-icon {
-    color: var(--app-alert-warning-border-color);
+    color: var(--mat-sys-secondary);
   }
 }
 
 .psdk-grid-success {
-  color: var(--app-alert-success-color);
-  border: 1px solid var(--app-alert-success-border-color);
+  border-color: var(--mat-sys-tertiary);
   .mat-icon {
-    color: var(--app-alert-success-border-color);
+    color: var(--mat-sys-tertiary);
   }
 }
 
 .psdk-grid-info {
-  color: var(--app-alert-info-color);
-  border: 1px solid var(--app-alert-info-border-color);
+  border-color: var(--mat-sys-primary);
   .mat-icon {
-    color: var(--app-alert-info-border-color);
+    color: var(--mat-sys-primary);
   }
 }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/alert/alert.component.ts

@@ -9,11 +9,16 @@ import { MatIconModule } from '@angular/material/icon';
   imports: [CommonModule, MatIconModule]
 })
 export class AlertComponent {
-  @Input() message: any[];
+  @Input() message: unknown;
+  @Input() messageIsHtml = false;
   @Input() severity;
   @Input() hideClose;
   @Output() onClose: EventEmitter<any> = new EventEmitter();
 
+  get messageText(): string {
+    return this.message == null ? '' : String(this.message);
+  }
+
   getMatIcon(severity) {
     let variant;
     switch (severity) {
@@ -36,7 +41,6 @@ export class AlertComponent {
   }
 
   onCloseClick() {
-    alert('Close clicked');
     this.onClose.emit({ Page: 'Page', target: 'target', type: 'type' });
   }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/field-group/field-group.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, TemplateRef } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -9,14 +9,22 @@ import { MatIconModule } from '@angular/material/icon';
   styleUrls: ['./field-group.component.scss'],
   imports: [CommonModule, MatGridListModule, MatIconModule]
 })
-export class FieldGroupComponent {
+export class FieldGroupComponent implements OnChanges {
   @Input() name?: string;
-  @Input() collapsible = false;
+  @Input() collapseOnLoad: 'none' | 'expanded' | 'collapsed' = 'none';
   @Input() instructions: string;
   @Input() childrenTemplate: TemplateRef<any>;
 
+  collapsible = false;
   collapsed = false;
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['collapseOnLoad']) {
+      this.collapsible = this.collapseOnLoad !== 'none';
+      this.collapsed = this.collapseOnLoad === 'collapsed';
+    }
+  }
+
   headerClickHandler() {
     this.collapsed = !this.collapsed;
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -1,58 +1,73 @@
 <div class="psdk-case-summary-fields">
   <dl class="psdk-case-summary-fields-primary">
     <div *ngFor="let field of primaryFieldsWithStatus$" class="psdk-csf-primary-field">
-      <dt class="psdk-csf-primary-field-header">
+      <dt
+        *ngIf="
+          field.type.toLowerCase() !== 'objectreference' && field.type.toLowerCase() !== 'reference' && field.type.toLowerCase() !== 'caseoperator'
+        "
+        class="psdk-csf-primary-field-header"
+      >
         {{ field.config?.label }}
       </dt>
-      <dd *ngIf="field.config.value === ''; else hasValue" class="psdk-csf-primary-field-data">
-        <ng-container [ngSwitch]="field.type.toLowerCase()">
-          <label *ngSwitchCase="'caseoperator'">operator</label>
-          <span *ngSwitchDefault class="psdk-csf-text-style">---</span>
-        </ng-container>
+      <dd class="psdk-csf-primary-field-data" [ngSwitch]="field.type.toLowerCase()">
+        <span *ngSwitchCase="'textinput'" class="psdk-csf-text-style">{{ field.config.value || '---' }}</span>
+        <span *ngSwitchCase="'status'" class="psdk-csf-status-style">{{ field.config.value || '---' }}</span>
+        <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ field.config.value || '---' }}</a>
+        <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value || '---' }}</a>
+        <span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value || '---' }}</span>
+        <div class="psdk-case-summary-operator" *ngSwitchCase="'caseoperator'">
+          <component-mapper
+            name="Operator"
+            [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
+          ></component-mapper>
+        </div>
+        <div *ngSwitchCase="'objectreference'">
+          <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid }"></component-mapper>
+        </div>
+        <div *ngSwitchCase="'reference'" class="psdk-csf-object-reference-value">
+          <component-mapper name="reference" [props]="{ pConn$: field.kid }"></component-mapper>
+        </div>
+        <span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value || '---' }}</span>
       </dd>
-      <ng-template #hasValue>
-        <dd class="psdk-csf-primary-field-data" [ngSwitch]="field.type.toLowerCase()">
-          <span *ngSwitchCase="'textinput'" class="psdk-csf-text-style">{{ field.config.value }}</span>
-          <span *ngSwitchCase="'status'" class="psdk-csf-status-style">{{ field.config.value }}</span>
-          <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ field.config.value }}</a>
-          <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value }}</a>
-          <span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value }}</span>
-          <label *ngSwitchCase="'caseoperator'">operator</label>
-          <span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value }}</span>
-        </dd>
-      </ng-template>
     </div>
   </dl>
 </div>
 <div class="psdk-case-summary-fields">
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
-    <div
-      *ngIf="
-        field?.config?.label?.toLowerCase() == 'create operator' ||
-          field?.displayLabel?.toLowerCase() == 'create operator' ||
-          field?.config?.label?.toLowerCase() == 'update operator' ||
-          field?.displayLabel?.toLowerCase() == 'update operator';
-        else hasSecondaryValue
-      "
-    >
-      <component-mapper
-        name="Operator"
-        [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
-      ></component-mapper>
-    </div>
-    <ng-template #hasSecondaryValue>
+    @if (
+      field?.config?.label?.toLowerCase() == 'create operator' ||
+      field?.displayLabel?.toLowerCase() == 'create operator' ||
+      field?.config?.label?.toLowerCase() == 'update operator' ||
+      field?.displayLabel?.toLowerCase() == 'update operator'
+    ) {
+      <div>
+        <component-mapper
+          name="Operator"
+          [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
+        ></component-mapper>
+      </div>
+    } @else if (field.type.toLowerCase() === 'objectreference') {
+      <div class="psdk-csf-object-reference-value">
+        <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"></component-mapper>
+      </div>
+    } @else if (field.type.toLowerCase() === 'reference') {
+      <div class="psdk-csf-object-reference-value">
+        <component-mapper name="reference" [props]="{ pConn$: field.kid }"></component-mapper>
+      </div>
+    } @else {
       <div class="psdk-csf-secondary-field">
         <dt class="psdk-csf-secondary-field-header">
           {{ field.config?.displayLabel || field.config?.label }}
         </dt>
+
         <dd class="psdk-csf-secondary-field-data">
-          <div [ngSwitch]="field.type">
-            <label *ngSwitchCase="'UserReference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
-            <label *ngSwitchCase="'Checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
+          <div [ngSwitch]="field.type.toLowerCase()">
+            <label *ngSwitchCase="'userreference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
+            <label *ngSwitchCase="'checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
             <label *ngSwitchDefault class="psdk-secondary-value">{{ field.config.value || '---' }}</label>
           </div>
         </dd>
       </div>
-    </ng-template>
+    }
   </dl>
 </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.scss

@@ -110,3 +110,15 @@ span.psdk-csf-status-style {
 .psdk-primary-color {
   color: var(--mat-sys-primary);
 }
+
+.psdk-case-summary-operator {
+  ::ng-deep .psdk-operator {
+    flex-direction: column !important;
+  }
+}
+
+.psdk-csf-object-reference-value {
+  ::ng-deep .psdk-grid-label {
+    font-size: 0.8125rem !important;
+  }
+}