@pega/dx-component-builder-sdk 23.1.15 → 24.1.11

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -0,0 +1,164 @@
+// // 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 var(--app-divider-color);
+  width: 100%;
+  align-items: center;
+}
+
+.psdk-nav-header {
+  display: flex;
+  padding-top: 0.625rem;
+  cursor: pointer;
+  padding-right: 1rem;
+  &:hover {
+    background-color: var(--app-neutral-color);
+  }
+  align-items: center;
+}
+
+.psdk-nav-logo {
+  width: 3.75rem;
+  padding: 0.625rem;
+  margin-right: 1.25rem;
+}
+
+.psdk-nav-svg-icon {
+  filter: var(--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: var(--app-nav-color);
+}
+
+.psdk-appshell-nav {
+  z-index: 3;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 100%;
+  color: var(--app-nav-color);
+  overflow-y: auto;
+  overflow-x: hidden;
+  white-space: nowrap;
+  will-change: width;
+}
+
+.psdk-appshell-nav:hover {
+  width: var(--app-nav-width-expanded);
+}
+
+.psdk-appshell-topnav {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 15%;
+  color: var(--app-nav-color);
+  overflow: hidden;
+  white-space: nowrap;
+  will-change: width;
+}
+
+.psdk-appshell-middlenav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 50%;
+  color: var(--app-nav-color);
+  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: var(--app-nav-color);
+
+  &:hover {
+    background-color: var(--app-neutral-color);
+  }
+}
+
+.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: var(--app-neutral-color);
+  color: var(--app-form-color);
+  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/tests/assets/sdk-a/components/create/override-sdk/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();
+  });
+});

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -0,0 +1,173 @@
+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;
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'AppShell';
+  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/tests/assets/sdk-a/components/create/override-sdk/widget/attachment/attachment.component.html

@@ -1,31 +1,55 @@
-<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 class="file-upload-container" *ngIf="bVisible$">
+  <span class="attachment-label" [ngClass]="{ 'file-label': bRequired$ }">{{ label$ }}</span>
+  <div *ngIf="(files.length === 0 && !allowMultiple$) || allowMultiple$">
+    <div
+      style="margin-bottom: 10px"
+      id="attachment-container"
+      [ngClass]="validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'"
+    >
+      <div [hidden]="true" id="attachment-ID">
+        {{ valueRef }}
+      </div>
+      <input hidden type="file" [required]="bRequired$" #uploader [id]="valueRef" [multiple]="allowMultiple$" (change)="onFileAdded($event)" />
+      <button mat-stroked-button color="primary" [disabled]="bDisabled$" (click)="uploader.click()">
+        {{
+          allowMultiple$
+            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+              ? 'Choose files'
+              : uploadMultipleFilesLabel
+            : uploadSingleFileLabel === 'file_upload_text_one'
+              ? 'Choose a file'
+              : uploadSingleFileLabel
+        }}
+      </button>
+    </div>
   </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 *ngIf="files && files.length > 0">
+    <div *ngFor="let file of files">
+      <div class="psdk-attachment-card">
+        <div className="psdk-utility-card-icon">
+          <img *ngIf="!file.inProgress" class="psdk-attachment-card-svg-icon" src="{{ srcImg }}" />
+          <mat-spinner *ngIf="file.inProgress" class="progress-spinner" diameter="40"></mat-spinner>
+        </div>
+        <div class="psdk-attachment-card-main">
+          <div class="psdk-attachment-card-main-primary-label">{{ file.props.name }}</div>
+          <div *ngIf="file.props.meta" [ngStyle]="{ color: file.props.error ? 'red' : null }">{{ file.props.meta }}</div>
+        </div>
+        <div class="psdk-attachment-action">
+          <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file)">
+            <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
+          </button>
+          <div *ngIf="!file.ID">
+            <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #actionMenu="matMenu">
+              <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
+              <button mat-menu-item (click)="deleteFile(file)">Delete</button>
+            </mat-menu>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

package/tests/assets/sdk-a/components/create/override-sdk/widget/attachment/attachment.component.scss

@@ -53,3 +53,121 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+.psdk-modal-file-selector {
+  border: 1px dashed var(--app-neutral-dark-color);
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-light-color);
+}
+
+.psdk-modal-file-selector-error {
+  border: 1px dashed var(--app-error-light-color);
+  padding: 0.5rem;
+  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 var(--app-neutral-color);
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}
+
+.psdk-attachment-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.psdk-attachment-card-main-primary-label {
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-attachment-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-attachment-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-attachment-card-svg-icon {
+  width: 2.5rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.file-div {
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-light-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.attachment-label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.file-label::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}