@pega/angular-sdk-overrides 25.1.12 → 26.1.10

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -4,11 +4,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: center;
-  margin-top: 1rem;
 }
 
-.psdk-grid-nondisplay {
-  margin-top: 1rem;
+.psdk-details-reference-value {
+  margin-top: 0;
 }
 
 .psdk-label {

package/lib/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -14,7 +14,7 @@ import { getDataRelationshipContextFromKey } from '@pega/angular-sdk-components'
 export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() dataRelationshipContext?: any;
+  @Input() dataRelationshipContext: any = null;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: any;
@@ -58,17 +58,16 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const rawViewMetadata = this.pConn$.getRawMetadata();
     const label = this.configProps.label;
     const showLabel = this.configProps.showLabel;
-    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
-    const type = (rawViewMetadata?.config as any)?.componentType;
+    const inheritedProps = this.pConn$.getInheritedProps();
+    const propsToUse = { label: label || inheritedProps['label'], showLabel: inheritedProps['showLabel'] || showLabel };
+    const type = (rawViewMetadata?.config as any)?.componentType ?? rawViewMetadata?.type;
     this.displayMode = this.configProps.displayMode;
     const targetObjectType = this.configProps.targetObjectType;
     const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
     const hideLabel = this.configProps.hideLabel;
-    // const additionalFields = this.configProps.additionalFields;
     const displayAs = this.configProps.displayAs ?? 'readonly';
-    const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
-      ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
-      : this.dataRelationshipContext;
+    const dataRelationshipContext =
+      this.dataRelationshipContext ?? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField ?? '');
     if (propsToUse.showLabel === false) {
       propsToUse.label = '';
     }
@@ -77,7 +76,7 @@ export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
     const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
     const config: any = {
       ...rawViewMetadata?.config,
-      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      primaryField: (rawViewMetadata?.config as any)?.displayField ?? (rawViewMetadata?.config as any)?.primaryField,
       label: this.label
     };
 

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

@@ -22,9 +22,6 @@ export class WideNarrowPageComponent implements OnInit, OnDestroy {
   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();

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -27,7 +27,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   @Input() pages$: any[];
   @Input() caseTypes$: any[];
   @Input() homePage: any;
-  @Input() portalLogoImage$: string;
+  @Input() portalLogoImage$: string | Blob | null;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -52,7 +52,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -102,30 +101,29 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+    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
+    // Then, continue on with other initialization
 
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    // 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.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);
+    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();
+    // const oData = this.pConn$.getDataObject();
 
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-    });
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.cdRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/lib/widget/attachment/AttachmentUtils.ts

@@ -49,7 +49,7 @@ export const fileDownloadVar = (content: { data: string; headers: Record<string,
     if (!/^(http|https):\/\//.test(data)) {
       data = `//${data}`;
     }
-    window.open(content.data, '_blank');
+    window.open(data, '_blank');
   } else if (type === 'EMAIL') {
     // Temp Fix: for EMAIL type attachment
     fileDownload(content.data, name, 'html', content.headers);
@@ -270,18 +270,26 @@ export const onFileDownload = (responseProps, context) => {
 
 // Prepares new structure as per Cosmos component
 export const transformAttachments = attachments => {
-  const transformedFiles = [...attachments];
   let deleteIndex = -1;
-  transformedFiles.forEach(attachment => {
-    attachment.props.id = attachment.responseProps.ID;
-    attachment.props.format = attachment.props.name.split('.').pop();
-    if (attachment.props.error) {
-      attachment.responseProps.deleteIndex = deleteIndex;
-    } else {
+
+  return attachments.map(attachment => {
+    const props = {
+      ...attachment.props,
+      id: attachment.responseProps.ID,
+      format: attachment.props.name.split('.').pop()
+    };
+
+    if (!props.error) {
       deleteIndex += 1;
-      attachment.responseProps.deleteIndex = deleteIndex;
     }
-  });
 
-  return transformedFiles;
+    return {
+      ...attachment,
+      props,
+      responseProps: {
+        ...attachment.responseProps,
+        deleteIndex
+      }
+    };
+  });
 };

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

@@ -1,6 +1,6 @@
 <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 *ngIf="displayMode !== 'DISPLAY_ONLY' && ((files.length === 0 && !allowMultiple$) || allowMultiple$)">
     <div
       style="margin-bottom: 10px"
       id="attachment-container"
@@ -36,18 +36,28 @@
           <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, i)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
-          </button>
-          <div *ngIf="!file.ID">
+          <div *ngIf="displayMode === 'DISPLAY_ONLY'; else editableActions">
             <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, i)">Delete</button>
             </mat-menu>
           </div>
+          <ng-template #editableActions>
+            <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file, i)">
+              <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, i)">Delete</button>
+              </mat-menu>
+            </div>
+          </ng-template>
         </div>
       </div>
     </div>

package/lib/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
       );
@@ -192,8 +194,8 @@ export class AttachmentComponent implements OnInit, OnDestroy {
             error: errorFile.props.error || null
           };
         });
-        let key = '';
-        let updatedAttachments: any = [];
+        let key: string;
+        let updatedAttachments: any;
         if (this.allowMultiple$ || this.isOldAttachment) {
           key = this.isOldAttachment ? `${this.valueRef}.pxResults` : this.valueRef;
           const existingAttachments = PCore.getStoreValue(`.${key}`, this.pConn$.getPageReference(), this.pConn$.getContextName()) || [];
@@ -207,6 +209,13 @@ export class AttachmentComponent implements OnInit, OnDestroy {
           isArrayDeepMerge: false,
           removePropertyFromChangedList: true
         });
+      } else if (this.filesWithError.length === 0) {
+        const hasActiveUpload = this.files.some(file => file.inProgress);
+        if (!hasActiveUpload) {
+          this.files = transformAttachments(this.attachments);
+          this.attachmentCount = this.attachments.length;
+          this.filesWithError = [];
+        }
       }
     }
   }
@@ -336,6 +345,7 @@ export class AttachmentComponent implements OnInit, OnDestroy {
       }
       return localFile;
     });
+    this.cdRef.markForCheck();
   }
 
   populateErrorAndUpdateRedux(file) {

package/lib/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/lib/widget/feed-container/feed-container.component.ts

@@ -156,204 +156,6 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
       }
     };
 
-    /*
-
-    const { getPConnect, messageIDs } = props;
-    const [mentionResults, setMentionResults] = useState([]);
-    const [tagResults, setTagResults] = useState([]);
-    const [attachments, setAttachments] = useState([]);
-    const [feedFilters, setFeedFilters] = useState();
-    const {
-      fetchMessages,
-      postMessage,
-      getMentionSuggestions,
-      getTagSuggestions
-    } = FeedApi(getPConnect());
-    const appName = PCore.getEnvironmentInfo().getApplicationName();
-    let value = "";
-    let feedID = "";
-    let feedClass = "";
-    if (getPConnect().getCaseSummary().ID) {
-      value = getPConnect().getCaseSummary().ID;
-      feedID = "pyCaseFeed";
-      feedClass = getPConnect().getCaseSummary().content.classID;
-    } else {
-      value = `DATA-PORTAL $${appName}`;
-      feedID = "pyDashboardFeed";
-      feedClass = "@baseclass";
-    }
-    // For cancelling fetchrequest for filetrs
-    const fetchMessagesCancelTokenSource = useRef([]);
-
-    useEffect(() => {
-      fetchMessages(
-        value,
-        feedID,
-        feedClass,
-        null,
-        fetchMessagesCancelTokenSource.current
-      ).then((res) => {
-        setFeedFilters(res);
-      });
-      PCore.getAssetLoader().getLoader("component-loader")(["Activity"]);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const onUploadProgress = useCallback((file) => {
-      return ({ loaded, total }) => {
-        file.progress = Math.floor((loaded / total) * 100);
-        setAttachments((current) => {
-          return current.map((currFile) => {
-            return currFile.name === file.name ? file : currFile;
-          });
-        });
-      };
-    }, []);
-
-    const errorHandler = useCallback((isFetchCanceled, file) => {
-      return (error) => {
-        if (!isFetchCanceled(error)) {
-          let localizedValue = "Upload failed";
-          if (
-            error.response &&
-            error.response.data &&
-            error.response.data.errorDetails
-          ) {
-            localizedValue = error.response.data.errorDetails[0].localizedValue;
-          }
-          delete file.progress;
-          setAttachments((current) => {
-            return current.map((currFile) => {
-              if (currFile.name === file.name) {
-                currFile.meta = localizedValue;
-                currFile.error = true;
-              }
-              return currFile;
-            });
-          });
-          error.isHandled = true;
-        }
-        throw error;
-      };
-    }, []);
-
-    const postComment = ({ value: message, clear }) => {
-      const attachmentIDs = [];
-      const attachmentUtils = PCore.getAttachmentUtils();
-      if (attachments && !!attachments.length) {
-        attachments
-          .filter((file) => !file.error)
-          .map((file) => {
-            return attachmentUtils
-              .uploadAttachment(file, onUploadProgress, errorHandler)
-              .then((fileResponse) => {
-                const fileConfig = {
-                  type: "File",
-                  category: "File",
-                  fileName: file.name,
-                  ID: fileResponse.data.ID
-                };
-                attachmentIDs.push(fileConfig);
-                if (attachments.length === attachmentIDs.length) {
-                  postMessage(
-                    value,
-                    transformMarkdownToMsg(message),
-                    attachmentIDs
-                  );
-                  clear();
-                  setAttachments([]);
-                }
-              })
-
-              .catch(console.error);
-          });
-      } else {
-        postMessage(value, transformMarkdownToMsg(message));
-        clear();
-      }
-    };
-
-    */
-
-    /* On search is called when @ character is entered and will display the mention */
-
-    /*
-    const onSearch = debounce((event) => {
-      if (event.type === "mention") {
-        getMentionSuggestions({
-          pulseContext: value,
-          searchFor: event.search
-        }).then((res) => {
-          setMentionResults(res);
-        });
-      } else {
-        getTagSuggestions({
-          searchFor: event.search
-        }).then((res) => {
-          setTagResults(res);
-        });
-      }
-    }, 150);
-
-    const userName = getPConnect().getEnvironmentInfo().getOperatorName();
-    const imageKey = getPConnect().getEnvironmentInfo().getOperatorImageInsKey();
-
-    const onFilesAdded = useCallback((newlyAddedFiles) => {
-      setAttachments((current) => [
-        ...newlyAddedFiles.map((file) => {
-          if (!validateMaxSize(file, 5)) {
-            file.error = true;
-            file.meta = "File is too big. Max allowed size is 5MB.";
-          }
-          file.icon = getIconFromFileType(file.type);
-          file.onDelete = () => {
-            setAttachments((c) => c.filter((f) => f.name !== file.name));
-          };
-          return file;
-        }),
-        ...current
-      ]);
-    }, []);
-
-    const onFilterChange = useCallback(
-      (filterID) => {
-        const updatedFilters = [...feedFilters];
-        const filterToUpdate = updatedFilters.find(
-          (feedItem) => feedItem.id === filterID
-        );
-        filterToUpdate.on = !filterToUpdate.on;
-        if (filterID === "All")
-          updatedFilters.forEach((feedFilter) => {
-            feedFilter.on = filterToUpdate.on;
-          });
-        else if (
-          updatedFilters.find(
-            (feedItem) => feedItem.on === false && feedItem.id !== "All"
-          )
-        )
-          updatedFilters.find((feedItem) => feedItem.id === "All").on = false;
-        else updatedFilters.find((feedItem) => feedItem.id === "All").on = true;
-        setFeedFilters(updatedFilters);
-        fetchMessages(
-          value,
-          feedID,
-          feedClass,
-          feedFilters,
-          fetchMessagesCancelTokenSource.current
-        );
-      },
-      [
-        value,
-        feedID,
-        feedClass,
-        feedFilters,
-        fetchMessagesCancelTokenSource,
-        fetchMessages
-      ]
-    );
-
-    */
-
     // set up svg images
     this.svgComment$ = this.utils.getImageSrc('chat', this.utils.getSDKStaticContentUrl());
     this.svgLike$ = this.utils.getImageSrc('thumbs-up', this.utils.getSDKStaticContentUrl());
@@ -545,7 +347,7 @@ export class FeedContainerComponent implements OnInit, OnDestroy {
   }
 
   likeClick(messageID: string, rMessageID: string, bLikedByMe: boolean, level: string) {
-    let pulseMessage = {};
+    let pulseMessage: object;
 
     if (level === 'top') {
       pulseMessage = {

package/lib/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) {
@@ -526,7 +523,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
           if (!/^(http|https):\/\//.test(data)) {
             data = `//${data}`;
           }
-          window.open(content.data, '_blank');
+          window.open(data, '_blank');
         }
       })
       .catch(console.error);
@@ -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();
         });
     }
   }