Selectable card support in angular (#322)

* Selectable card support in angular
---------

Co-authored-by: mohas22 <[email protected]>

Author: samhere06

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,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  renderMode: string;
 }
 
 @Component({
@@ -70,6 +72,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   listOfCheckboxes: any[] = [];
   actionsApi: Object;
   propName: string;
+  variant?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -90,7 +93,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     // this.updateSelf();
     this.checkAndUpdate();
 
-    if (this.selectionMode === 'multi' && this.referenceList?.length > 0) {
+    if (this.selectionMode === 'multi' && this.referenceList?.length > 0 && !this.bReadonly$) {
       this.pConn$.setReferenceList(this.selectionList);
       updateNewInstructions(this.pConn$, this.selectionList);
     }
@@ -146,6 +149,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;
@@ -154,6 +158,7 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
       this.selectionList = this.configProps$.selectionList;
       this.selectedvalues = this.configProps$.readonlyContextList;
       this.primaryField = this.configProps$.primaryField;
+      this.bReadonly$ = this.configProps$.renderMode === 'ReadOnly' || this.displayMode$ === 'DISPLAY_ONLY' || this.configProps$.readOnly;
 
       this.datasource = this.configProps$.datasource;
       this.selectionKey = this.configProps$.selectionKey;

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

@@ -4,13 +4,14 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
         <mat-tel-input
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           [preferredCountries]="preferredCountries"
           [enablePlaceholder]="true"
           [enableSearch]="true"
+          [placeholder]="placeholder"
           [required]="bRequired$"
           [disabled]="bDisabled$ || bReadonly$"
           (change)="fieldOnChange()"

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

@@ -40,6 +40,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
   bHasForm$ = true;
   testId: string;
   helperText: string;
+  placeholder: string;
 
   fieldControl = new FormControl('', null);
 
@@ -115,7 +116,7 @@ export class PhoneComponent implements OnInit, OnDestroy {
       this.updatePreferredCountries();
     }
     this.helperText = this.configProps$.helperText;
-
+    this.placeholder = this.configProps$.placeholder || '';
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 

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