Merge pull request #86 from pegasystems/mod/tor/US-584204

Get all the overrides working and fix issues in the tests

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);
 

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();
 

projects/angular-sdk-library/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -1,5 +1,3 @@
-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 +84,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 +93,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 +111,7 @@ import { ScalarListComponent } from '../../_components/field/scalar-list/scalar-
 
 const pegaSdkComponentMap = {
   ActionButtons: ActionButtonsComponent,
+  Alert: AlertComponent,
   AlertBanner: AlertBannerComponent,
   //   'ActionButtonsForFileUtil': ActionButtonsForFileUtil,
   AppAnnouncement: AppAnnouncementComponent,
@@ -117,6 +123,7 @@ const pegaSdkComponentMap = {
   Banner: BannerComponent,
   BannerPage: BannerPageComponent,
   CancelAlert: CancelAlertComponent,
+  CaseCreateStage: CaseCreateStageComponent,
   CaseHistory: CaseHistoryComponent,
   CaseSummary: CaseSummaryComponent,
   CaseSummaryFields: MaterialCaseSummaryComponent,
@@ -125,7 +132,7 @@ const pegaSdkComponentMap = {
   Checkbox: CheckBoxComponent,
   Confirmation: ConfirmationComponent,
   Currency: CurrencyComponent,
-  //   'DashboardFilter': DashboardFilter,
+  DashboardFilter: DashboardFilterComponent,
   DataReference: DataReferenceComponent,
   Date: DateComponent,
   DateTime: DateTimeComponent,
@@ -141,6 +148,7 @@ const pegaSdkComponentMap = {
   Dropdown: DropdownComponent,
   Email: EmailComponent,
   ErrorBoundary: ErrorBoundaryComponent,
+  FeedContainer: FeedContainerComponent,
   FieldGroupList: FieldGroupListComponent,
   FieldGroupTemplate: FieldGroupTemplateComponent,
   FieldValueList: FieldValueListComponent,
@@ -152,8 +160,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,

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>

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',

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'});
   }
 
 }

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>

projects/angular-sdk-library/src/lib/_components/designSystemExtension/pulse/pulse.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { FeedContainerComponent } from '../../widget/feed-container/feed-container.component';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 declare const window: any;
 
@@ -8,7 +8,7 @@ declare const window: any;
   templateUrl: './pulse.component.html',
   styleUrls: ['./pulse.component.scss'],
   standalone: true,
-  imports: [FeedContainerComponent]
+  imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class PulseComponent implements OnInit {
   @Input() pConn$: any;

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 {

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() {}

projects/angular-sdk-library/src/lib/_components/field/user-reference/user-reference.component.ts

@@ -8,7 +8,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
-import { OperatorComponent } from '../../designSystemExtension/operator/operator.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 declare const window: any;
@@ -24,7 +23,6 @@ const SEARCH_BOX = 'Search box';
   standalone: true,
   imports: [
     CommonModule,
-    OperatorComponent,
     ReactiveFormsModule,
     MatFormFieldModule,
     MatSelectModule,

projects/angular-sdk-library/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts

@@ -6,7 +6,6 @@ import { AngularPConnectService } from '../../../../_bridge/angular-pconnect';
 import { ProgressSpinnerService } from '../../../../_messages/progress-spinner.service';
 import { ReferenceComponent } from '../../reference/reference.component';
 import { Utils } from '../../../../_helpers/utils';
-import { AssignmentComponent } from '../../assignment/assignment.component';
 import { getToDoAssignments, showBanner } from './helpers';
 import { ComponentMapperComponent } from '../../../../_bridge/component-mapper/component-mapper.component';
 
@@ -24,7 +23,7 @@ declare const window: any;
   styleUrls: ['./flow-container.component.scss'],
   providers: [Utils],
   standalone: true,
-  imports: [CommonModule, ComponentMapperComponent, MatCardModule, forwardRef(() => AssignmentComponent)]
+  imports: [CommonModule, MatCardModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FlowContainerComponent implements OnInit {
   @Input() pConn$: any;

projects/angular-sdk-library/src/lib/_components/infra/Containers/hybrid-view-container/hybrid-view-container.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 
 /**
@@ -13,7 +14,8 @@ import { FormGroup } from '@angular/forms';
   selector: 'app-hybrid-view-container',
   templateUrl: './hybrid-view-container.component.html',
   styleUrls: ['./hybrid-view-container.component.scss'],
-  standalone: true
+  standalone: true,
+  imports: [CommonModule]
 })
 export class HybridViewContainerComponent implements OnInit {
   @Input() pConn$: any;

projects/angular-sdk-library/src/lib/_components/infra/Containers/view-container/view-container.component.ts

@@ -4,7 +4,6 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectService } from '../../../../_bridge/angular-pconnect';
 import { ProgressSpinnerService } from '../../../../_messages/progress-spinner.service';
 import { ReferenceComponent } from '../../reference/reference.component';
-import { ViewComponent } from '../../view/view.component';
 import { ComponentMapperComponent } from '../../../../_bridge/component-mapper/component-mapper.component';
 
 /**
@@ -20,7 +19,7 @@ declare const window: any;
   templateUrl: './view-container.component.html',
   styleUrls: ['./view-container.component.scss'],
   standalone: true,
-  imports: [CommonModule, forwardRef(() => ViewComponent), ComponentMapperComponent]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ViewContainerComponent implements OnInit {
   @Input() pConn$: any;

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>

projects/angular-sdk-library/src/lib/_components/infra/assignment-card/assignment-card.component.ts

@@ -2,16 +2,14 @@ import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@ang
 import { CommonModule } from '@angular/common';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ReferenceComponent } from '../reference/reference.component';
-import { RegionComponent } from '../region/region.component';
-import { CaseCreateStageComponent } from '../../designSystemExtension/case-create-stage/case-create-stage.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({
   selector: 'app-assignment-card',
   templateUrl: './assignment-card.component.html',
   styleUrls: ['./assignment-card.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, CaseCreateStageComponent, RegionComponent, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AssignmentCardComponent implements OnInit {
   @Input() pConn$: any;

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>

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;
 }

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({

projects/angular-sdk-library/src/lib/_components/infra/region/region.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '../reference/reference.component';
-// import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
 @Component({