@pega/angular-sdk-overrides 0.23.1

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

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

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

@@ -0,0 +1,43 @@
+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';
+
+@Component({
+  selector: 'app-two-column-page',
+  templateUrl: './two-column-page.component.html',
+  styleUrls: ['./two-column-page.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class TwoColumnPageComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+  }
+
+  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) {
+      /* empty */
+    }
+  }
+}

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

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

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

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

@@ -0,0 +1,28 @@
+* {
+  box-sizing: border-box;
+}
+
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}
+
+.psdk-two-column-left {
+  float: left;
+  min-width: 50%;
+  padding: 0rem 0.3125rem;
+}
+
+.psdk-two-column-right {
+  float: left;
+  width: 50%;
+  padding: 0rem 0.3125rem;
+}

package/lib/template/two-column-tab/two-column-tab.component.spec.ts

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

package/lib/template/two-column-tab/two-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-two-column-tab',
+  templateUrl: './two-column-tab.component.html',
+  styleUrls: ['./two-column-tab.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class TwoColumnTabComponent 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/utils.ts

@@ -0,0 +1,23 @@
+//  This file is adapted from Nebula/Constellation components/Templates/utils.js
+
+export function getAllFields(pConnect: any) {
+  const metadata = pConnect.getRawMetadata();
+  let allFields = [];
+  if (metadata.children && metadata.children.map) {
+    allFields = metadata.children.map(fields => {
+      const children = fields.children instanceof Array ? fields.children : [];
+      return children.map(field => field.config);
+    });
+  }
+  return allFields;
+}
+
+export function filterForFieldValueList(fields: any) {
+  return fields
+    .filter(({ visibility }) => visibility !== false)
+    .map(({ value, label }) => ({
+      id: label.toLowerCase(),
+      name: label,
+      value
+    }));
+}

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

@@ -0,0 +1,8 @@
+{
+  "name": "WideNarrowForm",
+  "label": "Wide-narrow",
+  "description": "WideNarrow Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

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

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

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

package/lib/template/wide-narrow-form/wide-narrow-form.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-wide-narrow-form',
+  templateUrl: './wide-narrow-form.component.html',
+  styleUrls: ['./wide-narrow-form.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class WideNarrowFormComponent 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/wide-narrow-page/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "WideNarrowPage",
+  "label": "Wide-narrow",
+  "description": "Wide-narrow Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

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

@@ -0,0 +1,6 @@
+<div [ngSwitch]="this.thePConnType">
+  <component-mapper *ngSwitchCase="'ViewContainer'" name="ViewContainer" [props]="{ pConn$, formGroup$ }"></component-mapper>
+  <!-- NOTE: when we get the view, we want to render it as a wide-narrow-form -->
+  <component-mapper *ngSwitchCase="'View'" name="WideNarrowForm" [props]="{ pConn$, formGroup$ }"></component-mapper>
+  <div *ngSwitchDefault>WideNarrowPage missing: {{ this.pConn$.getComponentName() }}</div>
+</div>

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

@@ -0,0 +1,61 @@
+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';
+
+@Component({
+  selector: 'app-wide-narrow-page',
+  templateUrl: './wide-narrow-page.component.html',
+  styleUrls: ['./wide-narrow-page.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class WideNarrowPageComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  thePConnType = '';
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // normalize the pConn$ in case the incoming pConn$ is a 'reference'
+    // this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // this.updateSelf();
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  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() {
+    // console.log(`WideNarrowPage: updateSelf`);
+
+    this.thePConnType = this.pConn$.getComponentName();
+  }
+}

package/lib/template/wss-nav-bar/wss-nav-bar.component.html

@@ -0,0 +1,32 @@
+<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+  <mat-toolbar-row mat-icon-button>
+    <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
+      <div>
+        <img src="{{ portalLogoImage$ }}" class="psdk-nav-logo" />
+      </div>
+      <div class="psdk-nav-portal-info">
+        <div class="psdk-nav-portal-app">{{ portalApp$ }}</div>
+      </div>
+    </div>
+
+    <div *ngFor="let page of navPages$">
+      <div class="flex-box mat-list-item" style="cursor: pointer" (click)="navPanelButtonClick(page)">
+        <div mat-button class="psdk-nav-button-span">{{ page.pyLabel }}</div>
+      </div>
+    </div>
+
+    <span class="spacer"></span>
+
+    <mat-list>
+      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+        <div class="flex-box">
+          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        </div>
+      </mat-list-item>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>Profile</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">Logoff</button>
+      </mat-menu>
+    </mat-list>
+  </mat-toolbar-row>
+</mat-toolbar>

package/lib/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -0,0 +1,166 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+// // Things related to movement
+// $transition-slow: 0.5s !default;
+// $transition-medium: 0.3s !default;
+// $transition-fast: 0.1s !default;
+// $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
+
+.psdk-nav-divider {
+  border-bottom: 0.0625rem solid invert($app-nav-bg, 15%);
+  width: 100%;
+  align-items: center;
+}
+
+.psdk-nav-header {
+  display: flex;
+  padding-top: 0.625rem;
+  cursor: pointer;
+  padding-right: 1rem;
+  &:hover {
+    background-color: grey;
+  }
+  align-items: center;
+}
+
+.psdk-nav-logo {
+  width: 3.75rem;
+  padding: 0.625rem;
+  margin-right: 1.25rem;
+}
+
+.psdk-nav-svg-icon {
+  filter: $app-white-color-filter;
+  width: 1.6rem;
+  padding-right: 0.625rem;
+}
+
+.psdk-nav-portal-name {
+  font-size: 0.875rem;
+}
+
+.psdk-nav-portal-app {
+  font-size: 1.5rem;
+  color: #d9d9d9;
+}
+
+.psdk-appshell-nav {
+  z-index: 3;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: $app-nav-bg;
+  width: $app-nav-width;
+  height: 100%;
+  color: invert($app-nav-bg, 100%);
+  overflow-y: auto;
+  overflow-x: hidden;
+  white-space: nowrap;
+  will-change: width;
+}
+
+.psdk-appshell-nav:hover {
+  width: $app-nav-width-expanded;
+}
+
+.psdk-appshell-topnav {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: $app-nav-bg;
+  width: $app-nav-width;
+  height: 15%;
+  color: invert($app-nav-bg, 100%);
+  overflow: hidden;
+  white-space: nowrap;
+  will-change: width;
+}
+
+.psdk-appshell-middlenav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: $app-nav-bg;
+  width: $app-nav-width;
+  height: 50%;
+  color: invert($app-nav-bg, 100%);
+  overflow: hidden;
+  white-space: nowrap;
+  //   transition: width $transition-medium $natural-ease;
+  will-change: width;
+}
+
+.psdk-nav-ul-middle {
+  display: block;
+  list-style-type: none;
+  margin: 0rem;
+  padding-inline-start: 30px;
+}
+
+.psdk-nav-li-middle {
+  box-sizing: border-box;
+  text-align: left;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-nav-button-span {
+  padding: 0 1rem;
+  color: invert($app-nav-bg, 100%);
+
+  &:hover {
+    background-color: grey;
+  }
+}
+
+.psdk-nav-oper-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: inline-flex;
+  background: $app-neutral-color;
+  color: white;
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+mat-list {
+  padding: 0;
+}
+
+.psdk-profile-list-item {
+  padding-left: 24px;
+}
+
+mat-list-item {
+  padding: 20px 30px;
+  padding-right: 0;
+  cursor: pointer !important;
+  height: auto !important;
+
+  &:hover {
+    // background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .flex-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

package/lib/template/wss-nav-bar/wss-nav-bar.component.spec.ts

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