@pega/angular-sdk-overrides 0.23.1

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

@@ -0,0 +1,131 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import handleEvent from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface RichTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RichText here
+}
+
+@Component({
+  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 {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: RichTextProps;
+
+  label$ = '';
+  value$ = '';
+  bRequired$ = false;
+  bReadonly$ = false;
+  bDisabled$ = false;
+  bVisible$ = true;
+  displayMode$?: string = '';
+  controlName$: string;
+  testId: string;
+  helperText: string;
+  placeholder: any;
+  info: any;
+  error: boolean;
+  status: any;
+
+  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);
+
+    // call updateSelf when initializing
+    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
+  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();
+    this.status = stateProps?.status;
+
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
+
+    this.testId = this.configProps$.testId;
+    this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    this.placeholder = this.configProps$.placeholder;
+    this.info = stateProps?.validatemessage || this.configProps$.helperText;
+    this.error = stateProps?.status === 'error';
+
+    if (this.configProps$.required != null) {
+      this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    }
+
+    if (this.configProps$.visibility != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    if (this.configProps$.disabled != undefined) {
+      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+    }
+
+    if (this.configProps$.readOnly != null) {
+      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+    }
+  }
+
+  fieldOnChange() {
+    if (this.status === 'error') {
+      const property = (this.pConn$.getStateProps() as any).value;
+      this.pConn$.clearErrorMessages({
+        property,
+        category: '',
+        context: ''
+      });
+    }
+  }
+
+  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);
+  }
+}

package/lib/field/scalar-list/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "ScalarList",
+  "label": "ScalarList",
+  "description": "ScalarList",
+  "type": "Field",
+  "subtype": "ScalarList",
+  "properties": []
+}

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

@@ -0,0 +1,9 @@
+<div *ngIf="isDisplayModeEnabled">
+  <div *ngFor="let value of items">
+    <component-mapper [name]="value?.getPConnect().getComponentName()" [props]="{ pConn$: value.getPConnect(), formGroup$ }"></component-mapper>
+    <!-- <span key="i">{{ value }}</span> -->
+  </div>
+</div>
+<div *ngIf="!isDisplayModeEnabled">
+  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>

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

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

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

@@ -0,0 +1,119 @@
+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 { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface ScalarListProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on ScalarList here
+  displayInModal: boolean;
+  value: any[];
+  componentType: string;
+  restProps?: object;
+}
+
+@Component({
+  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 = {};
+  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();
+    }
+  }
+
+  // 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
+  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);
+      return this.pConn$.createComponent(
+        {
+          type: componentType,
+          config: {
+            value: scalarValue,
+            displayMode: 'LABELS_LEFT',
+            label: this.label$,
+            ...restProps,
+            readOnly: 'true'
+          }
+        },
+        '',
+        '',
+        {}
+      ); // 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.value$ = this.items;
+  }
+}

package/lib/field/semantic-link/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "SemanticLink",
+  "description": "SemanticLink",
+  "type": "Field",
+  "subtype": "ACTION",
+  "properties": []
+}

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

@@ -0,0 +1,10 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</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>

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

@@ -0,0 +1,16 @@
+.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: rgba(0, 0, 0, 0.54);
+  margin: 8px 0px;
+}
+
+.psdk-value {
+  margin: 8px 0px;
+}

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

@@ -0,0 +1,70 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface SemanticLinkProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on SemanticLink here
+  text: string;
+}
+
+@Component({
+  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 {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: SemanticLinkProps;
+
+  label$ = '';
+  value$ = '';
+  displayMode$?: string = '';
+  bVisible$ = true;
+
+  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);
+    this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    // 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() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SemanticLinkProps;
+    this.value$ = this.configProps$.text || '---';
+    this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    if (this.configProps$.visibility) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+  }
+}

package/lib/field/text/text.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="bVisible$ !== false" class="psdk-label-infix-readonly">
+    <span class="psdk-label-wrapper-readonly">
+      <label class="psdk-label-readonly">{{ label$ }}</label>
+    </span>
+    <div class="psdk-data-readonly">
+      <label *ngIf="formatAs$ != 'url'">{{ formattedValue$ }}</label>
+      <a *ngIf="formatAs$ == 'url'" href="{{ formattedUrl$ }}">{{ formattedValue$ }}</a>
+    </div>
+  </div>
+</ng-template>

package/lib/field/text/text.component.scss

@@ -0,0 +1,30 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-label-readonly {
+  opacity: 54%;
+  font-size: 0.7rem;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}
+
+.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-details-fields-label {
+  color: rgba(0, 0, 0, 0.54);
+  margin: 8px 0px;
+}

package/lib/field/text/text.component.spec.ts

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

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

@@ -0,0 +1,158 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface TextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Text here
+}
+
+@Component({
+  selector: 'app-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class TextComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formatAs$: string;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: TextProps;
+
+  label$ = '';
+  value$ = '';
+  bRequired$ = false;
+  bReadonly$ = false;
+  bDisabled$ = false;
+  bVisible$ = true;
+  displayMode$?: string = '';
+  controlName$: string;
+  componentReference = '';
+  formattedValue$: string;
+  format$ = 'text';
+  formattedUrl$ = '';
+
+  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);
+
+    // Then, continue on with other initialization
+
+    // call updateSelf when initializing
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  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
+  updateSelf(): void {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as TextProps;
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
+
+    if (this.configProps$.visibility != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    this.label$ = this.configProps$.label;
+    this.displayMode$ = this.configProps$.displayMode;
+
+    // TDB - get formats
+    switch (this.formatAs$) {
+      case 'text':
+        this.formattedValue$ = this.value$;
+        break;
+      case 'date':
+        this.formattedValue$ = this.generateDate(this.value$);
+        break;
+      case 'date-time':
+        this.formattedValue$ = this.generateDateTime(this.value$);
+        break;
+      case 'time':
+        if (this.value$) {
+          const timeParts = this.value$.split(':');
+          this.formattedValue$ = `${timeParts[0]}:${timeParts[1]}`;
+        } else {
+          this.formattedValue$ = '';
+        }
+        break;
+      case 'url':
+        this.formattedUrl$ = this.generateUrl(this.value$);
+        this.formattedValue$ = this.value$;
+        break;
+      default:
+        break;
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  generateUrl(sVal): string {
+    if (sVal.indexOf('https://') == 0 || sVal.indexOf('http://') == 0) {
+      /* empty */
+    } else {
+      // assume no http
+      sVal = `http://${sVal}`;
+    }
+
+    return sVal;
+  }
+
+  generateDate(sVal): string {
+    if (!sVal) return '';
+    // const value = new Intl.DateTimeFormat('default', {
+    //   year: 'numeric',
+    //   month: 'numeric',
+    //   day: 'numeric'
+    // }).format(new Date(sVal + "T00:00"));
+
+    return this.utils.generateDate(sVal, 'Date-Long-Custom-YYYY');
+  }
+
+  generateDateTime(sVal): string {
+    if (!sVal) return '';
+    if (sVal.length === 10) return this.generateDate(sVal);
+    const value = sVal.substring(0, sVal.length - 1);
+    // value = new Intl.DateTimeFormat('default', {
+    //   year: 'numeric',
+    //   month: 'numeric',
+    //   day: 'numeric',
+    //   hour: 'numeric',
+    //   minute: 'numeric',
+    //   second: 'numeric',
+    //   hour12: true,
+    // }).format(new Date(value))
+
+    return this.utils.generateDateTime(value, 'DateTime-Long-YYYY-Custom');
+  }
+}

package/lib/field/text-area/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TextArea",
+  "label": "Text area",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "properties": []
+}

package/lib/field/text-area/text-area.component.html

@@ -0,0 +1,29 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$">
+      <div *ngIf="bVisible$">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <textarea
+            matInput
+            rows="5"
+            [placeholder]="label$"
+            type="text"
+            [attr.data-test-id]="testId"
+            [value]="value$"
+            [required]="bRequired$"
+            [disabled]="bDisabled$"
+            [formControl]="fieldControl"
+            (change)="fieldOnChange($event)"
+          ></textarea>
+          <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+</ng-template>