fix: readOnly displays, duplicate titles, UI styles

packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.scss

@@ -49,7 +49,7 @@
 }
 
 .psdk-case-summary-fields {
-  padding: calc(2 * 0.5rem);
+  // padding: calc(2 * 0.5rem);
   display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }
@@ -90,6 +90,7 @@
   grid-template-columns: 1fr;
   grid-column-gap: calc(2 * 0.5rem);
   grid-row-gap: calc(1 * 0.5rem);
+  margin: 0;
 }
 
 .psdk-csf-secondary-field {

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

@@ -76,7 +76,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm a`;
+    this.placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.controlName$ = this.angularPConnect.getComponentID(this);
@@ -143,7 +143,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
 
     if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
       this.formattedValue$ = format(this.value$, 'datetime', {
-        format: `${this.theDateFormat.dateFormatString} hh:mm a`
+        format: `${this.theDateFormat.dateFormatString} hh:mm A`
       });
     }
 

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

@@ -134,7 +134,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
     this.propName = this.pConn$.getStateProps().value;
 
     if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
-      this.formattedValue = format(nValue, 'percentage');
+      this.formattedValue = nValue ? format(nValue, 'percentage') : '';
     }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError

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

@@ -129,7 +129,7 @@ export class TimeComponent implements OnInit, OnDestroy {
 
     if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
       this.formattedValue$ = format(this.value$, 'timeonly', {
-        format: 'hh:mm a'
+        format: 'hh:mm A'
       });
     }
 

packages/angular-sdk-components/src/lib/_components/infra/view/view.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="visibility$ !== false" class="ng-view-top">
-  <div *ngIf="showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'" class="template-title-container">
+  <div *ngIf="showLabel$ && label$ && !noHeaderTemplates.includes(templateName$)" class="template-title-container">
     <span>{{ label$ }}</span>
   </div>
 

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

@@ -7,6 +7,8 @@ import { getAllFields } from '../../template/utils';
 import { ReferenceComponent } from '../reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
+const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+
 /**
  * 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
@@ -77,13 +79,15 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
   angularPConnectData: AngularPConnectData = {};
 
+  noHeaderTemplates = NO_HEADER_TEMPLATES;
+
   configProps$: ViewProps;
   inheritedProps$: any;
   arChildren$: any[];
   templateName$: string;
   title$ = '';
   label$ = '';
-  showLabel$ = true;
+  showLabel$ = false;
   visibility$ = true;
 
   constructor(

packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.html

@@ -1,7 +1,3 @@
-<!-- When adding a component here, add the same component in 'region' template as well -->
-<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
-  <div class="template-title-container">{{ label }}</div>
-</div>
 <div *ngIf="instructions" class="psdk-default-form-instruction-text">
   <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>

packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts

@@ -9,7 +9,6 @@ import { FormTemplateBaseComponent } from '../form-template-base/form-template-b
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  template: string;
   instructions: string;
 }
 
@@ -26,32 +25,14 @@ export class DefaultFormComponent extends FormTemplateBaseComponent implements O
 
   arChildren$: any[];
   divClass$: string;
-  template: any;
-  showLabel: any;
-  label: any;
   instructions: string;
 
-  NO_HEADER_TEMPLATES = [
-    'SubTabs',
-    'SimpleTable',
-    'Details',
-    'DetailsTwoColumn',
-    'DetailsThreeColumn',
-    'NarrowWideDetails',
-    'WideNarrowDetails',
-    'Confirmation'
-  ];
-
   constructor(private templateUtils: TemplateUtils) {
     super();
   }
 
   ngOnInit(): void {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
-    this.template = configProps?.template;
-    const propToUse: any = { ...this.pConn$.getInheritedProps() };
-    this.showLabel = propToUse?.showLabel;
-    this.label = propToUse?.label;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
 

packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.html

@@ -1,3 +1,6 @@
+<div *ngIf="propsToUse.showLabel && propsToUse.label" class="template-title-container">
+  <span>{{ propsToUse.label }}</span>
+</div>
 <mat-tab-group id="dynamic-tabs" mat-stretch-tabs="false" animationDuration="0">
   <mat-tab *ngFor="let tab of tabsItems" [label]="tab.name">
     <component-mapper name="View" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>

packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.ts

@@ -9,6 +9,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
 interface DynamicTabsProps {
   referenceList: string;
   template: string;
+  label?: string;
+  showLabel?: boolean;
 }
 
 @Component({
@@ -24,6 +26,7 @@ export class DynamicTabsComponent implements OnInit, OnDestroy {
 
   angularPConnectData: AngularPConnectData = {};
   tabsItems: any[];
+  propsToUse: any;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -54,7 +57,9 @@ export class DynamicTabsComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
+    const { referenceList, label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
+
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
 
     const { tablabel } = this.pConn$.getComponentConfig();
     const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);

packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.scss

@@ -15,4 +15,5 @@
   font-size: 1.25rem;
 }
 .psdk-val-labels-left {
+  white-space: break-spaces;
 }

projects/angular-test-app/src/styles.scss

@@ -70,7 +70,6 @@ a.mat-mdc-menu-item > mat-icon {
 
 .psdk-grid-label {
   color: rgba(0, 0, 0, 0.54);
-  margin: 8px 0px;
 }
 .psdk-value {
   margin: 8px 0px;

projects/angular-test-app/tests/e2e/DigV2/ComplexFields/EmbeddedData.spec.js

@@ -53,13 +53,9 @@ test.describe('E2E test', () => {
     await selectedEditMode.click();
     await page.locator('mat-option > span:has-text("Editable")').click();
 
-    const PCoreVersion = await page.evaluate(() => window.PCore.getPCoreVersion());
-    let editModeType;
-    if (!PCoreVersion.includes('8.8')) {
-      editModeType = await page.locator('mat-select[data-test-id="80c1db3a7b228760228004b1a532c71e"]');
-      await editModeType.click();
-      await page.locator('mat-option > span:has-text("Table rows")').click();
-    }
+    let editModeType = await page.locator('mat-select[data-test-id="80c1db3a7b228760228004b1a532c71e"]');
+    await editModeType.click();
+    await page.locator('mat-option > span:has-text("Table rows")').click();
 
     const noRecordsMsg = page.locator('div[id="no-records"]');
     await expect(noRecordsMsg.locator('text="No Records Found."')).toBeVisible();