@pega/angular-sdk-overrides 0.26.4 → 0.26.6

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -1,67 +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>
-          <div *ngSwitchCase="'objectreference'" class="psdk-csf-object-reference-value">
-            <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"></component-mapper>
-          </div>
-          <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.toLowerCase()">
             <label *ngSwitchCase="'userreference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
             <label *ngSwitchCase="'checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
-            <div *ngSwitchCase="'objectreference'" class="psdk-csf-object-reference-value">
-              <component-mapper
-                name="ObjectReference"
-                [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"
-              ></component-mapper>
-            </div>
             <label *ngSwitchDefault class="psdk-secondary-value">{{ field.config.value || '---' }}</label>
           </div>
         </dd>
       </div>
-    </ng-template>
+    }
   </dl>
 </div>

package/lib/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;
+  }
+}

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -53,6 +53,17 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
         case 'checkbox':
           field.config.displayLabel = field.config.caption;
           break;
+        case 'reference': {
+          const referenceLabel = field.kid.getInheritedProps()?.label;
+          if (referenceLabel) {
+            field.config.label = referenceLabel;
+          }
+          field.kid.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+          break;
+        }
+        case 'objectreference':
+          field.kid.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+          break;
         default:
           break;
       }

package/lib/designSystemExtension/operator/operator.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/lib/designSystemExtension/operator/operator.component.scss

@@ -80,3 +80,10 @@ dd {
   grid-column-start: 1;
   max-width: max-content;
 }
+
+.psdk-operator-details {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(0.3125rem);
+}

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -2,12 +2,8 @@
   <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
 
   <div class="rich-text-editor" *ngIf="!readonly">
-    <div
-      class="tiptap-container"
-      [class.disabled]="disabled"
-      [class.tiptap-container-invalid]="richText.invalid && (error || richText.touched || richText.dirty)"
-    >
-      <div #editorEl class="tiptap-editor-area" [attr.aria-invalid]="richText.invalid && (error || richText.touched || richText.dirty)"></div>
+    <div class="tiptap-container" [class.disabled]="disabled" [class.tiptap-container-invalid]="showError">
+      <div #editorEl class="tiptap-editor-area" [attr.aria-invalid]="showError"></div>
 
       <div class="tiptap-toolbar" *ngIf="!disabled" (mousedown)="$event.preventDefault()">
         <mat-form-field class="tiptap-block-select" appearance="outline" subscriptSizing="dynamic">
@@ -105,7 +101,7 @@
       </div>
     </div>
 
-    <p *ngIf="richText.invalid && (error || richText.touched || richText.dirty)" [ngClass]="'text-editor-error'">{{ info }}</p>
+    <p *ngIf="showError" [ngClass]="'text-editor-error'">{{ errorMessage }}</p>
   </div>
 
   <div *ngIf="readonly">

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RichTextEditorComponent } from './rich-text-editor.component';
 
-describe('RichTextComponent', () => {
+describe('RichTextEditorComponent', () => {
   let component: RichTextEditorComponent;
   let fixture: ComponentFixture<RichTextEditorComponent>;
 

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -86,7 +86,7 @@ export class RichTextEditorComponent implements OnChanges, AfterViewInit, OnDest
       this.initializeEditor();
     }
 
-    if (this.editor && changes['value'] && this.value !== this.editor.getHTML()) {
+    if (this.editor && changes['value'] && (this.value ?? '') !== this.getEditorValue(this.editor)) {
       this.editor.commands.setContent(this.value ?? '', { emitUpdate: false });
     }
     if (this.editor && changes['disabled']) {
@@ -113,7 +113,7 @@ export class RichTextEditorComponent implements OnChanges, AfterViewInit, OnDest
       content: this.value || '',
       editable: !this.disabled,
       onUpdate: ({ editor }) => {
-        const html = editor.getHTML();
+        const html = this.getEditorValue(editor);
         this.richText.setValue(html, { emitEvent: false });
         this.richText.markAsDirty();
         this.onChange.emit(html);
@@ -121,7 +121,7 @@ export class RichTextEditorComponent implements OnChanges, AfterViewInit, OnDest
       },
       onBlur: ({ editor }) => {
         this.richText.markAsTouched();
-        this.onBlur.emit(editor.getHTML());
+        this.onBlur.emit(this.getEditorValue(editor));
         this.cdr.markForCheck();
       },
       onSelectionUpdate: ({ editor }) => {
@@ -132,6 +132,22 @@ export class RichTextEditorComponent implements OnChanges, AfterViewInit, OnDest
     this.updateCurrentBlock(this.editor);
   }
 
+  // Tiptap reports an empty document as "<p></p>", which would satisfy Validators.required and the engine's required check.
+  private getEditorValue(editor: Editor): string {
+    return editor.isEmpty ? '' : editor.getHTML();
+  }
+
+  get showError(): boolean {
+    return !!this.error || (this.richText.invalid && (this.richText.touched || this.richText.dirty));
+  }
+
+  get errorMessage(): string {
+    if (!this.error && this.richText.hasError('required')) {
+      return 'You must enter a value';
+    }
+    return this.info;
+  }
+
   private updateCurrentBlock(editor: Editor): void {
     if (editor.isActive('heading', { level: 1 })) this.currentBlock = 'h1';
     else if (editor.isActive('heading', { level: 2 })) this.currentBlock = 'h2';

package/lib/field/auto-complete/auto-complete.component.ts

@@ -415,7 +415,7 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     let key = '';
     if (val) {
       const index = this.options$?.findIndex(element => element.value === val);
-      key = index > -1 ? (key = this.options$[index].key) : val;
+      key = index > -1 ? this.options$[index].key : val;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);

package/lib/field/check-box/check-box.component.html

@@ -12,13 +12,13 @@
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
-          <label class="mat-form-field-label psdk-label-readonly" [ngClass]="{ 'label-required': bRequired$ && selectionMode === 'multi' }">{{
-            label$
-          }}</label>
+          <label class="mat-form-field-label psdk-label-readonly" [ngClass]="{ 'label-required': bRequired$ && selectionMode === 'multi' }">
+            {{ label$ }}</label
+          >
         </span>
       </div>
       <div *ngIf="selectionMode === 'multi'; else single">
-        <mat-option *ngFor="let item of listOfCheckboxes">
+        <div class="mat-mdc-option" *ngFor="let item of listOfCheckboxes">
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
@@ -28,7 +28,7 @@
             (blur)="fieldOnBlur($event)"
             >{{ item.text ?? item.value }}
           </mat-checkbox>
-        </mat-option>
+        </div>
       </div>
       <ng-template #single>
         <mat-checkbox

package/lib/field/check-box/check-box.component.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatOptionModule } from '@angular/material/core';
 
 import { FieldBase } from '@pega/angular-sdk-components';
 import { FieldWarningDirective } from '@pega/angular-sdk-components';
@@ -39,7 +38,6 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
     ReactiveFormsModule,
     MatCheckboxModule,
     MatFormFieldModule,
-    MatOptionModule,
     FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]

package/lib/field/date-time/date-time.component.ts

@@ -97,6 +97,12 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
   }
 
   fieldOnDateChange(event: any) {
+    // owl picker emits null when the typed text can't be parsed; clear the input instead of defaulting to now
+    if (!event.value) {
+      this.fieldControl.setValue('');
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, '');
+      return;
+    }
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
@@ -106,4 +112,25 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
+
+  override getErrorMessage() {
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      return this.angularPConnectData.validateMessage ?? '';
+    }
+
+    if (this.fieldControl.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    if (this.fieldControl.hasError('owlDateTimeParse')) {
+      return `${this.fieldControl.errors?.['owlDateTimeParse'].text} is not a valid date time value`;
+    }
+
+    if (this.fieldControl.errors) {
+      return 'Invalid date time value';
+    }
+
+    return '';
+  }
 }

package/lib/field/dropdown/dropdown.component.ts

@@ -93,9 +93,9 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
   set options(options: IOption[]) {
     this.options$ = options;
     if (this.displayMode$) {
-      this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
+      this.value$ = this.value$ === 'Select' ? '' : this.options$?.find(option => option.key === this.value$)?.value || this.value$;
       this.localizedValue = this.pConn$.getLocalizedValue(
-        this.value$ === 'Select...' ? '' : this.value$,
+        this.value$,
         this.localePath,
         this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
       );
@@ -136,7 +136,7 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
 
     if (this.theDatasource) {
       const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+      optionsList?.unshift(this.getPlaceholderOption());
       this.options = optionsList;
     }
 
@@ -224,12 +224,17 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
             };
             optionsData.push(obj);
           });
-          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+          optionsData?.unshift(this.getPlaceholderOption());
           this.options = optionsData;
         });
       });
   }
 
+  // Uses the authored placeholder, falling back to 'Select...' when none is authored
+  private getPlaceholderOption(): IOption {
+    return { key: 'Select', value: this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '') };
+  }
+
   isSelected(buttonValue: string): boolean {
     return this.value$ === buttonValue;
   }

package/lib/field/multiselect/multiselect.component.html

@@ -1,7 +1,7 @@
 <div [formGroup]="formGroup$">
   <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
     <mat-label>{{ label$ }}</mat-label>
-    <mat-chip-grid #chipGrid>
+    <mat-chip-grid #chipGrid [required]="bRequired$">
       <ng-container *ngFor="let select of selectedItems">
         <mat-chip-row (removed)="removeChip(select)">
           {{ select.primary }}

package/lib/field/multiselect/multiselect.component.ts

@@ -90,7 +90,7 @@ export class MultiselectComponent extends FieldBase {
           key: 'true'
         }
       ];
-      let secondaryColumns: any = [];
+      let secondaryColumns: any;
       // Read columnsFormatter from raw (unresolved) metadata to get field property paths
       // (e.g. "@P .pyLabel") instead of resolved data values (e.g. "New Complex Fields").
       // This matches Constellation's approach: pConn.getRawMetadata()?.config?.columnsFormatter

package/lib/field/object-reference/object-reference.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="bVisible$" [ngSwitch]="renderMode">
   <!-- SingleReferenceReadOnly mode -->
   <div *ngSwitchCase="'singleReferenceReadonly'">
-    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$, isDetails$, dataRelationshipContext }"></component-mapper>
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$, dataRelationshipContext }"></component-mapper>
   </div>
 
   <!-- MultiReferenceReadonly mode -->

package/lib/field/object-reference/object-reference.component.ts

@@ -46,7 +46,6 @@ type RenderMode = 'singleReferenceReadonly' | 'multiReferenceReadonly' | 'semant
 export class ObjectReferenceComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() isDetails$ = false;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: ObjectReferenceProps;

package/lib/field/rich-text/rich-text.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RichTextComponent } from './rich-text.component';
 
-describe('RichTextComponent', () => {
+describe('RichTextFieldComponent', () => {
   let component: RichTextComponent;
   let fixture: ComponentFixture<RichTextComponent>;
 

package/lib/field/semantic-link/semantic-link.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -46,7 +46,8 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils
+    private utils: Utils,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -81,6 +82,7 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
     const isData = this.buildDataPayload();
     this.linkURL = this.buildLinkURL(isData);
     this.isLinkTextEmpty = isLinkTextEmpty(this.value$);
+    this.cdr.detectChanges();
   }
 
   showDataAction() {

package/lib/field/user-reference/user-reference.component.ts

@@ -234,7 +234,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     let key = '';
     if (event?.target?.value) {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
-      key = index > -1 ? (key = this.options$[index].key) : event.target.value;
+      key = index > -1 ? this.options$[index].key : event.target.value;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -166,10 +166,6 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
       const { accessedOrder, items } = routingInfo;
       if (accessedOrder && items) {
         const key = accessedOrder[accessedOrder.length - 1];
-        let componentVisible = accessedOrder.length > 0;
-        const { visible } = this.state;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        componentVisible = visible || componentVisible;
         if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
           const latestItem = items[key];
           const rootView = latestItem.view;

package/lib/infra/assignment/assignment.component.ts

@@ -100,6 +100,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     this.initComponent();
 
+    // ngOnChanges runs before ngOnInit, so updateChanges() never registers on first render.
+    this.registerForRefresh();
+
     this.angularPConnect.shouldComponentUpdate(this);
 
     this.bInitialized = true;
@@ -130,6 +133,9 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
     if (bUpdateSelf) {
+      // The engine drops registrations when it cleans the context cache, so re-register on each update (as React does per render).
+      this.registerForRefresh();
+
       let loadingInfo;
       try {
         // loadingInfo = this.pConn$.getLoadingStatus();
@@ -491,7 +497,11 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   registerForRefresh() {
-    const refreshConditions = this.pConn$.getCaseInfo()?.getActionRefreshConditions();
+    const caseInfo = this.pConn$.getCaseInfo();
+    if (!caseInfo) {
+      return;
+    }
+    const refreshConditions = caseInfo.getActionRefreshConditions();
     const pageReference = this.pConn$.getPageReference();
     const context = this.pConn$.getContextName();
 
@@ -500,7 +510,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     // refresh api registration
     const refreshProps = getRefreshProps(refreshConditions);
-    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const caseKey = caseInfo.getKey();
     const refreshOptions = {
       autoDetectRefresh: true,
       preserveClientChanges: false

package/lib/infra/view/view.component.ts

@@ -16,7 +16,8 @@ const NO_HEADER_TEMPLATES = [
   'Confirmation',
   'DynamicTabs',
   'DetailsSubTabs',
-  'ListView'
+  'ListView',
+  'DataReference'
 ];
 
 const DETAILS_TEMPLATES = [

package/lib/template/advanced-search/search-groups/search-groups.component.ts

@@ -37,7 +37,7 @@ export function flattenObj(obj: any): any {
 export const initializeSearchFields = (searchFields, getPConnect, referenceListClassID, searchFieldRestoreValues = {}) => {
   const filtersProperties = {};
   searchFields?.forEach(field => {
-    let val = '';
+    let val;
     const { value, defaultValue = '' } = field.config;
     const propPath = PCore.getAnnotationUtils().getPropertyName(value);
 

package/lib/template/data-reference/data-reference.component.ts

@@ -265,7 +265,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     if (this.pConn$.getContextName().includes('modal') || this.pConn$.getContextName().includes('workarea')) {
       if (hasAssociatedViewConfigured || this.allowImplicitRefresh) {
         const pageReference = this.pConn$.getPageReference();
-        let pgRef: any = null;
+        let pgRef: string;
         if (pageReference.startsWith('objectInfo')) {
           pgRef = pageReference.replace('objectInfo.content', '');
         } else {

package/lib/template/list-view/list-view.component.ts

@@ -386,7 +386,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   getValue(col) {
-    return this.fieldDefs.find(f => f.name === col)?.label;
+    return this.fields$.find(f => f.config.name === col)?.config.label;
   }
 
   getListData() {
@@ -625,11 +625,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   _getIconStyle(level): string {
-    let sReturn = '';
     let nLevel = parseInt(level, 10);
     nLevel--;
     nLevel *= 15;
-    sReturn = `padding-left: ${nLevel}px; vertical-align: middle`;
+    const sReturn = `padding-left: ${nLevel}px; vertical-align: middle`;
 
     return sReturn;
   }
@@ -1002,16 +1001,14 @@ export class ListViewComponent implements OnInit, OnDestroy {
     let bKeep = true;
     for (const filterObj of this.filterByColumns) {
       if (filterObj.containsFilterValue != '' || filterObj.containsFilter == 'null' || filterObj.containsFilter == 'notnull') {
-        let filterValue: any;
-
         switch (filterObj.type) {
           case 'Date':
           case 'DateTime':
           case 'Time':
-            bKeep = this.filterDataWithDate(item, filterObj, filterValue);
+            bKeep = this.filterDataWithDate(item, filterObj);
             break;
           default:
-            bKeep = this.filterDataWithCommonTypes(item, filterObj, filterValue);
+            bKeep = this.filterDataWithCommonTypes(item, filterObj);
             break;
         }
       }
@@ -1025,10 +1022,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return bKeep;
   }
 
-  filterDataWithDate(item, filterObj, filterValue) {
+  filterDataWithDate(item, filterObj) {
     let bKeep;
     let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
-    filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
+    let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
 
     switch (filterObj.containsFilter) {
       case 'notequal':
@@ -1071,10 +1068,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return bKeep;
   }
 
-  filterDataWithCommonTypes(item, filterObj, filterValue) {
+  filterDataWithCommonTypes(item, filterObj) {
     let bKeep;
     const value = item[filterObj.ref].toLowerCase();
-    filterValue = filterObj.containsFilterValue.toLowerCase();
+    const filterValue = filterObj.containsFilterValue.toLowerCase();
 
     switch (filterObj.containsFilter) {
       case 'contains':

package/lib/template/simple-table-manual/helpers.ts

@@ -216,6 +216,56 @@ export function getFieldLabel(fieldConfig) {
   return fieldLabel;
 }
 
+function trimAnnotation(anno) {
+  if (typeof anno !== 'string' || !anno.startsWith('@')) return anno;
+  const spaceIndex = anno.indexOf(' ');
+  if (spaceIndex === -1) return anno;
+  return anno.substring(spaceIndex + 1);
+}
+
+/**
+ * Resolves an "@FL" label from the data model and localizes it using the property's locale reference.
+ */
+function getLocalizedFieldLabel(fieldConfig, pConnect) {
+  const { classID, label, caption } = fieldConfig;
+  let fieldLabel = getPropertyNameFromConfigValue(label || caption);
+  const fieldMetaData: any = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(fieldLabel, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? fieldLabel;
+  const localeValue = pConnect.getLocalizationService(fieldMetaData.localeReference).getLocalizedText(fieldLabel);
+  return localeValue || fieldLabel;
+}
+
+export function resolveFieldLabel(fieldViewMetadata, pConnect, classID?) {
+  const fieldClassID = classID || fieldViewMetadata.config.classID;
+  if (fieldClassID && pConnect) {
+    const fieldConfig: any = {
+      meta: fieldViewMetadata,
+      options: {
+        ...pConnect.options,
+        hasForm: false,
+        localeReference: pConnect.getLocaleRuleName()
+      },
+      useCustomContext: { classID: fieldClassID }
+    };
+    const fieldPConnect = PCore.createPConnect(fieldConfig).getPConnect();
+    const resolvedProps: any = fieldPConnect.resolveConfigProps({
+      label: fieldViewMetadata.config.label || fieldViewMetadata.config.caption
+    });
+    if (resolvedProps.label) return resolvedProps.label;
+  }
+
+  let label = fieldViewMetadata.config.label || fieldViewMetadata.config.caption;
+  if (isFLProperty(label)) {
+    label = getLocalizedFieldLabel(fieldViewMetadata.config, pConnect);
+  } else {
+    label = trimAnnotation(label);
+  }
+  if (pConnect) {
+    label = pConnect.getLocalizedValue(label);
+  }
+  return label;
+}
+
 export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
   const labelsOfFields: any = [];
   const { columnsRawConfig = [] } = options;
@@ -255,12 +305,9 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
 };
 
 export const buildFieldsForTable = (configFields, pConnect, showActionColumn, options) => {
-  const { primaryFieldsViewIndex, fields } = options;
+  const { classID } = options;
 
-  // get resolved field labels for primary fields raw config included in configFields
-  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
-    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
-  });
+  const fieldsLabels = configFields?.map(field => resolveFieldLabel(field, pConnect, classID)) ?? [];
 
   const fieldDefs = configFields?.map((field, index) => {
     return {

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -363,7 +363,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula and we may not end up using it all.
     this.fieldDefs = buildFieldsForTable(configFields, this.pConn$, this.showActionColumn, {
       primaryFieldsViewIndex,
-      fields: resolvedFields
+      fields: resolvedFields,
+      classID: contextClass
     });
     this.fieldDefs = this.fieldDefs?.filter(field => !(field.meta?.config?.hide === true));
     this.initializeDefaultPageInstructions();
@@ -971,11 +972,10 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   _getIconStyle(level): string {
-    let sReturn = '';
     let nLevel = parseInt(level, 10);
     nLevel--;
     nLevel *= 15;
-    sReturn = `padding-left: ${nLevel}px; vertical-align: middle`;
+    const sReturn = `padding-left: ${nLevel}px; vertical-align: middle`;
 
     return sReturn;
   }

package/lib/template/single-reference-readonly/single-reference-readonly.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'" [class.psdk-details-reference-value]="isDetails$">
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
   <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
   <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
 </div>

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -4,7 +4,6 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: center;
-  margin-top: 1rem;
 }
 
 .psdk-details-reference-value {

package/lib/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -15,7 +15,6 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
   @Input() dataRelationshipContext: any = null;
-  @Input() isDetails$ = false;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: any;
@@ -59,13 +58,13 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const rawViewMetadata = this.pConn$.getRawMetadata();
     const label = this.configProps.label;
     const showLabel = this.configProps.showLabel;
-    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
-    const type = (rawViewMetadata?.config as any)?.componentType;
+    const inheritedProps = this.pConn$.getInheritedProps();
+    const propsToUse = { label: label || inheritedProps['label'], showLabel: inheritedProps['showLabel'] || showLabel };
+    const type = (rawViewMetadata?.config as any)?.componentType ?? rawViewMetadata?.type;
     this.displayMode = this.configProps.displayMode;
     const targetObjectType = this.configProps.targetObjectType;
     const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
     const hideLabel = this.configProps.hideLabel;
-    // const additionalFields = this.configProps.additionalFields;
     const displayAs = this.configProps.displayAs ?? 'readonly';
     const dataRelationshipContext =
       this.dataRelationshipContext ?? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField ?? '');
@@ -77,7 +76,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
     const config: any = {
       ...rawViewMetadata?.config,
-      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      primaryField: (rawViewMetadata?.config as any)?.displayField ?? (rawViewMetadata?.config as any)?.primaryField,
       label: this.label
     };
 

package/lib/widget/attachment/AttachmentUtils.ts

@@ -49,7 +49,7 @@ export const fileDownloadVar = (content: { data: string; headers: Record<string,
     if (!/^(http|https):\/\//.test(data)) {
       data = `//${data}`;
     }
-    window.open(content.data, '_blank');
+    window.open(data, '_blank');
   } else if (type === 'EMAIL') {
     // Temp Fix: for EMAIL type attachment
     fileDownload(content.data, name, 'html', content.headers);

package/lib/widget/attachment/attachment.component.ts

@@ -194,8 +194,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
             error: errorFile.props.error || null
           };
         });
-        let key = '';
-        let updatedAttachments: any = [];
+        let key: string;
+        let updatedAttachments: any;
         if (this.allowMultiple$ || this.isOldAttachment) {
           key = this.isOldAttachment ? `${this.valueRef}.pxResults` : this.valueRef;
           const existingAttachments = PCore.getStoreValue(`.${key}`, this.pConn$.getPageReference(), this.pConn$.getContextName()) || [];

package/lib/widget/feed-container/feed-container.component.ts

@@ -156,204 +156,6 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
       }
     };
 
-    /*
-
-    const { getPConnect, messageIDs } = props;
-    const [mentionResults, setMentionResults] = useState([]);
-    const [tagResults, setTagResults] = useState([]);
-    const [attachments, setAttachments] = useState([]);
-    const [feedFilters, setFeedFilters] = useState();
-    const {
-      fetchMessages,
-      postMessage,
-      getMentionSuggestions,
-      getTagSuggestions
-    } = FeedApi(getPConnect());
-    const appName = PCore.getEnvironmentInfo().getApplicationName();
-    let value = "";
-    let feedID = "";
-    let feedClass = "";
-    if (getPConnect().getCaseSummary().ID) {
-      value = getPConnect().getCaseSummary().ID;
-      feedID = "pyCaseFeed";
-      feedClass = getPConnect().getCaseSummary().content.classID;
-    } else {
-      value = `DATA-PORTAL $${appName}`;
-      feedID = "pyDashboardFeed";
-      feedClass = "@baseclass";
-    }
-    // For cancelling fetchrequest for filetrs
-    const fetchMessagesCancelTokenSource = useRef([]);
-
-    useEffect(() => {
-      fetchMessages(
-        value,
-        feedID,
-        feedClass,
-        null,
-        fetchMessagesCancelTokenSource.current
-      ).then((res) => {
-        setFeedFilters(res);
-      });
-      PCore.getAssetLoader().getLoader("component-loader")(["Activity"]);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const onUploadProgress = useCallback((file) => {
-      return ({ loaded, total }) => {
-        file.progress = Math.floor((loaded / total) * 100);
-        setAttachments((current) => {
-          return current.map((currFile) => {
-            return currFile.name === file.name ? file : currFile;
-          });
-        });
-      };
-    }, []);
-
-    const errorHandler = useCallback((isFetchCanceled, file) => {
-      return (error) => {
-        if (!isFetchCanceled(error)) {
-          let localizedValue = "Upload failed";
-          if (
-            error.response &&
-            error.response.data &&
-            error.response.data.errorDetails
-          ) {
-            localizedValue = error.response.data.errorDetails[0].localizedValue;
-          }
-          delete file.progress;
-          setAttachments((current) => {
-            return current.map((currFile) => {
-              if (currFile.name === file.name) {
-                currFile.meta = localizedValue;
-                currFile.error = true;
-              }
-              return currFile;
-            });
-          });
-          error.isHandled = true;
-        }
-        throw error;
-      };
-    }, []);
-
-    const postComment = ({ value: message, clear }) => {
-      const attachmentIDs = [];
-      const attachmentUtils = PCore.getAttachmentUtils();
-      if (attachments && !!attachments.length) {
-        attachments
-          .filter((file) => !file.error)
-          .map((file) => {
-            return attachmentUtils
-              .uploadAttachment(file, onUploadProgress, errorHandler)
-              .then((fileResponse) => {
-                const fileConfig = {
-                  type: "File",
-                  category: "File",
-                  fileName: file.name,
-                  ID: fileResponse.data.ID
-                };
-                attachmentIDs.push(fileConfig);
-                if (attachments.length === attachmentIDs.length) {
-                  postMessage(
-                    value,
-                    transformMarkdownToMsg(message),
-                    attachmentIDs
-                  );
-                  clear();
-                  setAttachments([]);
-                }
-              })
-
-              .catch(console.error);
-          });
-      } else {
-        postMessage(value, transformMarkdownToMsg(message));
-        clear();
-      }
-    };
-
-    */
-
-    /* On search is called when @ character is entered and will display the mention */
-
-    /*
-    const onSearch = debounce((event) => {
-      if (event.type === "mention") {
-        getMentionSuggestions({
-          pulseContext: value,
-          searchFor: event.search
-        }).then((res) => {
-          setMentionResults(res);
-        });
-      } else {
-        getTagSuggestions({
-          searchFor: event.search
-        }).then((res) => {
-          setTagResults(res);
-        });
-      }
-    }, 150);
-
-    const userName = getPConnect().getEnvironmentInfo().getOperatorName();
-    const imageKey = getPConnect().getEnvironmentInfo().getOperatorImageInsKey();
-
-    const onFilesAdded = useCallback((newlyAddedFiles) => {
-      setAttachments((current) => [
-        ...newlyAddedFiles.map((file) => {
-          if (!validateMaxSize(file, 5)) {
-            file.error = true;
-            file.meta = "File is too big. Max allowed size is 5MB.";
-          }
-          file.icon = getIconFromFileType(file.type);
-          file.onDelete = () => {
-            setAttachments((c) => c.filter((f) => f.name !== file.name));
-          };
-          return file;
-        }),
-        ...current
-      ]);
-    }, []);
-
-    const onFilterChange = useCallback(
-      (filterID) => {
-        const updatedFilters = [...feedFilters];
-        const filterToUpdate = updatedFilters.find(
-          (feedItem) => feedItem.id === filterID
-        );
-        filterToUpdate.on = !filterToUpdate.on;
-        if (filterID === "All")
-          updatedFilters.forEach((feedFilter) => {
-            feedFilter.on = filterToUpdate.on;
-          });
-        else if (
-          updatedFilters.find(
-            (feedItem) => feedItem.on === false && feedItem.id !== "All"
-          )
-        )
-          updatedFilters.find((feedItem) => feedItem.id === "All").on = false;
-        else updatedFilters.find((feedItem) => feedItem.id === "All").on = true;
-        setFeedFilters(updatedFilters);
-        fetchMessages(
-          value,
-          feedID,
-          feedClass,
-          feedFilters,
-          fetchMessagesCancelTokenSource.current
-        );
-      },
-      [
-        value,
-        feedID,
-        feedClass,
-        feedFilters,
-        fetchMessagesCancelTokenSource,
-        fetchMessages
-      ]
-    );
-
-    */
-
     // set up svg images
     this.svgComment$ = this.utils.getImageSrc('chat', this.utils.getSDKStaticContentUrl());
     this.svgLike$ = this.utils.getImageSrc('thumbs-up', this.utils.getSDKStaticContentUrl());
@@ -545,7 +347,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   }
 
   likeClick(messageID: string, rMessageID: string, bLikedByMe: boolean, level: string) {
-    let pulseMessage = {};
+    let pulseMessage: object;
 
     if (level === 'top') {
       pulseMessage = {

package/lib/widget/file-utility/file-utility.component.ts

@@ -523,7 +523,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
           if (!/^(http|https):\/\//.test(data)) {
             data = `//${data}`;
           }
-          window.open(content.data, '_blank');
+          window.open(data, '_blank');
         }
       })
       .catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.26.4",
+  "version": "0.26.6",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"