From ae581cea6cb24105864725778a65b39ce5d64cd4 Mon Sep 17 00:00:00 2001 From: Siva Rama Krishna Date: Wed, 23 Sep 2026 13:30:01 +0530 Subject: [PATCH] refactor: details templates to render region and its child components - Deleted MaterialDetailsFieldsComponent and MaterialDetailsComponent. - Updated DetailsTemplateBase to handle highlighted data more effectively. - Refactored detail components (one-column, two-column, three-column, narrow-wide, wide-narrow) to utilize the new highlighted data structure. - Enhanced styling for highlighted data sections across various detail templates. --- .../_bridge/helpers/sdk-pega-component-map.ts | 4 - .../material-details-fields.component.html | 41 ------- .../material-details-fields.component.scss | 34 ----- .../material-details-fields.component.spec.ts | 22 ---- .../material-details-fields.component.ts | 61 --------- .../material-details.component.html | 40 ------ .../material-details.component.scss | 116 ------------------ .../material-details.component.spec.ts | 24 ---- .../material-details.component.ts | 31 ----- .../_components/infra/view/view.component.ts | 5 +- .../template/base/details-template-base.ts | 89 +++++--------- .../details-narrow-wide.component.html | 20 ++- .../details-narrow-wide.component.scss | 9 +- .../details-narrow-wide.component.ts | 41 +------ .../details-one-column.component.html | 20 ++- .../details-one-column.component.scss | 14 +++ .../details-one-column.component.ts | 42 +------ .../details-three-column.component.html | 26 ++-- .../details-three-column.component.scss | 9 +- .../details-three-column.component.ts | 48 +------- .../details-two-column.component.html | 20 ++- .../details-two-column.component.scss | 9 +- .../details-two-column.component.ts | 46 +------ .../details-wide-narrow.component.html | 20 ++- .../details-wide-narrow.component.scss | 9 +- .../details-wide-narrow.component.ts | 43 +------ .../template/details/details.component.html | 20 ++- .../template/details/details.component.scss | 11 +- .../template/details/details.component.ts | 36 +----- .../field-value-list.component.scss | 17 +++ 30 files changed, 219 insertions(+), 708 deletions(-) delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.scss delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.html delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.scss delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.spec.ts delete mode 100644 packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.ts diff --git a/packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts b/packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts index e0bab3b2..e91a5957 100644 --- a/packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts +++ b/packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts @@ -114,8 +114,6 @@ import { BannerComponent } from '../../_components/designSystemExtension/banner/ import { CaseCreateStageComponent } from '../../_components/designSystemExtension/case-create-stage/case-create-stage.component'; import { FieldGroupComponent } from '../../_components/designSystemExtension/field-group/field-group.component'; import { MaterialCaseSummaryComponent } from '../../_components/designSystemExtension/material-case-summary/material-case-summary.component'; -import { MaterialDetailsComponent } from '../../_components/designSystemExtension/material-details/material-details.component'; -import { MaterialDetailsFieldsComponent } from '../../_components/designSystemExtension/material-details-fields/material-details-fields.component'; import { MaterialSummaryItemComponent } from '../../_components/designSystemExtension/material-summary-item/material-summary-item.component'; import { MaterialSummaryListComponent } from '../../_components/designSystemExtension/material-summary-list/material-summary-list.component'; import { MaterialUtilityComponent } from '../../_components/designSystemExtension/material-utility/material-utility.component'; @@ -167,7 +165,6 @@ const pegaSdkComponentMap = { DefaultPage: DefaultPageComponent, DeferLoad: DeferLoadComponent, Details: DetailsComponent, - DetailsFields: MaterialDetailsFieldsComponent, DetailsOneColumn: DetailsOneColumnComponent, DetailsSubTabs: DetailsSubTabsComponent, DetailsThreeColumn: DetailsThreeColumnComponent, @@ -194,7 +191,6 @@ const pegaSdkComponentMap = { ListView: ListViewComponent, ListViewActionButtons: ListViewActionButtonsComponent, Location: LocationComponent, - MaterialDetails: MaterialDetailsComponent, MaterialUtility: MaterialUtilityComponent, ModalViewContainer: ModalViewContainerComponent, MultiReferenceReadOnly: MultiReferenceReadonlyComponent, diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html deleted file mode 100644 index 3f3adb9c..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html +++ /dev/null @@ -1,41 +0,0 @@ -
-
-
- -
- -
- -
- - - -
-
- {{ field.config.label }} -
-
- {{ _getValue(field.config.value) }} - {{ _getValue(field.config.value) }} - {{ _getValue(field.config.value) }} - {{ _getValue(field.config.value) }} - {{ _formatDate(field.config.value, field.type) }} - {{ _formatDecimal(field) }} - {{ _formatCurrency(field) }} - - - {{ _formatDecimal(field) }} - {{ _formatCurrency(field) }} - {{ _getValue(field.config.value) }} - - - {{ _getValue(field.config.value, field) }} -
-
- -
-
diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.scss b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.scss deleted file mode 100644 index 52ec46f4..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.scss +++ /dev/null @@ -1,34 +0,0 @@ -.psdk-details-fields-label { - margin: 8px 0px; -} - -span.psdk-details-text-style-hf { - font-weight: bold; -} - -span.psdk-details-status-style-hf { - border-radius: calc(0.25 * 0.5rem); - display: inline-block; - font-size: 0.75rem; - font-weight: bold; - line-height: calc(0.5rem * 2.5); - height: calc(0.5rem * 2.5); - padding: 0 0.5rem; - text-transform: uppercase; -} - -.psdk-grid-filter { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} - -.psdk-csf-primary-field-value { - margin: 8px 0; -} - -.psdk-primary-color { - color: var(--mat-sys-primary); -} diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts deleted file mode 100644 index d539926a..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MaterialDetailsFieldsComponent } from './material-details-fields.component'; - -describe('MaterialDetailsFieldsComponent', () => { - let component: MaterialDetailsFieldsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [MaterialDetailsFieldsComponent] - }).compileComponents(); - - fixture = TestBed.createComponent(MaterialDetailsFieldsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts deleted file mode 100644 index f53c3734..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { Component, Input, forwardRef } from '@angular/core'; -import { Utils } from '../../../_helpers/utils'; -import { CommonModule } from '@angular/common'; -import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; -import { getCurrencyOptions } from '../../../_helpers/currency-utils'; -import { format } from '../../../_helpers/formatters'; - -@Component({ - selector: 'app-material-details-fields', - templateUrl: './material-details-fields.component.html', - styleUrls: ['./material-details-fields.component.scss'], - imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] -}) -export class MaterialDetailsFieldsComponent { - constructor(private utils: Utils) {} - - @Input() arFields$: any[]; - @Input() arHighlightedFields: any[]; - - _getValue(configValue, field: any = {}) { - if (field?.type === 'userreference') { - return configValue.userName; - } - if (configValue && configValue != '') { - return configValue; - } - return '---'; - } - - _formatDate(dateValue: string, dateFormat: string): string { - return this.utils.generateDate(dateValue, dateFormat); - } - - _formatDecimal(field: any): string { - const { currencyISOCode = '', formatter } = field.config; - - const theCurrencyOptions = getCurrencyOptions(currencyISOCode); - const formatterLower = formatter?.toLowerCase() || 'decimal'; - const formattedValue = format(field.config.value, formatterLower, theCurrencyOptions); - - return formattedValue; - } - - _formatCurrency(field: any): string { - const { currencyISOCode = 'USD', formatter } = field.config; - - const formattedValue = format( - field.config.value, - formatter ? (formatter.toLowerCase() === 'defaultcurrency' ? 'currency' : formatter.toLowerCase()) : 'currency', - getCurrencyOptions(currencyISOCode) - ); - - return formattedValue; - } - - _getVisibility(config): boolean { - const { visibility = true } = config; - - return this.utils.getBooleanValue(visibility); - } -} diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.html b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.html deleted file mode 100644 index f8de53eb..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.html +++ /dev/null @@ -1,40 +0,0 @@ -
-
-
-
- {{ field.config.label }} -
-
- {{ _getValue(field.config.value) }} - {{ _getValue(field.config.value) }} - {{ _getValue(field.config.value) }} - {{ _getValue(field.config.value) }} - {{ _formatDate(field.config.value, field.type) }} - - {{ _getValue(field.config.value) }} -
-
-
-
- - - -
-
diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.scss b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.scss deleted file mode 100644 index 4de79a86..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.scss +++ /dev/null @@ -1,116 +0,0 @@ -.psdk-details-group { - display: flex; - flex-direction: row; - justify-content: space-between; -} -.psdk-details-fields { - padding: calc(2 * 0.5rem); - grid-row-gap: calc(2 * 0.5rem); -} - -.psdk-details-fields-primary { - width: 100%; - display: grid; - grid-template-columns: 1fr; - grid-column-gap: calc(2 * 0.5rem); - grid-row-gap: calc(1 * 0.5rem); -} - -.psdk-details-fields-single { - display: grid; - grid-template-columns: 20ch 1fr; - grid-column-gap: calc(2 * 0.5rem); -} - -.psdk-details-fields-label { - margin: 8px 0px; -} - -.psdk-details-fields-value { - word-break: break-word; - grid-column-start: 2; - grid-row-start: 1; -} - -span.psdk-details-text-style-hf { - font-weight: 500; - font-size: 1.25rem; -} - -span.psdk-details-text-style { - font-weight: 400; -} - -span.psdk-details-status-style { - border-radius: calc(0.25 * 0.5rem); - display: inline-block; - font-size: 0.75rem; - font-weight: bold; - line-height: calc(0.5rem * 2.5); - height: calc(0.5rem * 2.5); - padding: 0 0.5rem; - text-transform: uppercase; -} - -.psdk-grid-filter { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} - -.psdk-csf-primary-field-value { - margin: 8px 0; -} - -span.psdk-details-status-style-hf { - border-radius: calc(0.25 * 0.5rem); - display: inline-block; - font-size: 1.25rem; - font-weight: 500; - line-height: calc(0.5rem * 2.5); - height: calc(0.5rem * 2.5); - padding: 0 0.5rem; - text-transform: uppercase; -} - -.psdk-grid-filter-1 { - display: grid; - grid-template-columns: repeat(1, minmax(0, 1fr)); - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} - -.psdk-grid-filter-2 { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} - -.psdk-grid-filter-3 { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} - -.psdk-grid-filter-wide-narrow { - display: grid; - grid-template-columns: 7fr 3fr; - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} - -.psdk-grid-filter-narrow-wide { - display: grid; - grid-template-columns: 3fr 7fr; - column-gap: calc(2 * 0.5rem); - row-gap: calc(2 * 0.5rem); - align-items: start; -} diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.spec.ts b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.spec.ts deleted file mode 100644 index 457dbcf3..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MaterialDetailsComponent } from './material-details.component'; - -describe('MaterialDetailsComponent', () => { - let component: MaterialDetailsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [MaterialDetailsComponent] - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MaterialDetailsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.ts b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.ts deleted file mode 100644 index 56578cf9..00000000 --- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details/material-details.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, Input, forwardRef } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { Utils } from '../../../_helpers/utils'; -import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; - -@Component({ - selector: 'app-material-details', - templateUrl: './material-details.component.html', - styleUrls: ['./material-details.component.scss'], - imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] -}) -export class MaterialDetailsComponent { - constructor(private utils: Utils) {} - - @Input() arFields$: any[]; - @Input() arFields2$: any[]; - @Input() arFields3$: any[]; - @Input() arHighlightedFields: any[]; - @Input() layout: any; - - _getValue(configValue) { - if (configValue && configValue != '') { - return configValue; - } - return '---'; - } - - _formatDate(dateValue: string, dateFormat: string): string { - return this.utils.generateDate(dateValue, dateFormat); - } -} 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 bff3bb86..8a26b307 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 @@ -21,11 +21,10 @@ const NO_HEADER_TEMPLATES = [ const DETAILS_TEMPLATES = [ 'Details', - 'DetailsFields', 'DetailsOneColumn', - 'DetailsSubTabs', - 'DetailsThreeColumn', 'DetailsTwoColumn', + 'DetailsThreeColumn', + 'DetailsSubTabs', 'NarrowWideDetails', 'WideNarrowDetails' ]; diff --git a/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts b/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts index 141d4fc4..effb80aa 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts @@ -10,9 +10,11 @@ export class DetailsTemplateBase implements OnInit, OnDestroy { // For interaction with AngularPConnect protected angularPConnectData: AngularPConnectData = {}; protected angularPConnect; - propsToUse: any = {}; - childrenMetadataOld; + children: any[] = []; + propsToUse: any = {}; + showHighlightedData: boolean; + highlightedDataArr: any = []; constructor(injector: Injector) { this.angularPConnect = injector.get(AngularPConnectService); @@ -40,23 +42,13 @@ export class DetailsTemplateBase implements OnInit, OnDestroy { const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this); // Only call updateSelf when the component should update - if (bUpdateSelf || this.hasRawMetadataChanged()) { + if (bUpdateSelf) { this.updateSelf(); } } - // this method will get overriden by the child component - updateSelf() {} - - hasRawMetadataChanged(): boolean { - const newChildrenMetadata = this.fetchChildrenMetadata(); - - if (!PCore.isDeepEqual(newChildrenMetadata, this.childrenMetadataOld)) { - this.childrenMetadataOld = newChildrenMetadata; - return true; - } - - return false; + updateSelf() { + this.updateDetailsProps(); } fetchChildrenMetadata() { @@ -69,53 +61,34 @@ export class DetailsTemplateBase implements OnInit, OnDestroy { } updateDetailsProps() { - const { label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()); + const { label, showLabel, showHighlightedData } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()); this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() }; + this.showHighlightedData = showHighlightedData; + + this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY'); + this.pConn$.setInheritedProp('readOnly', true); + + this.children = this.pConn$.getChildren() as any[]; + + // Process highlighted fields for display in the highlighted section + this.highlightedDataArr = this.processHighlightedFields(); } - processDetailFields(kid: any): any[] { - const pKid = kid.getPConnect(); - const fields = pKid.getChildren(); - const processedFields: any[] = []; - - fields?.forEach(field => { - const thePConn = field.getPConnect(); - const theCompType = thePConn.getComponentName().toLowerCase(); - if (theCompType === 'reference' || theCompType === 'group') { - const configProps = thePConn.getConfigProps(); - configProps.readOnly = true; - configProps.displayMode = 'DISPLAY_ONLY'; - const propToUse = { ...thePConn.getInheritedProps() }; - configProps.label = propToUse?.label; - const options = { - context: thePConn.getContextName(), - pageReference: thePConn.getPageReference(), - referenceList: thePConn.getReferenceList() - }; - const viewContConfig = { - meta: { - ...thePConn.getMetadata(), - type: theCompType, - config: configProps - }, - options - }; - const theViewCont = PCore.createPConnect(viewContConfig); - processedFields.push({ - type: theCompType, - pConn: theViewCont?.getPConnect() - }); - } else { - thePConn.setInheritedProp('displayMode', 'DISPLAY_ONLY'); - thePConn.setInheritedProp('readOnly', true); - processedFields.push({ - type: theCompType, - config: thePConn.getConfigProps(), - pConn: thePConn - }); + processHighlightedFields(): any[] { + if (!this.showHighlightedData) return []; + + const { highlightedData = [] } = (this.pConn$.getRawMetadata() as any).config; + + return (highlightedData ?? []).map(field => { + field.config.displayMode = 'STACKED_LARGE_VAL'; + field.config.readOnly = true; + + if (field.config.value === '@P .pyStatusWork') { + field.type = 'TextInput'; + field.config.displayAsStatus = true; } - }); - return processedFields; + return this.pConn$.createComponent(field, '', 0, {}).getPConnect(); + }); } } diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html index 2a2a15d3..37d263d5 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html @@ -4,8 +4,20 @@ > - + +
+ +
+ +
+ +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.scss b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.scss index 3cbda133..ed1e4cc0 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.scss @@ -1,7 +1,14 @@ -.psdk-grid-filter { +.psdk-grid-filter-narrow-wide { display: grid; grid-template-columns: 3fr 7fr; column-gap: calc(2 * 0.5rem); row-gap: calc(2 * 0.5rem); align-items: start; } + +.psdk-grid-highlighted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.5rem) calc(5rem); +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts index 2e9d78ea..81bfabba 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts @@ -1,4 +1,5 @@ import { Component, forwardRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { DetailsTemplateBase } from '../base/details-template-base'; @@ -6,42 +7,6 @@ import { DetailsTemplateBase } from '../base/details-template-base'; selector: 'app-details-narrow-wide', templateUrl: './details-narrow-wide.component.html', styleUrls: ['./details-narrow-wide.component.scss'], - imports: [forwardRef(() => ComponentMapperComponent)] + imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsNarrowWideComponent extends DetailsTemplateBase { - override pConn$: typeof PConnect; - - arFields$: any[] = []; - arFields2$: any[] = []; - highlightedDataArr: any[] = []; - showHighlightedData: boolean; - - override updateSelf() { - this.updateDetailsProps(); - const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config); - this.showHighlightedData = rawMetaData?.showHighlightedData; - - if (this.showHighlightedData) { - const highlightedData = rawMetaData?.highlightedData; - this.highlightedDataArr = highlightedData.map(field => { - field.config.displayMode = 'STACKED_LARGE_VAL'; - - if (field.config.value === '@P .pyStatusWork') { - field.type = 'TextInput'; - field.config.displayAsStatus = true; - } - - return field; - }); - } - - const kids = this.pConn$.getChildren() as any[]; - for (const kid of kids) { - if (kids.indexOf(kid) == 0) { - this.arFields$ = this.processDetailFields(kid); - } else { - this.arFields2$ = this.processDetailFields(kid); - } - } - } -} +export class DetailsNarrowWideComponent extends DetailsTemplateBase {} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.html b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.html index a70e8e17..a00a91e3 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.html @@ -4,8 +4,20 @@ > - + +
+ +
+ +
+ +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.scss b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.scss index e69de29b..12c10b9d 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.scss @@ -0,0 +1,14 @@ +.psdk-grid-filter-1 { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + column-gap: calc(2 * 0.5rem); + row-gap: calc(2 * 0.5rem); + align-items: start; +} + +.psdk-grid-highlighted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.5rem) calc(5rem); +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts index 5f423038..98d72460 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts @@ -1,4 +1,5 @@ import { Component, forwardRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { DetailsTemplateBase } from '../base/details-template-base'; @@ -6,43 +7,6 @@ import { DetailsTemplateBase } from '../base/details-template-base'; selector: 'app-details-one-column', templateUrl: './details-one-column.component.html', styleUrls: ['./details-one-column.component.scss'], - imports: [forwardRef(() => ComponentMapperComponent)] + imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsOneColumnComponent extends DetailsTemplateBase { - override pConn$: typeof PConnect; - - showHighlightedData: boolean; - highlightedDataArr: any; - - arFields$: any[] = []; - - override updateSelf() { - this.updateDetailsProps(); - const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config); - this.showHighlightedData = rawMetaData?.showHighlightedData; - - if (this.showHighlightedData) { - const highlightedData = rawMetaData?.highlightedData; - this.highlightedDataArr = highlightedData.map(field => { - field.config.displayMode = 'STACKED_LARGE_VAL'; - - if (field.config.value === '@P .pyStatusWork') { - field.type = 'TextInput'; - field.config.displayAsStatus = true; - } - - return field; - }); - } - - this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY'); - this.pConn$.setInheritedProp('readOnly', true); - - const kids = this.pConn$.getChildren() as any[]; - for (const kid of kids) { - if (kids.indexOf(kid) == 0) { - this.arFields$ = this.processDetailFields(kid); - } - } - } -} +export class DetailsOneColumnComponent extends DetailsTemplateBase {} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.html b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.html index 626612c8..e47f131f 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.html @@ -4,14 +4,20 @@ > - + +
+ +
+ +
+ +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.scss b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.scss index 589408b1..4861b065 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.scss @@ -1,7 +1,14 @@ -.psdk-grid-filter { +.psdk-grid-filter-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(2 * 0.5rem); row-gap: calc(2 * 0.5rem); align-items: start; } + +.psdk-grid-highlighted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.5rem) calc(5rem); +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts index fe3f73cd..ebcea29b 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts @@ -1,4 +1,5 @@ import { Component, forwardRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { DetailsTemplateBase } from '../base/details-template-base'; @@ -6,49 +7,6 @@ import { DetailsTemplateBase } from '../base/details-template-base'; selector: 'app-details-three-column', templateUrl: './details-three-column.component.html', styleUrls: ['./details-three-column.component.scss'], - imports: [forwardRef(() => ComponentMapperComponent)] + imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsThreeColumnComponent extends DetailsTemplateBase { - override pConn$: typeof PConnect; - - showHighlightedData: boolean; - highlightedDataArr: any; - - arFields$: any[] = []; - arFields2$: any[] = []; - arFields3$: any[] = []; - - override updateSelf() { - this.updateDetailsProps(); - const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config); - this.showHighlightedData = rawMetaData?.showHighlightedData; - - if (this.showHighlightedData) { - const highlightedData = rawMetaData?.highlightedData; - this.highlightedDataArr = highlightedData.map(field => { - field.config.displayMode = 'STACKED_LARGE_VAL'; - - if (field.config.value === '@P .pyStatusWork') { - field.type = 'TextInput'; - field.config.displayAsStatus = true; - } - - return field; - }); - } - - this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY'); - this.pConn$.setInheritedProp('readOnly', true); - - const kids = this.pConn$.getChildren() as any[]; - for (const kid of kids) { - if (kids.indexOf(kid) == 0) { - this.arFields$ = this.processDetailFields(kid); - } else if (kids.indexOf(kid) == 1) { - this.arFields2$ = this.processDetailFields(kid); - } else { - this.arFields3$ = this.processDetailFields(kid); - } - } - } -} +export class DetailsThreeColumnComponent extends DetailsTemplateBase {} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.html b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.html index a9437121..6948ec58 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.html @@ -4,8 +4,20 @@ > - + +
+ +
+ +
+ +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.scss b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.scss index be9bb2d2..a8bcd2a0 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.scss @@ -1,7 +1,14 @@ -.psdk-grid-filter { +.psdk-grid-filter-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * 0.5rem); row-gap: calc(2 * 0.5rem); align-items: start; } + +.psdk-grid-highlighted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.5rem) calc(5rem); +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts index 24f1cdeb..2e5e341b 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts @@ -1,4 +1,5 @@ import { Component, forwardRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { DetailsTemplateBase } from '../base/details-template-base'; @@ -6,47 +7,6 @@ import { DetailsTemplateBase } from '../base/details-template-base'; selector: 'app-details-two-column', templateUrl: './details-two-column.component.html', styleUrls: ['./details-two-column.component.scss'], - imports: [forwardRef(() => ComponentMapperComponent)] + imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsTwoColumnComponent extends DetailsTemplateBase { - override pConn$: typeof PConnect; - - showHighlightedData: boolean; - highlightedDataArr: any; - - arFields$: any[] = []; - arFields2$: any[] = []; - arFields3$: any[] = []; - - override updateSelf() { - this.updateDetailsProps(); - const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config); - this.showHighlightedData = rawMetaData?.showHighlightedData; - - if (this.showHighlightedData) { - const highlightedData = rawMetaData?.highlightedData; - this.highlightedDataArr = highlightedData?.map(field => { - field.config.displayMode = 'STACKED_LARGE_VAL'; - - if (field.config.value === '@P .pyStatusWork') { - field.type = 'TextInput'; - field.config.displayAsStatus = true; - } - - return field; - }); - } - - this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY'); - this.pConn$.setInheritedProp('readOnly', true); - - const kids = this.pConn$.getChildren() as any[]; - for (const kid of kids) { - if (kids.indexOf(kid) == 0) { - this.arFields$ = this.processDetailFields(kid); - } else { - this.arFields2$ = this.processDetailFields(kid); - } - } - } -} +export class DetailsTwoColumnComponent extends DetailsTemplateBase {} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html index fb3fc9ee..74ff5221 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html @@ -4,8 +4,20 @@ > - + +
+ +
+ +
+ +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.scss b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.scss index bcc6b138..951a4435 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.scss @@ -1,7 +1,14 @@ -.psdk-grid-filter { +.psdk-grid-filter-wide-narrow { display: grid; grid-template-columns: 7fr 3fr; column-gap: calc(2 * 0.5rem); row-gap: calc(2 * 0.5rem); align-items: start; } + +.psdk-grid-highlighted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.5rem) calc(5rem); +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts index 1557bf6a..59c9d0b6 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts @@ -1,4 +1,5 @@ import { Component, forwardRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { DetailsTemplateBase } from '../base/details-template-base'; @@ -6,44 +7,6 @@ import { DetailsTemplateBase } from '../base/details-template-base'; selector: 'app-details-wide-narrow', templateUrl: './details-wide-narrow.component.html', styleUrls: ['./details-wide-narrow.component.scss'], - imports: [forwardRef(() => ComponentMapperComponent)] + imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsWideNarrowComponent extends DetailsTemplateBase { - override pConn$: typeof PConnect; - - highlightedDataArr: any[] = []; - showHighlightedData: boolean; - arFields$: any[] = []; - arFields2$: any[] = []; - override updateSelf() { - this.updateDetailsProps(); - const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config); - this.showHighlightedData = rawMetaData?.showHighlightedData; - - if (this.showHighlightedData) { - const highlightedData = rawMetaData?.highlightedData; - this.highlightedDataArr = highlightedData.map(field => { - field.config.displayMode = 'STACKED_LARGE_VAL'; - - if (field.config.value === '@P .pyStatusWork') { - field.type = 'TextInput'; - field.config.displayAsStatus = true; - } - - return field; - }); - } - - this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY'); - this.pConn$.setInheritedProp('readOnly', true); - - const kids = this.pConn$.getChildren() as any[]; - for (const kid of kids) { - if (kids.indexOf(kid) == 0) { - this.arFields$ = this.processDetailFields(kid); - } else { - this.arFields2$ = this.processDetailFields(kid); - } - } - } -} +export class DetailsWideNarrowComponent extends DetailsTemplateBase {} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.html b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.html index a70e8e17..a00a91e3 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.html @@ -4,8 +4,20 @@ > - + +
+ +
+ +
+ +
diff --git a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.scss b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.scss index be9bb2d2..12c10b9d 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.scss @@ -1,7 +1,14 @@ -.psdk-grid-filter { +.psdk-grid-filter-1 { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)); column-gap: calc(2 * 0.5rem); row-gap: calc(2 * 0.5rem); align-items: start; } + +.psdk-grid-highlighted { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: calc(0.5rem) calc(5rem); +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts index 3389d007..21c1f684 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts @@ -1,4 +1,5 @@ import { Component, forwardRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { DetailsTemplateBase } from '../base/details-template-base'; @@ -6,37 +7,6 @@ import { DetailsTemplateBase } from '../base/details-template-base'; selector: 'app-details', templateUrl: './details.component.html', styleUrls: ['./details.component.scss'], - imports: [forwardRef(() => ComponentMapperComponent)] + imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsComponent extends DetailsTemplateBase { - override pConn$: typeof PConnect; - - highlightedDataArr: any[] = []; - showHighlightedData: boolean; - arFields$: any[] = []; - - override updateSelf() { - this.updateDetailsProps(); - const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config); - this.showHighlightedData = rawMetaData?.showHighlightedData; - - if (this.showHighlightedData) { - const highlightedData = rawMetaData?.highlightedData; - this.highlightedDataArr = highlightedData.map(field => { - field.config.displayMode = 'STACKED_LARGE_VAL'; - - if (field.config.value === '@P .pyStatusWork') { - field.type = 'TextInput'; - field.config.displayAsStatus = true; - } - - return field; - }); - } - - const kids = this.pConn$.getChildren() as any[]; - for (const kid of kids) { - this.arFields$ = this.processDetailFields(kid); - } - } -} +export class DetailsComponent extends DetailsTemplateBase {} 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 ab63f9bd..85bcd2e5 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 @@ -21,3 +21,20 @@ .psdk-val-labels-left { white-space: break-spaces; } + +.psdk-container-stacked-large-val { + margin: 8px 0; +} + +.psdk-container-stacked-large-val .psdk-grid-label { + color: rgba(0, 0, 0, 0.6); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; +} + +.psdk-val-stacked { + color: rgba(0, 0, 0, 0.87); + font-size: 1.25rem; + line-height: 1.5; +}