fixing few issues in 25

Author: mohas22

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts

@@ -27,6 +27,7 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   readonlyContextList: any;
   referenceList: string;
   variant?: string;
+  renderMode: string;
 }
 
 @Component({
@@ -92,7 +93,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0 && !this.bReadonly$) {
       this.pConn$.setReferenceList(this.selectionList);
       updateNewInstructions(this.pConn$, this.selectionList);
     }
@@ -157,6 +158,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
       this.selectionList = this.configProps$.selectionList;
       this.selectedvalues = this.configProps$.readonlyContextList;
       this.primaryField = this.configProps$.primaryField;
+      this.bReadonly$ = this.configProps$.renderMode === 'ReadOnly' || this.displayMode$ === 'DISPLAY_ONLY' || this.configProps$.readOnly;
 
       this.datasource = this.configProps$.datasource;
       this.selectionKey = this.configProps$.selectionKey;

packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html

@@ -4,13 +4,14 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
         <mat-tel-input
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           [preferredCountries]="preferredCountries"
           [enablePlaceholder]="true"
           [enableSearch]="true"
+          [placeholder]="placeholder"
           [required]="bRequired$"
           [disabled]="bDisabled$ || bReadonly$"
           (change)="fieldOnChange()"

packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.ts

@@ -40,6 +40,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
   bHasForm$ = true;
   testId: string;
   helperText: string;
+  placeholder: string;
 
   fieldControl = new FormControl('', null);
 
@@ -115,7 +116,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
       this.updatePreferredCountries();
     }
     this.helperText = this.configProps$.helperText;
-
+    this.placeholder = this.configProps$.placeholder || '';
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 

packages/angular-sdk-components/src/lib/_components/field/selectable-card/selectable-card.component.ts

@@ -7,6 +7,7 @@ import { PConnFieldProps } from '../../../_types/PConnProps.interface';
 import { CommonModule } from '@angular/common';
 import { deleteInstruction, insertInstruction } from '../../../_helpers/instructions-utils';
 import { handleEvent } from '../../../_helpers/event-util';
+import { Utils } from '../../../_helpers/utils';
 
 interface SelectableCardProps extends PConnFieldProps {
   selectionList: any;
@@ -63,7 +64,10 @@ export class SelectableCardComponent implements OnInit, OnDestroy {
   actionsApi: Object;
   propName: string;
 
-  constructor(private angularPConnect: AngularPConnectService) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
 
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
@@ -184,7 +188,7 @@ export class SelectableCardComponent implements OnInit, OnDestroy {
     const cardDataSource = this.readOnly || this.displayMode$ == 'DISPLAY_ONLY' ? this.selectedvalues || [] : this.commonProps?.datasource?.source;
 
     this.contentList = cardDataSource.map(item => {
-      const resolvedFields = this.resolveReferenceFields(item, this.commonProps.hideFieldLabels, this.commonProps.recordKey, this.pConn$);
+      const resolvedFields = this.utils.resolveReferenceFields(item, this.commonProps.hideFieldLabels, this.commonProps.recordKey, this.pConn$);
       const commonCardProps = {
         id: item[this.commonProps.recordKey],
         key: item[this.commonProps.recordKey],
@@ -205,7 +209,7 @@ export class SelectableCardComponent implements OnInit, OnDestroy {
               maxHeight: '100%',
               objectFit: 'contain',
               maxWidth: '100%',
-              height: this.readOnly ? '5rem' : ''
+              height: this.readOnly && imagePosition !== 'block-start' ? '5rem' : ''
             }
           }
         : undefined;
@@ -248,74 +252,4 @@ export class SelectableCardComponent implements OnInit, OnDestroy {
       this.handleChangeMultiMode(event, element);
     }
   }
-
-  prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
-    const { config, children } = pConnectMeta;
-    const pConnect = getPConnect();
-
-    const caseSummaryComponentObject: any = {};
-
-    caseSummaryComponentObject.name = pConnect.resolveConfigProps({ label: config.label }).label;
-
-    const { type } = pConnectMeta;
-    const createdComponent = pConnect.createComponent({
-      type,
-      children: children ? [...children] : [],
-      config: {
-        ...config
-      }
-    });
-
-    caseSummaryComponentObject.value = createdComponent;
-    return caseSummaryComponentObject;
-  }
-
-  resolveReferenceFields(
-    item: {
-      [key: string]: unknown;
-    },
-    hideFieldLabels: boolean,
-    recordKey: string,
-    pConnect: typeof PConnect
-  ) {
-    const presets: {
-      children?: {
-        children?: {
-          config;
-          type;
-        };
-        config?;
-      };
-    } = (pConnect.getRawMetadata()?.config as any).presets ?? [];
-
-    const presetChildren = presets[0]?.children?.[0]?.children ?? [];
-
-    const maxFields = 5;
-    return presetChildren.slice(0, maxFields).map((preset, index) => {
-      const fieldMeta = {
-        meta: {
-          ...preset,
-          config: {
-            ...preset.config,
-            displayMode: 'DISPLAY_ONLY'
-          }
-        },
-        useCustomContext: item
-      };
-      const configObj = PCore.createPConnect(fieldMeta);
-      const meta = configObj.getPConnect().getMetadata();
-      const fieldInfo: {
-        name?: string;
-        value?: any;
-      } = meta ? this.prepareComponentInCaseSummary(meta, configObj.getPConnect) : {};
-      return hideFieldLabels
-        ? { id: `${item[recordKey]} - ${index}`, value: fieldInfo.value }
-        : {
-            id: `${item[recordKey]} - ${index}`,
-            name: fieldInfo.name,
-            value: fieldInfo.value,
-            type: preset.type
-          };
-    });
-  }
 }

packages/angular-sdk-components/src/lib/_components/template/case-summary/case-summary.component.ts

@@ -3,6 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { Utils } from '../../../_helpers/utils';
 
 interface CaseSummaryProps {
   // If any, enter additional props that only exist on this component
@@ -32,7 +33,10 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
   primaryFields$: any[] = [];
   secondaryFields$: any[] = [];
 
-  constructor(private angularPConnect: AngularPConnectService) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
 
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
@@ -100,30 +104,30 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
-    const { config, children } = pConnectMeta;
-    const pConnect = getPConnect();
+  // prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+  //   const { config, children } = pConnectMeta;
+  //   const pConnect = getPConnect();
 
-    const caseSummaryComponentObject: any = {};
+  //   const caseSummaryComponentObject: any = {};
 
-    const { type } = pConnectMeta;
-    const createdComponent = pConnect.createComponent({
-      type,
-      children: children ? [...children] : [],
-      config: {
-        ...config
-      }
-    });
+  //   const { type } = pConnectMeta;
+  //   const createdComponent = pConnect.createComponent({
+  //     type,
+  //     children: children ? [...children] : [],
+  //     config: {
+  //       ...config
+  //     }
+  //   });
 
-    caseSummaryComponentObject.value = createdComponent;
-    return caseSummaryComponentObject;
-  }
+  //   caseSummaryComponentObject.value = createdComponent;
+  //   return caseSummaryComponentObject;
+  // }
 
   prepareCaseSummaryData(summaryFieldChildren) {
     const convertChildrenToSummaryData = kid => {
       return kid?.map((childItem, index) => {
         const childMeta = childItem.getPConnect().meta;
-        const caseSummaryComponentObject = this.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        const caseSummaryComponentObject = this.utils.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
         caseSummaryComponentObject.id = index + 1;
         return caseSummaryComponentObject;
       });

packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.ts

@@ -155,8 +155,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
   query: any = null;
   paging: any;
   fieldDefs: any;
-  xRayApis = PCore.getDebugger().getXRayRuntime();
-  xRayUid = this.xRayApis.startXRay();
   checkBoxValue: string;
   label?: string = '';
 
@@ -237,7 +235,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
         listContext: this.listContext,
         ref: this.ref,
         showDynamicFields: this.showDynamicFields,
-        xRayUid: this.xRayUid,
         cosmosTableRef: this.cosmosTableRef,
         selectionMode: this.selectionMode
       }).then(response => {

packages/angular-sdk-components/src/lib/_components/template/list-view/listViewHelpers.ts

@@ -12,7 +12,6 @@ export function init(props) {
     ref,
     showDynamicFields,
     isDataObject,
-    xRayUid,
     cosmosTableRef
   } = props;
   let { editing, selectionMode } = props;
@@ -67,16 +66,14 @@ export function init(props) {
     pConn$,
     compositeKeys,
     isSearchable,
-    isCacheable: true,
-    xRayUid
+    isCacheable: true
   }).then(async context => {
     return readContextResponse(context, {
       ...props,
       editing,
       selectionCountThreshold,
       ref,
       selectionMode,
-      xRayUid,
       cosmosTableRef
     });
   });

packages/angular-sdk-components/src/lib/_helpers/utils.ts

@@ -455,4 +455,74 @@ export class Utils {
 
     return currentObj[key] || key;
   }
+
+  prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    caseSummaryComponentObject.name = pConnect.resolveConfigProps({ label: config.label }).label;
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  resolveReferenceFields(
+    item: {
+      [key: string]: unknown;
+    },
+    hideFieldLabels: boolean,
+    recordKey: string,
+    pConnect: typeof PConnect
+  ) {
+    const presets: {
+      children?: {
+        children?: {
+          config;
+          type;
+        };
+        config?;
+      };
+    } = (pConnect.getRawMetadata()?.config as any).presets ?? [];
+
+    const presetChildren = presets[0]?.children?.[0]?.children ?? [];
+
+    const maxFields = 5;
+    return presetChildren.slice(0, maxFields).map((preset, index) => {
+      const fieldMeta = {
+        meta: {
+          ...preset,
+          config: {
+            ...preset.config,
+            displayMode: 'DISPLAY_ONLY'
+          }
+        },
+        useCustomContext: item
+      };
+      const configObj = PCore.createPConnect(fieldMeta);
+      const meta = configObj.getPConnect().getMetadata();
+      const fieldInfo: {
+        name?: string;
+        value?: any;
+      } = meta ? this.prepareComponentInCaseSummary(meta, configObj.getPConnect) : {};
+      return hideFieldLabels
+        ? { id: `${item[recordKey]} - ${index}`, value: fieldInfo.value }
+        : {
+            id: `${item[recordKey]} - ${index}`,
+            name: fieldInfo.name,
+            value: fieldInfo.value,
+            type: preset.type
+          };
+    });
+  }
 }