fix: readOnly displays, duplicate titles, UI styles

Author: tumms2021389

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,6 +79,8 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
   angularPConnectData: AngularPConnectData = {};
 
+  noHeaderTemplates = NO_HEADER_TEMPLATES;
+
   configProps$: ViewProps;
   inheritedProps$: any;
   arChildren$: any[];

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);
 

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;