@pega/angular-sdk-overrides 0.23.1

package/lib/template/field-group-template/field-group-template.component.ts

@@ -0,0 +1,168 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { buildView, getReferenceList } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface FieldGroupTemplateProps {
+  // If any, enter additional props that only exist on this component
+  label?: string;
+  showLabel?: boolean;
+  referenceList?: any[];
+  contextClass: string;
+  renderMode?: string;
+  heading?: string;
+  lookForChildInConfig?: boolean;
+  displayMode?: string;
+  fieldHeader?: string;
+  allowTableEdit: boolean;
+}
+
+@Component({
+  selector: 'app-field-group-template',
+  templateUrl: './field-group-template.component.html',
+  styleUrls: ['./field-group-template.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() configProps$: FieldGroupTemplateProps;
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  inheritedProps$: object;
+  showLabel$?: boolean = true;
+  label$?: string;
+  readonlyMode: boolean;
+  contextClass: any;
+  referenceList: any;
+  pageReference: any;
+  heading: any;
+  children: any;
+  menuIconOverride$: any;
+  prevRefLength: number;
+  allowAddEdit: boolean;
+  fieldHeader: 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);
+    this.updateSelf();
+
+    const menuIconOverride$ = 'trash';
+    if (menuIconOverride$) {
+      this.menuIconOverride$ = this.utils.getImageSrc(menuIconOverride$, this.utils.getSDKStaticContentUrl());
+    }
+  }
+
+  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();
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (changes && changes.configProps$) {
+      const props = changes.configProps$;
+      if (props.currentValue !== props.previousValue) {
+        this.configProps$ = props.currentValue;
+        if (changes?.pConn$?.currentValue) {
+          this.pConn$ = changes?.pConn$?.currentValue;
+        }
+        this.updateSelf();
+      }
+    }
+  }
+
+  updateSelf() {
+    this.inheritedProps$ = this.pConn$.getInheritedProps();
+    this.label$ = this.configProps$.label;
+    this.showLabel$ = this.configProps$.showLabel;
+    // label & showLabel within inheritedProps takes precedence over configProps
+    this.label$ = (this.inheritedProps$ as any).label || this.label$;
+    this.showLabel$ = (this.inheritedProps$ as any).showLabel || this.showLabel$;
+
+    this.allowAddEdit = this.configProps$.allowTableEdit;
+
+    const renderMode = this.configProps$.renderMode;
+    const displayMode = this.configProps$.displayMode;
+    this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+    this.contextClass = this.configProps$.contextClass;
+    const lookForChildInConfig = this.configProps$.lookForChildInConfig;
+    this.heading = this.configProps$.heading ?? 'Row';
+    this.fieldHeader = this.configProps$.fieldHeader;
+    const resolvedList = getReferenceList(this.pConn$);
+    this.pageReference = `${this.pConn$.getPageReference()}${resolvedList}`;
+    this.pConn$.setReferenceList(resolvedList);
+    if (this.readonlyMode) {
+      this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    }
+    this.referenceList = this.configProps$.referenceList;
+    if (this.prevRefLength != this.referenceList.length) {
+      // eslint-disable-next-line sonarjs/no-collapsible-if
+      if (!this.readonlyMode) {
+        if (this.referenceList?.length === 0 && this.allowAddEdit !== false) {
+          this.addFieldGroupItem();
+        }
+      }
+      const children: any = [];
+      this.referenceList?.forEach((item, index) => {
+        children.push({
+          id: index,
+          name: this.fieldHeader === 'propertyRef' ? this.getDynamicHeader(item, index) : this.getStaticHeader(this.heading, index),
+          children: buildView(this.pConn$, index, lookForChildInConfig)
+        });
+      });
+      this.children = children;
+    }
+    this.prevRefLength = this.referenceList.length;
+  }
+
+  getStaticHeader = (heading, index) => {
+    return `${heading} ${index + 1}`;
+  };
+
+  getDynamicHeader = (item, index) => {
+    if (this.fieldHeader === 'propertyRef' && this.heading && item[this.heading.substring(1)]) {
+      return item[this.heading.substring(1)];
+    }
+    return `Row ${index + 1}`;
+  };
+
+  addFieldGroupItem() {
+    if (PCore.getPCoreVersion()?.includes('8.7')) {
+      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
+    } else {
+      // @ts-ignore - second parameter "pageRef" is optional for insert method
+      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
+    }
+  }
+
+  deleteFieldGroupItem(index) {
+    if (PCore.getPCoreVersion()?.includes('8.7')) {
+      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
+    } else {
+      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+      this.pConn$.getListActions().deleteEntry(index);
+    }
+  }
+}

package/lib/template/field-value-list/field-value-list.component.html

@@ -0,0 +1,15 @@
+<div *ngIf="displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
+  <div class="psdk-grid-label">{{ label$ }}</div>
+  <div class="psdk-val-labels-left">
+    {{ value$ || '---' }}
+  </div>
+</div>
+
+<ng-template #STACKED_LARGE_VAL>
+  <div *ngIf="displayMode$ === 'STACKED_LARGE_VAL'" class="psdk-container-stacked-large-val">
+    <div class="psdk-grid-label">{{ label$ }}</div>
+    <div class="psdk-val-stacked">
+      {{ value$ || '---' }}
+    </div>
+  </div>
+</ng-template>

package/lib/template/field-value-list/field-value-list.component.scss

@@ -0,0 +1,18 @@
+.psdk-container-labels-left {
+  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-value {
+  margin: 8px 0px;
+}
+.psdk-value-hf {
+  margin: 8px 0px;
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+.psdk-val-labels-left {
+  margin: 8px 0px;
+}

package/lib/template/field-value-list/field-value-list.component.spec.ts

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

package/lib/template/field-value-list/field-value-list.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-field-value-list',
+  templateUrl: './field-value-list.component.html',
+  styleUrls: ['./field-value-list.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class FieldValueListComponent {
+  @Input() label$: any;
+  @Input() value$: any;
+  @Input() displayMode$: any;
+}

package/lib/template/inline-dashboard/inline-dashboard.component.html

@@ -0,0 +1,19 @@
+<div class="psdk-inline-dashboard">
+  <h4 class="psdk-inline-dashboard-title">{{ inlineProps.title }}</h4>
+  <div
+    [ngClass]="{
+      'psdk-inline-style': inlineProps.filterPosition === 'inline-start' || inlineProps.filterPosition === 'inline-end',
+      'psdk-inline-end': inlineProps.filterPosition === 'inline-end'
+    }"
+    *ngIf="children"
+  >
+    <div class="psdk-inline-filter">
+      <div id="filters">
+        <component-mapper name="DashboardFilter" [props]="{ children: children[1], inlineProps, filtersFormGroup$ }"></component-mapper>
+      </div>
+    </div>
+    <div class="psdk-inline-list">
+      <component-mapper name="Region" [props]="{ pConn$: children[0].getPConnect() }"></component-mapper>
+    </div>
+  </div>
+</div>

package/lib/template/inline-dashboard/inline-dashboard.component.scss

@@ -0,0 +1,31 @@
+.psdk-inline-dashboard {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.psdk-inline-dashboard-title {
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+
+.psdk-not-block-style {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+}
+
+.psdk-inline-style {
+  display: flex;
+  .psdk-inline-filter {
+    width: 25%;
+    padding: 0px 8px;
+    margin-top: 1rem;
+  }
+  .psdk-inline-list {
+    width: 75%;
+    padding: 0px 8px;
+  }
+}
+
+.psdk-inline-end {
+  flex-direction: row-reverse;
+}

package/lib/template/inline-dashboard/inline-dashboard.component.spec.ts

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

package/lib/template/inline-dashboard/inline-dashboard.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface InlineDashboardProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  filterPosition?: string;
+}
+
+@Component({
+  selector: 'app-inline-dashboard',
+  templateUrl: './inline-dashboard.component.html',
+  styleUrls: ['./inline-dashboard.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class InlineDashboardComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() filtersFormGroup$: FormGroup;
+  @Input() inlineProps: InlineDashboardProps;
+  @Input() children: any[];
+}

package/lib/template/inline-dashboard-page/inline-dashboard-page.component.html

@@ -0,0 +1 @@
+<component-mapper name="InlineDashboard" [props]="{ inlineProps, children, filtersFormGroup$ }"></component-mapper>

package/lib/template/inline-dashboard-page/inline-dashboard-page.component.spec.ts

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

package/lib/template/inline-dashboard-page/inline-dashboard-page.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { buildFilterComponents } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface InlineDashboardPageProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  icon?: string;
+  filterPosition?: string;
+}
+
+@Component({
+  selector: 'app-inline-dashboard-page',
+  templateUrl: './inline-dashboard-page.component.html',
+  styleUrls: ['./inline-dashboard-page.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class InlineDashboardPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+
+  configProps$: InlineDashboardPageProps;
+  filterComponents: any;
+  inlineProps: any;
+  children: any = [];
+  filtersFormGroup$: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.filtersFormGroup$ = this.fb.group({ hideRequired: false });
+  }
+
+  ngOnInit() {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
+    const arChildren$ = this.pConn$.getChildren() as any[];
+    const allFilters = (this.pConn$.getRawMetadata() as any).children[1];
+    const filterComponents = buildFilterComponents(this.pConn$, allFilters);
+    this.inlineProps = this.configProps$;
+    this.children[0] = arChildren$[0];
+    this.children[1] = filterComponents;
+  }
+}

package/lib/template/list-page/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "ListPage",
+  "type": "Template",
+  "subtype": "PAGE",
+  "label": "List page",
+  "properties": []
+}

package/lib/template/list-page/list-page.component.html

@@ -0,0 +1 @@
+<component-mapper name="ListView" [props]="{ pConn$, bInForm$: false }"></component-mapper>

package/lib/template/list-page/list-page.component.spec.ts

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

package/lib/template/list-page/list-page.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-list-page',
+  templateUrl: './list-page.component.html',
+  styleUrls: ['./list-page.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class ListPageComponent {
+  @Input() pConn$: typeof PConnect;
+}