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
index 5340c7be..e4236b8e 100644
--- 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
index 11e75189..1494ff89 100644
--- 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
index 053b62bb..2549f0fe 100644
--- 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/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.html b/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.html
index 10ecec40..aa3af0ac 100644
--- a/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.html
+++ b/projects/angular-sdk-library/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/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.ts b/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.ts
index 1858c2a0..9c7fa292 100644
--- a/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.ts
+++ b/projects/angular-sdk-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/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert/alert.component.ts b/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert/alert.component.ts
index 90328dfa..e237c6f9 100644
--- a/projects/angular-sdk-library/src/lib/_components/designSystemExtension/alert/alert.component.ts
+++ b/projects/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'});
   }
 
 }
\ No newline at end of file
diff --git a/projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.html b/projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.html
index eea9564a..f78b0739 100644
--- a/projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.html
+++ b/projects/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/projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.ts b/projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.ts
index 0c863df1..ceb43bcf 100644
--- a/projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.ts
+++ b/projects/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
index 5dd4990e..57b19d90 100644
--- 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
index 0dac7934..9cdc1174 100644
--- 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/projects/angular-sdk-library/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts b/projects/angular-sdk-library/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts
index e02c12af..65929815 100644
--- a/projects/angular-sdk-library/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts
+++ b/projects/angular-sdk-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/projects/angular-sdk-library/src/lib/_components/infra/Containers/view-container/view-container.component.ts b/projects/angular-sdk-library/src/lib/_components/infra/Containers/view-container/view-container.component.ts
index 7af04480..fbb23f47 100644
--- a/projects/angular-sdk-library/src/lib/_components/infra/Containers/view-container/view-container.component.ts
+++ b/projects/angular-sdk-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/projects/angular-sdk-library/src/lib/_components/infra/assignment-card/assignment-card.component.html b/projects/angular-sdk-library/src/lib/_components/infra/assignment-card/assignment-card.component.html
index 42f49bbd..13d6248b 100644
--- a/projects/angular-sdk-library/src/lib/_components/infra/assignment-card/assignment-card.component.html
+++ b/projects/angular-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/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.html b/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.html
index 9d2f478e..f2b0dcd6 100644
--- a/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.html
+++ b/projects/angular-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/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.scss b/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.scss
index 54eac30b..6cdeddf2 100644
--- a/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.scss
+++ b/projects/angular-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/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.ts b/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.ts
index c373a246..bcabca8c 100644
--- a/projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.ts
+++ b/projects/angular-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
index 1efd22b0..01ceed36 100644
--- 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
index 2211148a..6f7f6cd3 100644
--- 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/projects/angular-sdk-library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html b/projects/angular-sdk-library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html
index e22f590a..29a2fb73 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.html
+++ b/projects/angular-sdk-library/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>
\ No newline at end of file
+<component-mapper
+  name="MaterialDetails"
+  [props]="{arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts
index c1cd41ca..42b4c5c2 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts
+++ b/projects/angular-sdk-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/projects/angular-sdk-library/src/lib/_components/template/details-one-column/details-one-column.component.html b/projects/angular-sdk-library/src/lib/_components/template/details-one-column/details-one-column.component.html
index 978798d1..da6de311 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-one-column/details-one-column.component.html
+++ b/projects/angular-sdk-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>
\ No newline at end of file
+<component-mapper name="MaterialDetails" [props]="{arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-one-column/details-one-column.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details-one-column/details-one-column.component.ts
index c69371b7..46cd67f3 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-one-column/details-one-column.component.ts
+++ b/projects/angular-sdk-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) {}
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts
index a0523968..ed0bd0db 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
-import { getTransientTabs, getVisibleTabs, tabClick } from '../../../_helpers/tabUtils';
+import { getTransientTabs, getVisibleTabs, tabClick } from '../../../_helpers/tab-utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 declare const window: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.html b/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.html
index 0fa1434c..e0401ccd 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.html
@@ -1,7 +1,4 @@
-<app-material-details
-  [arFields$]="arFields$"
-  [arFields2$]="arFields2$"
-  [arFields3$]="arFields3$"
-  [arHighlightedFields]="highlightedDataArr"
-  [layout]="'three-column'"
-></app-material-details>
\ No newline at end of file
+<component-mapper
+  name="MaterialDetails"
+  [props]="{arFields$, arFields2$, arFields3$, arHighlightedFields: highlightedDataArr, layout: 'three-column' }"
+></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.ts
index a87a4203..c12da7fd 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-three-column/details-three-column.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { MaterialDetailsComponent } from '../../designSystemExtension/material-details/material-details.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 declare const window: any;
 
@@ -10,7 +11,7 @@ declare const window: any;
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
   standalone: true,
-  imports: [MaterialDetailsComponent]
+  imports: [MaterialDetailsComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsThreeColumnComponent implements OnInit {
   constructor(private angularPConnect: AngularPConnectService) {}
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.html b/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.html
index 1c73cc38..47e6e535 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.html
@@ -1,6 +1,4 @@
-<app-material-details
-  [arFields$]="arFields$"
-  [arFields2$]="arFields2$"
-  [arHighlightedFields]="highlightedDataArr"
-  [layout]="'two-column'"
-></app-material-details>
\ No newline at end of file
+<component-mapper
+  name="MaterialDetails"
+  [props]="{arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
+></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.ts
index 177bc864..07e60312 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-two-column/details-two-column.component.ts
@@ -1,14 +1,15 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 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-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
   standalone: true,
-  imports: [MaterialDetailsComponent]
+  imports: [MaterialDetailsComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsTwoColumnComponent implements OnInit {
   constructor(private angularPConnect: AngularPConnectService) {}
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html b/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html
index 8ce282ba..67b09b00 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.html
@@ -1,6 +1,4 @@
-<app-material-details
-  [arFields$]="arFields$"
-  [arFields2$]="arFields2$"
-  [arHighlightedFields]="highlightedDataArr"
-  [layout]="'wide-narrow'"
-></app-material-details>
\ No newline at end of file
+<component-mapper
+  name="MaterialDetails"
+  [props]="{arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'wide-narrow' }"
+></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts
index a785647c..9790180c 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts
@@ -1,14 +1,15 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 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-wide-narrow',
   templateUrl: './details-wide-narrow.component.html',
   styleUrls: ['./details-wide-narrow.component.scss'],
   standalone: true,
-  imports: [MaterialDetailsComponent]
+  imports: [MaterialDetailsComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsWideNarrowComponent implements OnInit {
   constructor(private angularPConnect: AngularPConnectService) {}
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details/details.component.html b/projects/angular-sdk-library/src/lib/_components/template/details/details.component.html
index 9bab94e3..eac4b031 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details/details.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/details/details.component.html
@@ -1,7 +1,3 @@
 <div>
-  <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>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/details/details.component.ts b/projects/angular-sdk-library/src/lib/_components/template/details/details.component.ts
index f3165869..ec22de23 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/details/details.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/details/details.component.ts
@@ -1,6 +1,7 @@
-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';
 
 declare const window: any;
 
@@ -9,7 +10,7 @@ declare const window: any;
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
   standalone: true,
-  imports: [MaterialDetailsComponent]
+  imports: [MaterialDetailsComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsComponent implements OnInit {
   constructor(private angularPConnect: AngularPConnectService) {}
diff --git a/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.html b/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.html
index 1607186e..2b9aa2f3 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.html
@@ -2,7 +2,7 @@
   <b>{{ heading }}</b>
   <div>
     <div *ngIf="item.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'">
-      <app-region [pConn$]="item.children.getPConnect()" [formGroup$]="formGroup$"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: item.children.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.ts b/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.ts
index 79ef35cb..c01d594a 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/field-group-list/field-group-list.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-field-group-list',
   templateUrl: './field-group-list.component.html',
   styleUrls: ['./field-group-list.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class FieldGroupListComponent implements OnInit {
   @Input() item;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.html b/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.html
index e808504a..db75fe2d 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.html
@@ -24,7 +24,7 @@ <h3 *ngIf="showLabel$" className="label" style="font-weight: bold">
         </div>
 
         <div *ngIf="kid.children.getPConnect().getRawMetadata().type.toLowerCase() == 'region'">
-          <app-region [pConn$]="kid.children.getPConnect()" [formGroup$]="formGroup$"></app-region>
+          <component-mapper name="Region" [props]="{ pConn$: kid.children.getPConnect(), formGroup$ }"></component-mapper>
         </div>
       </div>
       <button *ngIf="allowAddEdit !== false" mat-button color="primary" style="font-size: 16px" (click)="addFieldGroupItem()">+ Add</button>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.ts b/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.ts
index 11303711..0f595a6a 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/field-group-template/field-group-template.component.ts
@@ -15,7 +15,7 @@ declare const window: any;
   templateUrl: './field-group-template.component.html',
   styleUrls: ['./field-group-template.component.scss'],
   standalone: true,
-  imports: [CommonModule, MatButtonModule, ComponentMapperComponent, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, MatButtonModule, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class FieldGroupTemplateComponent implements OnInit {
   @Input() configProps$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.html b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.html
index 658aa91e..02f702cb 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.html
@@ -1 +1 @@
-<app-inline-dashboard [inlineProps]="inlineProps" [children]="children" [filtersFormGroup$]="filtersFormGroup$"></app-inline-dashboard>
\ No newline at end of file
+<component-mapper name="InlineDashboard" [props]="{inlineProps, children, filtersFormGroup$}"></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.ts b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.ts
index 0336e687..7769a484 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.ts
@@ -3,14 +3,15 @@ import { CommonModule } from '@angular/common';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { RegionComponent } from '../../infra/region/region.component';
 import { InlineDashboardComponent } from '../inline-dashboard/inline-dashboard.component';
-import { buildFilterComponents } from '../../../_helpers/filterUtils';
+import { buildFilterComponents } from '../../../_helpers/filter-utils';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-inline-dashboard-page',
   templateUrl: './inline-dashboard-page.component.html',
   styleUrls: ['./inline-dashboard-page.component.scss'],
   standalone: true,
-  imports: [CommonModule, InlineDashboardComponent, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, InlineDashboardComponent, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardPageComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.html b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.html
index 1b460d9b..ec5c7da3 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.html
@@ -9,13 +9,7 @@ <h4 class="psdk-inline-dashboard-title">{{ inlineProps.title }}</h4>
   >
     <div class="psdk-inline-filter">
       <div id="filters">
-        <app-dashboard-filter
-          [children]="children[1]"
-          [filtersFormGroup$]="filtersFormGroup$"
-          [ngClass]="{
-            'psdk-block-style': inlineProps.filterPosition === 'block-start'
-          }"
-        ></app-dashboard-filter>
+        <component-mapper name="DashboardFilter" [props]="{ children: children[1], inlineProps, filtersFormGroup$ }"></component-mapper>
       </div>
     </div>
     <div class="psdk-inline-list">
diff --git a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.scss b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.scss
index 5e075e54..04edcf22 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.scss
+++ b/projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.scss
@@ -8,13 +8,6 @@
   font-size: 1.25rem;
 }
 
-.psdk-block-style {
-  display: grid;
-  direction: column-reverse;
-  gap: 1rem;
-  grid-template-columns: repeat(7, 1fr);
-}
-
 .psdk-not-block-style {
   display: grid;
   grid-template-columns: 3fr 7fr;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.html b/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.html
index a13dbe92..65bc1c3c 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.html
@@ -1,16 +1,16 @@
 <div class="psdk-narrow-wide-column">
   <div *ngFor="let kid of arChildren$">
     <div class="psdk-narrow-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-wide-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-narrow-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-wide-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.ts b/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.ts
index 3afae2cd..238b42e2 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/narrow-wide-form/narrow-wide-form.component.ts
@@ -2,13 +2,14 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges } from '@angular/co
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-narrow-wide-form',
   templateUrl: './narrow-wide-form.component.html',
   styleUrls: ['./narrow-wide-form.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class NarrowWideFormComponent implements OnInit {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/one-column-tab/one-column-tab.component.html b/projects/angular-sdk-library/src/lib/_components/template/one-column-tab/one-column-tab.component.html
index 93327d5d..73ab3cab 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/one-column-tab/one-column-tab.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/one-column-tab/one-column-tab.component.html
@@ -2,8 +2,8 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
-      <app-region *ngSwitchCase="'Region'" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.html b/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.html
index 0b955908..e16f6743 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.html
@@ -1,11 +1,11 @@
 <div *ngFor="let kid of arChildren$">
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'Region' && kid.getPConnect().getRawMetadata()['name'] === 'A'">
-    <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+    <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'View'">
-    <app-view [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-view>
+    <component-mapper name="View" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>
   <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'">
-    <app-case-create-stage [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-case-create-stage>
+    <component-mapper name="CaseCreateStage" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
   </div>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.ts b/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.ts
index 5d7bdf28..f89b7924 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/one-column/one-column.component.ts
@@ -4,13 +4,14 @@ import { FormGroup } from '@angular/forms';
 import { CaseCreateStageComponent } from '../../designSystemExtension/case-create-stage/case-create-stage.component';
 import { ViewComponent } from '../../infra/view/view.component';
 import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-one-column',
   templateUrl: './one-column.component.html',
   styleUrls: ['./one-column.component.scss'],
   standalone: true,
-  imports: [CommonModule, ViewComponent, CaseCreateStageComponent, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, ViewComponent, CaseCreateStageComponent, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class OneColumnComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/page/page.component.html b/projects/angular-sdk-library/src/lib/_components/template/page/page.component.html
index c44437d8..2203b54d 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/page/page.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/page/page.component.html
@@ -5,7 +5,7 @@ <h2>{{ title$ }}</h2>
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
-      <app-region *ngSwitchCase="'Region'" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>
   </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/repeating-structures/repeating-structures.component.ts b/projects/angular-sdk-library/src/lib/_components/template/repeating-structures/repeating-structures.component.ts
index e9ca411a..25d4df35 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/repeating-structures/repeating-structures.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/repeating-structures/repeating-structures.component.ts
@@ -48,7 +48,7 @@ export class RepeatingStructuresComponent implements OnInit {
     let updatedRefList = this.updateData(tableDataResults, this.fields$);
 
     this.repeatList$ = new MatTableDataSource(updatedRefList);
-    this.displayedColumns$ = this.getDisplayColums(this.fields$);
+    this.displayedColumns$ = this.getDisplayColumns(this.fields$);
     this.repeatList$.paginator = this.paginator;
   }
 
@@ -149,7 +149,7 @@ export class RepeatingStructuresComponent implements OnInit {
     }));
   }
 
-  getDisplayColums(fields = []) {
+  getDisplayColumns(fields = []) {
     return fields.map((field, colIndex) => field.name);
   }
 }
diff --git a/projects/angular-sdk-library/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts b/projects/angular-sdk-library/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts
index 8bc10349..795d9199 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts
@@ -831,7 +831,7 @@ export class SimpleTableManualComponent implements OnInit {
     return bVisible;
   }
 
-  getDisplayColums(fields = []) {
+  getDisplayColumns(fields = []) {
     let arReturn = fields.map((field, colIndex) => {
       let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
       if (theField.indexOf('.') == 0) {
diff --git a/projects/angular-sdk-library/src/lib/_components/template/sub-tabs/sub-tabs.component.ts b/projects/angular-sdk-library/src/lib/_components/template/sub-tabs/sub-tabs.component.ts
index 59a80856..336c231c 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/sub-tabs/sub-tabs.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/sub-tabs/sub-tabs.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
-import { getTransientTabs, getVisibleTabs, tabClick } from '../../../_helpers/tabUtils';
+import { getTransientTabs, getVisibleTabs, tabClick } from '../../../_helpers/tab-utils';
 import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
diff --git a/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.html b/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.html
index 043321ab..c0cefb8c 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.html
@@ -1 +1 @@
-<app-three-column [formGroup$]="formGroup$" [pConn$]="pConn$"></app-three-column>
+<component-mapper name="ThreeColumn" [props]="{pConn$, formGroup$}"></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.ts b/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.ts
index cc322da4..dd5ac83b 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/three-column-page/three-column-page.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 // import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { ThreeColumnComponent } from '../three-column/three-column.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 
 @Component({
@@ -9,7 +10,7 @@ import { ThreeColumnComponent } from '../three-column/three-column.component';
   templateUrl: './three-column-page.component.html',
   styleUrls: ['./three-column-page.component.scss'],
   standalone: true,
-  imports: [ThreeColumnComponent]
+  imports: [ThreeColumnComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class ThreeColumnPageComponent implements OnInit {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.html b/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.html
index fad04f1c..af5d6ed9 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.html
@@ -1,13 +1,13 @@
 <div class="psdk-three-column">
   <div *ngFor="let kid of arChildren$">
     <div class="psdk-three-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-three-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-three-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'c'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.ts b/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.ts
index 4797661f..bf6bff29 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/three-column/three-column.component.ts
@@ -2,13 +2,14 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-three-column',
   templateUrl: './three-column.component.html',
   styleUrls: ['./three-column.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class ThreeColumnComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.html b/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.html
index 8de39784..5fb02fb7 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.html
@@ -1,16 +1,16 @@
 <div class="psdk-two-column">
   <div *ngFor="let kid of arChildren$">
     <div class="psdk-two-column-left" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-two-column-right" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.ts b/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.ts
index 23ed90ac..7c1f1af1 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/two-column-tab/two-column-tab.component.ts
@@ -3,13 +3,14 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { RegionComponent } from '../../infra/region/region.component';
 import { ViewComponent } from '../../infra/view/view.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-two-column-tab',
   templateUrl: './two-column-tab.component.html',
   styleUrls: ['./two-column-tab.component.scss'],
   standalone: true,
-  imports: [CommonModule, RegionComponent, forwardRef(() => ViewComponent)]
+  imports: [CommonModule, RegionComponent, ViewComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class TwoColumnTabComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.html b/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.html
index 0b639153..5fb02fb7 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.html
@@ -1,16 +1,16 @@
 <div class="psdk-two-column">
   <div *ngFor="let kid of arChildren$">
     <div class="psdk-two-column-left" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-two-column-right" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.ts b/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.ts
index 1bf01333..17520003 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/two-column/two-column.component.ts
@@ -2,13 +2,14 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-two-column',
   templateUrl: './two-column.component.html',
   styleUrls: ['./two-column.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class TwoColumnComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.html b/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.html
index 6ec5bf76..c6618c90 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.html
@@ -1,16 +1,16 @@
 <div class="psdk-narrow-wide-column">
   <div *ngFor="let kid of arChildren$">
     <div class="psdk-wide-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-narrow-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-wide-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
     <div class="psdk-narrow-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
-      <app-region [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-region>
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
     </div>
   </div>
 </div>
diff --git a/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts b/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts
index 8175851e..8633a25e 100644
--- a/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts
@@ -2,13 +2,14 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-wide-narrow-form',
   templateUrl: './wide-narrow-form.component.html',
   styleUrls: ['./wide-narrow-form.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => RegionComponent)]
+  imports: [CommonModule, RegionComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class WideNarrowFormComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_components/widget/case-history/case-history.component.ts b/projects/angular-sdk-library/src/lib/_components/widget/case-history/case-history.component.ts
index 384a44b1..04f520f7 100644
--- a/projects/angular-sdk-library/src/lib/_components/widget/case-history/case-history.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/widget/case-history/case-history.component.ts
@@ -49,7 +49,7 @@ export class CaseHistoryComponent implements OnInit {
 
       const tableDataResults = this.updateData(historyJSON['data'].data, this.fields$);
 
-      this.displayedColumns$ = this.getDisplayColums(this.fields$);
+      this.displayedColumns$ = this.getDisplayColumns(this.fields$);
 
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
@@ -96,7 +96,7 @@ export class CaseHistoryComponent implements OnInit {
     return returnList;
   }
 
-  getDisplayColums(fields = []) {
+  getDisplayColumns(fields = []) {
     let arReturn = fields.map((field, colIndex) => {
       let theField = field.fieldName;
 
diff --git a/projects/angular-sdk-library/src/lib/_components/widget/file-utility/file-utility.component.html b/projects/angular-sdk-library/src/lib/_components/widget/file-utility/file-utility.component.html
index a0a3cfdb..411dd763 100644
--- a/projects/angular-sdk-library/src/lib/_components/widget/file-utility/file-utility.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/widget/file-utility/file-utility.component.html
@@ -1,13 +1,16 @@
 <div>
-  <app-list-utility
-    [name$]="lu_name$"
-    [icon$]="lu_icon$"
-    [bLoading$]="lu_bLoading$"
-    [count$]="lu_count$"
-    [arActions$]="lu_arActions$"
-    [arItems$]="lu_arItems$"
-    [onViewAll$]="lu_onViewAllFunction"
-  ></app-list-utility>
+  <component-mapper
+    name="ListUtility"
+    [props]="{
+      name$: lu_name$,
+      icon$: lu_icon$,
+      bLoading$: lu_bLoading$,
+      count$: lu_count$,
+      arActions$: lu_arActions$,
+      arItems$: lu_arItems$,
+      onViewAll$: lu_onViewAllFunction
+    }"
+  ></component-mapper>
 </div>
 
 <div *ngIf="bShowFileModal$" class="psdk-dialog-background">
diff --git a/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.html b/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.html
index 87b55dca..124c2965 100644
--- a/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.html
+++ b/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.html
@@ -1,6 +1 @@
-<app-material-utility
-  [headerText$]="headerText$"
-  [headerIcon$]="headerIcon$"
-  [headerIconUrl$]="headerIconUrl$"
-  [noItemsMessage$]="noItemsMessage$"
-></app-material-utility>
+<component-mapper name="MaterialUtility" [props]="{headerText$, headerIcon$, headerIconUrl$, noItemsMessage$}"></component-mapper>
diff --git a/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.ts b/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.ts
index af8ae575..bc6577e7 100644
--- a/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.ts
+++ b/projects/angular-sdk-library/src/lib/_components/widget/utility/utility.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
 import { Utils } from '../../../_helpers/utils';
 import { MaterialUtilityComponent } from '../../designSystemExtension/material-utility/material-utility.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 declare const window: any;
 
@@ -9,7 +10,7 @@ declare const window: any;
   templateUrl: './utility.component.html',
   styleUrls: ['./utility.component.scss'],
   standalone: true,
-  imports: [MaterialUtilityComponent]
+  imports: [MaterialUtilityComponent, forwardRef(() => ComponentMapperComponent)]
 })
 export class UtilityComponent implements OnInit, OnChanges {
   @Input() pConn$: any;
diff --git a/projects/angular-sdk-library/src/lib/_helpers/date-format.utls.ts b/projects/angular-sdk-library/src/lib/_helpers/date-format-utils.ts
similarity index 100%
rename from projects/angular-sdk-library/src/lib/_helpers/date-format.utls.ts
rename to projects/angular-sdk-library/src/lib/_helpers/date-format-utils.ts
diff --git a/projects/angular-sdk-library/src/lib/_helpers/filterUtils.ts b/projects/angular-sdk-library/src/lib/_helpers/filter-utils.ts
similarity index 100%
rename from projects/angular-sdk-library/src/lib/_helpers/filterUtils.ts
rename to projects/angular-sdk-library/src/lib/_helpers/filter-utils.ts
diff --git a/projects/angular-sdk-library/src/lib/_helpers/tabUtils.ts b/projects/angular-sdk-library/src/lib/_helpers/tab-utils.ts
similarity index 100%
rename from projects/angular-sdk-library/src/lib/_helpers/tabUtils.ts
rename to projects/angular-sdk-library/src/lib/_helpers/tab-utils.ts
diff --git a/projects/angular-sdk-library/src/lib/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts b/projects/angular-sdk-library/src/lib/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts
index 8d834474..6b4a00eb 100644
--- a/projects/angular-sdk-library/src/lib/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts
+++ b/projects/angular-sdk-library/src/lib/_samples/full-portal/top-app-mashup/top-app-mashup.component.ts
@@ -15,22 +15,25 @@ declare global {
   interface Window {
     PCore: {
       onPCoreReady: Function;
-      createPConnect: Function;
-      getStore(): any;
-      getConstants(): any;
-      setBehaviorOverrides: Function;
-      setBehaviorOverride: Function;
-      getBehaviorOverrides: Function;
-      getAttachmentUtils: Function;
-      getDataApiUtils: Function;
-      getAssetLoader: Function;
-      getEnvironmentInfo: Function;
-      getPubSubUtils(): any;
-      getUserApi(): any;
-      getAuthUtils(): any;
-      registerComponentCreator(c11nPropObject): Function;
-      getMessageManager: Function;
-      getLocaleUtils: any;
+          createPConnect: Function;
+          getComponentsRegistry: Function;
+          checkIfSemanticURL: Function;
+          isValidSemanticURL: Function;
+          getConstants(): any;
+          setBehaviorOverrides: Function;
+          getAttachmentUtils: Function;
+          getDataApiUtils: Function;
+          getAssetLoader: Function;
+          getEnvironmentInfo: Function;
+          getPubSubUtils(): any;
+          getUserApi(): any;
+          getAuthUtils(): any;
+          registerComponentCreator(c11nPropObject: any): Function;
+          getMessageManager: Function;
+          getLocaleUtils: any;
+          setBehaviorOverride: Function;
+          populateAdditionalProps: Function;
+          getStore: Function;
     };
     myLoadPortal: Function;
     myLoadDefaultPortal: Function;
diff --git a/projects/angular-sdk-library/src/public-api.ts b/projects/angular-sdk-library/src/public-api.ts
index fa52a01a..621da39f 100644
--- a/projects/angular-sdk-library/src/public-api.ts
+++ b/projects/angular-sdk-library/src/public-api.ts
@@ -119,6 +119,8 @@ export * from './lib/_components/designSystemExtension/material-vertical-tabs/ma
 export * from './lib/_components/designSystemExtension/operator/operator.component';
 export * from './lib/_components/designSystemExtension/pulse/pulse.component';
 
+export * from './lib/_directives/thousand-seperator.directive';
+
 export * from './lib/_services/server-config.service';
 export * from './lib/_services/auth.service';
 export * from './lib/_services/case.service';
@@ -126,13 +128,15 @@ export * from './lib/_services/datapage.service';
 export * from './lib/_services/endpoints';
 
 export * from './lib/_helpers/case-utils';
+export * from './lib/_helpers/currency-utils';
+export * from './lib/_helpers/date-format-utils';
 export * from './lib/_helpers/event-util';
 export * from './lib/_helpers/field-group-utils';
-export * from './lib/_helpers/tabUtils';
+export * from './lib/_helpers/tab-utils';
 export * from './lib/_helpers/template-utils';
 export * from './lib/_helpers/utils';
 export * from './lib/_helpers/versionHelpers';
-export * from './lib/_helpers/filterUtils';
+export * from './lib/_helpers/filter-utils';
 
 export * from './lib/_messages/error-messages.service';
 export * from './lib/_messages/get-login-status.service';