@pega/dx-component-builder-sdk 25.1.12 → 25.1.14

package/tests/assets/sdk-a/components/create/override-sdk/field/scalar-list/scalar-list.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
+
+import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
@@ -17,86 +17,29 @@ 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 {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
-
-  angularPConnectData: AngularPConnectData = {};
+export class ScalarListComponent extends FieldBase {
   configProps$: ScalarListProps;
 
-  label$ = '';
-  value$: any;
-  displayMode$?: string = '';
   items: any[];
   isDisplayModeEnabled = false;
-  controlName$: string;
-  fieldControl = new FormControl('', null);
-  bHasForm$ = true;
-  bReadonly$ = false;
-
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.controlName$ = this.angularPConnect.getComponentID(this);
-    // Then, continue on with other initialization
-
-    // call updateSelf when initializing
-    // this.updateSelf();
-    this.checkAndUpdate();
-
-    if (this.formGroup$) {
-      // add control to formGroup
-      this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
-      this.bHasForm$ = true;
-    } else {
-      this.bReadonly$ = true;
-      this.bHasForm$ = false;
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (this.formGroup$) {
-      this.formGroup$.removeControl(this.controlName$);
-    }
 
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
+  /**
+   * Updates the component when there are changes in the state.
+   */
+  override updateSelf(): void {
+    // Resolve config properties
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ScalarListProps;
 
-  // Callback passed when subscribing to store change
-  onStateChange() {
-    this.checkAndUpdate();
-  }
+    // Extract properties from config props
+    const { componentType, displayMode = '', label, value, restProps } = this.configProps$;
 
-  checkAndUpdate() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+    // Update component properties
+    this.label$ = label;
+    this.displayMode$ = displayMode;
 
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
-  // updateSelf
-  updateSelf(): void {
-    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ScalarListProps;
-    this.label$ = this.configProps$.label;
-    const componentType = this.configProps$.componentType;
-    const scalarValues = this.configProps$.value;
-    this.displayMode$ = this.configProps$.displayMode;
-    const restProps = this.configProps$.restProps;
-    console.log('scalar values: ', scalarValues);
-    this.items = scalarValues?.map(scalarValue => {
-      console.log('scalar value: ', scalarValue);
+    this.items = value?.map(scalarValue => {
       return this.pConn$.createComponent(
         {
           type: componentType,
@@ -113,6 +56,7 @@ export class ScalarListComponent implements OnInit, OnDestroy {
         {}
       ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
     });
+
     this.isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
     this.value$ = this.items;
   }

package/tests/assets/sdk-a/components/create/override-sdk/field/selectable-card/selectable-card.component.html

@@ -0,0 +1,70 @@
+<div
+  *ngIf="type === 'checkbox'"
+  style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 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>
+        <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
+          *ngFor="let field of cardContent.commonCardProps.fields"
+          [ngStyle]="field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle"
+        >
+          <div>{{ field.name }}</div>
+          <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
+
+<mat-radio-group
+  *ngIf="type === 'radio'"
+  style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem"
+  [name]="propName"
+  [value]="radioBtnValue"
+  (change)="fieldOnChange($event.value)"
+>
+  <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>
+        <mat-radio-button
+          [checked]="radioBtnValue === cardContent?.commonCardProps?.key"
+          [disabled]="disabled"
+          [value]="cardContent.commonCardProps.key"
+        >
+          {{ cardContent.commonCardProps.label }}
+        </mat-radio-button>
+        <div
+          *ngFor="let field of cardContent.commonCardProps.fields"
+          [ngStyle]="field.type !== 'TextArea' ? (field.name ? defaultStyle : noLabelStyle) : specialStyle"
+        >
+          <div>{{ field.name }}</div>
+          <div>{{ field?.value?.getPConnect().getConfigProps().value ?? '--' }}</div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</mat-radio-group>

package/tests/assets/sdk-a/components/create/override-sdk/field/selectable-card/selectable-card.component.scss

@@ -0,0 +1,11 @@
+::ng-deep .mdc-label {
+  font-size: large;
+}
+
+.mat-mdc-card-content:last-child {
+  padding-bottom: 0;
+}
+
+.mat-mdc-card-content:first-child {
+  padding-top: 0;
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/selectable-card/selectable-card.component.ts

@@ -0,0 +1,219 @@
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { deleteInstruction, insertInstruction } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { FieldBase } 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 extends FieldBase implements OnInit {
+  @Input() type: string;
+  @Output() valueChange: EventEmitter<any> = new EventEmitter();
+
+  configProps$: SelectableCardProps;
+  readOnly = false;
+  disabled = false;
+  radioBtnValue;
+  additionalProps;
+  showNoValue = false;
+  selectionKey?: string;
+  defaultStyle = {};
+  specialStyle = {};
+  cardStyle = {};
+  noLabelStyle: {};
+  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 };
+    }
+  ];
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+
+    // 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.noLabelStyle = {
+      alignItems: 'start',
+      marginLeft: '0.5rem'
+    };
+  }
+
+  override updateSelf(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelectableCardProps;
+
+    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: 'transparent',
+              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/tests/assets/sdk-a/components/create/override-sdk/field/semantic-link/semantic-link.component.html

@@ -1,10 +1,6 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+<div *ngIf="bVisible$ !== false">
+  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>
-
-<ng-template #noDisplayMode>
-  <div *ngIf="label$ !== undefined && bVisible$ !== false" class="psdk-grid-filter">
-    <div class="psdk-grid-label">{{ label$ }}</div>
-    <div class="psdk-value">{{ value$ || '---' }}</div>
-  </div>
+<ng-template #noLink>
+  <div class="psdk-value">{{ value$ || '---' }}</div>
 </ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/field/semantic-link/semantic-link.component.scss

@@ -1,16 +1,3 @@
-.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-label {
-  color: var(--app-label-color);
-  margin: 8px 0px;
-}
-
 .psdk-value {
   margin: 8px 0px;
 }