@pega/angular-sdk-overrides 0.24.1 → 0.24.2

package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.html

@@ -1,5 +1,5 @@
 <div>
-  <mat-button-toggle-group vertical (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
+  <mat-button-toggle-group vertical hideSingleSelectionIndicator (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
     <mat-button-toggle *ngFor="let tab of tabConfig$" [value]="tab.id" style="text-align: left">
       <div style="display: flex">
         <div style="flex-grow: 10">{{ tab.name }}</div>

package/lib/field/currency/currency.component.html

@@ -7,17 +7,17 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <div class="psdk-currency-input">
-          <span>{{ symbol }}</span>
           <input
             style="margin-left: 5px"
-            type="float"
+            type="text"
             matInput
+            currencyMask
+            [options]="{ prefix: currSym, thousands: currSep, decimal: currDec, align: 'left', nullable: true }"
             [placeholder]="placeholder"
-            [value]="value$ | number: '1.2-2'"
+            [formControlName]="controlName$"
             [required]="bRequired$"
             [formControl]="fieldControl"
             [attr.data-test-id]="testId"
-            (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           />
         </div>

package/lib/field/currency/currency.component.ts

@@ -4,9 +4,11 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
+import { NgxCurrencyDirective } from 'ngx-currency';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { getCurrencyCharacters } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
@@ -20,7 +22,7 @@ interface CurrrencyProps extends PConnFieldProps {
   templateUrl: './currency.component.html',
   styleUrls: ['./currency.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class CurrencyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -31,7 +33,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   configProps$: CurrrencyProps;
 
   label$ = '';
-  value$: number | null;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -47,9 +49,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   currencyOptions: Object = {};
 
   fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
-  symbol: string;
-  thousandsSep: string;
-  decimalSep: string;
+  currSym: string;
+  currSep: string;
+  currDec: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -114,10 +116,21 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
-    const nValue: any = this.configProps$.value;
-    this.value$ = nValue && typeof nValue === 'string' ? parseFloat(nValue) : nValue;
+    let nValue: any = this.configProps$.value;
+    if (nValue) {
+      if (typeof nValue === 'string') {
+        nValue = parseFloat(nValue);
+      }
+      this.value$ = nValue;
+    }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    this.currSym = theSymbols.theCurrencySymbol;
+    this.currSep = theSymbols.theDigitGroupSeparator;
+    this.currDec = theSymbols.theDecimalIndicator;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -150,11 +163,6 @@ export class CurrencyComponent implements OnInit, OnDestroy {
       this.currencyISOCode = this.configProps$.currencyISOCode;
     }
 
-    const theSymbols = getCurrencyCharacters(this.currencyISOCode);
-    this.symbol = theSymbols.theCurrencySymbol;
-    this.thousandsSep = theSymbols.theDigitGroupSeparator;
-    this.decimalSep = theSymbols.theDecimalIndicator;
-
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // trigger display of error message with field control
@@ -168,14 +176,18 @@ export class CurrencyComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    let value = event?.target?.value;
+    value = value?.substring(1);
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/lib/field/date-time/date-time.component.html

@@ -8,18 +8,18 @@
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
+          [owlDateTime]="dtPicker"
           [attr.data-test-id]="testId"
-          [ngxMatDatetimePicker]="picker"
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          (dateChange)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
+          (dateTimeChange)="fieldOnBlur($event)"
           [value]="value$"
           [required]="bRequired$"
         />
-        <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
-        <ngx-mat-datetime-picker #picker [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"> </ngx-mat-datetime-picker>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+        <mat-datepicker-toggle matSuffix [for]="$any(dtPicker)" [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
+        <owl-date-time #dtPicker></owl-date-time>
+        <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>

package/lib/field/date-time/date-time.component.ts

@@ -1,44 +1,21 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
-import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-import { MomentDateModule } from '@angular/material-moment-adapter';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
 }
 
-class MyFormat {
-  theDateFormat: any = getDateFormatInfo();
-
-  get display() {
-    return {
-      dateInput: `${this.theDateFormat.dateFormatString}, LT`,
-      monthYearLabel: 'MMM YYYY',
-      dateA11yLabel: 'LL',
-      monthYearA11yLabel: 'MMMM YYYY'
-    };
-  }
-
-  get parse() {
-    return {
-      dateInput: `${this.theDateFormat.dateFormatString}, LT`
-    };
-  }
-}
-
 @Component({
   selector: 'app-date-time',
   templateUrl: './date-time.component.html',
@@ -50,13 +27,10 @@ class MyFormat {
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
-    NgxMatMomentModule,
-    NgxMatDatetimePickerModule,
-    NgxMatTimepickerModule,
-    MomentDateModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
     forwardRef(() => ComponentMapperComponent)
-  ],
-  providers: [{ provide: NGX_MAT_DATE_FORMATS, useClass: MyFormat }]
+  ]
 })
 export class DateTimeComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -194,16 +168,11 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    const value = event.value && event.value.isValid() ? event.value : null;
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, value?.toISOString());
-  }
-
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
+    if (typeof event.value === 'object') {
+      // convert date to pega "date" format
+      event.value = event.value?.toISOString();
+    }
 
     this.angularPConnectData.actions?.onBlur(this, event);
   }

package/lib/field/decimal/decimal.component.html

@@ -1,22 +1,31 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <input
           type="text"
           matInput
-          appThousandSeparator
+          currencyMask
+          [options]="{
+            prefix: bReadonly$ && formatter === 'Currency' ? currSym : '',
+            thousands: currSep,
+            decimal: currDec,
+            align: 'left',
+            nullable: true,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
           step="0.01"
-          [value]="value$"
+          [formControlName]="controlName$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (blur)="fieldOnBlur($event)"
+          [readonly]="bReadonly$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/lib/field/decimal/decimal.component.ts

@@ -3,18 +3,21 @@ import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
-import { ThousandSeparatorDirective } from '@pega/angular-sdk-components';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface DecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Decimal here
   currencyISOCode?: string;
   decimalPrecision?: number;
   showGroupSeparators?: string;
+  formatter?: string;
 }
 
 @Component({
@@ -28,7 +31,7 @@ interface DecimalProps extends PConnFieldProps {
     FormsModule,
     MatFormFieldModule,
     MatInputModule,
-    ThousandSeparatorDirective,
+    NgxCurrencyDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })
@@ -41,7 +44,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
   configProps$: DecimalProps;
 
   label$ = '';
-  value$: number;
+  value$: any;
   bRequired$ = false;
   bReadonly$ = false;
   bDisabled$ = false;
@@ -55,6 +58,13 @@ export class DecimalComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
+  currDec: string;
+  currSep: string;
+  currSym: string;
+  decimalPrecision: number | undefined;
+  formatter;
+  formattedValue: any;
+  inputMode: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -119,6 +129,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
+    this.inputMode = NgxCurrencyInputMode.Natural;
     let nValue: any = this.configProps$.value;
     if (nValue) {
       if (typeof nValue === 'string') {
@@ -128,6 +139,21 @@ export class DecimalComponent implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const showGroupSeparators = this.configProps$.showGroupSeparators;
+    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    this.currDec = theSymbols.theDecimalIndicator;
+    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+
+    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+    this.formatter = this.configProps$.formatter;
+
+    if (this.formatter === 'Currency') {
+      this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+    } else {
+      this.formattedValue = format(this.value$, this.pConn$.getComponentName().toLowerCase(), theCurrencyOptions);
+    }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -156,6 +182,12 @@ export class DecimalComponent implements OnInit, OnDestroy {
       this.fieldControl.enable();
     }
 
+    if (this.bReadonly$ && this.formatter === 'Currency') {
+      this.currSym = theSymbols.theCurrencySymbol;
+    } else {
+      this.currSym = '';
+    }
+
     this.componentReference = (this.pConn$.getStateProps() as any).value;
   }
 
@@ -163,8 +195,12 @@ export class DecimalComponent implements OnInit, OnDestroy {
     const actionsApi = this.pConn$?.getActionsApi();
     const propName = (this.pConn$?.getStateProps() as any).value;
     let value = event?.target?.value;
-    value = value.replace(/,/g, '');
-    value = value !== '' ? Number(value) : value;
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
     handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 

package/lib/field/multiselect/utils.ts

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash.clonedeep';
 
 export function setVisibilityForList(c11nEnv, visibility) {
   const { selectionMode, selectionList, renderMode, referenceList } = c11nEnv.getComponentConfig();

package/lib/field/percentage/percentage.component.html

@@ -6,13 +6,14 @@
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
-        <!-- <span matPrefix>% &nbsp;</span> -->
         <input
+          type="text"
           matInput
+          currencyMask
+          [options]="{ prefix: '', suffix: '%', thousands: currSep, decimal: currDec, align: 'left', nullable: true }"
           [placeholder]="placeholder"
-          type="number"
           step=".01"
-          [value]="value$"
+          [formControlName]="controlName$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"

package/lib/field/percentage/percentage.component.ts

@@ -4,12 +4,17 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
+import { NgxCurrencyDirective } from 'ngx-currency';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { getCurrencyCharacters } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface PercentageProps extends PConnFieldProps {
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -18,7 +23,7 @@ interface PercentageProps extends PConnFieldProps {
   templateUrl: './percentage.component.html',
   styleUrls: ['./percentage.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PercentageComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
@@ -41,7 +46,8 @@ export class PercentageComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
-
+  currDec: string;
+  currSep: string;
   fieldControl = new FormControl<number | null>(null, null);
 
   constructor(
@@ -113,6 +119,11 @@ export class PercentageComponent implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    const showGroupSeparators = this.configProps$.showGroupSeparators;
+
+    const theSymbols = getCurrencyCharacters('');
+    this.currDec = theSymbols.theDecimalIndicator || '2';
+    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -158,9 +169,17 @@ export class PercentageComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    let value = event?.target?.value;
+    value = value?.replace('%', '');
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/lib/field/user-reference/user-reference.component.html

@@ -1,48 +1,53 @@
 <div class="psdk-user-reference">
-  <div *ngIf="type === 'operator'">
-    <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
-  </div>
-  <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-select
-        [value]="value$"
-        [required]="bRequired$"
-        [formControl]="fieldControl"
-        [attr.data-test-id]="testId"
-        (selectionChange)="fieldOnChange($event)"
-      >
-        <mat-option *ngFor="let opt of options$" [value]="opt.key">
-          {{ opt.value }}
-        </mat-option>
-      </mat-select>
-      <mat-label>{{ label$ }}</mat-label>
-      <mat-error *ngIf="fieldControl.invalid">
-        {{ getErrorMessage() }}
-      </mat-error>
-    </mat-form-field>
-  </div>
-  <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-label>{{ label$ }}</mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder"
-        [formControl]="fieldControl"
-        [value]="value$"
-        [required]="bRequired$"
-        [matAutocomplete]="auto"
-        [attr.data-test-id]="testId"
-        (change)="fieldOnChange($event)"
-        (blur)="fieldOnBlur($event)"
-      />
-      <mat-autocomplete #auto="matAutocomplete">
-        <mat-option *ngFor="let opt of options$" [value]="opt.value">
-          <span>{{ opt.value }}</span>
-        </mat-option>
-      </mat-autocomplete>
-      <mat-error *ngIf="fieldControl.invalid">
-        {{ getErrorMessage() }}
-      </mat-error>
-    </mat-form-field>
+  <div *ngIf="displayMode$; else noDisplayMode">
+    <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
   </div>
+  <ng-template #noDisplayMode>
+    <div *ngIf="type === 'operator'">
+      <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
+    </div>
+    <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-select
+          [value]="value$"
+          [required]="bRequired$"
+          [formControl]="fieldControl"
+          [attr.data-test-id]="testId"
+          (selectionChange)="fieldOnChange($event)"
+        >
+          <mat-option *ngFor="let opt of options$" [value]="opt.key">
+            {{ opt.value }}
+          </mat-option>
+        </mat-select>
+        <mat-label>{{ label$ }}</mat-label>
+        <mat-error *ngIf="fieldControl.invalid">
+          {{ getErrorMessage() }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+    <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]="placeholder"
+          [formControl]="fieldControl"
+          [value]="value$"
+          [required]="bRequired$"
+          [matAutocomplete]="auto"
+          [attr.data-test-id]="testId"
+          (change)="fieldOnChange($event)"
+          (blur)="fieldOnBlur($event)"
+        />
+        <mat-autocomplete #auto="matAutocomplete">
+          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+            <span>{{ opt.value }}</span>
+          </mat-option>
+        </mat-autocomplete>
+        <mat-error *ngIf="fieldControl.invalid">
+          {{ getErrorMessage() }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+  </ng-template>
 </div>

package/lib/field/user-reference/user-reference.component.ts

@@ -10,6 +10,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { map, Observable, startWith } from 'rxjs';
 
 const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication';
 const DROPDOWN_LIST = 'Drop-down list';
@@ -57,6 +58,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
+  displayMode$?: string;
+  filteredOptions: Observable<any[]>;
+  filterValue = '';
 
   fieldControl = new FormControl('', null);
 
@@ -65,19 +69,24 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     private utils: Utils
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.controlName$ = this.angularPConnect.getComponentID(this);
 
-    this.checkAndUpdate();
+    await this.checkAndUpdate();
 
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
       this.fieldControl.setValue(this.value$);
     }
+
+    this.filteredOptions = this.fieldControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || ''))
+    );
   }
 
   ngOnDestroy() {
@@ -105,32 +114,38 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   }
 
   // Callback passed when subscribing to store change
-  onStateChange() {
-    this.checkAndUpdate();
+  async onStateChange() {
+    await this.checkAndUpdate();
+  }
+
+  private _filter(value: string): string[] {
+    const filterVal = (value || this.filterValue).toLowerCase();
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
-  checkAndUpdate() {
+  async checkAndUpdate() {
     // 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();
+      await this.updateSelf();
     }
   }
 
-  updateSelf() {
+  async updateSelf() {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
 
-    const { label, displayAs, value, showAsFormattedText, helperText, placeholder } = props;
+    const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
     this.label$ = label;
     this.showAsFormattedText$ = showAsFormattedText;
     this.displayAs$ = displayAs;
     this.helperText = helperText;
     this.placeholder = placeholder || '';
+    this.displayMode$ = displayMode;
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
@@ -158,18 +173,18 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const queryPayload = {
         dataViewName: OPERATORS_DP
       };
-      PCore.getRestClient()
-        .invokeRestApi('getListData', { queryPayload } as any, '') // 3rd arg empty string until typedef marked correctly
-        .then((resp: any) => {
+      try {
+        const resp: any = await PCore.getRestClient().invokeRestApi('getListData', { queryPayload } as any, ''); // 3rd arg empty string until typedef marked correctly
+        if (resp?.data) {
           const ddDataSource = resp.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
             value: listItem.pyUserName
           }));
           this.options$ = ddDataSource;
-        })
-        .catch(err => {
-          console.log(err);
-        });
+        }
+      } catch (error) {
+        console.log(error);
+      }
     }
   }
 
@@ -177,6 +192,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.value === 'Select') {
       event.value = '';
     }
+    if (event?.target) {
+      this.filterValue = (event.target as HTMLInputElement).value;
+    }
     this.angularPConnectData.actions?.onChange(this, event);
   }
 

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -274,24 +274,30 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
   hasAssignments() {
     let hasAssignments = false;
     // @ts-ignore - second parameter pageReference for getValue method should be optional
-    const assignmentsList = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
-    const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
+    const assignmentsList: any[] = this.pConn$.getValue(this.pCoreConstants.CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
+    // const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
     // 8.7 includes assignments in Assignments List that may be assigned to
     //  a different operator. So, see if there are any assignments for
     //  the current operator
+    const isEmbedded = window.location.href.includes('embedded');
     let bAssignmentsForThisOperator = false;
 
+    if (isEmbedded) {
+      const thisOperator = PCore.getEnvironmentInfo().getOperatorIdentifier();
+      for (const assignment of assignmentsList) {
+        if (assignment.assigneeInfo.ID === thisOperator) {
+          bAssignmentsForThisOperator = true;
+        }
+      }
+    } else {
+      bAssignmentsForThisOperator = true;
+    }
+
     // Bail if there is no assignmentsList
     if (!assignmentsList) {
       return hasAssignments;
     }
 
-    for (const assignment of assignmentsList) {
-      if ((assignment as any).assigneeInfo.ID === thisOperator) {
-        bAssignmentsForThisOperator = true;
-      }
-    }
-
     const hasChildCaseAssignments = this.hasChildCaseAssignments();
 
     if (bAssignmentsForThisOperator || hasChildCaseAssignments || this.isCaseWideLocalAction()) {
@@ -469,7 +475,7 @@ export class FlowContainerComponent implements OnInit, OnDestroy {
       PCore.getPubSubUtils().publish('assignmentFinished');
 
       this.psService.sendMessage(false);
-    } else if (this.bHasCaseMessages$) {
+    } else {
       this.bHasCaseMessages$ = false;
       this.bShowConfirm = false;
     }

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -118,17 +118,16 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
         /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
         PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
       }
+    }
 
-      if (!PCore.checkIfSemanticURL()) {
+    if (sessionStorage.getItem('hasViewContainer') == 'false') {
+      // @ts-ignore - Property 'getMetadata' is private and only accessible within class
+      if (this.pConn$.getMetadata().children) {
         containerMgr.addContainerItem(this.dispatchObject);
       }
-    }
 
-    // if (sessionStorage.getItem('hasViewContainer') == 'false') {
-    //   // @ts-ignore - Property 'getMetadata' is private and only accessible within class
-
-    //   sessionStorage.setItem('hasViewContainer', 'true');
-    // }
+      sessionStorage.setItem('hasViewContainer', 'true');
+    }
 
     // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
     // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly

package/lib/infra/assignment/assignment.component.ts

@@ -60,6 +60,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   cancelAssignment: any;
   cancelCreateStageAssignment: any;
   showPage: any;
+  approveCase: any;
+  rejectCase: any;
 
   // itemKey: string = "";   // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
 
@@ -205,6 +207,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     this.showPage = actionsAPI.showPage.bind(actionsAPI);
 
     this.cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+    this.approveCase = actionsAPI.approveCase?.bind(actionsAPI);
+    this.rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
 
     this.createButtons();
   }
@@ -411,11 +415,23 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
           }
           break;
 
+        case 'rejectCase': {
+          const rejectPromise = this.rejectCase(this.itemKey$);
+
+          rejectPromise
+            .then(() => {})
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBar.open(`${this.localizedVal('Rejection failed!', this.localeCategory)}`, 'Ok');
+            });
+
+          break;
+        }
+
         default:
           break;
       }
     } else if (sButtonType == 'primary') {
-      // eslint-disable-next-line sonarjs/no-small-switch
       switch (sAction) {
         case 'finishAssignment':
           this.erService.sendMessage('publish', '');
@@ -437,6 +453,19 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             this.erService.sendMessage('show', this.localizedVal('Please fix errors on form.', this.localeCategory));
           }
           break;
+
+        case 'approveCase': {
+          const approvePromise = this.approveCase(this.itemKey$);
+
+          approvePromise
+            .then(() => {})
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBar.open(`${this.localizedVal('Approve failed!', this.localeCategory)}`, 'Ok');
+            });
+
+          break;
+        }
         default:
           break;
       }

package/lib/infra/multi-step/multi-step.component.html

@@ -54,7 +54,7 @@
               <span>{{ i + 1 }}</span>
             </div>
           </div>
-          <div class="{{ _getHLabelClass(mainStep.visited_status) }}">
+          <div id="multi-step-label" class="{{ _getHLabelClass(mainStep.visited_status) }}">
             <div class="psdk-horizontal-step-text-label">
               {{ mainStep.name }}
             </div>

package/lib/infra/navbar/navbar.component.html

@@ -39,7 +39,7 @@
   </div>
   <div class="psdk-nav-divider"></div>
   <div>
-    <mat-list>
+    <mat-list id="profile">
       <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
         <div class="flex-box">
           <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>

package/lib/infra/navbar/navbar.component.ts

@@ -165,7 +165,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-    this.createWork(sCaseType, actionInfo);
+    this.createWork(sCaseType, actionInfo).then(() => {
+      console.log('createWork completed');
+    });
   }
 
   navPanelLogoutClick() {

package/lib/template/case-view/case-view.component.html

@@ -9,7 +9,7 @@
           <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
           <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
           <div>
-            <h1>{{ heading$ }}</h1>
+            <h1 id="case-name">{{ heading$ }}</h1>
           </div>
         </div>
       </mat-toolbar-row>

package/lib/template/list-view/list-view.component.ts

@@ -169,7 +169,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     this.compositeKeys = this.configProps$?.compositeKeys;
     this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
-    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
+    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload.globalSearch);
     this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
     this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
     this.showDynamicFields = this.configProps$?.showDynamicFields;

package/lib/widget/case-history/case-history.component.ts

@@ -46,7 +46,7 @@ export class CaseHistoryComponent implements OnInit {
       this.fields$ = [
         { label: this.pConn$.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
         { label: this.pConn$.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
-        { label: this.pConn$.getLocalizedValue('User', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
+        { label: this.pConn$.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' }
       ];
 
       const tableDataResults = this.updateData(historyJSON.data.data, this.fields$);

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

@@ -41,7 +41,7 @@
 
 <div *ngIf="bShowLinkModal$" class="psdk-dialog-background">
   <div class="psdk-modal-link-top">
-    <h3>{{ pConn$.getLocalizedValue('Add local link', '', '') }}</h3>
+    <h3>{{ pConn$.getLocalizedValue('Add links', '', '') }}</h3>
     <div class="psdk-modal-link-entry">
       <div class="psdk-modal-body">
         <div class="psdk-modal-links-row">
@@ -61,7 +61,7 @@
           </div>
 
           <div class="psdk-modal-link-add">
-            <button mat-raised-button color="primary" (click)="_addLink()">{{ pConn$.getLocalizedValue('Add Link', '', '') }}</button>
+            <button mat-raised-button color="primary" (click)="_addLink()">{{ pConn$.getLocalizedValue('Add link', '', '') }}</button>
           </div>
         </div>
 

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

@@ -64,18 +64,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
 
   currentCaseID = '';
 
-  addAttachmentsActions: any[] = [
-    {
-      text: 'Add files',
-      id: 'addNewFiles',
-      onClick: () => this.createModal('addLocalFile')
-    },
-    {
-      text: 'Add links',
-      id: 'addNewLinks',
-      onClick: () => this.createModal('addLocalLink')
-    }
-  ];
+  addAttachmentsActions: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -93,7 +82,18 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     this.lu_icon$ = 'paper-clip';
 
     this.closeSvgIcon$ = this.utils.getImageSrc('times', this.utils.getSDKStaticContentUrl());
-
+    this.addAttachmentsActions = [
+      {
+        text: this.pConn$.getLocalizedValue('Add files', '', ''),
+        id: 'addNewFiles',
+        onClick: () => this.createModal('addLocalFile')
+      },
+      {
+        text: this.pConn$.getLocalizedValue('Add links', '', ''),
+        id: 'addNewLinks',
+        onClick: () => this.createModal('addLocalLink')
+      }
+    ];
     // const onViewAllCallback = () => this.onViewAll(this.arFullListAttachments);
 
     this.lu_onViewAllFunction = { onClick: this.onViewAll.bind(this) };

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

@@ -8,7 +8,7 @@
       <div class="psdk-utility-count" id="attachments-count">{{ count$ }}</div>
       <div style="flex-grow: 1"></div>
       <div class="header-icon">
-        <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
+        <button id="file-menu" mat-icon-button [matMenuTriggerFor]="utilityMenu">
           <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
         </button>
         <mat-menu #utilityMenu="matMenu" overlapTrigger="false">

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

@@ -15,7 +15,7 @@
           <div class="psdk-todo-assignment-title">{{ getAssignmentName(assignment) }}</div>
           <div class="psdk-todo-assignment-data">
             <div class="psdk-todo-assignment-task">
-              Task in
+              {{ localizedVal('Task in', localeCategory) }}
               <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)">
                 {{ assignment.name }} {{ getID(assignment) }}
               </button>
@@ -37,11 +37,11 @@
 
 <div *ngIf="assignmentCount$ > 3">
   <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
-    <button mat-stroked-button (click)="_showMore()">Show more</button>
+    <button mat-stroked-button (click)="_showMore()">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>
   </div>
   <ng-template #showLess>
     <div class="psdk-todo-show-more">
-      <button mat-stroked-button (click)="_showLess()">Show less</button>
+      <button mat-stroked-button (click)="_showLess()">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>
     </div>
   </ng-template>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"