@pega/angular-sdk-overrides 0.23.1

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

@@ -0,0 +1,172 @@
+import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
+import { Utils } from '@pega/angular-sdk-components';
+
+interface WssNavBarProps {
+  // If any, enter additional props that only exist on this component
+  showAppName: boolean;
+}
+
+@Component({
+  selector: 'app-wss-nav-bar',
+  templateUrl: './wss-nav-bar.component.html',
+  styleUrls: ['./wss-nav-bar.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, MatListModule, MatMenuModule, MatIconModule, MatToolbarModule]
+})
+export class WssNavBarComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() appName$: string;
+  @Input() pages$: any[];
+  @Input() caseTypes$: any[];
+  @Input() homePage: any;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: WssNavBarProps;
+
+  navPages$: any[];
+  navExpandCollapse$: string;
+  bShowCaseTypes$ = false;
+
+  portalApp$ = '';
+  portalLogoImage$: string;
+  showAppName$ = false;
+
+  portalOperator$: string;
+  portalOperatorInitials$: string;
+
+  actionsAPI: any;
+  createWork: any;
+  showPage: any;
+  logout: any;
+
+  navIcon$: string;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef,
+    private psService: ProgressSpinnerService,
+    private ngZone: NgZone,
+    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.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+
+    // this is a dummy "get", because right now images are in http and the main screen is https
+    // so the images don't load automatically.  This call, makes an initial hit that allows the
+    // rest of the images to show up
+    this.loadImage(this.navIcon$);
+
+    this.initComponent();
+  }
+
+  // ngOnDestroy
+  //  unsubscribe from Store
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  loadImage(src: string) {
+    return new Promise(resolve => {
+      resolve(src);
+    });
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // Should always check the bridge to see if the component should update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // NOTE: can call angularPConnect.getState with optional args for detailed logging: bLogMsg and component object
+    this.angularPConnect.getState();
+
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf(): void {
+    this.initComponent();
+  }
+
+  initComponent() {
+    this.ngZone.run(() => {
+      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+
+      // Then, continue on with other initialization
+
+      // making a copy, so can add info
+      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+
+      this.navPages$.forEach(page => {
+        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
+      });
+
+      this.actionsAPI = this.pConn$.getActionsApi();
+      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as WssNavBarProps;
+      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+
+      // const oData = this.pConn$.getDataObject();
+
+      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.showAppName$ = this.configProps$.showAppName;
+
+      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    });
+  }
+
+  navPanelButtonClick(oPageData: any) {
+    const { pyClassName, pyRuleName } = oPageData;
+
+    this.showPage(pyRuleName, pyClassName);
+  }
+
+  navPanelCreateButtonClick() {
+    if (this.navExpandCollapse$.indexOf('plus') > 0) {
+      this.navExpandCollapse$ = this.utils.getImageSrc('times', this.utils.getSDKStaticContentUrl());
+      this.bShowCaseTypes$ = true;
+    } else {
+      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+      this.bShowCaseTypes$ = false;
+    }
+    this.cdRef.detectChanges();
+  }
+
+  navPanelCreateCaseType(sCaseType: string, sFlowType: string) {
+    this.psService.sendMessage(true);
+    this.navPanelCreateButtonClick();
+
+    const actionInfo = {
+      containerName: 'primary',
+      flowType: sFlowType || 'pyStartCase'
+    };
+    this.createWork(sCaseType, actionInfo);
+  }
+
+  navPanelLogoutClick() {
+    logout().then(() => {
+      // Reload the page to kick off the login
+      window.location.reload();
+    });
+  }
+}

package/lib/widget/app-announcement/app-announcement.component.html

@@ -0,0 +1,13 @@
+<article class="psdk-announcement">
+  <h2>{{ configProps$.header }}</h2>
+  <div>
+    <p>{{ configProps$.description }}</p>
+    <div>
+      <h3>{{ configProps$.label }}</h3>
+      <ul>
+        <li *ngFor="let detail of details$">{{ detail }}</li>
+      </ul>
+    </div>
+  </div>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+</article>

package/lib/widget/app-announcement/app-announcement.component.scss

@@ -0,0 +1,21 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+h2 {
+  font-size: 1.2rem;
+  margin-block-start: 0rem;
+}
+
+h3 {
+  font-size: 1.1rem;
+}
+ul {
+  padding-inline-start: 20px;
+}
+.psdk-announcement {
+  background-color: white;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 0.6125rem;
+  border-left: 6px solid;
+  border-left-color: #7986cb;
+}

package/lib/widget/app-announcement/app-announcement.component.spec.ts

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

package/lib/widget/app-announcement/app-announcement.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+
+interface AppAnnouncementProps {
+  // If any, enter additional props that only exist on this component
+  header?: string;
+  description?: string;
+  whatsnewlink?: string;
+  label?: string;
+  datasource?: any;
+}
+
+@Component({
+  selector: 'app-app-announcement',
+  templateUrl: './app-announcement.component.html',
+  styleUrls: ['./app-announcement.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule]
+})
+export class AppAnnouncementComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+
+  configProps$: AppAnnouncementProps;
+  details$: any[];
+
+  ngOnInit(): void {
+    this.configProps$ = this.pConn$.getConfigProps();
+    const { datasource } = this.configProps$;
+
+    if (datasource?.source) {
+      this.details$ = datasource.source.map(item => item.name);
+    }
+  }
+}

package/lib/widget/app-announcement/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "AppAnnouncement",
+  "label": "App announcement",
+  "description": "App announcement widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": []
+}

package/lib/widget/attachment/attachment.component.html

@@ -0,0 +1,31 @@
+<div class="psdk-label-infix-readonly" *ngIf="bVisible$">
+  <span class="psdk-label-wrapper-readonly">
+    <label [ngClass]="{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }" [htmlFor]="att_valueRef">{{ label$ }}</label>
+  </span>
+  <div
+    [ngClass]="{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }"
+    id="attachment-container"
+    *ngIf="bShowSelector$"
+  >
+    <mat-spinner *ngIf="bLoading$" class="progress-spinner" diameter="40"></mat-spinner>
+    <input hidden type="file" [required]="bRequired$" #uploader [id]="att_valueRef" [multiple]="allowMultiple$" (change)="uploadMyFiles($event)" />
+
+    <button mat-stroked-button color="primary" [disabled]="bDisabled$" (click)="uploader.click()">
+      {{ allowMultiple$ ? 'Upload files' : 'Upload file' }}
+    </button>
+  </div>
+  <span *ngIf="validateMessage" class="file-error">{{ validateMessage }}</span>
+
+  <div class="psdk-attachment-list" *ngIf="arFileList$ != null && arFileList$.length > 0">
+    <div *ngFor="let attachment of arFileList$">
+      <component-mapper
+        *ngIf="attachment.noDeleteIcon !== true; else showfull"
+        name="SummaryItem"
+        [props]="{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }"
+      ></component-mapper>
+      <ng-template #showfull>
+        <component-mapper name="SummaryItem" [props]="{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }"></component-mapper>
+      </ng-template>
+    </div>
+  </div>
+</div>

package/lib/widget/attachment/attachment.component.scss

@@ -0,0 +1,57 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.progress-spinner {
+  text-align: center;
+  position: absolute;
+  left: 45%;
+}
+
+.psdk-modal-file-selector {
+  border: 1px dashed $app-neutral-dark-color;
+  width: 100%;
+  padding: 0.3rem;
+  text-align: center;
+  position: relative;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: $app-neutral-dark-color;
+}
+
+.file-error {
+  color: $app-error-light-color;
+}
+
+.psdk-modal-file-selector-error {
+  border: 1px dashed $app-error-light-color;
+  width: 100%;
+  padding: 0.3rem;
+  text-align: center;
+  position: relative;
+}
+
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-label-readonly {
+  opacity: 54%;
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-attachment-list {
+  border: 1px solid $app-neutral-color;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/lib/widget/attachment/attachment.component.spec.ts

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