diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.scss b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.scss index cba8fe60..43bbbd58 100644 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.scss +++ b/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 { diff --git a/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts b/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts index 492ec3c2..6674c4ca 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/date-time/date-time.component.ts +++ b/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` }); } diff --git a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts index 956498fa..f42d8892 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts +++ b/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 diff --git a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts b/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts index ed6263ed..88e7e864 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/time/time.component.ts +++ b/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' }); } diff --git a/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.html b/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.html index b217cbca..577803cd 100644 --- a/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.html +++ b/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.html @@ -1,5 +1,5 @@
-
+
{{ label$ }}
diff --git a/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.ts b/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.ts index 1dc3800b..fd2e3176 100644 --- a/packages/angular-sdk-components/src/lib/_components/infra/view/view.component.ts +++ b/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( diff --git a/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.html b/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.html index c173f737..b394b3e9 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.html @@ -1,7 +1,3 @@ - -
-
{{ label }}
-
diff --git a/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts b/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts index 84ae1cba..a9f26f93 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts +++ b/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); diff --git a/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.html b/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.html index a7ce2d15..c3c4d728 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.html @@ -1,3 +1,6 @@ +
+ {{ propsToUse.label }} +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.ts b/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.ts index 0a530c57..1bd06cbe 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.ts +++ b/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); diff --git a/packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.scss b/packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.scss index 43c29e2f..440f36db 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.scss +++ b/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; } diff --git a/projects/angular-test-app/src/styles.scss b/projects/angular-test-app/src/styles.scss index 5a3958ec..1e3a0aa1 100644 --- a/projects/angular-test-app/src/styles.scss +++ b/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; diff --git a/projects/angular-test-app/tests/e2e/DigV2/ComplexFields/EmbeddedData.spec.js b/projects/angular-test-app/tests/e2e/DigV2/ComplexFields/EmbeddedData.spec.js index 0546291f..45f73a42 100644 --- a/projects/angular-test-app/tests/e2e/DigV2/ComplexFields/EmbeddedData.spec.js +++ b/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();