@pega/dx-component-builder-sdk 25.1.15 → 25.1.17

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/app-announcement/config-ext.json

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

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/attachment/attachment.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy, ViewChild, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -76,7 +76,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -96,6 +97,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
         PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
         () => {
           this.overrideLocalState = true;
+          this.cdRef.markForCheck();
         },
         this.caseID
       );
@@ -336,6 +338,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
       return localFile;
     });
+    this.cdRef.markForCheck();
   }
 
   populateErrorAndUpdateRedux(file) {

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/attachment/config-ext.json

@@ -1,9 +1,7 @@
 {
-    "label": "Attachment",
-    "componentKey": "Attachment",
-    "name": "Attachment",
-    "description": "Attachment",
-    "type": "Field",
-    "subtype": "DATA_CAPTURE",
-    "properties": []
-}
+  "name": "Attachment",
+  "description": "Attachment",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/case-history/case-history.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -23,7 +23,10 @@ export class CaseHistoryComponent implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +57,7 @@ export class CaseHistoryComponent implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
   // This method isn't being used anywhere, keeping it as a reference for now

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/case-history/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "CaseHistory",
-    "name": "CaseHistory",
-    "label": "Case history",
-    "description": "Case history widget",
-    "type": "Widget",
-    "subtype": "CASE",
-    "properties": []
-}
+  "name": "CaseHistory",
+  "label": "Case history",
+  "description": "Case history widget",
+  "type": "Widget",
+  "subtype": "CASE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/feed-container/config-ext.json

@@ -1,16 +1,12 @@
 {
-    "componentKey": "Pulse",
-    "name": "Pulse",
-    "label": "Pulse",
-    "description": "Pulse feed widget",
-    "type": "Widget",
-    "subtype": [
-        "PAGE",
-        "CASE"
-    ],
-    "properties": [],
-    "defaultConfig": {
-        "messageIDs": "@P pulse.messageIDs"
-    },
-    "hideModifyIcon": true
-}
+  "name": "Pulse",
+  "label": "Pulse",
+  "description": "Pulse feed widget",
+  "type": "Widget",
+  "subtype": ["PAGE", "CASE"],
+  "properties": [],
+  "defaultConfig": {
+    "messageIDs": "@P pulse.messageIDs"
+  },
+  "hideModifyIcon": true
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "FileUtility",
-    "name": "FileUtility",
-    "label": "Attachments",
-    "description": "Attachments",
-    "type": "Widget",
-    "subtype": "CASE",
-    "properties": []
-}
+  "name": "FileUtility",
+  "label": "Attachments",
+  "description": "Attachments",
+  "type": "Widget",
+  "subtype": "CASE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -74,7 +74,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -273,9 +273,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       for (let fileIndex = 0; fileIndex < arFileList.length; fileIndex++) {
         if (arFileList[fileIndex].id == itemId) {
           // remove the file from the list and redraw
-          this.ngZone.run(() => {
-            arFileList.splice(fileIndex, 1);
-          });
+          arFileList.splice(fileIndex, 1);
+          this.cdRef.markForCheck();
           break;
         }
       }
@@ -293,9 +292,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
           // remove the file from the list and redraw
           localLinksList.splice(linkIndex, 1);
 
-          this.ngZone.run(() => {
-            this.arLinksList$ = localLinksList.slice();
-          });
+          this.arLinksList$ = localLinksList.slice();
+          this.cdRef.markForCheck();
 
           break;
         }
@@ -482,24 +480,23 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     oLink.primary.icon = 'open';
     oLink.secondary.text = url;
 
-    this.ngZone.run(() => {
-      // need to create a new array or summary list won't detect changes
-      this.arLinksList$ = localList.slice();
-      this.arLinksList$.push(oLink);
+    // need to create a new array or summary list won't detect changes
+    this.arLinksList$ = localList.slice();
+    this.arLinksList$.push(oLink);
 
-      // list for actually attachments
-      const link: any = {};
-      link.id = oLink.id;
-      link.linkTitle = this.link_title$;
-      link.type = oLink.type;
-      link.url = url;
+    // list for actually attachments
+    const link: any = {};
+    link.id = oLink.id;
+    link.linkTitle = this.link_title$;
+    link.type = oLink.type;
+    link.url = url;
 
-      this.arLinks$.push(link);
+    this.arLinks$.push(link);
 
-      // clear values
-      this.link_title$ = '';
-      this.link_url$ = '';
-    });
+    // clear values
+    this.link_title$ = '';
+    this.link_url$ = '';
+    this.cdRef.markForCheck();
   }
 
   _changeTitle(event: any) {
@@ -575,15 +572,13 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   createModal(modalType: string) {
     switch (modalType) {
       case 'addLocalFile':
-        this.ngZone.run(() => {
-          this.bShowFileModal$ = true;
-        });
+        this.bShowFileModal$ = true;
+        this.cdRef.markForCheck();
 
         break;
       case 'addLocalLink':
-        this.ngZone.run(() => {
-          this.bShowLinkModal$ = true;
-        });
+        this.bShowLinkModal$ = true;
+        this.cdRef.markForCheck();
         break;
       default:
         break;
@@ -716,6 +711,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
         })
         .finally(() => {
           this.lu_bLoading$ = false;
+          this.cdRef.markForCheck();
         });
     }
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/quick-create/config-ext.json

@@ -1,10 +1,9 @@
 {
-    "componentKey": "QuickCreate",
-    "name": "QuickCreate",
-    "label": "Quick create",
-    "description": "Quick create widget",
-    "type": "Widget",
-    "subtype": "PAGE",
-    "properties": [],
-    "defaultConfig": {}
-}
+  "name": "QuickCreate",
+  "label": "Quick create",
+  "description": "Quick create widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": [],
+  "defaultConfig": {}
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/config-ext.json

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

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
@@ -97,7 +97,8 @@ export class TodoComponent implements OnInit, OnDestroy {
   constructor(
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -167,6 +168,7 @@ export class TodoComponent implements OnInit, OnDestroy {
   deferLoadWorklistItems(responseData) {
     this.count = responseData.totalCount;
     this.arAssignments$ = responseData.data;
+    this.cdRef.markForCheck();
   }
 
   getID(assignment: any) {
@@ -221,6 +223,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, this.count, false, this.context$).then(
         response => {
           this.arAssignments$ = response.data;
+          this.cdRef.markForCheck();
         }
       );
     } else {
@@ -268,6 +271,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       .openAssignment(id, classname, options)
       .then(() => {
         this.psService.sendMessage(false);
+        this.cdRef.markForCheck();
         if (this.bLogging) {
           console.log(`openAssignment completed`);
         }
@@ -275,6 +279,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       .catch(() => {
         this.psService.sendMessage(false);
         this.erService.sendMessage('show', 'Failed to open');
+        this.cdRef.markForCheck();
       });
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details/material-details.component.html

@@ -1,40 +0,0 @@
-<div id="details-fields-list">
-  <div
-    *ngIf="arHighlightedFields && arHighlightedFields.length > 0"
-    [ngClass]="{
-      'psdk-grid-filter-1': this.layout === 'one-column',
-      'psdk-grid-filter-2': this.layout === 'two-column',
-      'psdk-grid-filter-3': this.layout === 'three-column',
-      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
-      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
-    }"
-  >
-    <div *ngFor="let field of arHighlightedFields">
-      <div class="psdk-details-fields-label">
-        {{ field.config.label }}
-      </div>
-      <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
-        <span *ngSwitchCase="'textinput'" class="psdk-details-text-style-hf">{{ _getValue(field.config.value) }}</span>
-        <span *ngSwitchCase="'status'" class="psdk-details-status-style-hf">{{ _getValue(field.config.value) }}</span>
-        <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-        <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-        <span *ngSwitchCase="'date'" class="psdk-details-text-style-hf">{{ _formatDate(field.config.value, field.type) }}</span>
-        <span *ngSwitchCase="'caseoperator'"></span>
-        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
-      </div>
-    </div>
-  </div>
-  <div
-    [ngClass]="{
-      'psdk-grid-filter-1': this.layout === 'one-column',
-      'psdk-grid-filter-2': this.layout === 'two-column',
-      'psdk-grid-filter-3': this.layout === 'three-column',
-      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
-      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
-    }"
-  >
-    <component-mapper *ngIf="arFields$" name="DetailsFields" [props]="{ arFields$: arFields$ }"></component-mapper>
-    <component-mapper *ngIf="arFields2$" name="DetailsFields" [props]="{ arFields$: arFields2$ }"></component-mapper>
-    <component-mapper *ngIf="arFields3$" name="DetailsFields" [props]="{ arFields$: arFields3$ }"></component-mapper>
-  </div>
-</div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details/material-details.component.scss

@@ -1,116 +0,0 @@
-.psdk-details-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.psdk-details-fields {
-  padding: calc(2 * 0.5rem);
-  grid-row-gap: calc(2 * 0.5rem);
-}
-
-.psdk-details-fields-primary {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: calc(2 * 0.5rem);
-  grid-row-gap: calc(1 * 0.5rem);
-}
-
-.psdk-details-fields-single {
-  display: grid;
-  grid-template-columns: 20ch 1fr;
-  grid-column-gap: calc(2 * 0.5rem);
-}
-
-.psdk-details-fields-label {
-  margin: 8px 0px;
-}
-
-.psdk-details-fields-value {
-  word-break: break-word;
-  grid-column-start: 2;
-  grid-row-start: 1;
-}
-
-span.psdk-details-text-style-hf {
-  font-weight: 500;
-  font-size: 1.25rem;
-}
-
-span.psdk-details-text-style {
-  font-weight: 400;
-}
-
-span.psdk-details-status-style {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  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-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;
-}
-
-.psdk-csf-primary-field-value {
-  margin: 8px 0;
-}
-
-span.psdk-details-status-style-hf {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.psdk-grid-filter-1 {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  column-gap: calc(2 * 0.5rem);
-  row-gap: calc(2 * 0.5rem);
-  align-items: start;
-}
-
-.psdk-grid-filter-2 {
-  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;
-}
-
-.psdk-grid-filter-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  column-gap: calc(2 * 0.5rem);
-  row-gap: calc(2 * 0.5rem);
-  align-items: start;
-}
-
-.psdk-grid-filter-wide-narrow {
-  display: grid;
-  grid-template-columns: 7fr 3fr;
-  column-gap: calc(2 * 0.5rem);
-  row-gap: calc(2 * 0.5rem);
-  align-items: start;
-}
-
-.psdk-grid-filter-narrow-wide {
-  display: grid;
-  grid-template-columns: 3fr 7fr;
-  column-gap: calc(2 * 0.5rem);
-  row-gap: calc(2 * 0.5rem);
-  align-items: start;
-}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details/material-details.component.spec.ts

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

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details/material-details.component.ts

@@ -1,31 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Utils } from '@pega/angular-sdk-components';
-import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-
-@Component({
-  selector: 'app-material-details',
-  templateUrl: './material-details.component.html',
-  styleUrls: ['./material-details.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
-})
-export class MaterialDetailsComponent {
-  constructor(private utils: Utils) {}
-
-  @Input() arFields$: any[];
-  @Input() arFields2$: any[];
-  @Input() arFields3$: any[];
-  @Input() arHighlightedFields: any[];
-  @Input() layout: any;
-
-  _getValue(configValue) {
-    if (configValue && configValue != '') {
-      return configValue;
-    }
-    return '---';
-  }
-
-  _formatDate(dateValue: string, dateFormat: string): string {
-    return this.utils.generateDate(dateValue, dateFormat);
-  }
-}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -1,29 +0,0 @@
-<div id="details-fields-list">
-  <div *ngFor="let field of arFields$">
-    <div *ngIf="field.type === 'group'; else noGroup">
-      <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
-    </div>
-    <ng-template #noGroup>
-      <div *ngIf="field.type === 'reference'; else showDetails">
-        <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
-      </div>
-    </ng-template>
-
-    <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
-        <div class="psdk-details-fields-label">
-          {{ field.config.label }}
-        </div>
-        <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
-          <span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
-          <span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
-          <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-          <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-          <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
-          <span *ngSwitchCase="'caseoperator'"></span>
-          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
-        </div>
-      </div>
-    </ng-template>
-  </div>
-</div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.scss

@@ -1,34 +0,0 @@
-.psdk-details-fields-label {
-  margin: 8px 0px;
-}
-
-span.psdk-details-text-style-hf {
-  font-weight: bold;
-}
-
-span.psdk-details-status-style-hf {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  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-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;
-}
-
-.psdk-csf-primary-field-value {
-  margin: 8px 0;
-}
-
-.psdk-primary-color {
-  color: var(--mat-sys-primary);
-}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts

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