@pega/angular-sdk-overrides 0.25.16 → 0.25.18

package/lib/field/date-time/date-time.component.scss

@@ -20,61 +20,67 @@
     width: auto;
   }
 
-  .mat-datepicker-content,
-  .time-container {
-    box-shadow:
-      0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-    display: block;
-    border-radius: 4px;
-    background-color: var(--mat-datepicker-calendar-container-background-color);
-    color: var(--mat-datepicker-calendar-container-text-color);
+  .owl-dt-container {
+    background-color: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    color: var(--mat-datepicker-calendar-date-text-color);
-    border-color: var(--mat-datepicker-calendar-date-outline-color);
+  .owl-dt-container-row,
+  .owl-dt-container-info .owl-dt-container-range:last-child {
+    border-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-body-selected {
-    background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
-    color: var(--mat-datepicker-calendar-date-selected-state-text-color);
+  .owl-dt-calendar-control,
+  .owl-dt-calendar-table .owl-dt-calendar-cell {
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    border: none !important;
+  .owl-dt-calendar-table .owl-dt-calendar-header,
+  .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+    color: var(--mat-sys-on-surface-variant);
   }
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+  .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider::after {
+    background-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-arrow {
-    fill: var(--mat-datepicker-calendar-period-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
+    border-color: var(--mat-sys-outline);
   }
 
-  .mat-calendar-table-header th {
-    text-align: center;
-    padding: 0 0 8px 0;
-    color: var(--mat-datepicker-calendar-header-text-color);
-    font-size: var(--mat-datepicker-calendar-header-text-size);
-    font-weight: var(--mat-datepicker-calendar-header-text-weight);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 
-  .mat-datepicker-content .mat-calendar-previous-button,
-  .mat-datepicker-content .mat-calendar-next-button {
-    color: var(--mat-datepicker-calendar-navigation-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover,
+  .owl-dt-control-period-button:hover > .owl-dt-control-button-content,
+  .owl-dt-container-control-button:hover .owl-dt-control-button-content,
+  .owl-dt-control:focus > .owl-dt-control-content {
+    background-color: var(--mat-sys-surface-container-high);
   }
 
-  .mat-calendar-table-header-divider::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -8px;
-    right: -8px;
-    height: 1px;
-    background: var(--mat-datepicker-calendar-header-divider-color);
+  .owl-dt-timer-content .owl-dt-timer-input {
+    border-color: var(--mat-sys-outline);
+    background-color: var(--mat-sys-surface-container-highest);
+    color: var(--mat-sys-on-surface);
+  }
+
+  .owl-dt-container-buttons,
+  .owl-dt-container-info .owl-dt-container-info-active,
+  .owl-dt-timer-hour12 {
+    color: var(--mat-sys-primary);
+  }
+
+  .owl-dt-control-arrow-button[disabled] {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 }

package/lib/field/date-time/date-time.component.ts

@@ -95,6 +95,12 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
   }
 
   fieldOnDateChange(event: any) {
+    // owl picker emits null when the typed text can't be parsed; clear the input instead of defaulting to now
+    if (!event.value) {
+      this.fieldControl.setValue('');
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, '');
+      return;
+    }
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
@@ -104,4 +110,25 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
+
+  override getErrorMessage() {
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      return this.angularPConnectData.validateMessage ?? '';
+    }
+
+    if (this.fieldControl.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    if (this.fieldControl.hasError('owlDateTimeParse')) {
+      return `${this.fieldControl.errors?.['owlDateTimeParse'].text} is not a valid date time value`;
+    }
+
+    if (this.fieldControl.errors) {
+      return 'Invalid date time value';
+    }
+
+    return '';
+  }
 }

package/lib/field/dropdown/dropdown.component.html

@@ -11,12 +11,14 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-select
           [value]="value$"
+          [placeholder]="placeholderText"
           [required]="bRequired$"
           [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
           [formControl]="fieldControl"
         >
+          <mat-option>{{ placeholderText }}</mat-option>
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ getLocalizedOptionValue(opt) }}
           </mat-option>

package/lib/field/dropdown/dropdown.component.ts

@@ -80,16 +80,19 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  placeholderText = '';
 
   set options(options: IOption[]) {
     this.options$ = options;
     if (this.displayMode$) {
       this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
       this.localizedValue = this.pConn$.getLocalizedValue(
-        this.value$ === 'Select...' ? '' : this.value$,
+        this.value$,
         this.localePath,
         this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
       );
+
+      this.cdRef.markForCheck();
     }
   }
 
@@ -115,20 +118,15 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
     const { value, fieldMetadata, datasource } = configProps;
 
     this.value$ = value;
+    this.placeholderText = this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '');
 
     if (!isEqual(datasource, this.theDatasource)) {
       // inbound datasource is different, so update theDatasource
       this.theDatasource = datasource || null;
     }
 
-    if (this.value$ === '' && !this.bReadonly$) {
-      this.value$ = 'Select';
-    }
-
     if (this.theDatasource) {
-      const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options = optionsList;
+      this.options = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
@@ -215,27 +213,21 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
             };
             optionsData.push(obj);
           });
-          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
           this.options = optionsData;
         });
       });
   }
 
-  isSelected(buttonValue: string): boolean {
-    return this.value$ === buttonValue;
-  }
-
   fieldOnChange(event: any) {
-    if (event?.value === 'Select') {
-      event.value = '';
-    }
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
+    // The reset option has no value; Pega expects '' for a cleared field
+    const value = event.value ?? '';
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
 
     this.pConn$.clearErrorMessages({
       property: this.propName
     });
     if (this.onRecordChange) {
-      this.onRecordChange.emit(event.value);
+      this.onRecordChange.emit(value);
     }
   }
 

package/lib/field/field.base.ts

@@ -1,4 +1,4 @@
-import { Directive, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Directive, inject, Input, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -11,6 +11,7 @@ export class FieldBase implements OnInit, OnDestroy {
 
   protected angularPConnect = inject(AngularPConnectService);
   protected utils = inject(Utils);
+  protected cdRef = inject(ChangeDetectorRef);
 
   protected angularPConnectData: AngularPConnectData = {};
 

package/lib/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'
 ];

package/lib/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();
+    });
   }
 }

package/lib/template/details/details.component.html

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
-  ></component-mapper>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
 </ng-template>

package/lib/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);
+}

package/lib/template/details/details.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,37 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   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 {}

package/lib/template/details-narrow-wide/details-narrow-wide.component.html

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
-  ></component-mapper>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-narrow-wide">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
 </ng-template>

package/lib/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);
+}

package/lib/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 '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,42 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   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 {}

package/lib/template/details-one-column/details-one-column.component.html

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
-  ></component-mapper>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
 </ng-template>

package/lib/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);
+}

package/lib/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 '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,43 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   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 {}