@pega/angular-sdk-overrides 0.26.5 → 0.26.6

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.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/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/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/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.ts

@@ -59,7 +59,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const label = this.configProps.label;
     const showLabel = this.configProps.showLabel;
     const inheritedProps = this.pConn$.getInheritedProps();
-    const propsToUse = { label: label || inheritedProps.label, showLabel: inheritedProps.showLabel || showLabel };
+    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;

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

@@ -347,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.5",
+  "version": "0.26.6",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"