@pega/angular-sdk-overrides 0.24.8 → 0.25.1

package/lib/field/phone/phone.component.ts

@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
-import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
+import { MatTelInput } from 'mat-tel-input';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import { Utils } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -18,8 +19,7 @@ interface PhoneProps extends PConnFieldProps {
   selector: 'app-phone',
   templateUrl: './phone.component.html',
   styleUrls: ['./phone.component.scss'],
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, NgxMatIntlTelInputComponent, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)]
 })
 export class PhoneComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -38,17 +38,15 @@ export class PhoneComponent implements OnInit, OnDestroy {
   displayMode$?: string = '';
   controlName$: string;
   bHasForm$ = true;
-  componentReference = '';
   testId: string;
-  separateDialCode = false;
-  afterBlur: boolean;
   helperText: string;
+  placeholder: string;
 
   fieldControl = new FormControl('', null);
 
-  phoneForm = new FormGroup({
-    phone: new FormControl<string | null>(null)
-  });
+  actionsApi: Object;
+  propName: string;
+  preferredCountries: string[] = ['us'];
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -114,8 +112,13 @@ export class PhoneComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
+      this.updatePreferredCountries();
     }
     this.helperText = this.configProps$.helperText;
+    this.placeholder = this.configProps$.placeholder || '';
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -144,10 +147,6 @@ export class PhoneComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    if (this.bReadonly$) {
-      this.phoneForm.setValue({ phone: this.value$ });
-    }
-
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {
@@ -159,25 +158,29 @@ export class PhoneComponent implements OnInit, OnDestroy {
     }
   }
 
+  fieldOnBlur() {
+    // 'blur' isn't getting fired
+  }
+
   fieldOnChange() {
-    if (this.formGroup$.controls[this.controlName$].value) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = (this.pConn$?.getStateProps() as any).value;
+    const oldVal = this.value$ ?? '';
+    const newVal = this.formGroup$.controls[this.controlName$].value;
+    const isValueChanged = newVal?.toString() !== oldVal.toString();
+
+    if (isValueChanged && newVal) {
       const value = this.formGroup$.controls[this.controlName$].value;
-      const eventObj = {
-        target: {
-          value
-        }
-      };
-      this.afterBlur = true;
-      this.angularPConnectData.actions?.onChange(this, eventObj);
-      handleEvent(actionsApi, 'blur', propName, value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
   }
 
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+  updatePreferredCountries() {
+    if (this.value$ && typeof this.value$ === 'string') {
+      const phoneNumber = parsePhoneNumberFromString(this.value$);
+      this.preferredCountries =
+        phoneNumber?.country && !this.preferredCountries.includes(phoneNumber?.country.toLowerCase())
+          ? [phoneNumber?.country?.toLowerCase(), ...this.preferredCountries]
+          : this.preferredCountries;
+    }
   }
 
   getErrorMessage() {

package/lib/field/radio-buttons/radio-buttons.component.html

@@ -1,18 +1,17 @@
-<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$">
     <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <span class="psdk-label-wrapper-readonly">
-        <label class="psdk-label-readonly">{{ label$ }}</label>
-      </span>
-      <!-- <mat-label>{{label$}}</mat-label> -->
-      <input matInput [placeholder]="placeholder" style="display: none" />
+      <mat-label>{{ label$ }}</mat-label>
+      <input matInput [placeholder]="placeholder" style="display: none" [required]="bRequired$" />
       <mat-radio-group
         [value]="value$"
         [required]="bRequired$"
@@ -24,7 +23,7 @@
         <mat-radio-button
           *ngFor="let opt of options$"
           [checked]="isSelected(opt.key)"
-          [disabled]="bReadonly$"
+          [disabled]="bDisabled$ || bReadonly$"
           [value]="opt.key"
           class="psdk-radio-button"
         >
@@ -35,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>

package/lib/field/radio-buttons/radio-buttons.component.ts

@@ -9,6 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface IOption {
   key: string;
@@ -19,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({
@@ -26,7 +28,6 @@ interface RadioButtonsProps extends PConnFieldProps {
   templateUrl: './radio-buttons.component.html',
   styleUrls: ['./radio-buttons.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class RadioButtonsComponent implements OnInit, OnDestroy {
@@ -60,6 +61,9 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  actionsApi: Object;
+  propName: string;
+  variant?: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -130,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) {
@@ -164,13 +170,15 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
-    const propName = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     const className = this.pConn$.getCaseInfo().getClassName();
-    const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+    const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1);
 
     this.fieldMetadata = this.configProps$.fieldMetadata;
     const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata;
@@ -203,12 +211,7 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
 
   getLocalizedOptionValue(opt: IOption) {

package/lib/field/rich-text/rich-text.component.ts

@@ -15,7 +15,6 @@ interface RichTextProps extends PConnFieldProps {
   selector: 'app-rich-text',
   templateUrl: './rich-text.component.html',
   styleUrls: ['./rich-text.component.scss'],
-  standalone: true,
   imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class RichTextComponent implements OnInit, OnDestroy {
@@ -40,6 +39,8 @@ export class RichTextComponent implements OnInit, OnDestroy {
   info: any;
   error: boolean;
   status: any;
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -80,7 +81,7 @@ export class RichTextComponent implements OnInit, OnDestroy {
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as RichTextProps;
-    const stateProps: any = this.pConn$.getStateProps();
+    const stateProps = this.pConn$.getStateProps();
     this.status = stateProps?.status;
 
     if (this.configProps$.value != undefined) {
@@ -94,6 +95,9 @@ export class RichTextComponent implements OnInit, OnDestroy {
     this.info = stateProps?.validatemessage || this.configProps$.helperText;
     this.error = stateProps?.status === 'error';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     if (this.configProps$.required != null) {
       this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
     }
@@ -111,9 +115,13 @@ export class RichTextComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    if (this.status === 'error') {
-      const property = (this.pConn$.getStateProps() as any).value;
+  fieldOnChange(editorValue: any) {
+    const oldVal = this.value$ ?? '';
+    const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
+    const isValueChanged = newVal.toString() !== oldVal.toString();
+
+    if (isValueChanged || this.status === 'error') {
+      const property = this.propName;
       this.pConn$.clearErrorMessages({
         property,
         category: '',
@@ -123,9 +131,11 @@ export class RichTextComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(editorValue: any) {
-    // PConnect wants to use eventHandler for onBlur
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, editorValue);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = editorValue.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, editorValue);
+    }
   }
 }

package/lib/field/scalar-list/scalar-list.component.ts

@@ -17,7 +17,6 @@ interface ScalarListProps extends Omit<PConnFieldProps, 'value'> {
   selector: 'app-scalar-list',
   templateUrl: './scalar-list.component.html',
   styleUrls: ['./scalar-list.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ScalarListComponent implements OnInit, OnDestroy {
@@ -101,20 +100,19 @@ export class ScalarListComponent implements OnInit, OnDestroy {
         {
           type: componentType,
           config: {
-            // @ts-ignore - Object literal may only specify known properties, and 'value' does not exist in type 'ComponentMetadataConfig'.
             value: scalarValue,
-            displayMode: 'LABELS_LEFT',
+            displayMode: 'DISPLAY_ONLY',
             label: this.label$,
             ...restProps,
             readOnly: true
           }
         },
         '',
-        '',
+        0,
         {}
       ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
     });
-    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
+    this.isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
     this.value$ = this.items;
   }
 }

package/lib/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>

package/lib/field/selectable-card/selectable-card.component.spec.ts

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

package/lib/field/selectable-card/selectable-card.component.ts

@@ -0,0 +1,255 @@
+import { Component, Input, OnInit, OnDestroy, EventEmitter, Output } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { deleteInstruction, insertInstruction } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+
+interface SelectableCardProps extends PConnFieldProps {
+  selectionList: any;
+  readonlyContextList: any;
+  image: string;
+  primaryField: string;
+  selectionKey: string;
+  renderMode: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
+}
+
+@Component({
+  selector: 'lib-selectable-card',
+  imports: [MatCardModule, CommonModule, MatRadioModule, MatCheckboxModule],
+  templateUrl: './selectable-card.component.html',
+  styleUrl: './selectable-card.component.scss'
+})
+export class SelectableCardComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() type: string;
+  @Output() valueChange: EventEmitter<any> = new EventEmitter();
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: SelectableCardProps;
+  value$: any;
+  readOnly = false;
+  disabled = false;
+  displayMode$: string | undefined;
+  radioBtnValue;
+  additionalProps;
+  testId;
+  showNoValue = false;
+  selectionKey?: string;
+  defaultStyle = {};
+  specialStyle = {};
+  cardStyle = {};
+  selectedvalues: any;
+  selectionList: any;
+  primaryField: string;
+  commonProps: any = {};
+  contentList: [
+    {
+      commonCardProps: { id: string; key: string; fields: any; label: string; selected: boolean };
+      cardImage: { src: string; alt: string; style: any };
+    }
+  ];
+
+  actionsApi: Object;
+  propName: string;
+
+  constructor(
+    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);
+    // styles used in displaying common field props
+    this.defaultStyle = {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      margin: '0.5rem',
+      wordBreak: 'break-word',
+      fontSize: '0.875rem'
+    };
+    this.specialStyle = {
+      margin: '0.5rem',
+      fontSize: '0.875rem'
+    };
+    this.checkAndUpdate();
+  }
+
+  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
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelectableCardProps;
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
+    const hideFieldLabels = this.configProps$.hideFieldLabels;
+    const datasource: any = this.configProps$.datasource;
+    const additionalProps: any = this.configProps$.additionalProps;
+    const imageSize: string = this.configProps$.imageSize ?? ''; // not using
+    const showImageDescription: boolean = this.configProps$.showImageDescription ?? false;
+    let recordKey = '';
+    let cardLabel = '';
+    let image: any;
+
+    this.disabled = this.configProps$.disabled;
+    this.readOnly = this.configProps$.renderMode === 'ReadOnly' || this.displayMode$ === 'DISPLAY_ONLY' || this.configProps$.readOnly;
+    const imagePosition = this.configProps$.imagePosition;
+
+    // dynamic styling based on image position and readOnly option
+    let imageWidth = '100%';
+    this.cardStyle = { display: 'flex', flexDirection: 'column', height: '100%' };
+    if (imagePosition && imagePosition !== 'block-start') {
+      imageWidth = '30%';
+      if (imagePosition === 'inline-start') {
+        this.cardStyle = { display: 'flex', flexDirection: 'row', alignItems: this.readOnly ? 'center' : '' };
+      } else if (imagePosition === 'inline-end') {
+        this.cardStyle = {
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          justifyContent: this.readOnly ? 'space-between' : '',
+          alignItems: this.readOnly ? 'center' : ''
+        };
+      }
+    }
+    if (this.type === 'radio') {
+      const stateProps = this.pConn$.getStateProps();
+      image = {
+        imagePosition,
+        imageSize,
+        showImageDescription,
+        imageField: stateProps.image?.split('.').pop(),
+        imageDescription: stateProps.imageDescription?.split('.').pop()
+      };
+
+      recordKey = stateProps.value?.split('.').pop() ?? '';
+      cardLabel = stateProps.primaryField?.split('.').pop() ?? '';
+
+      this.value$ = this.configProps$.value;
+      this.radioBtnValue = this.value$;
+    }
+
+    if (this.type === 'checkbox') {
+      this.testId = this.configProps$.testId;
+      this.displayMode$ = this.configProps$.displayMode;
+
+      this.selectionKey = this.configProps$.selectionKey;
+      recordKey = this.selectionKey?.split('.').pop() ?? '';
+      cardLabel = this.configProps$.primaryField.split('.').pop() ?? '';
+
+      image = {
+        imagePosition,
+        imageSize,
+        showImageDescription,
+        imageField: this.configProps$.image?.split('.').pop(),
+        imageDescription: (this.pConn$?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+      };
+
+      this.selectionList = this.configProps$.selectionList;
+      this.selectedvalues = this.configProps$.readonlyContextList;
+      this.showNoValue = this.readOnly && this.selectedvalues.length === 0; // not used
+      this.primaryField = this.configProps$.primaryField;
+    }
+
+    this.commonProps = { hideFieldLabels, datasource, additionalProps, image, recordKey, cardLabel, radioBtnValue: this.radioBtnValue ?? '' };
+    const imageDescriptionKey = this.commonProps?.image?.showImageDescription ? this.commonProps?.image?.imageDescription : undefined;
+    const cardDataSource = this.readOnly || this.displayMode$ == 'DISPLAY_ONLY' ? this.selectedvalues || [] : this.commonProps?.datasource?.source;
+
+    this.contentList = cardDataSource.map(item => {
+      const resolvedFields = this.utils.resolveReferenceFields(item, this.commonProps.hideFieldLabels, this.commonProps.recordKey, this.pConn$);
+      const commonCardProps = {
+        id: item[this.commonProps.recordKey],
+        key: item[this.commonProps.recordKey],
+        fields: resolvedFields,
+        label: item[this.commonProps.cardLabel],
+        selected: this.selectedvalues
+          ? this.selectedvalues?.some?.(data => data[this.commonProps.recordKey] === item[this.commonProps.recordKey])
+          : false
+      };
+      const cardImage = item[this.commonProps.image.imageField]
+        ? {
+            src: item[this.commonProps.image.imageField],
+            alt: this.commonProps.image.showImageDescription && imageDescriptionKey ? item[imageDescriptionKey] : '',
+            style: {
+              width: imageWidth,
+              backgroundColor: 'rgb(233, 238, 243)',
+              aspectRatio: '16/9',
+              maxHeight: '100%',
+              objectFit: 'contain',
+              maxWidth: '100%',
+              height: this.readOnly && imagePosition !== 'block-start' ? '5rem' : ''
+            }
+          }
+        : undefined;
+
+      return { cardImage, commonCardProps };
+    });
+  }
+
+  fieldOnChange(value: any) {
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+  }
+
+  fieldOnBlur() {
+    this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
+  }
+
+  handleChangeMultiMode(event, element) {
+    if (!element.selected) {
+      insertInstruction(this.pConn$, this.selectionList, this.selectionKey, this.primaryField, {
+        id: element.id,
+        primary: element.label
+      });
+    } else {
+      deleteInstruction(this.pConn$, this.selectionList, this.selectionKey, {
+        id: element.key,
+        primary: element.label
+      });
+    }
+    this.pConn$.clearErrorMessages({
+      property: this.selectionList,
+      category: '',
+      context: ''
+    });
+  }
+
+  cardSelect(event, element) {
+    if (this.type === 'radio') {
+      this.fieldOnChange(element.key);
+    } else if (this.type === 'checkbox') {
+      this.handleChangeMultiMode(event, element);
+    }
+  }
+}

package/lib/field/semantic-link/semantic-link.component.ts

@@ -15,7 +15,6 @@ interface SemanticLinkProps extends PConnFieldProps {
   selector: 'app-semantic-link',
   templateUrl: './semantic-link.component.html',
   styleUrls: ['./semantic-link.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SemanticLinkComponent implements OnInit, OnDestroy {