Selectable card support in angular

Author: mohas22

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -42,6 +42,7 @@ import { TimeComponent } from '../../_components/field/time/time.component';
 import { UrlComponent } from '../../_components/field/url/url.component';
 import { UserReferenceComponent } from '../../_components/field/user-reference/user-reference.component';
 import { ScalarListComponent } from '../../_components/field/scalar-list/scalar-list.component';
+import { SelectableCardComponent } from '../../_components/field/selectable-card/selectable-card.component';
 import { RichTextComponent } from '../../_components/field/rich-text/rich-text.component';
 
 // Template components
@@ -210,6 +211,7 @@ const pegaSdkComponentMap = {
   RichTextEditor: RichTextEditorComponent,
   RootContainer: RootContainerComponent,
   ScalarList: ScalarListComponent,
+  SelectableCard: SelectableCardComponent,
   SemanticLink: SemanticLinkComponent,
   SimpleTable: SimpleTableComponent,
   SimpleTableManual: SimpleTableManualComponent,

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.html

@@ -1,9 +1,11 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
-  ></component-mapper>
+<div *ngIf="variant !== 'card'; else cardMode">
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper
+      *ngIf="bVisible$ !== false"
+      name="FieldValueList"
+      [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+    ></component-mapper>
+  </div>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
@@ -48,3 +50,9 @@
 <ng-template #noEdit>
   <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
 </ng-template>
+<ng-template #cardMode>
+  <h4>{{ label$ }}</h4>
+  <div>
+    <component-mapper name="SelectableCard" [props]="{ pConn$: pConn$, type: 'checkbox' }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.ts

@@ -26,6 +26,7 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
 }
 
 @Component({
@@ -70,6 +71,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   listOfCheckboxes: any[] = [];
   actionsApi: Object;
   propName: string;
+  variant?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -146,6 +148,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
+    this.variant = this.configProps$.variant;
 
     // multi case
     this.selectionMode = this.configProps$.selectionMode;

packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.html

@@ -1,9 +1,11 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper
-    *ngIf="bVisible$ !== false"
-    name="FieldValueList"
-    [props]="{ label$, value$: this.localizedValue, displayMode$ }"
-  ></component-mapper>
+<div *ngIf="variant !== 'card'; else cardMode">
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper
+      *ngIf="bVisible$ !== false"
+      name="FieldValueList"
+      [props]="{ label$, value$: this.localizedValue, displayMode$ }"
+    ></component-mapper>
+  </div>
 </div>
 <ng-template #noDisplayMode>
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
@@ -32,3 +34,9 @@
     </mat-form-field>
   </div>
 </ng-template>
+<ng-template #cardMode>
+  <h4>{{ label$ }}</h4>
+  <div>
+    <component-mapper name="SelectableCard" [props]="{ pConn$: pConn$, type: 'radio' }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.ts

@@ -20,6 +20,7 @@ interface RadioButtonsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on RadioButtons here
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
 }
 
 @Component({
@@ -62,6 +63,7 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   localizedValue = '';
   actionsApi: Object;
   propName: string;
+  variant?: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -132,6 +134,8 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.variant = this.configProps$.variant;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {

packages/angular-sdk-components/src/lib/_components/field/selectable-card/selectable-card.component.html

@@ -0,0 +1,40 @@
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem">
+  <div *ngFor="let cardContent of contentList">
+    <mat-card [ngStyle]="cardStyle" appearance="outlined" (click)="cardSelect($event, cardContent.commonCardProps)">
+      <img
+        *ngIf="cardContent.cardImage"
+        mat-card-image
+        src="{{ cardContent.cardImage.src }}"
+        alt="{{ cardContent.cardImage.alt }}"
+        [ngStyle]="cardContent.cardImage.style"
+      />
+      <mat-card-content>
+        <div *ngIf="type === 'radio'">
+          <mat-radio-button
+            [checked]="radioBtnValue === cardContent?.commonCardProps?.key"
+            [disabled]="disabled"
+            [value]="cardContent.commonCardProps.key"
+            (change)="fieldOnChange(cardContent.commonCardProps.key)"
+          >
+            {{ cardContent.commonCardProps.label }}
+          </mat-radio-button>
+        </div>
+        <div *ngIf="type === 'checkbox'">
+          <mat-checkbox
+            [labelPosition]="'after'"
+            [checked]="cardContent.commonCardProps.selected"
+            [disabled]="disabled || readOnly"
+            [attr.data-test-id]="testId + ':' + cardContent.commonCardProps.label"
+            (change)="handleChangeMultiMode($event, cardContent.commonCardProps)"
+            (blur)="fieldOnBlur()"
+            >{{ cardContent.commonCardProps.label }}</mat-checkbox
+          >
+        </div>
+        <div *ngFor="let field of cardContent.commonCardProps.fields" [ngStyle]="field.type !== 'TextArea' ? defaultStyle : specialStyle">
+          <div style="color: rgba(0, 0, 0, 0.6)">{{ field.name }}</div>
+          <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

packages/angular-sdk-components/src/lib/_components/field/selectable-card/selectable-card.component.scss

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