@pega/dx-component-builder-sdk 23.1.10 → 23.1.12

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-summary/case-summary.component.scss

@@ -0,0 +1,42 @@
+.psdk-case-summary-info-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.psdk-case-summary-data {
+  flex: 1;
+}
+
+.psdk-case-view-label {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(0.2em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(0.2em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-label-readonly {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-status {
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
+  padding: 0;
+  margin-top: 0.625rem;
+  width: fit-content;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-summary/case-summary.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CaseSummaryComponent } from './case-summary.component';
+
+describe('CaseSummaryComponent', () => {
+  let component: CaseSummaryComponent;
+  let fixture: ComponentFixture<CaseSummaryComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CaseSummaryComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaseSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-summary/case-summary.component.ts

@@ -0,0 +1,100 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface CaseSummaryProps {
+  // If any, enter additional props that only exist on this component
+  status?: string;
+  showStatus?: boolean;
+  template?: string;
+  readOnly?: boolean;
+}
+
+@Component({
+  selector: 'app-case-summary',
+  templateUrl: './case-summary.component.html',
+  styleUrls: ['./case-summary.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: CaseSummaryProps;
+
+  arChildren$: any[];
+
+  status$?: string;
+  bShowStatus$?: boolean;
+  primaryFields$: any[] = [];
+  secondaryFields$: any[] = [];
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.initComponent();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  initComponent() {
+    // dereference the View in case the incoming pConn$ is a 'reference'
+    this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+
+    // Then, continue on with other initialization
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+
+    this.generatePrimaryAndSecondaryFields();
+
+    this.status$ = this.configProps$.status;
+    this.bShowStatus$ = this.configProps$.showStatus;
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.generatePrimaryAndSecondaryFields();
+  }
+
+  ngOnChanges() {
+    this.initComponent();
+  }
+
+  generatePrimaryAndSecondaryFields() {
+    this.primaryFields$ = [];
+    this.secondaryFields$ = [];
+
+    for (const oField of this.arChildren$[0].getPConnect().getChildren()) {
+      const kid = oField.getPConnect();
+      this.primaryFields$.push(kid.resolveConfigProps(kid.getRawMetadata()));
+    }
+
+    for (const oField of this.arChildren$[1].getPConnect().getChildren()) {
+      const kid = oField.getPConnect();
+      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid });
+    }
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.html

@@ -0,0 +1,89 @@
+<div class="psdk-case-view" id="case-view">
+  <div *ngIf="!displayOnlyFA$" class="psdk-case-view-info">
+    <mat-toolbar color="primary" class="psdk-case-view-toolbar">
+      <mat-toolbar-row style="padding-left: 1rem">
+        <div class="psdk-case-icon-div">
+          <img class="psdk-case-svg-icon" src="{{ svgCase$ }}" />
+        </div>
+        <div class="psdk-case-view-heading">
+          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
+          <div>
+            <h1>{{ heading$ }}</h1>
+          </div>
+        </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+
+    <div class="psdk-case-view-buttons">
+      <button *ngIf="editAction" mat-raised-button color="secondary" (click)="_editClick()">{{ localizedVal('Edit', localeCategory) }}</button>
+      <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
+      <mat-menu #actionMenu="matMenu" overlapTrigger="false">
+        <ng-container *ngFor="let action of arAvailableActions$">
+          <button mat-menu-item (click)="_menuActionClick(action)">
+            {{ localizedVal(action.name, '', localeKey) }}
+          </button>
+        </ng-container>
+        <ng-container *ngFor="let process of arAvailabeProcesses$">
+          <button mat-menu-item (click)="_menuProcessClick(process)">
+            {{ process.name }}
+          </button>
+        </ng-container>
+      </mat-menu>
+    </div>
+
+    <div class="psdk-case-view-divider"></div>
+
+    <div class="psdk-case-view-summary">
+      <component-mapper name="CaseSummary" [props]="{ pConn$: caseSummaryPConn$ }"></component-mapper>
+    </div>
+
+    <component-mapper
+      *ngIf="caseTabs$.length > 1"
+      name="VerticalTabs"
+      [props]="{ tabConfig$: caseTabs$ }"
+      [parent]="this"
+      [outputEvents]="{ tabClick: onTabClick }"
+    ></component-mapper>
+  </div>
+  <div class="psdk-case-view-main">
+    <div *ngIf="!displayOnlyFA$">
+      <div *ngFor="let kid of arChildren$">
+        <div
+          *ngIf="
+            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'
+          "
+        >
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+        </div>
+      </div>
+    </div>
+
+    <div *ngFor="let kid of arChildren$">
+      <div
+        *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
+      >
+        <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'">
+        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+      </div>
+    </div>
+
+    <div *ngIf="!displayOnlyFA$">
+      <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
+    </div>
+  </div>
+  <div *ngIf="!displayOnlyFA$">
+    <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'">
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.scss

@@ -0,0 +1,105 @@
+h1 {
+  font-size: 1.1rem;
+  line-height: 1.3rem;
+}
+
+::ng-deep .mat-mdc-menu-panel {
+  overflow: unset;
+  max-width: unset;
+}
+
+.psdk-case-view-label {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(0.2em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(0.2em) scale(0.75);
+  width: 133.33333%;
+  border-radius: 0.6125rem;
+}
+
+.psdk-case-view {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.ng-case-view-toolbar {
+  padding: 0.625rem 0.625rem;
+}
+
+.psdk-case-icon-div {
+  background-color: var(--app-primary-dark-color);
+  border-radius: 1rem;
+  padding: 0.5rem 0.3rem 0.3rem 0.3rem;
+}
+.psdk-case-svg-icon {
+  width: 2rem;
+  padding: 0rem 0.3125rem;
+  filter: var(--app-white-color-filter);
+}
+
+.psdk-case-view-info-box {
+  display: flex;
+  flex-direction: row;
+  padding: 0rem 0.3125rem 0rem 0rem;
+}
+
+.psdk-case-view-info {
+  flex: 0 0 auto;
+  width: 25rem;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%; /* Should be removed. Only for demonstration */
+  background-color: var(--app-form-color);
+}
+
+.psdk-case-view-main {
+  flex-grow: 2;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%; /* Should be removed. Only for demonstration */
+}
+
+.psdk-case-view-summary {
+  padding-left: 0.75rem;
+}
+
+.psdk-case-view-heading {
+  display: block;
+  text-align: left;
+  padding-left: 0.5rem;
+  padding-bottom: 0;
+  padding-top: 5px;
+}
+.psdk-case-view-heading-id {
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+.psdk-case-view-buttons {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.3125rem;
+}
+
+.psdk-case-view-utilities {
+  width: 21.875rem;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%; /* Should be removed. Only for demonstration */
+}
+
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-status {
+  padding: 0.3125rem 0.3125rem;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
+  width: fit-content;
+  margin: 0.625rem;
+}
+
+button {
+  margin: 0rem 0.3125rem;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CaseViewComponent } from './case-view.component';
+
+describe('CaseViewComponent', () => {
+  let component: CaseViewComponent;
+  let fixture: ComponentFixture<CaseViewComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CaseViewComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaseViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.ts

@@ -0,0 +1,242 @@
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { interval } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface CaseViewProps {
+  // If any, enter additional props that only exist on this component
+  icon: string;
+  subheader: string;
+  header: string;
+}
+
+@Component({
+  selector: 'app-case-view',
+  templateUrl: './case-view.component.html',
+  styleUrls: ['./case-view.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class CaseViewComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() displayOnlyFA$: boolean;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: CaseViewProps;
+
+  arChildren$: any[];
+
+  heading$ = '';
+  id$ = '';
+  status$ = '';
+  caseTabs$: any[] = [];
+  svgCase$: string;
+  tabData$: any;
+
+  mainTabs: any;
+  mainTabData: any;
+
+  arAvailableActions$: any[] = [];
+  arAvailabeProcesses$: any[] = [];
+
+  caseSummaryPConn$: any;
+  currentCaseID = '';
+  editAction: boolean;
+  bHasNewAttachments = false;
+  localizedVal: any;
+  localeCategory = 'CaseView';
+  localeKey: string;
+
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // this.updateSelf();
+    this.checkAndUpdate();
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    //    AND removing the "gate" that was put there since shouldComponentUpdate
+    //      should be the real "gate"
+    if (bUpdateSelf) {
+      // generally, don't want to refresh everything when data changes in caseView, it is usually the
+      // case summary.  But check if the case ID changes, this means a different case and we should
+      // update all.
+      if (this.hasCaseIDChanged()) {
+        this.fullUpdate();
+
+        // update okToInitFlowContainer, because case view was drawn, flow container will need to be init
+        // to match Nebula/Constellation
+        sessionStorage.setItem('okToInitFlowContainer', 'true');
+      } else {
+        this.updateHeaderAndSummary();
+      }
+    }
+  }
+
+  hasCaseIDChanged(): boolean {
+    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
+    if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
+      // @ts-ignore - parameter “contextName” for getDataObject method should be optional
+      this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
+      return true;
+    }
+    return false;
+  }
+
+  updateHeaderAndSummary() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
+    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
+    const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
+
+    if (hasNewAttachments !== this.bHasNewAttachments) {
+      this.bHasNewAttachments = hasNewAttachments;
+      if (this.bHasNewAttachments) {
+        // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
+        PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+      }
+    }
+
+    const kids = this.pConn$.getChildren() as any[];
+    for (const kid of kids) {
+      const meta = kid.getPConnect().getRawMetadata();
+      if (meta.type.toLowerCase() == 'region' && meta.name.toLowerCase() == 'summary') {
+        this.caseSummaryPConn$ = kid.getPConnect().getChildren()[0].getPConnect();
+      }
+    }
+
+    // have to put in a timeout, otherwise get an angular change event error
+    const timer = interval(100).subscribe(() => {
+      timer.unsubscribe();
+
+      this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
+      this.id$ = this.configProps$.subheader;
+      // @ts-ignore - second parameter pageReference for getValue method should be optional
+      this.status$ = this.pConn$.getValue('.pyStatusWork');
+    });
+  }
+
+  fullUpdate() {
+    this.caseTabs$ = [];
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
+    // let caseTypeID = this.configProps$.ruleClass;
+    // let caseTypeName = this.configProps$.header;
+    // this.localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
+    this.localeKey = `${this.pConn$.getCaseInfo().getClassName()}!CASE!${this.pConn$.getCaseInfo().getName()}`.toUpperCase();
+    this.updateHeaderAndSummary();
+
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+
+    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
+    const caseInfo = this.pConn$.getDataObject().caseInfo;
+    this.currentCaseID = caseInfo.ID;
+    this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
+    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
+    this.arAvailabeProcesses$ = caseInfo?.availableProcesses ? caseInfo.availableProcesses : [];
+
+    this.svgCase$ = this.utils.getImageSrc(this.configProps$.icon, this.utils.getSDKStaticContentUrl());
+
+    // this.utils.consoleKidDump(this.pConn$);
+
+    if (!this.displayOnlyFA$) {
+      for (const kid of this.arChildren$) {
+        const kidPConn = kid.getPConnect();
+        if (kidPConn.getRawMetadata().name == 'Tabs') {
+          this.mainTabs = kid;
+          this.mainTabData = this.mainTabs.getPConnect().getChildren();
+        }
+      }
+
+      this.generateTabsData();
+    }
+  }
+
+  generateTabsData() {
+    this.mainTabs
+      .getPConnect()
+      .getChildren()
+      ?.forEach((child, i) => {
+        const config = child.getPConnect().resolveConfigProps(child.getPConnect().getRawMetadata()).config;
+        let { label } = config;
+        const { inheritedProps, visibility } = config;
+        // For some tabs, "label" property is not avaialable in theTabCompConfig, so will get them from inheritedProps
+        if (!label) {
+          inheritedProps.forEach((inheritedProp: any) => {
+            if (inheritedProp.prop === 'label') {
+              label = inheritedProp.value;
+            }
+          });
+        }
+        // We'll display the tabs when either visibility property doesn't exist or is true(if exists)
+        if (visibility === undefined || visibility === true) {
+          this.caseTabs$.push({ name: label, id: i });
+          // To make first visible tab display at the beginning
+          if (!this.tabData$) {
+            this.tabData$ = { type: 'DeferLoad', config: child.getPConnect().getRawMetadata().config };
+          }
+        }
+      });
+  }
+
+  updateSelf() {
+    this.fullUpdate();
+  }
+
+  onTabClick(tab: any) {
+    this.tabData$ = this.mainTabData[tab].getPConnect().getRawMetadata();
+    this.cdRef.detectChanges();
+  }
+
+  _editClick() {
+    const editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
+  }
+
+  _menuActionClick(data) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(data.ID, { ...data, containerName: 'modal', type: 'express' });
+  }
+
+  _menuProcessClick(data) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openProcessAction = actionsAPI.openProcessAction.bind(actionsAPI);
+
+    openProcessAction(data.ID, { ...data });
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/confirmation/confirmation.component.html

@@ -0,0 +1,23 @@
+<div>
+  <div *ngIf="showConfirmView">
+    <h2 id="confirm-label" class="confirm-label">{{ label }}</h2>
+    <div *ngIf="showDetails">
+      <component-mapper name="Details" [props]="{ pConn$ }"></component-mapper>
+    </div>
+    <div *ngIf="showTasks && toDoList?.length > 0">
+      <component-mapper
+        name="Todo"
+        [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Open Tasks', type$: CONSTS.TODO, isConfirm: true }"
+      ></component-mapper>
+    </div>
+    <div class="done-button">
+      <button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
+    </div>
+  </div>
+  <div *ngIf="toDoList?.length > 0">
+    <component-mapper
+      name="Todo"
+      [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }"
+    ></component-mapper>
+  </div>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/template/confirmation/confirmation.component.scss

@@ -0,0 +1,10 @@
+.done-button {
+  justify-content: flex-end;
+  display: flex;
+  padding-bottom: 1rem;
+}
+
+.confirm-label {
+  padding: 0px 16px;
+  margin: 0px;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/confirmation/confirmation.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfirmationComponent } from './confirmation.component';
+
+describe('ConfirmationComponent', () => {
+  let component: ConfirmationComponent;
+  let fixture: ComponentFixture<ConfirmationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ConfirmationComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});