@pega/dx-component-builder-sdk 0.1.46 → 0.1.48

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache

@@ -0,0 +1,174 @@
+import { Component, OnInit, Input, ChangeDetectorRef } 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 { TextComponent } from '@pega/angular-sdk-library';
+import { FieldValueListComponent } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@Component({
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
+  styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, TextComponent, FieldValueListComponent]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+  configProps$: Object;
+
+  label$: string = '';
+  value$: string = '';
+  bRequired$: boolean = false;
+  bReadonly$: boolean = false;
+  bDisabled$: boolean = false;
+  bVisible$: boolean = true;
+  displayMode$: string = '';
+  controlName$: string;
+  bHasForm$: boolean = true;
+  componentReference: 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 {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+
+    if (this.configProps$['value'] != undefined) {
+      this.value$ = this.configProps$['value'];
+    }
+
+    this.label$ = this.configProps$['label'];
+    this.displayMode$ = this.configProps$['displayMode'];
+
+    // 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) {
+    this.angularPConnectData.actions.onChange(this, event);
+  }
+
+  fieldOnClick(event: any) {}
+
+  fieldOnBlur(event: any) {
+    // PConnect wants to use eventHandler for onBlur
+    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/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.html.mustache

@@ -0,0 +1,30 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <app-field-value-list [label$]="label$" [value$]="value$" [displayMode$]="displayMode$"></app-field-value-list>
+</div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+      <mat-form-field class="psdk-full-width">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]=""
+          type="time"
+          [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>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+<ng-template #noEdit>
+  <app-text [pConn$]="pConn$" [formatAs$]="'time'"></app-text>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.scss.mustache

@@ -0,0 +1,20 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-label-readonly {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.spec.ts.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache

@@ -0,0 +1,172 @@
+import { Component, OnInit, Input, ChangeDetectorRef } 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 { TextComponent } from '@pega/angular-sdk-library';
+import { FieldValueListComponent } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@Component({
+  selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
+  templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
+  styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, TextComponent, FieldValueListComponent]
+})
+export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+  configProps$: Object;
+
+  label$: string = '';
+  value$: string;
+  bRequired$: boolean = false;
+  bReadonly$: boolean = false;
+  bDisabled$: boolean = false;
+  bVisible$: boolean = true;
+  displayMode$: string = '';
+  controlName$: string;
+  bHasForm$: boolean = true;
+  componentReference: 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 {
+    // 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'];
+
+    if (this.configProps$['value'] != undefined) {
+      this.value$ = this.configProps$['value'];
+    }
+
+    // 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) {
+    event.value = event.target.value;
+    this.angularPConnectData.actions.onChange(this, event);
+  }
+
+  fieldOnClick(event: any) {}
+
+  fieldOnBlur(event: any) {
+    // PConnect wants to use eventHandler for onBlur
+    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/src/tasks/create/templates/SDK-Angular/template/DETAILS/DefaultForm.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col  copy</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Template-icons" transform="translate(-320.000000, -925.000000)">
+            <g id="2-col--copy" transform="translate(320.000000, 925.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-5" x="0" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-3" x="46" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-15" x="0" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-14" x="46" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-17" x="0" y="48" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-16" x="46" y="48" width="42" height="11.8"></rect>
+                </g>
+                <g id="Group-7" transform="translate(28.000000, 11.000000)">
+                    <path id="Line-12-Copy" d="M35.1666667,42.75 L47.1666667,48.5 L35.1666667,54.25 L35.166,49.25 L-0.25,49.25 L-0.25,47.75 L35.166,47.75 L35.1666667,42.75 Z" fill="#1E1F27" fill-rule="nonzero"></path>
+                    <line x1="0.5" y1="48.5" x2="43.5" y2="32.5" id="Line" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                    <line x1="43.5" y1="32.5" x2="1.5" y2="32.5" id="Line-2" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/config.json.mustache

@@ -0,0 +1,21 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "DefaultForm.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/demo.stories.jsx.mustache

@@ -0,0 +1,71 @@
+import { withKnobs } from "@storybook/addon-knobs";
+
+import {{COMPONENT_CLASS_NAME}} from "./index.tsx";
+
+import operatorDetails, { pyReviewRaw } from "./mock.stories";
+
+export default {
+  title: "{{COMPONENT_CLASS_NAME}}",
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}},
+  parameters: {
+    type: "Details",
+  },
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise((resolve) => {
+        resolve(operatorDetails);
+      });
+    },
+  };
+};
+
+window.PCore.getEnvironmentInfo = () => {
+  return {
+    getUseLocale: () => {
+      return "en-US";
+    },
+  };
+};
+
+export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const props = {
+    NumCols: "1",
+    template: "DefaultForm",
+    showHighlightedData: false,
+    label: "Details",
+    showLabel: true,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children[0].children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        },
+      };
+    },
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}></{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.html.mustache

@@ -0,0 +1,7 @@
+<div>
+  <app-material-details
+    [arFields$]="arFields$"
+    [arHighlightedFields]="highlightedDataArr"
+    layout="'one-column'"
+  ></app-material-details>
+</div>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.scss.mustache

@@ -0,0 +1,7 @@
+.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;
+}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.spec.ts.mustache

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