@pega/angular-sdk-overrides 0.23.1

package/lib/template/multi-reference-readonly/multi-reference-readonly.component.html

@@ -0,0 +1,4 @@
+<div>
+  <h3 style="font-weight: bold; margin: 0">{{ label }}</h3>
+  <component-mapper name="SimpleTable" [props]="{ pConn$ }"></component-mapper>
+</div>

package/lib/template/multi-reference-readonly/multi-reference-readonly.component.spec.ts

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

package/lib/template/multi-reference-readonly/multi-reference-readonly.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface MultiReferenceReadOnlyProps {
+  label: string;
+  hideLabel: boolean;
+}
+
+@Component({
+  selector: 'app-multi-reference-readonly',
+  templateUrl: './multi-reference-readonly.component.html',
+  styleUrls: ['./multi-reference-readonly.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: MultiReferenceReadOnlyProps;
+  label: string;
+
+  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.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$.getConfigProps() as MultiReferenceReadOnlyProps;
+    this.label = this.configProps$.label;
+  }
+}

package/lib/template/narrow-wide-form/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "NarrowWideForm",
+  "label": "Narrow-wide",
+  "description": "NarrowWide Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/lib/template/narrow-wide-form/narrow-wide-form.component.html

@@ -0,0 +1,16 @@
+<div class="psdk-narrow-wide-column">
+  <div *ngFor="let kid of arChildren$">
+    <div class="psdk-narrow-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-wide-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-narrow-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-wide-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+</div>

package/lib/template/narrow-wide-form/narrow-wide-form.component.scss

@@ -0,0 +1,20 @@
+* {
+  box-sizing: border-box;
+}
+
+.psdk-narrow-wide-column {
+  display: flow-root;
+  height: 100%;
+}
+
+.psdk-narrow-column {
+  float: left;
+  min-width: 30%;
+  padding: 0rem 0.3125rem;
+}
+
+.psdk-wide-column {
+  float: left;
+  width: 70%;
+  padding: 0rem 0.3125rem;
+}

package/lib/template/narrow-wide-form/narrow-wide-form.component.spec.ts

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

package/lib/template/narrow-wide-form/narrow-wide-form.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-narrow-wide-form',
+  templateUrl: './narrow-wide-form.component.html',
+  styleUrls: ['./narrow-wide-form.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class NarrowWideFormComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+
+  ngOnInit() {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+  }
+}

package/lib/template/one-column/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "OneColumn",
+  "label": "One column",
+  "description": "OneColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/lib/template/one-column/one-column.component.html

@@ -0,0 +1,11 @@
+<div *ngFor="let kid of arChildren$">
+  <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'Region' && kid.getPConnect().getRawMetadata()['name'] === 'A'">
+    <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+  </div>
+  <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'View'">
+    <component-mapper name="View" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+  </div>
+  <div *ngIf="kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'">
+    <component-mapper name="CaseCreateStage" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+  </div>
+</div>

package/lib/template/one-column/one-column.component.scss

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

package/lib/template/one-column/one-column.component.spec.ts

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

package/lib/template/one-column/one-column.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-one-column',
+  templateUrl: './one-column.component.html',
+  styleUrls: ['./one-column.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class OneColumnComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+
+  ngOnInit(): void {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+  }
+}

package/lib/template/one-column-page/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "OneColumnPage",
+  "label": "One column",
+  "description": "OneColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/lib/template/one-column-page/one-column-page.component.html

@@ -0,0 +1 @@
+<component-mapper name="OneColumn" [props]="{ formGroup$, pConn$ }"></component-mapper>

package/lib/template/one-column-page/one-column-page.component.spec.ts

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

package/lib/template/one-column-page/one-column-page.component.ts

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

package/lib/template/one-column-tab/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "OneColumnTab",
+  "label": "One column",
+  "description": "One column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

package/lib/template/one-column-tab/one-column-tab.component.html

@@ -0,0 +1,9 @@
+<div class="psdk-one-column-tab">
+  <div *ngFor="let kid of arChildren$">
+    <div [ngSwitch]="kid.getPConnect().getComponentName()">
+      <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>
+    </div>
+  </div>
+</div>

package/lib/template/one-column-tab/one-column-tab.component.scss

@@ -0,0 +1,9 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-one-column-tab {
+  background-color: $app-form-color;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.3125rem;
+  padding: 10px;
+}

package/lib/template/one-column-tab/one-column-tab.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-one-column-tab',
+  templateUrl: './one-column-tab.component.html',
+  styleUrls: ['./one-column-tab.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class OneColumnTabComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+
+  ngOnInit(): void {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+  }
+}

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

@@ -0,0 +1,12 @@
+<div class="psdk-page-title">
+  <h2>{{ title$ }}</h2>
+</div>
+<div class="page-body">
+  <div *ngFor="let kid of arChildren$">
+    <div [ngSwitch]="kid.getPConnect().getComponentName()">
+      <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <div *ngSwitchDefault>Page Missing: {{ kid.getPConnect().getComponentName() }}</div>
+    </div>
+  </div>
+</div>

package/lib/template/page/page.component.scss

@@ -0,0 +1,3 @@
+.psdk-page-title {
+  padding-left: 0.2rem;
+}

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

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

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

@@ -0,0 +1,68 @@
+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';
+
+interface PageProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  operator?: string;
+}
+
+@Component({
+  selector: 'app-page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class PageComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  configProps$: PageProps;
+  arChildren$: any[];
+  title$: string;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit() {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PageProps;
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+
+    this.title$ = this.configProps$.title;
+    const operator = this.configProps$.operator;
+
+    if (operator && operator != '') {
+      this.title$ += `, ${operator}`;
+    }
+
+    // when showing a page, similar to updating root, need to cause viewContainer to call "initContainer"
+    sessionStorage.setItem('hasViewContainer', 'false');
+  }
+
+  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
+    //    AND removing the "gate" that was put there since shouldComponentUpdate
+    //      should be the real "gate"
+    if (bUpdateSelf) {
+      // turn off spinner
+      // this.psService.sendMessage(false);
+    }
+  }
+}

package/lib/template/promoted-filters/promoted-filters.component.html

@@ -0,0 +1,27 @@
+<div>
+  <div>{{ listViewProps.title }}</div>
+  <div *ngIf="showFilters" class="psdk-grid-filter">
+    <div *ngFor="let kid of processedFilters">
+      <component-mapper
+        [name]="kid.getPConnect().getComponentName()"
+        [props]="{
+          pConn$: kid.getPConnect(),
+          formGroup$: formGroup$
+        }"
+        errorMsg="Promoted filters wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+      ></component-mapper>
+    </div>
+  </div>
+
+  <div>
+    <button key="1" type="button" (click)="clearFilterData()" data-testid="clear" mat-raised-button color="secondary">
+      {{ localizedVal('Clear', localeCategory) }}
+    </button>
+    <button style="float: 'right'" key="2" type="submit" (click)="getFilterData()" data-testid="search" mat-raised-button color="primary">
+      {{ localizedVal('Search', localeCategory) }}
+    </button>
+  </div>
+  <div *ngIf="showTable">
+    <component-mapper name="ListView" [props]="{ pConn$, payload }"></component-mapper>
+  </div>
+</div>

package/lib/template/promoted-filters/promoted-filters.component.scss

@@ -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/lib/template/promoted-filters/promoted-filters.component.spec.ts

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