@pega/angular-sdk-components 0.25.7 → 0.25.9

package/fesm2022/pega-angular-sdk-components.mjs

@@ -1622,12 +1622,13 @@ class AssignmentComponent {
                     const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
                     finishPromise
                         .then(() => {
-                        this.psService.sendMessage(false);
                         this.updateChanges();
                     })
                         .catch(() => {
-                        this.psService.sendMessage(false);
                         this.snackBarRef = this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
+                    })
+                        .finally(() => {
+                        this.psService.sendMessage(false);
                     });
                     break;
                 case 'approveCase': {
@@ -1635,8 +1636,10 @@ class AssignmentComponent {
                     approvePromise
                         .then(() => { })
                         .catch(() => {
-                        this.psService.sendMessage(false);
                         this.snackBarRef = this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+                    })
+                        .finally(() => {
+                        this.psService.sendMessage(false);
                     });
                     break;
                 }
@@ -1912,7 +1915,8 @@ class DeferLoadComponent {
         // update itself (re-render)
         const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
         const lastUpdateCaseTime = this.pConn$.getValue('caseInfo.lastUpdateTime');
-        if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
+        if ((theRequestedAssignment && theRequestedAssignment !== this.currentLoadedAssignment) ||
+            (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
             this.currentLoadedAssignment = theRequestedAssignment;
             this.lastUpdateCaseTime = lastUpdateCaseTime;
             this.updateSelf();
@@ -1986,6 +1990,8 @@ class DeferLoadComponent {
             }
         }
         else if (this.resourceType === this.PAGE) {
+            if (!this.loadViewCaseID)
+                return;
             // Rendering defer loaded tabs in case/ page context
             this.pConn$
                 .getActionsApi()
@@ -3536,11 +3542,11 @@ class StagesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StagesComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-stages-full{display:block}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{background-color:var(--mat-sys-surface-container);border-radius:.5rem;border:.0625rem solid var(--mat-sys-outline-variant);overflow:hidden;display:flex;flex-wrap:wrap}.psdk-stages-chevron{position:relative;padding:.5rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:var(--mat-sys-outline-variant);border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--mat-sys-outline-variant);font-size:1rem}.psdk-stages-inner-present{color:var(--mat-sys-primary);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--mat-sys-on-surface);font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />\n      <div>{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}</div>\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-stages-full{display:block}.psdk-stages-icon{width:18px;display:inline-block;vertical-align:top;filter:var(--app-primary-color-filter);margin-right:2px}.psdk-stages-bar{background-color:var(--mat-sys-surface-container);border-radius:.5rem;border:.0625rem solid var(--mat-sys-outline-variant);overflow:hidden;display:flex;flex-wrap:wrap}.psdk-stages-chevron{position:relative;padding:.5rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:var(--mat-sys-outline-variant);border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--mat-sys-outline-variant);font-size:1rem;display:flex;align-items:center}.psdk-stages-inner-present{color:var(--mat-sys-primary);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--mat-sys-on-surface);font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stages', imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-stages-full{display:block}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{background-color:var(--mat-sys-surface-container);border-radius:.5rem;border:.0625rem solid var(--mat-sys-outline-variant);overflow:hidden;display:flex;flex-wrap:wrap}.psdk-stages-chevron{position:relative;padding:.5rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:var(--mat-sys-outline-variant);border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--mat-sys-outline-variant);font-size:1rem}.psdk-stages-inner-present{color:var(--mat-sys-primary);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--mat-sys-on-surface);font-size:1rem}\n"] }]
+            args: [{ selector: 'app-stages', imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />\n      <div>{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}</div>\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ localizationService.getLocalizedText(stage.name) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-stages-full{display:block}.psdk-stages-icon{width:18px;display:inline-block;vertical-align:top;filter:var(--app-primary-color-filter);margin-right:2px}.psdk-stages-bar{background-color:var(--mat-sys-surface-container);border-radius:.5rem;border:.0625rem solid var(--mat-sys-outline-variant);overflow:hidden;display:flex;flex-wrap:wrap}.psdk-stages-chevron{position:relative;padding:.5rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:var(--mat-sys-outline-variant);border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--mat-sys-outline-variant);font-size:1rem;display:flex;align-items:center}.psdk-stages-inner-present{color:var(--mat-sys-primary);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--mat-sys-on-surface);font-size:1rem}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }] } });
@@ -7603,8 +7609,7 @@ class PhoneComponent extends FieldBase {
         const newVal = this.formGroup$.controls[this.controlName$].value;
         const isValueChanged = newVal?.toString() !== oldVal.toString();
         if (isValueChanged) {
-            const value = this.formGroup$.controls[this.controlName$].value;
-            handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+            handleEvent(this.actionsApi, 'changeNblur', this.propName, newVal);
         }
     }
     updatePreferredCountries() {
@@ -7630,11 +7635,11 @@ class PhoneComponent extends FieldBase {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PhoneComponent, isStandalone: true, selector: "app-phone", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n        <mat-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"preferredCountries\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          [placeholder]=\"placeholder\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$ || bReadonly$\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </mat-tel-input>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => MatTelInput), selector: "mat-tel-input", inputs: ["autocomplete", "cssClass", "errorStateMatcher", "placeholder", "maxLength", "name", "onlyCountries", "preferredCountries", "searchPlaceholder", "enablePlaceholder", "enableSearch", "resetOnChange", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PhoneComponent, isStandalone: true, selector: "app-phone", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$ && bVisible$; else noEdit\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n      <mat-tel-input\n        [attr.data-test-id]=\"testId\"\n        [formControl]=\"fieldControl\"\n        [preferredCountries]=\"preferredCountries\"\n        [enablePlaceholder]=\"true\"\n        [enableSearch]=\"true\"\n        [placeholder]=\"placeholder\"\n        [required]=\"bRequired$\"\n        [disabled]=\"bDisabled$ || bReadonly$\"\n        (change)=\"fieldOnChange()\"\n        (blur)=\"fieldOnBlur()\"\n      >\n      </mat-tel-input>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.RequiredValidator), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatFormField), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatLabel), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(() => i3$1.MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i0.forwardRef(() => MatTelInput), selector: "mat-tel-input", inputs: ["autocomplete", "cssClass", "errorStateMatcher", "placeholder", "maxLength", "name", "onlyCountries", "preferredCountries", "searchPlaceholder", "enablePlaceholder", "enableSearch", "resetOnChange", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-phone', imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$; else noEdit\">\n    <div #f=\"ngForm\" [formGroup]=\"formGroup$\" *ngIf=\"bVisible$\">\n      <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n        <mat-tel-input\n          [attr.data-test-id]=\"testId\"\n          [formControl]=\"fieldControl\"\n          [preferredCountries]=\"preferredCountries\"\n          [enablePlaceholder]=\"true\"\n          [enableSearch]=\"true\"\n          [placeholder]=\"placeholder\"\n          [required]=\"bRequired$\"\n          [disabled]=\"bDisabled$ || bReadonly$\"\n          (change)=\"fieldOnChange()\"\n          (blur)=\"fieldOnBlur()\"\n        >\n        </mat-tel-input>\n        <mat-label>{{ label$ }}</mat-label>\n        <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"] }]
+            args: [{ selector: 'app-phone', imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"displayMode$; else noDisplayMode\">\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"FieldValueList\" [props]=\"{ label$, value$, displayMode$ }\"></component-mapper>\n</div>\n<ng-template #noDisplayMode>\n  <div *ngIf=\"bHasForm$ && bVisible$; else noEdit\">\n    <mat-form-field class=\"psdk-full-width\" subscriptSizing=\"dynamic\" [hintLabel]=\"helperText\" floatLabel=\"always\">\n      <mat-tel-input\n        [attr.data-test-id]=\"testId\"\n        [formControl]=\"fieldControl\"\n        [preferredCountries]=\"preferredCountries\"\n        [enablePlaceholder]=\"true\"\n        [enableSearch]=\"true\"\n        [placeholder]=\"placeholder\"\n        [required]=\"bRequired$\"\n        [disabled]=\"bDisabled$ || bReadonly$\"\n        (change)=\"fieldOnChange()\"\n        (blur)=\"fieldOnBlur()\"\n      >\n      </mat-tel-input>\n      <mat-label>{{ label$ }}</mat-label>\n      <mat-error *ngIf=\"fieldControl.invalid\">{{ getErrorMessage() }}</mat-error>\n    </mat-form-field>\n  </div>\n</ng-template>\n<ng-template #noEdit>\n  <component-mapper *ngIf=\"bVisible$ !== false\" name=\"Text\" [props]=\"{ pConn$, formatAs$: 'text' }\"></component-mapper>\n</ng-template>\n", styles: [".psdk-full-width{width:100%}.psdk-label-readonly{font-size:1rem;display:block;transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(-1.28125em) scale(.75);width:133.33333%}.psdk-data-readonly{padding-top:.625rem;width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto}.phone-label-readonly{opacity:54%;font-size:.7rem}::ng-deep .mat-mdc-menu-panel{max-width:20rem}\n"] }]
         }] });
 
 class RadioButtonsComponent extends FieldBase {
@@ -9563,7 +9568,6 @@ class CaseViewComponent {
         this.arAvailableActions$ = [];
         this.arAvailabeProcesses$ = [];
         this.currentCaseID = '';
-        this.bHasNewAttachments = false;
         this.localeCategory = 'CaseView';
     }
     ngOnInit() {
@@ -9612,13 +9616,6 @@ class CaseViewComponent {
     }
     updateHeaderAndSummary() {
         this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
-        if (hasNewAttachments !== this.bHasNewAttachments) {
-            this.bHasNewAttachments = hasNewAttachments;
-            if (this.bHasNewAttachments) {
-                PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
-            }
-        }
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
             const meta = kid.getPConnect().getRawMetadata();
@@ -9708,11 +9705,11 @@ class CaseViewComponent {
         openProcessAction(data.ID, { ...data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CaseViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CaseViewComponent, isStandalone: true, selector: "app-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\">\n    <mat-toolbar class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div>\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div>\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--mat-sys-on-primary-fixed);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;background-color:var(--mat-sys-surface-container);height:100%}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary)}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatToolbarModule) }, { kind: "component", type: i0.forwardRef(() => i4$4.MatToolbar), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(() => i4$4.MatToolbarRow), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CaseViewComponent, isStandalone: true, selector: "app-case-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, providers: [Utils], ngImport: i0, template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\">\n    <mat-toolbar class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"tabData$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div>\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--mat-sys-on-primary-fixed);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;background-color:var(--mat-sys-surface-container);height:100%}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary)}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatToolbarModule) }, { kind: "component", type: i0.forwardRef(() => i4$4.MatToolbar), selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i0.forwardRef(() => i4$4.MatToolbarRow), selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CaseViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-case-view', providers: [Utils], imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\">\n    <mat-toolbar class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div>\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div>\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--mat-sys-on-primary-fixed);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;background-color:var(--mat-sys-surface-container);height:100%}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary)}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}\n"] }]
+            args: [{ selector: 'app-case-view', providers: [Utils], imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)], template: "<div class=\"psdk-case-view\" id=\"case-view\">\n  <div class=\"psdk-case-view-info\">\n    <mat-toolbar class=\"psdk-case-view-toolbar\">\n      <mat-toolbar-row class=\"psdk-case-view-toolbar-row\">\n        <div class=\"psdk-case-icon-div\">\n          <img class=\"psdk-case-svg-icon\" src=\"{{ svgCase$ }}\" />\n        </div>\n        <div class=\"psdk-case-view-heading\">\n          <div>\n            <h1 id=\"case-name\">{{ heading$ }}</h1>\n          </div>\n          <div id=\"current-caseID\" [hidden]=\"true\">{{ currentCaseID }}</div>\n          <div class=\"psdk-case-view-heading-id\" id=\"caseId\">{{ id$ }}</div>\n        </div>\n      </mat-toolbar-row>\n    </mat-toolbar>\n\n    <div class=\"psdk-case-view-buttons\">\n      <button *ngIf=\"editAction\" mat-raised-button color=\"secondary\" (click)=\"_editClick()\">{{ localizedVal('Edit', localeCategory) }}</button>\n      <button mat-raised-button color=\"secondary\" [matMenuTriggerFor]=\"actionMenu\">{{ localizedVal('Actions...', localeCategory) }}</button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of arAvailableActions$\">\n          <button mat-menu-item (click)=\"_menuActionClick(action)\">\n            {{ localizedVal(action.name, '', localeKey) }}\n          </button>\n        </ng-container>\n        <ng-container *ngFor=\"let process of arAvailabeProcesses$\">\n          <button mat-menu-item (click)=\"_menuProcessClick(process)\">\n            {{ process.name }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n\n    <div class=\"psdk-case-view-divider\"></div>\n\n    <div class=\"psdk-case-view-summary\">\n      <component-mapper name=\"CaseSummary\" [props]=\"{ pConn$: caseSummaryPConn$ }\"></component-mapper>\n    </div>\n\n    <component-mapper\n      *ngIf=\"caseTabs$.length > 1\"\n      name=\"VerticalTabs\"\n      [props]=\"{ tabConfig$: caseTabs$ }\"\n      [parent]=\"this\"\n      [outputEvents]=\"{ tabClick: onTabClick }\"\n    ></component-mapper>\n  </div>\n  <div class=\"psdk-case-view-main\">\n    <div>\n      <div *ngFor=\"let kid of arChildren$\">\n        <div\n          *ngIf=\"\n            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'\n          \"\n        >\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div\n        *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'\"\n      >\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngFor=\"let kid of arChildren$\">\n      <div *ngIf=\"kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'\">\n        <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n      </div>\n    </div>\n\n    <div *ngIf=\"tabData$\">\n      <component-mapper name=\"DeferLoad\" [props]=\"{ pConn$, name: tabData$?.config?.name }\"></component-mapper>\n    </div>\n  </div>\n  <div>\n    <div *ngIf=\"arChildren$\" class=\"psdk-case-view-utilities\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div *ngIf=\"kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'\">\n          <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect() }\"></component-mapper>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["h1{font-size:1.1rem;line-height:1.3rem}::ng-deep .mat-mdc-menu-panel{overflow:unset;max-width:unset}.psdk-case-view-label{font-size:1rem;display:block;transform:translateY(.2em) scale(.75) perspective(100px) translateZ(.001px);-ms-transform:translateY(.2em) scale(.75);width:133.33333%;border-radius:.6125rem}.psdk-case-view{box-sizing:border-box;display:flex}.ng-case-view-toolbar{padding:.625rem}.psdk-case-icon-div{background-color:var(--mat-sys-on-primary-fixed);border-radius:1rem;padding:.5rem .3rem .3rem}.psdk-case-svg-icon{width:2rem;padding:0rem .3125rem;filter:var(--app-white-color-filter)}.psdk-case-view-info-box{display:flex;flex-direction:row;padding:0rem .3125rem 0rem 0rem}.psdk-case-view-info{flex:0 0 auto;width:25rem;float:left;background-color:var(--mat-sys-surface-container);height:100%}.psdk-case-view-main{flex-grow:2;float:left;padding:0rem .3125rem;height:100%}.psdk-case-view-summary{padding-left:.75rem}.psdk-case-view-heading{display:block;text-align:left;padding-left:.5rem;padding-bottom:0;padding-top:5px}.psdk-case-view-heading-id{font-size:.9rem;font-weight:400}.psdk-case-view-buttons{display:flex;justify-content:flex-start;padding:.3125rem}.psdk-case-view-utilities{background-color:var(--mat-sys-surface-container);width:21.875rem;float:left;padding:0rem .3125rem}.psdk-case-view-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-status{padding:.3125rem;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);width:fit-content;margin:.625rem}.psdk-case-view-toolbar{background-color:var(--mat-sys-primary)}button{margin:0rem .3125rem}.psdk-case-view-toolbar-row{padding-left:1rem;white-space:normal;height:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -10900,6 +10897,7 @@ class FieldGroupTemplateComponent {
         this.utils = utils;
         this.angularPConnectData = {};
         this.showLabel$ = true;
+        this.referenceListLength = signal(null);
         this.allowAdd = true;
         this.allowEdit = true;
         this.allowDelete = true;
@@ -10907,16 +10905,13 @@ class FieldGroupTemplateComponent {
             return `${heading} ${index + 1}`;
         };
         this.getDynamicHeader = (item, index) => {
-            if (this.fieldHeader === 'propertyRef' && this.heading && item[this.heading.substring(1)]) {
+            if (this.heading && item[this.heading.substring(1)]) {
                 return item[this.heading.substring(1)];
             }
             return `Row ${index + 1}`;
         };
     }
     ngOnInit() {
-        // First thing in initialization is registering and subscribing to the AngularPConnect service
-        this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-        this.updateSelf();
         this.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
         const { allowActions, allowTableEdit, referenceList } = this.configProps$;
         if (allowActions && Object.keys(allowActions).length > 0) {
@@ -10937,15 +10932,6 @@ class FieldGroupTemplateComponent {
             this.angularPConnectData.unsubscribeFn();
         }
     }
-    onStateChange() {
-        // Should always check the bridge to see if the component should
-        // update itself (re-render)
-        const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-        // ONLY call updateSelf when the component should update
-        if (bUpdateSelf) {
-            this.updateSelf();
-        }
-    }
     ngOnChanges(changes) {
         if (changes && changes.configProps$) {
             const props = changes.configProps$;
@@ -10955,14 +10941,12 @@ class FieldGroupTemplateComponent {
                     this.pConn$ = changes?.pConn$?.currentValue;
                 }
                 this.updateSelf();
+                setTimeout(() => {
+                    this.angularPConnect.shouldComponentUpdate(this);
+                }, 100);
             }
         }
     }
-    ngAfterViewInit() {
-        const resolvedList = getReferenceList(this.pConn$);
-        // @ts-ignore - Expected 3 arguments, but got 1
-        this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
-    }
     updateSelf() {
         const inheritedProps = this.pConn$.getInheritedProps();
         const { label, hideLabel, allowRowDelete, referenceList, fieldHeader, renderMode, displayMode, heading, contextClass, lookForChildInConfig } = this.configProps$;
@@ -10978,7 +10962,9 @@ class FieldGroupTemplateComponent {
         if (this.readonlyMode) {
             this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         }
-        if (this.referenceListLength != referenceList?.length) {
+        if (this.referenceListLength() != referenceList?.length) {
+            // @ts-ignore - Expected 3 arguments, but got 1
+            this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
             this.children = referenceList?.map((item, index) => {
                 return {
                     id: index,
@@ -10988,10 +10974,10 @@ class FieldGroupTemplateComponent {
                 };
             });
         }
-        this.referenceListLength = referenceList?.length || 0;
+        this.referenceListLength.set(referenceList?.length || 0);
     }
     addFieldGroupItem() {
-        this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength);
+        this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength());
     }
     deleteFieldGroupItem(index) {
         this.pConn$.getListActions().deleteEntry(index);
@@ -14264,7 +14250,6 @@ class SelfServiceCaseViewComponent {
         this.arAvailableActions$ = [];
         this.arAvailabeProcesses$ = [];
         this.currentCaseID = '';
-        this.bHasNewAttachments = false;
         this.localeCategory = 'CaseView';
     }
     ngOnInit() {
@@ -14312,13 +14297,6 @@ class SelfServiceCaseViewComponent {
     }
     updateHeaderAndSummary() {
         this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
-        const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
-        if (hasNewAttachments !== this.bHasNewAttachments) {
-            this.bHasNewAttachments = hasNewAttachments;
-            if (this.bHasNewAttachments) {
-                PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
-            }
-        }
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
             const meta = kid.getPConnect().getRawMetadata();
@@ -16543,8 +16521,16 @@ class AttachmentComponent {
         this.pConn$.setReferenceList(`.${this.valueRef}`);
         this.displayMode = displayMode;
         this.isMultiAttachmentInInlineEditTable = isTableFormatter && allowMultiple && editMode === 'tableRows';
+        const rawValue = this.pConn$.getComponentConfig().value;
+        const isAttachmentAnnotationPresent = typeof rawValue === 'object' ? false : rawValue?.includes('@ATTACHMENT');
+        const { attachments, isOldAttachment } = isAttachmentAnnotationPresent ? value : PCore.getAttachmentUtils().prepareAttachmentData(value);
+        const isAttachmentsChanged = !PCore.isDeepEqual(this.attachments, attachments);
+        this.isOldAttachment = isOldAttachment;
+        this.attachments = attachments;
         // update the attachments shown in the UI
-        this.updateAttachments();
+        if (isAttachmentsChanged) {
+            this.updateAttachments();
+        }
     }
     updateAttachments() {
         if (this.overrideLocalState) {
@@ -16627,7 +16613,9 @@ class AttachmentComponent {
                 this.attachmentCount -= 1;
             }
         }
-        this.fileInput.nativeElement.value = '';
+        if (this.fileInput?.nativeElement) {
+            this.fileInput.nativeElement.value = '';
+        }
     }
     onFileAdded(event) {
         let addedFiles = Array.from(event.target.files);
@@ -16771,6 +16759,7 @@ class AttachmentComponent {
                         fileResponses[index].value.thumbnail = localFile.props.thumbnail;
                         localFile.inProgress = false;
                         localFile.ID = fileResponses[index].value.ID;
+                        localFile.props.id = fileResponses[index].value.ID;
                         localFile.props.meta = this.localizationService.getLocalizedText('Uploaded successfully');
                         localFile.props.progress = 100;
                         localFile.handle = fileResponses[index].value.ID;
@@ -16793,11 +16782,12 @@ class AttachmentComponent {
                 if (this.filesWithError?.length === 0) {
                     clearFieldErrorMessages(this.pConn$);
                 }
-                this.actionSequencer.deRegisterBlockingAction(this.contextName).catch(() => { });
             }
+            this.actionSequencer.deRegisterBlockingAction(this.contextName).catch(() => { });
         })
             .catch(error => {
             console.log(error);
+            this.actionSequencer.cancelDeferredActionsOnError(this.contextName);
         });
     }
     ngOnDestroy() {
@@ -16809,11 +16799,11 @@ class AttachmentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AttachmentComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploader"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);padding:.5rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--mat-sys-secondary)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.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:.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:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AttachmentComponent, isStandalone: true, selector: "app-attachment", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploader"], descendants: true }], ngImport: i0, template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);padding:.5rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--mat-sys-secondary)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.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;filter:var(--app-primary-color-filter)}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-attachment', imports: [CommonModule, MatProgressSpinnerModule, MatMenuModule, MatIconModule, MatButtonModule], template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);padding:.5rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--mat-sys-secondary)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.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:.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:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"] }]
+            args: [{ selector: 'app-attachment', imports: [CommonModule, MatProgressSpinnerModule, MatMenuModule, MatIconModule, MatButtonModule], template: "<div class=\"file-upload-container\" *ngIf=\"bVisible$\">\n  <span class=\"attachment-label\" [ngClass]=\"{ 'file-label': bRequired$ }\">{{ label$ }}</span>\n  <div *ngIf=\"(files.length === 0 && !allowMultiple$) || allowMultiple$\">\n    <div\n      style=\"margin-bottom: 10px\"\n      id=\"attachment-container\"\n      [ngClass]=\"validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'\"\n    >\n      <div [hidden]=\"true\" id=\"attachment-ID\">\n        {{ valueRef }}\n      </div>\n      <input hidden type=\"file\" [required]=\"bRequired$\" #uploader [id]=\"valueRef\" [multiple]=\"allowMultiple$\" (change)=\"onFileAdded($event)\" />\n      <button mat-stroked-button color=\"primary\" [disabled]=\"bDisabled$\" (click)=\"uploader.click()\">\n        {{\n          allowMultiple$\n            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'\n              ? 'Choose files'\n              : uploadMultipleFilesLabel\n            : uploadSingleFileLabel === 'file_upload_text_one'\n              ? 'Choose a file'\n              : uploadSingleFileLabel\n        }}\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"validateMessage\" class=\"file-error\">{{ validateMessage }}</span>\n  <div *ngIf=\"files && files.length > 0\">\n    <div *ngFor=\"let file of files; let i = index\">\n      <div class=\"psdk-attachment-card\">\n        <div className=\"psdk-utility-card-icon\">\n          <img *ngIf=\"!file.inProgress\" class=\"psdk-attachment-card-svg-icon\" src=\"{{ srcImg }}\" />\n          <mat-spinner *ngIf=\"file.inProgress\" class=\"progress-spinner\" diameter=\"40\"></mat-spinner>\n        </div>\n        <div class=\"psdk-attachment-card-main\">\n          <div class=\"psdk-attachment-card-main-primary-label\">{{ file.props.name }}</div>\n          <div *ngIf=\"file.props.meta\" [ngStyle]=\"{ color: file.props.error ? 'red' : null }\">{{ file.props.meta }}</div>\n        </div>\n        <div class=\"psdk-attachment-action\">\n          <button id=\"delete-attachment\" *ngIf=\"file.ID\" class=\"psdk-utility-button\" (click)=\"deleteFile(file, i)\">\n            <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ deleteIcon }}\" />\n          </button>\n          <div *ngIf=\"!file.ID\">\n            <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #actionMenu=\"matMenu\">\n              <button mat-menu-item (click)=\"downloadFile(file.responseProps ? file.responseProps : {})\">Download</button>\n              <button mat-menu-item (click)=\"deleteFile(file, i)\">Delete</button>\n            </mat-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;left:45%}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.3rem;text-align:center;position:relative}.psdk-modal-file-selector{border:1px dashed var(--mat-sys-neutral-variant20);padding:.5rem;text-align:center;position:relative}.label-required:after{display:inline;content:\" *\";vertical-align:top}.psdk-modal-file-selector-error{border:1px dashed var(--mat-sys-error);padding:.5rem;text-align:center;position:relative}.psdk-full-width{width:100%}.psdk-label-readonly{opacity:54%;font-size:.8rem;font-weight:400}.psdk-data-readonly{padding-top:.625rem;width:100%}.psdk-attachment-list{border:1px solid var(--mat-sys-secondary)}::ng-deep .mat-mdc-form-field-infix{width:auto}.psdk-attachment-card{display:flex;align-items:center;border:.0625rem solid rgb(207,207,207);border-radius:.25rem;padding:.25rem 0rem .25rem .25rem;min-height:3rem;margin-bottom:.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;filter:var(--app-primary-color-filter)}.psdk-utility-button{background:none;border:none;margin-right:.5rem;cursor:pointer}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.file-div{border:1px dashed var(--app-neutral-dark-color);width:100%;padding:.5rem;text-align:center;position:relative}.file-div-error{border:1px dashed var(--mat-sys-error);width:100%;padding:.5rem;text-align:center;position:relative}.attachment-label{display:block;margin-bottom:10px}.file-label:after{display:inline;content:\" *\";vertical-align:top}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -18068,11 +18058,11 @@ class ListUtilityComponent {
         return `${this.utils.getSDKStaticContentUrl()}assets/icons/`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListUtilityComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ListUtilityComponent, isStandalone: true, selector: "app-list-utility", inputs: { name$: "name$", icon$: "icon$", bLoading$: "bLoading$", count$: "count$", arActions$: "arActions$", arItems$: "arItems$", menuIconOverrideAction$: "menuIconOverrideAction$", onViewAll$: "onViewAll$" }, ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button id=\"file-menu\" mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);border-radius:.5625rem;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.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:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.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:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatProgressSpinnerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatProgressSpinner), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ListUtilityComponent, isStandalone: true, selector: "app-list-utility", inputs: { name$: "name$", icon$: "icon$", bLoading$: "bLoading$", count$: "count$", arActions$: "arActions$", arItems$: "arItems$", menuIconOverrideAction$: "menuIconOverrideAction$", onViewAll$: "onViewAll$" }, ngImport: i0, template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button id=\"file-menu\" mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);border-radius:.5625rem;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon,.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.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:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatButtonModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatButton), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i3.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i6.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i6.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i6.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatProgressSpinnerModule) }, { kind: "component", type: i0.forwardRef(() => i4$2.MatProgressSpinner), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListUtilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-list-utility', imports: [CommonModule, MatButtonModule, MatMenuModule, MatProgressSpinnerModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button id=\"file-menu\" mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);border-radius:.5625rem;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.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:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.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:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
+            args: [{ selector: 'app-list-utility', imports: [CommonModule, MatButtonModule, MatMenuModule, MatProgressSpinnerModule, forwardRef(() => ComponentMapperComponent)], template: "<div style=\"text-align: left\">\n  <div class=\"psdk-utility\">\n    <div class=\"header\">\n      <div class=\"header-icon\">\n        <img class=\"psdk-utility-svg-icon\" src=\"{{ headerSvgIcon$ }}\" />\n      </div>\n      <div class=\"header-text\">{{ name$ }}</div>\n      <div class=\"psdk-utility-count\" id=\"attachments-count\">{{ count$ }}</div>\n      <div style=\"flex-grow: 1\"></div>\n      <div class=\"header-icon\">\n        <button id=\"file-menu\" mat-icon-button [matMenuTriggerFor]=\"utilityMenu\">\n          <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n        </button>\n        <mat-menu #utilityMenu=\"matMenu\" overlapTrigger=\"false\">\n          <ng-container *ngFor=\"let action of arActions$\">\n            <button mat-menu-item (click)=\"action.onClick()\">{{ action.text }}</button>\n          </ng-container>\n        </mat-menu>\n      </div>\n    </div>\n    <div class=\"psdk-utiltiy-divider\"></div>\n    <br />\n    <mat-spinner *ngIf=\"bLoading$\" class=\"progress-spinner\" diameter=\"50\"></mat-spinner>\n    <div *ngIf=\"count$ == 0\" class=\"message\">{{ noItemsMessage$ }}</div>\n    <div *ngIf=\"count$ > 0\" class=\"psdk-utility-items\">\n      <component-mapper name=\"SummaryList\" [props]=\"{ arItems$, menuIconOverrideAction$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-utility-view-all\">\n      <button *ngIf=\"count$ > 3\" mat-button color=\"primary\" (click)=\"onViewAll$.onClick()\">View all</button>\n    </div>\n  </div>\n</div>\n", styles: [".progress-spinner{text-align:center;position:absolute;top:40%;left:40%}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility-count{background:var(--mat-sys-inverse-primary);color:var(--mat-sys-on-primary);border-radius:.5625rem;display:inline-block;font-size:.75rem;font-weight:700;text-align:center;width:1.125rem;vertical-align:top;margin:0 0 .313rem 1rem}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.3125rem 0rem;position:relative}.psdk-utility .header{text-align:left;display:flex;align-items:center}.psdk-utility-svg-icon,.psdk-settings-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.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:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
         }], ctorParameters: () => [{ type: Utils }], propDecorators: { name$: [{
                 type: Input
             }], icon$: [{
@@ -18738,11 +18728,11 @@ class MaterialSummaryItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MaterialSummaryItemComponent, deps: [{ token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MaterialSummaryItemComponent, isStandalone: true, selector: "app-material-summary-item", inputs: { item$: "item$", menuIconOverride$: "menuIconOverride$", menuIconOverrideAction$: "menuIconOverrideAction$" }, ngImport: i0, template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.3125rem 0rem}.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:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MaterialSummaryItemComponent, isStandalone: true, selector: "app-material-summary-item", inputs: { item$: "item$", menuIconOverride$: "menuIconOverride$", menuIconOverrideAction$: "menuIconOverrideAction$" }, ngImport: i0, template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.3125rem 0rem}.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:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem;filter:var(--app-primary-color-filter)}.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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom;filter:var(--app-primary-color-filter)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MaterialSummaryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-material-summary-item', imports: [CommonModule, MatButtonModule, MatMenuModule], template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.3125rem 0rem}.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:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom}\n"] }]
+            args: [{ selector: 'app-material-summary-item', imports: [CommonModule, MatButtonModule, MatMenuModule], template: "<div class=\"psdk-utility-card\">\n  <div class=\"psdk-utility-card-icon\">\n    <img class=\"psdk-utility-card-svg-icon\" src=\"{{ imagePath$ }}{{ item$.visual.icon }}.svg\" />\n  </div>\n  <div class=\"psdk-utility-card-main\">\n    <div *ngIf=\"item$.primary.type == 'URL'\" class=\"psdk-utility-card-main-primary-url\">\n      <button mat-button color=\"primary\" (click)=\"item$.primary.click()\">\n        {{ item$.primary.name }}&nbsp;\n        <img class=\"psdk-utility-card-actions-svg-icon\" src=\"{{ imagePath$ }}{{ item$.primary.icon }}.svg\" />\n      </button>\n    </div>\n    <div *ngIf=\"item$.primary.type != 'URL'\" class=\"psdk-utility-card-main-primary-label\">\n      {{ item$.primary.name }}\n    </div>\n    <div *ngIf=\"item$.secondary.text != ''\" [style.color]=\"item$.secondary.error ? 'red' : undefined\">{{ item$.secondary.text }}</div>\n  </div>\n  <div class=\"psdk-utility-card-actions\">\n    <div *ngIf=\"menuIconOverride$ == ''; else showCustom\">\n      <button id=\"setting-button\" mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ settingsSvgIcon$ }}\" />\n      </button>\n      <mat-menu #actionMenu=\"matMenu\" overlapTrigger=\"false\">\n        <ng-container *ngFor=\"let action of item$.actions\">\n          <button mat-menu-item (click)=\"action.onClick()\">\n            <img class=\"psdk-utility-card-action-actions-svg-icon\" src=\"{{ imagePath$ }}{{ action.icon }}.svg\" />&nbsp;\n            {{ action.text }}\n          </button>\n        </ng-container>\n      </mat-menu>\n    </div>\n    <ng-template #showCustom>\n      <button id=\"delete-attachment\" mat-icon-button (click)=\"menuIconOverrideAction$.onClick(item$)\">\n        <img class=\"psdk-utility-card-action-svg-icon\" src=\"{{ menuIconOverride$ }}\" />\n      </button>\n    </ng-template>\n  </div>\n</div>\n", styles: [".psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-utility-divider{border-bottom:.0625rem solid var(--mat-sys-outline-variant)}.psdk-utility-view-all{width:100%;display:flex;justify-content:center}.psdk-utility .header-text{font-size:1rem;font-weight:700;padding-bottom:.3125rem;text-align:left;display:inline-block}.psdk-utility .header-icon{display:inline-block}.psdk-utility{width:100%;padding:.625rem 0rem;text-align:left;border-radius:.6125rem;margin:.3125rem 0rem}.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:var(--app-primary-color-filter)}.psdk-utility .message{text-align:center}.psdk-utility-card{display:flex;flex-direction:row;padding:.25rem 0rem .25rem .25rem}.psdk-utility-card-icon{flex-grow:1;max-width:2.813rem;filter:var(--app-primary-color-filter)}.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 .mat-mdc-button.mat-primary{padding-left:0}.psdk-utility-card-main-primary-label{font-weight:700}.psdk-utility-card-actions{flex-grow:1;text-align:right}.psdk-utility-card-action-svg-icon{width:1.4rem;display:inline-block;filter:var(--app-primary-color-filter)}.psdk-utility-card-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:middle;filter:var(--app-primary-color-filter)}.psdk-utility-card-action-actions-svg-icon{width:1.4rem;display:inline-block;vertical-align:bottom;filter:var(--app-primary-color-filter)}\n"] }]
         }], ctorParameters: () => [{ type: Utils }], propDecorators: { item$: [{
                 type: Input
             }], menuIconOverride$: [{
@@ -19764,5 +19754,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonsComponent, AlertBannerComponent, AlertComponent, AngularPConnectService, AppAnnouncementComponent, AppShellComponent, AssignmentCardComponent, AssignmentComponent, AttachmentComponent, AutoCompleteComponent, BannerService, BooleanFormatters, CancelAlertComponent, CaseCreateStageComponent, CaseHistoryComponent, CaseService, CaseSummaryComponent, CaseViewComponent, CheckBoxComponent, CommonFormatters, ComponentMapperComponent, ConfirmationComponent, CurrencyComponent, CurrencyFormatters, DELETE_ICON, DashboardFilterComponent, DataReferenceAdvancedSearchService, DataReferenceComponent, DatapageService, DateComponent, DateFormatters, DateTimeComponent, DecimalComponent, DefaultFormComponent, DeferLoadComponent, DetailsComponent, DetailsNarrowWideComponent, DetailsOneColumnComponent, DetailsSubTabsComponent, DetailsTemplateBase, DetailsThreeColumnComponent, DetailsTwoColumnComponent, DetailsWideNarrowComponent, DropdownComponent, EmailComponent, ErrorBoundaryComponent, ErrorMessagesService, FeedContainerComponent, FieldBase, FieldGroupListComponent, FieldGroupTemplateComponent, FieldValueListComponent, FileUtilityComponent, FlowContainerBaseComponent, FlowContainerComponent, FormTemplateBase, GoogleMapsLoaderService, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, ObjectPageComponent, ObjectReferenceComponent, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, RichTextComponent, RichTextEditorComponent, RootContainerComponent, SdkComponentMap, SearchFormComponent, SemanticLinkComponent, ServerConfigService, SimpleTableComponent, SimpleTableManualComponent, SimpleTableSelectComponent, SingleReferenceReadonlyComponent, StagesComponent, SubTabsComponent, TABLE_CELL, TemplateUtils, TextAreaComponent, TextComponent, TextContentComponent, TextInputComponent, ThousandSeparatorDirective, ThreeColumnComponent, ThreeColumnPageComponent, TimeComponent, TodoComponent, TwoColumnComponent, TwoColumnPageComponent, TwoColumnTabComponent, UpdateWorklistService, UrlComponent, UserReferenceComponent, UtilityComponent, Utils, ViewComponent, ViewContainerComponent, WideNarrowFormComponent, WideNarrowPageComponent, buildFieldsForTable, buildFilterComponents, buildMetaForListView, buildView, combineFilters, compareSdkPCoreVersions, componentCachePersistUtils, createFilter, createFilterComponent, createMetaForTable, createPConnect, currencyMap, dateFormatInfoDefault, deleteInstruction, endpoints, evaluateAllowRowAction, filterDataByCommonFields, filterDataByDate, filterForFieldValueList, format, formatters, generateColumns, getActiveTabId, getAddRowCallback, getAllFields, getApiContext, getBanners, getCacheInfo, getComponentFromMap, getCompositeKeys$1 as getCompositeKeys, getConfigFields, getContext, getCurrencyCharacters, getCurrencyOptions, getCurrentTimezone$1 as getCurrentTimezone, getData, getDataReferenceInfo, getDataRelationshipContextFromKey, getDateFormatInfo, getDeferFriendlyTabs, getFieldLabel, getFieldMeta, getFilterExpression, getFirstChildConfig, getFirstVisibleTabId, getFormattedDate, getLeafNameFromPropertyName, getLocale$1 as getLocale, getMappedKey, getMessagesGrouped, getReferenceList, getSdkComponentMap, getSeconds, getTabCountSources, getTabLabel, getToDoAssignments, getTransientTabs, getVisibleTabs, handleEvent, hasAssignments, insertInstruction, isFLProperty, isLinkTextEmpty, isSelfReferencedProperty$1 as isSelfReferencedProperty, isValidInput, loginBoxType, populateRowKey, prepareCaseSummaryData, sdkVersion, searchtabsClick, showBanner, tabClick, updateFieldLabels, updateNewInstructions, updateWorkList };
+export { ActionButtonsComponent, AlertBannerComponent, AlertComponent, AngularPConnectService, AppAnnouncementComponent, AppShellComponent, AssignmentCardComponent, AssignmentComponent, AttachmentComponent, AutoCompleteComponent, BannerService, BooleanFormatters, CancelAlertComponent, CaseCreateStageComponent, CaseHistoryComponent, CaseService, CaseSummaryComponent, CaseViewComponent, CheckBoxComponent, CommonFormatters, ComponentMapperComponent, ConfirmationComponent, CurrencyComponent, CurrencyFormatters, DELETE_ICON, DashboardFilterComponent, DataReferenceAdvancedSearchService, DataReferenceComponent, DatapageService, DateComponent, DateFormatters, DateTimeComponent, DecimalComponent, DefaultFormComponent, DeferLoadComponent, DetailsComponent, DetailsNarrowWideComponent, DetailsOneColumnComponent, DetailsSubTabsComponent, DetailsTemplateBase, DetailsThreeColumnComponent, DetailsTwoColumnComponent, DetailsWideNarrowComponent, DropdownComponent, EmailComponent, ErrorBoundaryComponent, ErrorMessagesService, FeedContainerComponent, FieldBase, FieldGroupListComponent, FieldGroupTemplateComponent, FieldValueListComponent, FileUtilityComponent, FlowContainerBaseComponent, FlowContainerComponent, FormTemplateBase, GoogleMapsLoaderService, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, ObjectPageComponent, ObjectReferenceComponent, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, RichTextComponent, RichTextEditorComponent, RootContainerComponent, SdkComponentMap, SearchFormComponent, SemanticLinkComponent, ServerConfigService, SimpleTableComponent, SimpleTableManualComponent, SimpleTableSelectComponent, SingleReferenceReadonlyComponent, StagesComponent, SubTabsComponent, TABLE_CELL, TemplateUtils, TextAreaComponent, TextComponent, TextContentComponent, TextInputComponent, ThousandSeparatorDirective, ThreeColumnComponent, ThreeColumnPageComponent, TimeComponent, TodoComponent, TwoColumnComponent, TwoColumnPageComponent, TwoColumnTabComponent, UpdateWorklistService, UrlComponent, UserReferenceComponent, UtilityComponent, Utils, ViewComponent, ViewContainerComponent, WideNarrowFormComponent, WideNarrowPageComponent, buildFieldsForTable, buildFilterComponents, buildMetaForListView, buildView, combineFilters, compareSdkPCoreVersions, componentCachePersistUtils, createFilter, createFilterComponent, createMetaForTable, createPConnect, currencyMap, dateFormatInfoDefault, deleteInstruction, endpoints, evaluateAllowRowAction, filterDataByCommonFields, filterDataByDate, filterForFieldValueList, format, formatters, generateColumns, getActiveTabId, getAddRowCallback, getAllFields, getApiContext, getBanners, getCacheInfo, getComponentFromMap, getCompositeKeys$1 as getCompositeKeys, getConfigFields, getContext, getCurrencyCharacters, getCurrencyOptions, getCurrentTimezone$1 as getCurrentTimezone, getData, getDataReferenceInfo, getDataRelationshipContextFromKey, getDateFormatInfo, getDeferFriendlyTabs, getFieldLabel, getFieldMeta, getFilterExpression, getFirstChildConfig, getFirstVisibleTabId, getFormattedDate, getLeafNameFromPropertyName, getLocale$1 as getLocale, getMappedKey, getMessagesGrouped, getReferenceList, getResolvedConstantValue, getSdkComponentMap, getSeconds, getTabCountSources, getTabLabel, getToDoAssignments, getTransientTabs, getVisibleTabs, handleEvent, hasAssignments, insertInstruction, isFLProperty, isLinkTextEmpty, isSelfReferencedProperty$1 as isSelfReferencedProperty, isValidInput, loginBoxType, populateRowKey, prepareCaseSummaryData, sdkVersion, searchtabsClick, showBanner, tabClick, updateFieldLabels, updateNewInstructions, updateWorkList };
 //# sourceMappingURL=pega-angular-sdk-components.mjs.map