@pega/angular-sdk-overrides 0.25.9 → 0.25.11

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

@@ -12,7 +12,9 @@
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
-          <label class="mat-form-field-label psdk-label-readonly">{{ 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">
@@ -38,11 +40,11 @@
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
-          >{{ caption$ }}</mat-checkbox
+          ><span [ngClass]="{ 'label-required': bRequired$ }">{{ caption$ }}</span></mat-checkbox
         >
         <p *ngIf="helperText">{{ helperText }}</p>
       </ng-template>
-      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+      <mat-error *ngIf="fieldControl.invalid && (fieldControl.touched || fieldControl.dirty)">{{ getErrorMessage() }}</mat-error>
     </div>
   </div>
 </ng-template>

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

@@ -34,3 +34,9 @@ mat-checkbox {
 .mat-mdc-option {
   margin-left: -16px;
 }
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+}

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

@@ -18,7 +18,7 @@
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
-        <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
+        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>

package/lib/field/location/location.component.html

@@ -9,6 +9,7 @@
       [formControl]="fieldControl"
       [required]="bRequired$"
       [matAutocomplete]="auto"
+      [readonly]="bReadonly$"
       [attr.data-test-id]="testId"
       (blur)="fieldOnBlur()"
     />

package/lib/field/phone/phone.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$ && bVisible$; else noEdit">
     <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
-      <mat-tel-input
+      <ngx-mat-input-tel
         [attr.data-test-id]="testId"
         [formControl]="fieldControl"
         [preferredCountries]="preferredCountries"
@@ -16,7 +16,7 @@
         (change)="fieldOnChange()"
         (blur)="fieldOnBlur()"
       >
-      </mat-tel-input>
+      </ngx-mat-input-tel>
       <mat-label>{{ label$ }}</mat-label>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </mat-form-field>

package/lib/field/phone/phone.component.ts

@@ -2,7 +2,7 @@ import { Component, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatTelInput } from 'mat-tel-input';
+import { NgxMatInputTelComponent } from 'ngx-mat-input-tel';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 import { FieldBase } from '@pega/angular-sdk-components';
@@ -18,7 +18,7 @@ interface PhoneProps extends PConnFieldProps {
   selector: 'app-phone',
   templateUrl: './phone.component.html',
   styleUrls: ['./phone.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, NgxMatInputTelComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class PhoneComponent extends FieldBase {
   configProps$: PhoneProps;

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="!bShowConfirm">
     <div *ngIf="!todo_showTodo$">
       <h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
-      <div *ngIf="banners?.length">
+      <div *ngIf="banners.length">
         <component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
       </div>
     </div>

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

@@ -11,9 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { FlowContainerBaseComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 interface FlowContainerProps {
@@ -66,7 +65,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
   localizedVal: any;
   localeCategory = 'Messages';
   localeReference: any;
-  banners: any[];
+  banners: any[] = [];
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
   pConnectOfActiveContainerItem;

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

@@ -3,9 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 // Right this is a skeleton, as Hybrid ViewContainer hasn't been implemented

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

@@ -9,9 +9,8 @@ import { getBanners } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({

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

@@ -1,9 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 // Right this is a skeleton, as Preview hasn't been implemented

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

@@ -8,9 +8,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { configureBrowserBookmark } from './helper';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 interface ViewContainerProps {

package/lib/infra/defer-load/defer-load.component.ts

@@ -6,9 +6,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({

package/lib/infra/reference/reference.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 
 /**
- * WARNING: It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 @Component({

package/lib/infra/root-container/root-container.component.ts

@@ -11,9 +11,8 @@ import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 const options = { context: 'app' };

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

@@ -24,9 +24,8 @@ function isDetailsTemplate(template) {
 }
 
 /**
- * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
- * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
- * is totally at your own risk.
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
  */
 
 /**

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

@@ -176,7 +176,7 @@
           <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
         </table>
-        <div *ngIf="repeatListData?.length === 0">
+        <div *ngIf="repeatListData.length === 0">
           <table id="list-view" mat-table [dataSource]="[]">
             <!-- Define columns for headers -->
             <ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
@@ -189,7 +189,7 @@
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
           </table>
         </div>
-        <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
+        <div class="psdk-no-records" *ngIf="repeatListData.length === 0">
           {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </div>
       </div>

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

@@ -1,4 +1,4 @@
 <div>
   <h3 style="font-weight: bold; margin: 0">{{ label }}</h3>
-  <component-mapper name="SimpleTable" [props]="{ pConn$ }"></component-mapper>
+  <component-mapper name="SimpleTable" [props]="{ pConn$: newPConn.getPConnect() }"></component-mapper>
 </div>

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

@@ -4,6 +4,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 interface MultiReferenceReadOnlyProps {
+  readonlyContextList: string;
+  referenceList: string;
   label: string;
   hideLabel: boolean;
 }
@@ -21,6 +23,7 @@ export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
   angularPConnectData: AngularPConnectData = {};
   configProps$: MultiReferenceReadOnlyProps;
   label: string;
+  newPConn: any;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -49,5 +52,29 @@ export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps$ = this.pConn$.getConfigProps() as MultiReferenceReadOnlyProps;
     this.label = this.configProps$.label;
+
+    const config = (this.pConn$.getMetadata() as any)?.config;
+    const { referenceList, readonlyContextList } = config;
+    let readonlyContextObject;
+    if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
+      readonlyContextObject = {
+        referenceList: readonlyContextList
+      };
+    }
+    const hideLabel = this.configProps$.hideLabel ?? false;
+    this.newPConn = this.pConn$.createComponent(
+      {
+        type: 'SimpleTable',
+        config: {
+          ...config,
+          ...readonlyContextObject,
+          label: this.label,
+          hideLabel
+        }
+      },
+      '',
+      0,
+      {}
+    );
   }
 }

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

@@ -46,7 +46,7 @@ export const getContext = thePConn => {
   const pageReference = thePConn.getPageReference();
   const { readonlyContextList, referenceList = readonlyContextList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
 
-  const pageReferenceForRows = referenceList.startsWith('.') ? `${pageReference}.${referenceList.substring(1)}` : referenceList;
+  const pageReferenceForRows = referenceList?.startsWith('.') ? `${pageReference}.${referenceList?.substring(1)}` : referenceList;
   const viewName = thePConn.viewName;
 
   // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions

package/package.json

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