@pega/dx-component-builder-sdk 24.1.10 → 24.1.12

package/tests/assets/sdk-a/components/createAll/override-sdk/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,13 @@ export class DecimalComponent implements OnInit, OnDestroy {
       this.fieldControl.enable();
     }
 
+    if (this.bReadonly$ && this.formatter === 'Currency') {
+      this.currSym = theSymbols.theCurrencySymbol;
+    } else {
+      this.currSym = '';
+    }
+    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
+
     this.componentReference = (this.pConn$.getStateProps() as any).value;
   }
 
@@ -163,8 +196,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/tests/assets/sdk-a/components/createAll/override-sdk/field/dropdown/dropdown.component.ts

@@ -159,7 +159,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
     this.options$ = optionsList;
@@ -184,7 +183,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -223,7 +221,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="visibility$">
+<ng-container *ngIf="visibility$ && arChildren$.length">
   <component-mapper
     name="FieldGroup"
     [props]="{

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.ts

@@ -69,6 +69,10 @@ export class GroupComponent implements OnInit {
     this.instructions$ = this.configProps$.instructions;
     this.collapsible$ = this.configProps$.collapsible;
 
+    if (this.configProps$.visibility === undefined) {
+      this.visibility$ = this.pConn$.getComputedVisibility();
+    }
+
     if (this.configProps$.displayMode === 'LABELS_LEFT') {
       if (this.configProps$.visibility === undefined) this.visibility$ = true;
 

package/tests/assets/sdk-a/components/createAll/override-sdk/field/percentage/percentage.component.html

@@ -2,22 +2,33 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, 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>
-        <!-- <span matPrefix>% &nbsp;</span> -->
         <input
+          type="text"
           matInput
+          currencyMask
+          [options]="{
+            prefix: '',
+            suffix: '%',
+            thousands: currSep,
+            decimal: currDec,
+            align: 'left',
+            nullable: true,
+            precision: decimalPrecision,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
-          type="number"
           step=".01"
-          [value]="value$"
+          [formControlName]="controlName$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
+          [readonly]="bReadonly$"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/tests/assets/sdk-a/components/createAll/override-sdk/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, 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 { 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,10 @@ export class PercentageComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
-
+  currDec: string;
+  currSep: string;
+  inputMode: any;
+  decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
 
   constructor(
@@ -104,6 +112,7 @@ export class PercentageComponent 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') {
@@ -113,6 +122,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(() => {
@@ -141,6 +155,8 @@ export class PercentageComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
+    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
+
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // trigger display of error message with field control
@@ -158,9 +174,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 ? value.replace(/%/g, '') : '';
+    if (this.currSep === ',') {
+      value = value.replace(/,/g, '');
+    } else {
+      value = value?.replace(/\./g, '');
+      value = value?.replace(/,/g, '.');
+    }
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/override-sdk/field/radio-buttons/radio-buttons.component.ts

@@ -166,7 +166,6 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
 
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
     const propName = (this.pConn$.getStateProps() as any).value;
@@ -186,7 +185,6 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
     this.localizedValue = this.pConn$.getLocalizedValue(
       this.value$,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
     // trigger display of error message with field control
@@ -217,7 +215,6 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
     return this.pConn$.getLocalizedValue(
       opt.value,
       this.localePath,
-      // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/rich-text/config-ext.json

@@ -0,0 +1,11 @@
+{
+    "componentKey": "RichText",
+    "name": "RichText",
+    "label": "Rich text editor",
+    "description": "Text (paragraph)",
+    "type": "Field",
+    "subtype": "Text-Paragraph",
+    "icon": "images/pz-text-area-active.svg",
+    "properties": [],
+    "defaultConfig": {}
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/rich-text/rich-text.component.html

@@ -1,5 +1,5 @@
 <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$, displayMode$, isHtml$: true }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$; else noEdit">

package/tests/assets/sdk-a/components/createAll/override-sdk/field/scalar-list/scalar-list.component.ts

@@ -101,11 +101,12 @@ export class ScalarListComponent implements OnInit, OnDestroy {
         {
           type: componentType,
           config: {
+            // @ts-ignore - Object literal may only specify known properties, and 'value' does not exist in type 'ComponentMetadataConfig'.
             value: scalarValue,
             displayMode: 'LABELS_LEFT',
             label: this.label$,
             ...restProps,
-            readOnly: 'true'
+            readOnly: true
           }
         },
         '',

package/tests/assets/sdk-a/components/createAll/override-sdk/field/text-area/text-area.component.ts

@@ -107,8 +107,6 @@ export class TextAreaComponent implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }
-    // @ts-ignore -  Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
-    // @ts-ignore - Property 'getRawConfigProps' is private and only accessible within class 'C11nEnv'
     this.nMaxLength$ = this.pConn$.getFieldMetadata(this.pConn$.getRawConfigProps()?.value)?.maxLength || 100;
     this.testId = this.configProps$.testId;
     this.displayMode$ = this.configProps$.displayMode;

package/tests/assets/sdk-a/components/createAll/override-sdk/field/time/time.component.html

@@ -12,6 +12,7 @@
           type="time"
           [value]="value$"
           [required]="bRequired$"
+          [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/tests/assets/sdk-a/components/createAll/override-sdk/field/time/time.component.ts

@@ -36,6 +36,7 @@ export class TimeComponent implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -100,6 +101,7 @@ export class TimeComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as TimeProps;
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 

package/tests/assets/sdk-a/components/createAll/override-sdk/field/url/url.component.html

@@ -12,6 +12,7 @@
           type="url"
           [value]="value$"
           [required]="bRequired$"
+          [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/tests/assets/sdk-a/components/createAll/override-sdk/field/url/url.component.ts

@@ -36,6 +36,7 @@ export class UrlComponent implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -106,6 +107,7 @@ export class UrlComponent implements OnInit, OnDestroy {
       this.value$ = this.configProps$.value;
     }
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     this.helperText = this.configProps$.helperText;

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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);
   }