Get all the overrides working and fix issues in the tests

pegasystems · Dec 14, 2023 · fec70ba · fec70ba
1 parent 62aecec
commit fec70ba
Show file tree

Hide file tree

Showing 67 changed files with 219 additions and 202 deletions.
diff --git a/packages/angular-sdk-components/tests/e2e/DigV2/ViewTemplates/InlineDashboard.spec.js b/packages/angular-sdk-components/tests/e2e/DigV2/ViewTemplates/InlineDashboard.spec.js
@@ -65,8 +65,7 @@ test.describe('E2E test', () => {
 
     /* Testing the filters */
     let filters = await page.locator('div[id="filters"]');
-    const caseIdFilter = filters.locator('div:has-text("Case ID")');
-    const caseIdInput = caseIdFilter.locator('input');
+    const caseIdInput = filters.getByLabel('Case ID');
     await caseIdInput.click();
     await caseIdInput.fill(caseID);
 

diff --git a/packages/angular-sdk-components/tests/e2e/MediaCo/portal.spec.js b/packages/angular-sdk-components/tests/e2e/MediaCo/portal.spec.js
@@ -187,7 +187,7 @@ test.describe('E2E test', () => {
     const defaultPortalErrorMessage = page.locator('div[data-test-id="defaultPortalErrorMessage"]');
     await expect(defaultPortalErrorMessage).toBeVisible();
 
-    const mediaCoBtn = page.locator('div[class="portal-list-item"]:has-text("MediaCo")');
+    const mediaCoBtn = page.locator('div[class="portal-list-item"]>> text="MediaCo"');
     await expect(mediaCoBtn).toBeVisible();
     await mediaCoBtn.click();
 

diff --git a/projects/angular-sdk-library/src/lib/_bridge/helpers/sdk-pega-component-map.ts b/projects/angular-sdk-library/src/lib/_bridge/helpers/sdk-pega-component-map.ts
@@ -1,5 +1,4 @@
 import { forwardRef } from '@angular/core';
-// import { AutoCompleteComponent } from './lib/_components/field/auto-complete/auto-complete.component';
 import { AutoCompleteComponent } from '../../_components/field/auto-complete/auto-complete.component';
 import { CancelAlertComponent } from '../../_components/field/cancel-alert/cancel-alert.component';
 import { CheckBoxComponent } from '../../_components/field/check-box/check-box.component';
@@ -86,6 +85,7 @@ import { DetailsOneColumnComponent } from '../../_components/template/details-on
 import { ConfirmationComponent } from '../../_components/template/confirmation/confirmation.component';
 import { MaterialCaseSummaryComponent } from '../../_components/designSystemExtension/material-case-summary/material-case-summary.component';
 import { AlertBannerComponent } from '../../_components/designSystemExtension/alert-banner/alert-banner.component';
+import { AlertComponent } from '../../_components/designSystemExtension/alert/alert.component';
 import { BannerPageComponent } from '../../_components/template/banner-page/banner-page.component';
 import { WssNavBarComponent } from '../../_components/template/wss-nav-bar/wss-nav-bar.component';
 import { QuickCreateComponent } from '../../_components/widget/quick-create/quick-create.component';
@@ -94,6 +94,12 @@ import { BannerComponent } from '../../_components/designSystemExtension/banner/
 import { InlineDashboardComponent } from '../../_components/template/inline-dashboard/inline-dashboard.component';
 import { InlineDashboardPageComponent } from '../../_components/template/inline-dashboard-page/inline-dashboard-page.component';
 import { ScalarListComponent } from '../../_components/field/scalar-list/scalar-list.component';
+import { FeedContainerComponent } from '../../_components/widget/feed-container/feed-container.component';
+import { CaseCreateStageComponent } from '../../_components/designSystemExtension/case-create-stage/case-create-stage.component';
+import { MaterialDetailsComponent } from '../../_components/designSystemExtension/material-details/material-details.component';
+import { DashboardFilterComponent } from '../../_components/infra/dashboard-filter/dashboard-filter.component';
+import { ListUtilityComponent } from '../../_components/widget/list-utility/list-utility.component';
+import { MaterialUtilityComponent } from '../../_components/designSystemExtension/material-utility/material-utility.component';
 
 // pegaSdkComponentMap is the JSON object where we'll store the components that are
 // the default implementations provided by the SDK. These will be used if there isn't
@@ -106,6 +112,7 @@ import { ScalarListComponent } from '../../_components/field/scalar-list/scalar-
 
 const pegaSdkComponentMap = {
   ActionButtons: ActionButtonsComponent,
+  Alert: AlertComponent,
   AlertBanner: AlertBannerComponent,
   //   'ActionButtonsForFileUtil': ActionButtonsForFileUtil,
   AppAnnouncement: AppAnnouncementComponent,
@@ -117,6 +124,7 @@ const pegaSdkComponentMap = {
   Banner: BannerComponent,
   BannerPage: BannerPageComponent,
   CancelAlert: CancelAlertComponent,
+  CaseCreateStage: CaseCreateStageComponent,
   CaseHistory: CaseHistoryComponent,
   CaseSummary: CaseSummaryComponent,
   CaseSummaryFields: MaterialCaseSummaryComponent,
@@ -125,7 +133,7 @@ const pegaSdkComponentMap = {
   Checkbox: CheckBoxComponent,
   Confirmation: ConfirmationComponent,
   Currency: CurrencyComponent,
-  //   'DashboardFilter': DashboardFilter,
+  DashboardFilter: DashboardFilterComponent,
   DataReference: DataReferenceComponent,
   Date: DateComponent,
   DateTime: DateTimeComponent,
@@ -141,6 +149,7 @@ const pegaSdkComponentMap = {
   Dropdown: DropdownComponent,
   Email: EmailComponent,
   ErrorBoundary: ErrorBoundaryComponent,
+  FeedContainer: FeedContainerComponent,
   FieldGroupList: FieldGroupListComponent,
   FieldGroupTemplate: FieldGroupTemplateComponent,
   FieldValueList: FieldValueListComponent,
@@ -152,8 +161,11 @@ const pegaSdkComponentMap = {
   Integer: IntegerComponent,
   //   'LeftAlignVerticalTabs': LeftAlignVerticalTabs,
   ListPage: ListPageComponent,
+  ListUtility: ListUtilityComponent,
   ListView: ListViewComponent,
-  ModalViewContainer: forwardRef(() => ModalViewContainerComponent),
+  MaterialDetails: MaterialDetailsComponent,
+  MaterialUtility: MaterialUtilityComponent,
+  ModalViewContainer: ModalViewContainerComponent,
   MultiReferenceReadOnly: MultiReferenceReadonlyComponent,
   MultiStep: MultiStepComponent,
   //   'NarrowWide': NarrowWideFormComponent,

diff --git a/...ibrary/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.html b/...ibrary/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.html
@@ -1,12 +1,12 @@
 <div>
   <div *ngFor="let banner of banners">
     <div *ngFor="let message of banner.messages">
-      <app-alert
-        [message]="message"
-        [severity]="SEVERITY_MAP[banner.variant]"
-        (onClose)="onAlertClose(banner)"
-        [hideClose]="banner.variant === 'urgent'"
-      ></app-alert>
+      <component-mapper
+        name="Alert"
+        [props]="{message, severity: SEVERITY_MAP[banner.variant], hideClose: banner.variant === 'urgent'}"
+        [parent]="this"
+        [outputEvents]="{ onClose: onAlertClose }"
+      ></component-mapper>
     </div>
   </div>
 </div>
diff --git a/...-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.ts b/...-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.ts
@@ -1,19 +1,19 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { AlertComponent } from '../alert/alert.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-alert-banner',
   templateUrl: './alert-banner.component.html',
   styleUrls: ['./alert-banner.component.scss'],
   standalone: true,
-  imports: [CommonModule, AlertComponent]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AlertBannerComponent implements OnInit {
   constructor() { }
 
   @Input() banners: Array<any>;
-
+ 
   SEVERITY_MAP = {
     urgent: 'error',
     warning: 'warning',

diff --git a/...ts/angular-sdk-library/src/lib/_components/designSystemExtension/alert/alert.component.ts b/...ts/angular-sdk-library/src/lib/_components/designSystemExtension/alert/alert.component.ts
@@ -39,7 +39,8 @@ export class AlertComponent implements OnInit {
   }
 
   onCloseClick() {
-    this.onClose.emit();
+    alert("Close clicked");
+    this.onClose.emit({'Page': 'Page', 'target': 'target', 'type': 'type'});
   }
 
 }
diff --git a/.../angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.html b/.../angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.html
@@ -1,3 +1,3 @@
 <div class="psdk-pulse">
-    <app-feed-container [pConn$]="pConn$"></app-feed-container>
+  <component-mapper [name]="'FeedContainer'" [props]="{ pConn$ }"></component-mapper>
 </div>
diff --git a/...ts/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.ts b/...ts/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { FeedContainerComponent } from '../../widget/feed-container/feed-container.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 declare const window: any;
 
@@ -8,7 +9,7 @@ declare const window: any;
   templateUrl: './pulse.component.html',
   styleUrls: ['./pulse.component.scss'],
   standalone: true,
-  imports: [FeedContainerComponent]
+  imports: [FeedContainerComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class PulseComponent implements OnInit {
   @Input() pConn$: any;

diff --git a/projects/angular-sdk-library/src/lib/_components/field/date-time/date-time.component.ts b/projects/angular-sdk-library/src/lib/_components/field/date-time/date-time.component.ts
@@ -12,7 +12,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
-import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format.utls';
+import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
 import { handleEvent } from '../../../_helpers/event-util';
 
 class MyFormat {

diff --git a/projects/angular-sdk-library/src/lib/_components/field/date/date.component.ts b/projects/angular-sdk-library/src/lib/_components/field/date/date.component.ts
@@ -12,7 +12,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
-import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format.utls';
+import { dateFormatInfoDefault, getDateFormatInfo } from '../../../_helpers/date-format-utils';
 
 class MyFormat {
   constructor() {}

diff --git a/...k-library/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts b/...k-library/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts
@@ -24,7 +24,7 @@ declare const window: any;
   styleUrls: ['./flow-container.component.scss'],
   providers: [Utils],
   standalone: true,
-  imports: [CommonModule, ComponentMapperComponent, MatCardModule, forwardRef(() => AssignmentComponent)]
+  imports: [CommonModule, AssignmentComponent, MatCardModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FlowContainerComponent implements OnInit {
   @Input() pConn$: any;

diff --git a/...k-library/src/lib/_components/infra/Containers/view-container/view-container.component.ts b/...k-library/src/lib/_components/infra/Containers/view-container/view-container.component.ts
@@ -20,7 +20,7 @@ declare const window: any;
   templateUrl: './view-container.component.html',
   styleUrls: ['./view-container.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => ViewComponent), ComponentMapperComponent]
+  imports: [CommonModule, ViewComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class ViewContainerComponent implements OnInit {
   @Input() pConn$: any;

diff --git a/...ular-sdk-library/src/lib/_components/infra/assignment-card/assignment-card.component.html b/...ular-sdk-library/src/lib/_components/infra/assignment-card/assignment-card.component.html
@@ -2,8 +2,8 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
-      <app-case-create-stage *ngSwitchCase="'CaseCreateStage'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-case-create-stage>
-      <app-region *ngSwitchCase="'Region'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper *ngSwitchCase="'CaseCreateStage'" name="CaseCreateStage" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>
     </div>
   </div>

diff --git a/...ar-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.html b/...ar-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.html
@@ -1,29 +1,35 @@
-<div *ngFor="let kid of children">
-  <div *ngIf="kid.type === 'DateTime'" [formGroup]="filtersFormGroup$">
-    <mat-form-field class="psdk-full-width">
-      <mat-label>{{ kid.label }}</mat-label>
-      <mat-date-range-input [rangePicker]="picker">
-        <input matStartDate placeholder="Start date" formControlName="start" />
-        <input matEndDate placeholder="End date" formControlName="end" (dateChange)="dateRangeChangeHandler(kid)" />
-      </mat-date-range-input>
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
-    </mat-form-field>
+<div
+  [ngClass]="{
+    'psdk-block-style': inlineProps.filterPosition === 'block-start'
+  }"
+>
+  <div *ngFor="let kid of children">
+    <div *ngIf="kid.type === 'DateTime'" [formGroup]="filtersFormGroup$">
+      <mat-form-field class="psdk-full-width">
+        <mat-label>{{ kid.label }}</mat-label>
+        <mat-date-range-input [rangePicker]="picker">
+          <input matStartDate placeholder="Start date" formControlName="start" />
+          <input matEndDate placeholder="End date" formControlName="end" (dateChange)="dateRangeChangeHandler(kid)" />
+        </mat-date-range-input>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-date-range-picker #picker></mat-date-range-picker>
+      </mat-form-field>
+    </div>
+    <div *ngIf="kid.c11nEnv">
+      <span (input)="updateTmpData({ event: $event, field: kid })">
+        <component-mapper
+          [name]="kid.c11nEnv.getPConnect().getComponentName()"
+          [props]="{
+            pConn$: kid.c11nEnv.getPConnect(),
+            formGroup$: filtersFormGroup$
+          }"
+          errorMsg="Dashboard filter wants component not yet available: {{ kid.c11nEnv.getPConnect().getComponentName() }}"
+        >
+        </component-mapper>
+      </span>
+    </div>
   </div>
-  <div *ngIf="kid.c11nEnv">
-    <span (input)="updateTmpData({ event: $event, field: kid })">
-      <component-mapper
-        [name]="kid.c11nEnv.getPConnect().getComponentName()"
-        [props]="{
-          pConn$: kid.c11nEnv.getPConnect(),
-          formGroup$: filtersFormGroup$
-        }"
-        errorMsg="Dashboard filter wants component not yet available: {{ kid.c11nEnv.getPConnect().getComponentName() }}"
-      >
-      </component-mapper>
-    </span>
+  <div>
+    <button mat-button color="primary" (click)="clearFilters()">Clear All</button>
   </div>
 </div>
-<div>
-  <button mat-button color="primary" (click)="clearFilters()">Clear All</button>
-</div>
diff --git a/...ar-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.scss b/...ar-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.scss
@@ -2,6 +2,13 @@
   width: 100%;
 }
 
+.psdk-block-style {
+  display: grid;
+  direction: column-reverse;
+  gap: 1rem;
+  grid-template-columns: repeat(7, 1fr);
+}
+
 ::ng-deep .mat-mdc-form-field-subscript-wrapper {
   height: 0;
 }
diff --git a/...ular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.ts b/...ular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.ts
@@ -8,7 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
-import { getFilterExpression, getFormattedDate, createFilter, combineFilters } from '../../../_helpers/filterUtils';
+import { getFilterExpression, getFormattedDate, createFilter, combineFilters } from '../../../_helpers/filter-utils';
 
 
 @Component({

diff --git a/projects/angular-sdk-library/src/lib/_components/template/case-view/case-view.component.html b/projects/angular-sdk-library/src/lib/_components/template/case-view/case-view.component.html
@@ -54,7 +54,7 @@ <h1>{{ heading$ }}</h1>
             kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'
           "
         >
-          <app-region [pConn$]="kid.getPConnect()"></app-region>
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
         </div>
       </div>
     </div>
@@ -63,13 +63,13 @@ <h1>{{ heading$ }}</h1>
       <div
         *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
       >
-        <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
       </div>
     </div>
 
     <div *ngFor="let kid of arChildren$">
       <div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
-        <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
       </div>
     </div>
 
@@ -81,7 +81,7 @@ <h1>{{ heading$ }}</h1>
     <div *ngIf="arChildren$" class="psdk-case-view-utilities">
       <div *ngFor="let kid of arChildren$">
         <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
-          <app-region [pConn$]="kid.getPConnect()"></app-region>
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
         </div>
       </div>
     </div>

diff --git a/projects/angular-sdk-library/src/lib/_components/template/case-view/case-view.component.ts b/projects/angular-sdk-library/src/lib/_components/template/case-view/case-view.component.ts
@@ -16,7 +16,7 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   styleUrls: ['./case-view.component.scss'],
   providers: [Utils],
   standalone: true,
-  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, ComponentMapperComponent, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, RegionComponent , forwardRef(() => ComponentMapperComponent)]
 })
 export class CaseViewComponent implements OnInit {
   @Input() pConn$: any;

diff --git a/...brary/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html b/...brary/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html
@@ -1,6 +1,4 @@
-<app-material-details
-  [arFields$]="arFields$"
-  [arFields2$]="arFields2$"
-  [arHighlightedFields]="highlightedDataArr"
-  [layout]="'narrow-wide'"
-></app-material-details>
+<component-mapper
+  name="MaterialDetails"
+  [props]="{arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+></component-mapper>
diff --git a/...library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts b/...library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts
@@ -1,13 +1,14 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { MaterialDetailsComponent } from '../../designSystemExtension/material-details/material-details.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
   standalone: true,
-  imports: [MaterialDetailsComponent]
+  imports: [MaterialDetailsComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsNarrowWideComponent implements OnInit {
   constructor(private angularPConnect: AngularPConnectService) {}

diff --git a/...library/src/lib/_components/template/details-one-column/details-one-column.component.html b/...library/src/lib/_components/template/details-one-column/details-one-column.component.html
@@ -1,5 +1 @@
-<app-material-details
-  [arFields$]="arFields$"
-  [arHighlightedFields]="highlightedDataArr"
-  [layout]="'one-column'"
-></app-material-details>
+<component-mapper name="MaterialDetails" [props]="{arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
diff --git a/...k-library/src/lib/_components/template/details-one-column/details-one-column.component.ts b/...k-library/src/lib/_components/template/details-one-column/details-one-column.component.ts
@@ -1,14 +1,15 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { FormGroup } from '@angular/forms';
 import { MaterialDetailsComponent } from '../../designSystemExtension/material-details/material-details.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
   standalone: true,
-  imports: [MaterialDetailsComponent]
+  imports: [MaterialDetailsComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsOneColumnComponent implements OnInit {
   constructor(private angularPConnect: AngularPConnectService) {}