@pega/dx-component-builder-sdk 23.1.11 → 23.1.12

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/date-time/config.json

@@ -1,181 +0,0 @@
-{
-  "name": "DateTime",
-  "description": "Date & time",
-  "type": "Field",
-  "subtype": "DATA_CAPTURE",
-  "icon": "images/pz-date-time-active.svg",
-  "properties": [
-    {
-      "name": "label",
-      "label": "Field label",
-      "format": "TEXT",
-      "required": true
-    },
-    {
-      "name": "readOnly",
-      "label": "Edit mode",
-      "format": "READONLY"
-    },
-    {
-      "format": "SELECT",
-      "name": "clockFormat",
-      "label": "Clock",
-      "defaultValue": "use locale",
-      "source": [
-        {
-          "key": 0,
-          "value": "use locale"
-        },
-        {
-          "key": 12,
-          "value": "12 hours"
-        },
-        {
-          "key": 24,
-          "value": "24 hours"
-        }
-      ]
-    },
-    {
-      "name": "withSeconds",
-      "label": "Display Seconds",
-      "format": "BOOLEAN"
-    },
-    {
-      "label": "Input settings",
-      "format": "GROUP",
-      "visibility": "(!readOnly = true)",
-      "properties": [
-        {
-          "format": "LABEL",
-          "label": "Year range",
-          "variant": "secondary"
-        },
-        {
-          "format": "INLINE",
-          "elements": [
-            {
-              "key": "next",
-              "format": "LABEL",
-              "label": "Next",
-              "variant": "secondary"
-            },
-            {
-              "key": "nextYears",
-              "format": "NUMBER",
-              "label": "",
-              "name": "nextYearRange",
-              "min": 0
-            },
-            {
-              "key": "year",
-              "format": "LABEL",
-              "label": "years",
-              "variant": "secondary"
-            }
-          ]
-        },
-        {
-          "format": "INLINE",
-          "elements": [
-            {
-              "key": "previous",
-              "format": "LABEL",
-              "label": "Previous",
-              "variant": "secondary"
-            },
-            {
-              "key": "previousYears",
-              "format": "NUMBER",
-              "label": "",
-              "name": "previousYearRange",
-              "min": 0
-            },
-            {
-              "key": "year",
-              "format": "LABEL",
-              "label": "years",
-              "variant": "secondary"
-            }
-          ]
-        },
-        {
-          "name": "showWeekNumber",
-          "label": "Display week numbers on calendar",
-          "format": "BOOLEAN"
-        },
-        {
-          "format": "SELECT",
-          "name": "pickerInterval",
-          "label": "Time picker",
-          "defaultValue": "30",
-          "source": [
-            {
-              "key": "5",
-              "value": "5 min"
-            },
-            {
-              "key": "10",
-              "value": "10 min"
-            },
-            {
-              "key": "15",
-              "value": "15 min"
-            },
-            {
-              "key": "20",
-              "value": "20 min"
-            },
-            {
-              "key": "30",
-              "value": "30 min"
-            },
-            {
-              "key": "60",
-              "value": "1 hr"
-            }
-          ]
-        },
-        {
-          "name": "helperText",
-          "label": "Helper text",
-          "format": "TEXT"
-        }
-      ]
-    },
-    {
-      "label": "Read-only settings",
-      "format": "GROUP",
-      "properties": [
-        {
-          "name": "showAsFormattedText",
-          "label": "Show as formatted text",
-          "format": "BOOLEAN"
-        }
-      ]
-    },
-    {
-      "label": "Conditions",
-      "format": "GROUP",
-      "properties": [
-        {
-          "name": "required",
-          "label": "Required",
-          "format": "REQUIRED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "disabled",
-          "label": "Disabled",
-          "format": "DISABLED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "visibility",
-          "label": "Visibility",
-          "format": "VISIBILITY"
-        }
-      ]
-    }
-  ]
-}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/date-time/date-time.component.html

@@ -1,28 +0,0 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
-</div>
-<ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
-    <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-label>{{ label$ }}</mat-label>
-        <input
-          matInput
-          [attr.data-test-id]="testId"
-          [placeholder]=""
-          type="datetime-local"
-          [value]="value$"
-          [required]="bRequired$"
-          [formControlName]="controlName$"
-          (click)="fieldOnClick($event)"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-        />
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-      </mat-form-field>
-    </div>
-  </div>
-</ng-template>
-<ng-template #noEdit>
-  <component-mapper name="Text" [props]="{ pConn$, formatAs$: 'date-time' }"></component-mapper>
-</ng-template>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/date-time/date-time.component.spec.ts

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

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/date-time/date-time.component.ts

@@ -1,177 +0,0 @@
-import { Component, OnInit, Input, ChangeDetectorRef, forwardRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { interval } from 'rxjs';
-import { AngularPConnectService } from '@pega/angular-sdk-library';
-import { Utils } from '@pega/angular-sdk-library';
-import { ComponentMapperComponent } from '@pega/angular-sdk-library';
-
-@Component({
-  selector: 'app-date-time',
-  templateUrl: './date-time.component.html',
-  styleUrls: ['./date-time.component.scss'],
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
-})
-export class DateTimeComponent implements OnInit {
-  @Input() pConn$: any;
-  @Input() formGroup$: FormGroup;
-
-  // Used with AngularPConnect
-  angularPConnectData: any = {};
-  configProps$: Object;
-
-  label$: string = '';
-  value$: any;
-  bRequired$: boolean = false;
-  bReadonly$: boolean = false;
-  bDisabled$: boolean = false;
-  bVisible$: boolean = true;
-  displayMode$: string = '';
-  controlName$: string;
-  bHasForm$: boolean = true;
-  componentReference: string = '';
-  testId: string = '';
-  helperText: string;
-
-  fieldControl = new FormControl('', null);
-
-  constructor(
-    private angularPConnect: AngularPConnectService,
-    private cdRef: ChangeDetectorRef,
-    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.controlName$ = this.angularPConnect.getComponentID(this);
-    // Then, continue on with other initialization
-    // call updateSelf when initializing
-    //this.updateSelf();
-    this.checkAndUpdate();
-
-    if (this.formGroup$ != null) {
-      // 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$ != null) {
-      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 {
-    // starting very simple...
-    // moved this from ngOnInit() and call this from there instead...
-    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-
-    this.label$ = this.configProps$['label'];
-    this.displayMode$ = this.configProps$['displayMode'];
-    this.testId = this.configProps$['testId'];
-    if (this.configProps$['value'] != undefined) {
-      const value = this.configProps$['value'];
-      this.value$ = value ? value.replace('Z', '') : value;
-    }
-    this.helperText = this.configProps$['helperText'];
-
-    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$['required'] != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$['required']);
-      }
-      this.cdRef.detectChanges();
-    });
-
-    if (this.configProps$['visibility'] != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$['visibility']);
-    }
-
-    // disabled
-    if (this.configProps$['disabled'] != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$['disabled']);
-    }
-
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
-
-    if (this.configProps$['readOnly'] != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$['readOnly']);
-    }
-
-    this.componentReference = this.pConn$.getStateProps().value;
-
-    // trigger display of error message with field control
-    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
-      let timer = interval(100).subscribe(() => {
-        this.fieldControl.setErrors({ message: true });
-        this.fieldControl.markAsTouched();
-
-        timer.unsubscribe();
-      });
-    }
-  }
-
-  fieldOnChange(event: any) {
-    if (event.target.value) {
-      event.value = event.target.value;
-    }
-    this.angularPConnectData.actions.onChange(this, event);
-  }
-
-  fieldOnClick(event: any) {}
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
-
-    this.angularPConnectData.actions.onBlur(this, event);
-  }
-
-  getErrorMessage() {
-    let errMessage: string = '';
-    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
-    if (this.fieldControl.hasError('message')) {
-      errMessage = this.angularPConnectData.validateMessage;
-      return errMessage;
-    } else if (this.fieldControl.hasError('required')) {
-      errMessage = 'You must enter a value';
-    } else if (this.fieldControl.errors) {
-      errMessage = this.fieldControl.errors.toString();
-    }
-    return errMessage;
-  }
-}
-

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/decimal/config.json

@@ -1,71 +0,0 @@
-{
-  "name": "Decimal",
-  "description": "Decimal",
-  "type": "Field",
-  "subtype": "DATA_CAPTURE",
-  "icon": "images/pz-decimal-active.svg",
-  "properties": [
-    {
-      "name": "label",
-      "label": "Field label",
-      "format": "TEXT",
-      "required": true
-    },
-    {
-      "name": "readOnly",
-      "label": "Edit mode",
-      "format": "READONLY"
-    },
-    {
-      "name": "decimalPrecision",
-      "label": "Decimal places",
-      "format": "NUMBER",
-      "min": 0
-    },
-    {
-      "name": "showGroupSeparators",
-      "label": "Show thousands separator",
-      "format": "BOOLEAN"
-    },
-    {
-      "label": "Input settings",
-      "format": "GROUP",
-      "visibility": "(!readOnly = true)",
-      "properties": [
-        {
-          "name": "placeholder",
-          "label": "Placeholder",
-          "format": "TEXT"
-        },
-        {
-          "name": "helperText",
-          "label": "Helper text",
-          "format": "TEXT"
-        }
-      ]
-    },
-    {
-      "label": "Conditions",
-      "format": "GROUP",
-      "properties": [
-        {
-          "name": "required",
-          "label": "Required",
-          "format": "REQUIRED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "disabled",
-          "label": "Disabled",
-          "format": "DISABLED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "visibility",
-          "label": "Visibility",
-          "format": "VISIBILITY"
-        }
-      ]
-    }
-  ]
-}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/decimal/decimal.component.html

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

package/tests/assets/components/SDK-Angular/createAll/override-sdk/field/decimal/decimal.component.spec.ts

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