@pega/angular-sdk-overrides 0.23.1

package/lib/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-material-case-summary',
+  templateUrl: './material-case-summary.component.html',
+  styleUrls: ['./material-case-summary.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
+  @Input() status$: string;
+  @Input() bShowStatus$: boolean;
+  @Input() primaryFields$: any[];
+  @Input() secondaryFields$: any[];
+
+  primaryFieldsWithStatus$: any[];
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    this.updatePrimaryWithStatus();
+    this.updateLabelAndDate(this.primaryFieldsWithStatus$);
+    this.updateLabelAndDate(this.secondaryFields$);
+  }
+
+  // eslint-disable-next-line sonarjs/no-identical-functions
+  ngOnChanges() {
+    this.updatePrimaryWithStatus();
+    this.updateLabelAndDate(this.primaryFieldsWithStatus$);
+    this.updateLabelAndDate(this.secondaryFields$);
+  }
+
+  updateLabelAndDate(arData: any[]) {
+    for (const field of arData) {
+      switch (field.type.toLowerCase()) {
+        case 'caseoperator':
+          if (field.config.label.toLowerCase() == 'create operator') {
+            field.config.displayLabel = field.config.createLabel;
+          } else if (field.config.label.toLowerCase() == 'update operator') {
+            field.config.displayLabel = field.config.updateLabel;
+          }
+          break;
+        case 'date':
+          field.config.value = this.utils.generateDate(field.config.value, 'Date-Long');
+          break;
+        case 'userreference':
+        case 'decimal':
+        case 'dropdown':
+          field.config.displayLabel = field.config.label;
+          break;
+        case 'checkbox':
+          field.config.displayLabel = field.config.caption;
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  updatePrimaryWithStatus() {
+    this.primaryFieldsWithStatus$ = [];
+    for (const prim of this.primaryFields$) {
+      this.primaryFieldsWithStatus$.push(prim);
+    }
+
+    if (this.bShowStatus$) {
+      const oStatus = { type: 'status', config: { value: this.status$, label: 'Status' } };
+
+      const count = this.primaryFieldsWithStatus$.length;
+      if (count < 2) {
+        this.primaryFieldsWithStatus$.push(oStatus);
+      } else {
+        this.primaryFieldsWithStatus$.splice(1, 0, oStatus);
+      }
+    }
+  }
+}

package/lib/designSystemExtension/material-details/material-details.component.html

@@ -0,0 +1,40 @@
+<div id="details-fields-list">
+  <div
+    *ngIf="arHighlightedFields && arHighlightedFields.length > 0"
+    [ngClass]="{
+      'psdk-grid-filter-1': this.layout === 'one-column',
+      'psdk-grid-filter-2': this.layout === 'two-column',
+      'psdk-grid-filter-3': this.layout === 'three-column',
+      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
+      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
+    }"
+  >
+    <div *ngFor="let field of arHighlightedFields">
+      <div class="psdk-details-fields-label">
+        {{ field.config.label }}
+      </div>
+      <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
+        <span *ngSwitchCase="'textinput'" class="psdk-details-text-style-hf">{{ _getValue(field.config.value) }}</span>
+        <span *ngSwitchCase="'status'" class="psdk-details-status-style-hf">{{ _getValue(field.config.value) }}</span>
+        <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
+        <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
+        <span *ngSwitchCase="'date'" class="psdk-details-text-style-hf">{{ _formatDate(field.config.value, field.type) }}</span>
+        <span *ngSwitchCase="'caseoperator'"></span>
+        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
+      </div>
+    </div>
+  </div>
+  <div
+    [ngClass]="{
+      'psdk-grid-filter-1': this.layout === 'one-column',
+      'psdk-grid-filter-2': this.layout === 'two-column',
+      'psdk-grid-filter-3': this.layout === 'three-column',
+      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
+      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
+    }"
+  >
+    <component-mapper *ngIf="arFields$" name="DetailsFields" [props]="{ arFields$: arFields$ }"></component-mapper>
+    <component-mapper *ngIf="arFields2$" name="DetailsFields" [props]="{ arFields$: arFields2$ }"></component-mapper>
+    <component-mapper *ngIf="arFields3$" name="DetailsFields" [props]="{ arFields$: arFields3$ }"></component-mapper>
+  </div>
+</div>

package/lib/designSystemExtension/material-details/material-details.component.scss

@@ -0,0 +1,121 @@
+.psdk-details-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.psdk-details-fields {
+  padding: calc(2 * 0.5rem);
+  grid-row-gap: calc(2 * 0.5rem);
+}
+
+.psdk-details-fields-primary {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-column-gap: calc(2 * 0.5rem);
+  grid-row-gap: calc(1 * 0.5rem);
+}
+
+.psdk-details-fields-single {
+  display: grid;
+  grid-template-columns: 20ch 1fr;
+  grid-column-gap: calc(2 * 0.5rem);
+}
+
+.psdk-details-fields-label {
+  color: rgba(0, 0, 0, 0.54);
+  margin: 8px 0px;
+}
+
+.psdk-details-fields-value {
+  word-break: break-word;
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+
+span.psdk-details-text-style-hf {
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+
+span.psdk-details-text-style {
+  font-weight: 400;
+}
+
+span.psdk-details-status-style {
+  background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67;
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-csf-primary-field-value {
+  margin: 8px 0;
+}
+
+span.psdk-details-status-style-hf {
+  background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67;
+  display: inline-block;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-wide-narrow {
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-narrow-wide {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/lib/designSystemExtension/material-details/material-details.component.spec.ts

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

package/lib/designSystemExtension/material-details/material-details.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-material-details',
+  templateUrl: './material-details.component.html',
+  styleUrls: ['./material-details.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class MaterialDetailsComponent {
+  constructor(private utils: Utils) {}
+
+  @Input() arFields$: any[];
+  @Input() arFields2$: any[];
+  @Input() arFields3$: any[];
+  @Input() arHighlightedFields: any[];
+  @Input() layout: any;
+
+  _getValue(configValue) {
+    if (configValue && configValue != '') {
+      return configValue;
+    }
+    return '---';
+  }
+
+  _formatDate(dateValue: string, dateFormat: string): string {
+    return this.utils.generateDate(dateValue, dateFormat);
+  }
+}

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -0,0 +1,23 @@
+<div id="details-fields-list">
+  <div *ngFor="let field of arFields$">
+    <div *ngIf="field.type === 'reference'; else showDetails">
+      <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+    </div>
+    <ng-template #showDetails>
+      <div class="psdk-grid-filter" *ngIf="field.config.label">
+        <div class="psdk-details-fields-label">
+          {{ field.config.label }}
+        </div>
+        <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
+          <span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
+          <span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
+          <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
+          <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
+          <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
+          <span *ngSwitchCase="'caseoperator'"></span>
+          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
+        </div>
+      </div>
+    </ng-template>
+  </div>
+</div>

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.scss

@@ -0,0 +1,33 @@
+.psdk-details-fields-label {
+  color: rgba(0, 0, 0, 0.54);
+  margin: 8px 0px;
+}
+
+span.psdk-details-text-style-hf {
+  font-weight: bold;
+}
+
+span.psdk-details-status-style-hf {
+  background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67;
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-csf-primary-field-value {
+  margin: 8px 0;
+}

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts

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

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { Utils } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-material-details-fields',
+  templateUrl: './material-details-fields.component.html',
+  styleUrls: ['./material-details-fields.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class MaterialDetailsFieldsComponent {
+  constructor(private utils: Utils) {}
+
+  @Input() arFields$: any[];
+  @Input() arHighlightedFields: any[];
+
+  _getValue(configValue) {
+    if (configValue && configValue != '') {
+      return configValue;
+    }
+    return '---';
+  }
+
+  _formatDate(dateValue: string, dateFormat: string): string {
+    return this.utils.generateDate(dateValue, dateFormat);
+  }
+}

package/lib/designSystemExtension/material-summary-item/material-summary-item.component.html

@@ -0,0 +1,37 @@
+<div class="psdk-utility-card">
+  <div class="psdk-utility-card-icon">
+    <img class="psdk-utility-card-svg-icon" src="{{ imagePath$ }}{{ item$.visual.icon }}.svg" />
+  </div>
+  <div class="psdk-utility-card-main">
+    <div *ngIf="item$.primary.type == 'URL'" class="psdk-utility-card-main-primary-url">
+      <button mat-button color="primary" (click)="item$.primary.click()">
+        {{ item$.primary.name }}&nbsp;
+        <img class="psdk-utility-card-actions-svg-icon" src="{{ imagePath$ }}{{ item$.primary.icon }}.svg" />
+      </button>
+    </div>
+    <div *ngIf="item$.primary.type != 'URL'" class="psdk-utility-card-main-primary-label">
+      {{ item$.primary.name }}
+    </div>
+    <div *ngIf="item$.secondary.text != ''" [style.color]="item$.secondary.error ? 'red' : undefined">{{ item$.secondary.text }}</div>
+  </div>
+  <div class="psdk-utility-card-actions">
+    <div *ngIf="menuIconOverride$ == ''; else showCustom">
+      <button mat-icon-button [matMenuTriggerFor]="actionMenu">
+        <img class="psdk-utility-card-action-svg-icon" src="{{ settingsSvgIcon$ }}" />
+      </button>
+      <mat-menu #actionMenu="matMenu" overlapTrigger="false">
+        <ng-container *ngFor="let action of item$.actions">
+          <button mat-menu-item (click)="action.onClick()">
+            <img class="psdk-utility-card-action-actions-svg-icon" src="{{ imagePath$ }}{{ action.icon }}.svg" />&nbsp;
+            {{ action.text }}
+          </button>
+        </ng-container>
+      </mat-menu>
+    </div>
+    <ng-template #showCustom>
+      <button mat-icon-button (click)="menuIconOverrideAction$.onClick(item$)">
+        <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
+      </button>
+    </ng-template>
+  </div>
+</div>

package/lib/designSystemExtension/material-summary-item/material-summary-item.component.scss

@@ -0,0 +1,127 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-utility-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-utility-view-all {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.psdk-utility-count {
+  background: $app-primary-light-color;
+  border-radius: calc(1.125 * 0.5rem);
+  color: black;
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-align: center;
+  width: 1.125rem;
+
+  vertical-align: top;
+  margin: 0 0 0.313rem 1rem;
+}
+
+.psdk-utility .header-text {
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 0.3125rem;
+  text-align: left;
+  display: inline-block;
+}
+
+.psdk-utility .header-icon {
+  display: inline-block;
+}
+
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  background-color: $app-form-color;
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+}
+.psdk-utility .header {
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-utility-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-settings-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-utility .message {
+  text-align: center;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  max-width: 16.563rem;
+}
+
+.psdk-utility-card-main-primary-url {
+  color: $app-primary-color;
+}
+
+.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary {
+  padding-left: 0px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+}
+
+.psdk-utility-card-actions {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-utility-card-action-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: bottom;
+}

package/lib/designSystemExtension/material-summary-item/material-summary-item.component.spec.ts

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

package/lib/designSystemExtension/material-summary-item/material-summary-item.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { Utils } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-material-summary-item',
+  templateUrl: './material-summary-item.component.html',
+  styleUrls: ['./material-summary-item.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatMenuModule]
+})
+export class MaterialSummaryItemComponent implements OnInit {
+  @Input() item$: any;
+  @Input() menuIconOverride$ = '';
+  @Input() menuIconOverrideAction$: any;
+
+  settingsSvgIcon$: string;
+  imagePath$ = '';
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    this.imagePath$ = this.utils.getIconPath(this.utils.getSDKStaticContentUrl());
+
+    this.settingsSvgIcon$ = this.utils.getImageSrc('more', this.utils.getSDKStaticContentUrl());
+    if (this.menuIconOverride$ != '') {
+      this.menuIconOverride$ = this.utils.getImageSrc(this.menuIconOverride$, this.utils.getSDKStaticContentUrl());
+    }
+  }
+}

package/lib/designSystemExtension/material-summary-list/material-summary-list.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let item of arItems$">
+  <component-mapper name="SummaryItem" [props]="{ item$: item, menuIconOverride$, menuIconOverrideAction$ }"></component-mapper>
+</ng-container>

package/lib/designSystemExtension/material-summary-list/material-summary-list.component.scss

@@ -0,0 +1 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';

package/lib/designSystemExtension/material-summary-list/material-summary-list.component.spec.ts

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

package/lib/designSystemExtension/material-summary-list/material-summary-list.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-material-summary-list',
+  templateUrl: './material-summary-list.component.html',
+  styleUrls: ['./material-summary-list.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class MaterialSummaryListComponent {
+  @Input() arItems$: any[];
+  @Input() icon$: string;
+  @Input() menuIconOverride$ = '';
+  @Input() menuIconOverrideAction$: any;
+}