@pega/angular-sdk-overrides 0.23.1

package/lib/widget/list-utility/list-utility.component.html

@@ -0,0 +1,32 @@
+<div style="text-align: left">
+  <div class="psdk-utility">
+    <div class="header">
+      <div class="header-icon">
+        <img class="psdk-utility-svg-icon" src="{{ headerSvgIcon$ }}" />
+      </div>
+      <div class="header-text">{{ name$ }}</div>
+      <div class="psdk-utility-count" id="attachments-count">{{ count$ }}</div>
+      <div style="flex-grow: 1"></div>
+      <div class="header-icon">
+        <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
+          <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+        </button>
+        <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
+          <ng-container *ngFor="let action of arActions$">
+            <button mat-menu-item (click)="action.onClick()">{{ action.text }}</button>
+          </ng-container>
+        </mat-menu>
+      </div>
+    </div>
+    <div class="psdk-utiltiy-divider"></div>
+    <br />
+    <mat-spinner *ngIf="bLoading$" class="progress-spinner" diameter="50"></mat-spinner>
+    <div *ngIf="count$ == 0" class="message">{{ noItemsMessage$ }}</div>
+    <div *ngIf="count$ > 0" class="psdk-utility-items">
+      <component-mapper name="SummaryList" [props]="{ arItems$, menuIconOverrideAction$ }"></component-mapper>
+    </div>
+    <div class="psdk-utility-view-all">
+      <button *ngIf="count$ > 3" mat-button color="primary" (click)="onViewAll$.onClick()">View all</button>
+    </div>
+  </div>
+</div>

package/lib/widget/list-utility/list-utility.component.scss

@@ -0,0 +1,135 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.progress-spinner {
+  text-align: center;
+  position: absolute;
+  top: 40%;
+  left: 40%;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-utility-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-utility-view-all {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.psdk-utility-count {
+  background: $app-primary-light-color;
+  border-radius: calc(1.125 * 0.5rem);
+  color: black;
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-align: center;
+  width: 1.125rem;
+
+  vertical-align: top;
+  margin: 0 0 0.313rem 1rem;
+}
+
+.psdk-utility .header-text {
+  font-size: 1rem;
+  font-weight: bold;
+  padding-bottom: 0.3125rem;
+  text-align: left;
+  display: inline-block;
+}
+
+.psdk-utility .header-icon {
+  display: inline-block;
+}
+
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  background-color: $app-form-color;
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+  position: relative;
+}
+.psdk-utility .header {
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-utility-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-settings-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-utility .message {
+  text-align: center;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  max-width: 16.563rem;
+}
+
+.psdk-utility-card-main-primary-url {
+  color: $app-primary-color;
+}
+
+.psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary {
+  padding-left: 0px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+}
+
+.psdk-utility-card-actions {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-utility-card-action-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: bottom;
+}

package/lib/widget/list-utility/list-utility.component.spec.ts

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

package/lib/widget/list-utility/list-utility.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-list-utility',
+  templateUrl: './list-utility.component.html',
+  styleUrls: ['./list-utility.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatMenuModule, MatProgressSpinnerModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ListUtilityComponent implements OnInit {
+  @Input() name$ = '';
+  @Input() icon$ = '';
+  @Input() bLoading$ = false;
+  @Input() count$ = 0;
+  @Input() arActions$: any[] = [];
+  @Input() arItems$: any[] = [];
+  @Input() menuIconOverrideAction$: any[] = [];
+
+  // function to all
+  @Input() onViewAll$: any;
+
+  headerSvgIcon$: string;
+  settingsSvgIcon$: string;
+
+  noItemsMessage$ = 'No Items';
+
+  imagePath$ = '';
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    this.imagePath$ = this.getIconPath();
+
+    this.headerSvgIcon$ = this.utils.getImageSrc(this.icon$, this.utils.getSDKStaticContentUrl());
+    this.settingsSvgIcon$ = this.utils.getImageSrc('more', this.utils.getSDKStaticContentUrl());
+  }
+
+  getIconPath(): string {
+    return `${this.utils.getSDKStaticContentUrl()}assets/icons/`;
+  }
+}

package/lib/widget/quick-create/quick-create.component.html

@@ -0,0 +1 @@
+<component-mapper name="WssQuickCreate" [props]="{ heading$, actions$: cases$ }"></component-mapper>

package/lib/widget/quick-create/quick-create.component.spec.ts

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

package/lib/widget/quick-create/quick-create.component.ts

@@ -0,0 +1,96 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
+import { Utils } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface QuickCreateProps {
+  // If any, enter additional props that only exist on this component
+  heading?: string;
+  showCaseIcons?: boolean;
+  classFilter?: any;
+}
+
+@Component({
+  selector: 'app-quick-create',
+  templateUrl: './quick-create.component.html',
+  styleUrls: ['./quick-create.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class QuickCreateComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: QuickCreateProps;
+  arChildren$: any[];
+  heading$?: string;
+  showCaseIcons$?: boolean;
+  classFilter$: any;
+  cases$: any = [];
+
+  constructor(private utils: Utils) {}
+
+  createCase(className) {
+    this.pConn$
+      .getActionsApi()
+      .createWork(className, {} as any)
+      .catch(error => {
+        console.log('Error in case creation: ', error?.message);
+      });
+  }
+
+  initComponent() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as QuickCreateProps;
+
+    this.heading$ = this.configProps$.heading;
+    this.showCaseIcons$ = this.configProps$.showCaseIcons;
+    this.classFilter$ = this.configProps$.classFilter;
+
+    const envInfo = PCore.getEnvironmentInfo();
+    if (
+      this.classFilter$ &&
+      envInfo.environmentInfoObject &&
+      envInfo.environmentInfoObject.pyCaseTypeList &&
+      envInfo.environmentInfoObject.pyCaseTypeList.length > 0
+    ) {
+      this.classFilter$.forEach(item => {
+        let icon = this.utils.getImageSrc('polaris-solid', this.utils.getSDKStaticContentUrl());
+        let label = '';
+        envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
+          if (casetype.pyWorkTypeImplementationClassName === item) {
+            icon = casetype.pxIcon && this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl());
+            label = casetype.pyWorkTypeName ?? '';
+          }
+        });
+        if (label !== '') {
+          this.cases$.push({
+            label,
+            onClick: () => {
+              this.createCase(item);
+            },
+            ...(this.showCaseIcons$ && { icon })
+          });
+        }
+      });
+    }
+  }
+
+  ngOnInit() {
+    // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
+    // this.updateSelf();
+
+    this.initComponent();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.initComponent();
+  }
+}

package/lib/widget/todo/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Todo",
+  "label": "Todo",
+  "description": "My worklist widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": []
+}

package/lib/widget/todo/todo.component.html

@@ -0,0 +1,47 @@
+<div class="psdk-todo">
+  <div class="psdk-todo-header">
+    <div *ngIf="showTodoList$" class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
+    <div id="worklist" class="psdk-todo-text">{{ headerText$ }}</div>
+    <div *ngIf="showTodoList$" class="psdk-assignment-count">{{ assignmentCount$ }}</div>
+  </div>
+  <br /><br />
+  <div *ngIf="showTodoList$" class="psdk-display-divider"></div>
+
+  <div class="psdk-todo-assignments">
+    <div *ngFor="let assignment of arAssignments$">
+      <div class="psdk-todo-assignment">
+        <div class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
+        <div class="psdk-todo-card">
+          <div class="psdk-todo-assignment-title">{{ getAssignmentName(assignment) }}</div>
+          <div class="psdk-todo-assignment-data">
+            <div class="psdk-todo-assignment-task">
+              Task in
+              <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)">
+                {{ assignment.name }} {{ getID(assignment) }}
+              </button>
+              <span *ngIf="assignment.status != undefined">
+                &bull; <span class="psdk-todo-assignment-status">{{ assignment?.status }}</span>
+              </span>
+              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}
+            </div>
+          </div>
+        </div>
+        <div class="psdk-todo-assignment-action">
+          <button mat-flat-button color="primary" (click)="clickGo(assignment)">{{ localizedVal('Go', localeCategory) }}</button>
+        </div>
+      </div>
+      <div class="psdk-display-divider"></div>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="assignmentCount$ > 3">
+  <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
+    <button mat-stroked-button (click)="_showMore()">Show more</button>
+  </div>
+  <ng-template #showLess>
+    <div class="psdk-todo-show-more">
+      <button mat-stroked-button (click)="_showLess()">Show less</button>
+    </div>
+  </ng-template>
+</div>

package/lib/widget/todo/todo.component.scss

@@ -0,0 +1,98 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-display-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-todo {
+  padding: 1rem;
+  background-color: white;
+  border-radius: 0.6125rem;
+  border-left: 6px solid;
+  border-left-color: #7986cb;
+}
+
+.psdk-todo-header {
+  display: inline-flex;
+}
+
+.psdk-todo-text {
+  padding: 0.5rem 0.625rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.psdk-assignment-count {
+  background-color: $app-primary-light-color;
+  margin: 0.5rem;
+  border-radius: 45%;
+  padding: 0.15rem 0.4rem;
+}
+
+.psdk-todo-id {
+  color: $app-primary-color;
+  padding: 0;
+  cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  align-items: center;
+}
+
+.psdk-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: flex;
+  background: $app-primary-color;
+  color: white;
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.psdk-todo-assignment {
+  display: inline-flex;
+  width: 100%;
+  padding: 0.625rem 0rem;
+}
+
+.psdk-todo-assignment-data {
+  display: inline-flex;
+}
+
+.psdk-todo-assignment-status {
+  background-color: $app-neutral-light-color;
+  border-radius: 0.125rem;
+  color: darkslategray;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-todo-assignment-task {
+  color: $app-neutral-color;
+}
+
+.psdk-todo-assignment-action {
+  display: inline-flex;
+}
+
+.psdk-todo-card {
+  width: 100%;
+  padding-left: 0.625rem;
+}
+
+.psdk-todo-show-more {
+  width: 100%;
+  text-align: center;
+  margin-top: 0.625rem;
+}

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

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