@pega/sdk 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/sdk",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Scaffold a Pega SDK application project",
   "type": "module",
   "bin": {

package/templates/angular-sdk-reference/angular.json

@@ -19,12 +19,13 @@
             "tsConfig": "tsconfig.json",
             "assets": ["src/assets", "src/sdk-config.json"],
             "styles": ["src/styles.css"],
-            "scripts": []
+            "scripts": ["../../node_modules/@pega/constellationjs/dist/constellation-core-web.js"]
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
+            "buildTarget": "angular-sdk-reference:build",
             "port": 3501
           }
         }

package/templates/angular-sdk-reference/package.json

@@ -17,6 +17,7 @@
     "@angular/platform-browser": "^21.2.0",
     "@angular/platform-browser-dynamic": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
     "@pega/sdk-angular": "^0.1.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",

package/templates/angular-sdk-reference/src/app/app.component.ts

@@ -1,25 +1,72 @@
-import { Component, OnInit } from '@angular/core';
+/**
+ * Angular Mashup sample — demonstrates @pega/sdk-core + @pega/sdk-angular
+ * in embedded/mashup mode using PegaRuntimeService.
+ *
+ * Flow:
+ *   1. PegaRuntimeService.initialize() handles auth + bootstrap
+ *   2. Subscribe to state$ for reactive isReady/isLoading/error
+ *   3. Show "Create Case" button
+ *   4. On click → PCore.getMashupApi().createCase()
+ *   5. PConnectRendererComponent renders the case form tree
+ */
+
+import { ChangeDetectorRef, Component, NgZone, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { PegaRuntimeService, PConnectBridgeComponent, type RuntimeState } from '@pega/sdk-angular';
+import { registerSampleAngularComponents } from '../components/component-map';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+import { compareSdkPCoreVersions } from '../helpers/versionHelpers';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PConnectBridgeComponent],
   template: `
-    <div *ngIf="!isReady" class="loading-container">
-      <span class="loading-text">Authenticating and loading Pega...</span>
+    <!-- Loading state -->
+    <div *ngIf="!isPegaReady" class="loading-container">
+      <span class="loading-text">
+        {{ errorMessage ? errorMessage : 'Authenticating and loading Pega...' }}
+      </span>
     </div>
-    <div *ngIf="isReady" id="pega-root">
+
+    <!-- Main UI -->
+    <div *ngIf="isPegaReady" id="pega-root">
+      <!-- Header -->
       <div class="header">
-        <span class="header-title">Pega SDK — Angular Reference</span>
+        <span class="header-title">Pega SDK — Angular Mashup Sample</span>
+        <button type="button" class="btn-logout" (click)="logout()">Logout</button>
       </div>
-      <div class="content">
-        <p>Pega SDK Angular app is ready. Implement your components here.</p>
+
+      <div class="main-content">
+        <!-- Create Case button -->
+        <div *ngIf="!showForm" class="create-case-section">
+          <h2>Ready to go</h2>
+          <p class="subtitle">Click below to create a new case and see the Pega form components in action.</p>
+          <button type="button" class="btn-create" (click)="handleCreateCase()">Create Case</button>
+        </div>
+
+        <!-- Pega form area -->
+        <div class="form-container">
+          <div *ngIf="loading" class="loading-form">Loading case form...</div>
+          <pconnect-bridge *ngIf="!loading && rootPConnect" [getPConnect]="rootPConnectGetter!"></pconnect-bridge>
+        </div>
       </div>
     </div>
   `,
   styles: [
     `
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        font-family: system-ui, sans-serif;
+      }
+      .loading-text {
+        color: #64748b;
+        font-size: 1rem;
+      }
       .header {
         padding: 1rem 1.5rem;
         background: #1e293b;
@@ -31,24 +78,194 @@ import { CommonModule } from '@angular/common';
       .header-title {
         font-weight: 600;
       }
-      .content {
+      .btn-logout {
+        background: transparent;
+        border: 1px solid #64748b;
+        color: #94a3b8;
+        padding: 0.375rem 0.75rem;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        font-size: 0.8125rem;
+      }
+      .main-content {
         max-width: 720px;
         margin: 2rem auto;
         padding: 0 1.5rem;
+        font-family: system-ui, sans-serif;
+      }
+      .create-case-section {
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+      .create-case-section h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+      }
+      .subtitle {
+        color: #64748b;
+        margin-bottom: 1.5rem;
+      }
+      .btn-create {
+        background: #2563eb;
+        color: #fff;
+        border: none;
+        padding: 0.625rem 1.5rem;
+        border-radius: 0.375rem;
+        font-size: 0.9375rem;
+        font-weight: 500;
+        cursor: pointer;
+      }
+      .form-container {
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 0.75rem;
+        padding: 1.5rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+      }
+      .loading-form {
+        text-align: center;
+        padding: 2rem;
+        color: #64748b;
       }
     `,
   ],
 })
-export class AppComponent implements OnInit {
-  isReady = false;
+export class AppComponent implements OnInit, OnDestroy {
+  isPegaReady = false;
+  rootPConnect: typeof PConnect | null = null;
+  rootPConnectGetter: (() => typeof PConnect) | null = null;
+  showForm = false;
+  loading = false;
+  errorMessage: string | undefined;
+
+  private runtime = new PegaRuntimeService();
+  private stateSub: Subscription | undefined;
+  private cancelSubId = 'angularMashup-cancel';
+  private doneSubId = 'angularMashup-assignmentDone';
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
 
-  constructor() {}
+  ngOnInit(): void {
+    this.stateSub = this.runtime.state$.subscribe((state: RuntimeState) => {
+      console.log('Runtime state update:', state);
+      this.ngZone.run(() => {
+        this.isPegaReady = state.isReady;
+        this.errorMessage = state.error;
+
+        if (state.isReady && state.bootstrapResult) {
+          const rootProps = state.bootstrapResult.rootProps as Record<string, unknown> | undefined;
+          const getPConnect = rootProps?.['getPConnect'] as (() => typeof PConnect) | undefined;
+          this.rootPConnect = getPConnect?.() ?? null;
+          this.rootPConnectGetter = getPConnect ?? null;
+          this.subscribeToPubSub();
+        }
+
+        this.cdr.detectChanges();
+      });
+    });
+
+    this.bootstrap();
+  }
+
+  ngOnDestroy(): void {
+    this.stateSub?.unsubscribe();
+
+    if (this.isPegaReady) {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, this.cancelSubId);
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+        this.doneSubId,
+      );
+    }
+  }
+
+  async bootstrap(): Promise<void> {
+    const sdkConfig = await getSdkConfig();
+    const config = sdkConfig as Record<string, Record<string, unknown>>;
+
+    await this.runtime.initialize(
+      {
+        serverConfig: {
+          infinityRestServerUrl: config['serverConfig']['infinityRestServerUrl'] as string,
+          appAlias: config['serverConfig']['appAlias'] as string,
+        },
+        authConfig: {
+          clientId: (config['authConfig']['mashupClientId'] ?? '') as string,
+          authorizeUri: (config['authConfig']['authorizeUri'] ?? '') as string,
+          tokenUri: (config['authConfig']['tokenUri'] ?? '') as string,
+          revokeUri: (config['authConfig']['revokeUri'] ?? '') as string,
+          redirectUri: (config['authConfig']['redirectUri'] ?? '') as string,
+        },
+      },
+      'pega-root',
+      {
+        onPCoreReady: () => {
+          console.log('PCore is ready, running onPCoreReady callback');
+          // Register component creator so PCore uses our bridge
+          PCore.registerComponentCreator((c11nEnv: unknown) => c11nEnv);
+          registerSampleAngularComponents();
+          compareSdkPCoreVersions();
+
+          // Initialize container session gates (required by ViewContainer/FlowContainer)
+          sessionStorage.setItem('hasViewContainer', 'false');
+          sessionStorage.setItem('okToInitFlowContainer', 'true');
+        },
+      },
+    );
+  }
+
+  private subscribeToPubSub(): void {
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
+      () => {
+        this.ngZone.run(() => {
+          this.showForm = false;
+        });
+      },
+      this.cancelSubId,
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+      () => {
+        this.ngZone.run(() => {
+          this.showForm = false;
+        });
+      },
+      this.doneSubId,
+    );
+  }
+
+  async handleCreateCase(): Promise<void> {
+    this.loading = true;
+    this.showForm = true;
 
-  async ngOnInit() {
     try {
-      this.isReady = true;
+      const sdkConfig = await getSdkConfig();
+      const mashupCaseType = (sdkConfig as Record<string, Record<string, unknown>>).serverConfig[
+        'appMashupCaseType'
+      ] as string;
+
+      await PCore.getMashupApi().createCase(mashupCaseType, PCore.getConstants().APP.APP, {
+        pageName: 'pyEmbedAssignment',
+        startingFields: {},
+      });
     } catch (err) {
-      console.error('Failed to initialize Pega SDK:', err);
+      console.error('Error creating case:', err);
+      this.showForm = false;
+    } finally {
+      this.ngZone.run(() => {
+        this.loading = false;
+        this.cdr.detectChanges();
+      });
     }
   }
+
+  logout(): void {
+    this.runtime.authClient.logout();
+  }
 }

package/templates/angular-sdk-reference/src/components/component-map.ts

@@ -0,0 +1,90 @@
+/**
+ * Angular sample component map — maps Pega component names to Angular component classes.
+ *
+ * Mirrors the getSampleComponentMap() pattern from @pega/sdk-react.
+ */
+
+import type { Type } from '@angular/core';
+import { registerAngularComponentMap } from '@pega/sdk-angular';
+
+// Infrastructure
+import { RootContainerComponent } from './infra/root-container/root-container.component';
+import { ViewContainerComponent } from './infra/view-container/view-container.component';
+import { FlowContainerComponent } from './infra/flow-container/flow-container.component';
+import { AssignmentComponent } from './infra/assignment/assignment.component';
+import { ViewComponent } from './infra/view/view.component';
+import { ReferenceComponent } from './infra/reference/reference.component';
+import { RegionComponent } from './infra/region/region.component';
+import { CaseViewComponent } from './infra/case-view/case-view.component';
+import { CaseSummaryComponent } from './infra/case-summary/case-summary.component';
+import { StagesComponent } from './infra/stages/stages.component';
+
+// Templates
+import { DefaultFormComponent } from './templates/default-form/default-form.component';
+import { OneColumnComponent } from './templates/one-column/one-column.component';
+import { TwoColumnComponent } from './templates/two-column/two-column.component';
+import { NarrowWideComponent } from './templates/narrow-wide/narrow-wide.component';
+import { WideNarrowComponent } from './templates/wide-narrow/wide-narrow.component';
+
+// Fields
+import { TextInputComponent } from './fields/text-input/text-input.component';
+import { TextAreaComponent } from './fields/text-area/text-area.component';
+import { DropdownComponent } from './fields/dropdown/dropdown.component';
+import { CheckboxComponent } from './fields/checkbox/checkbox.component';
+import { RadioButtonsComponent } from './fields/radio-buttons/radio-buttons.component';
+import { CurrencyComponent } from './fields/currency/currency.component';
+import { DateInputComponent } from './fields/date-input/date-input.component';
+import { EmailComponent } from './fields/email/email.component';
+import { PhoneComponent } from './fields/phone/phone.component';
+import { IntegerComponent } from './fields/integer/integer.component';
+import { URLInputComponent } from './fields/url-input/url-input.component';
+import { AutoCompleteComponent } from './fields/auto-complete/auto-complete.component';
+
+function getSampleAngularComponentMap(): Record<string, Type<unknown>> {
+  return {
+    // Fields
+    TextInput: TextInputComponent,
+    TextArea: TextAreaComponent,
+    Dropdown: DropdownComponent,
+    Checkbox: CheckboxComponent,
+    RadioButtons: RadioButtonsComponent,
+    Currency: CurrencyComponent,
+    Date: DateInputComponent,
+    Email: EmailComponent,
+    Phone: PhoneComponent,
+    Integer: IntegerComponent,
+    URL: URLInputComponent,
+    AutoComplete: AutoCompleteComponent,
+
+    // Templates
+    DefaultForm: DefaultFormComponent,
+    OneColumn: OneColumnComponent,
+    TwoColumn: TwoColumnComponent,
+    NarrowWide: NarrowWideComponent,
+    WideNarrow: WideNarrowComponent,
+
+    // Infrastructure
+    Assignment: AssignmentComponent,
+    RootContainer: RootContainerComponent,
+    ViewContainer: ViewContainerComponent,
+    FlowContainer: FlowContainerComponent,
+    View: ViewComponent,
+    Region: RegionComponent,
+    CaseView: CaseViewComponent,
+    CaseSummary: CaseSummaryComponent,
+    Stages: StagesComponent,
+
+    // Aliases — PCore may use different name variants
+    AppShell: RootContainerComponent,
+    CaseViewContainer: ViewContainerComponent,
+    SubTabs: ViewContainerComponent,
+    DeferLoad: ViewContainerComponent,
+    reference: ReferenceComponent,
+  };
+}
+
+function registerSampleAngularComponents(): void {
+  registerAngularComponentMap(getSampleAngularComponentMap());
+}
+
+export { getSampleAngularComponentMap, registerSampleAngularComponents };

package/templates/angular-sdk-reference/src/components/fields/auto-complete/auto-complete.component.ts

@@ -0,0 +1,267 @@
+/**
+ * AutoComplete — typeahead/autocomplete field.
+ *
+ * Supports associated lists (options from datasource prop) and data page lists
+ * (options fetched via PCore.getDataPageUtils). Also handles deferDatasource mode
+ * where datasourceMetadata transforms into a data page call.
+ *
+ * Pattern reference: angular-sdk-components AutoCompleteComponent + sdk-react AutoComplete
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input } from '@angular/core';
+import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { handleEvent } from '../../../helpers/event-utils';
+import { getOptionList } from '../../../helpers/utils';
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+@Component({
+  selector: 'pega-auto-complete',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <!-- Read-only / display mode -->
+    <div *ngIf="readOnly || isDisplayMode" style="margin-bottom: 1rem;">
+      <span style="font-size: 0.75rem; color: #6b7280;">{{ label }}</span>
+      <div style="font-size: 0.875rem;">{{ displayValue }}</div>
+    </div>
+
+    <!-- Editable mode -->
+    <div *ngIf="!readOnly && !isDisplayMode" style="margin-bottom: 1rem; position: relative;">
+      <label *ngIf="label" style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;">
+        {{ label }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;">*</span>
+      </label>
+      <input
+        type="text"
+        [attr.data-testid]="testId"
+        [value]="inputValue"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [required]="required"
+        (input)="onInput($event)"
+        (focus)="showDropdown = true"
+        (blur)="onBlur()"
+        autocomplete="off"
+        style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; box-sizing: border-box;"
+        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+      />
+      <!-- Dropdown list -->
+      <ul
+        *ngIf="showDropdown && filteredOptions.length > 0"
+        style="position: absolute; z-index: 10; width: 100%; max-height: 12rem; overflow-y: auto; background: #fff; border: 1px solid #d1d5db; border-radius: 0.375rem; margin-top: 0.125rem; padding: 0; list-style: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"
+      >
+        <li
+          *ngFor="let opt of filteredOptions"
+          (mousedown)="selectOption(opt)"
+          style="padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem;"
+        >
+          {{ opt.value }}
+        </li>
+      </ul>
+      <div
+        *ngIf="helperTextToDisplay"
+        style="font-size: 0.75rem; margin-top: 0.25rem;"
+        [style.color]="validatemessage ? '#dc2626' : '#6b7280'"
+      >
+        {{ helperTextToDisplay }}
+      </div>
+    </div>
+  `,
+})
+export class AutoCompleteComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value = '';
+  placeholder = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+  helperText = '';
+  isDisplayMode = false;
+  displayValue = '';
+  inputValue = '';
+  showDropdown = false;
+  options: IOption[] = [];
+  filteredOptions: IOption[] = [];
+  helperTextToDisplay = '';
+
+  private actions: any;
+  private propName = '';
+  private pConn: any;
+  private listType = '';
+
+  ngOnInit(): void {
+    this.updateFromProps();
+    this.loadOptions();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['props']) {
+      this.updateFromProps();
+      this.loadOptions();
+    }
+  }
+
+  private updateFromProps(): void {
+    const p = this.props;
+    this.label = p.label ?? '';
+    this.value = p.value ?? '';
+    this.placeholder = p.placeholder ?? '';
+    this.testId = p.testId ?? '';
+    this.required = p.required ?? false;
+    this.disabled = p.disabled ?? false;
+    this.readOnly = p.readOnly ?? false;
+    this.validatemessage = p.validatemessage ?? '';
+    this.helperText = p.helperText ?? '';
+    this.helperTextToDisplay = this.validatemessage || this.helperText;
+    this.isDisplayMode = p.displayMode === 'DISPLAY_ONLY' || p.displayMode === 'STACKED_LARGE_VAL';
+
+    this.pConn = p.getPConnect?.();
+    this.actions = this.pConn?.getActionsApi?.();
+    this.propName = ((this.pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+
+    // Resolve display value from current options
+    this.updateDisplayValue();
+  }
+
+  private updateDisplayValue(): void {
+    const match = this.options.find((o) => o.key === this.value);
+    this.displayValue = match?.value ?? this.value ?? '';
+    if (!this.inputValue || this.inputValue !== this.displayValue) {
+      this.inputValue = this.displayValue;
+    }
+    this.filterOptions();
+  }
+
+  private filterOptions(): void {
+    const text = (this.inputValue ?? '').toLowerCase();
+    this.filteredOptions = text ? this.options.filter((o) => o.value?.toLowerCase().includes(text)) : [...this.options];
+  }
+
+  private loadOptions(): void {
+    const p = this.props;
+    let { listType, parameters, datasource, columns = [] } = p;
+
+    // Handle deferDatasource
+    if (p.deferDatasource && p.datasourceMetadata?.datasource?.name) {
+      listType = 'datapage';
+      datasource = p.datasourceMetadata.datasource.name;
+      const meta = p.datasourceMetadata.datasource;
+      parameters = this.flattenParameters(meta.parameters);
+      const displayProp = meta.propertyForDisplayText?.startsWith('@P')
+        ? meta.propertyForDisplayText.substring(3)
+        : meta.propertyForDisplayText;
+      const valueProp = meta.propertyForValue?.startsWith('@P')
+        ? meta.propertyForValue.substring(3)
+        : meta.propertyForValue;
+      columns = [
+        { key: 'true', setProperty: 'Associated property', value: valueProp },
+        {
+          display: 'true',
+          primary: 'true',
+          useForSearch: 'true',
+          value: displayProp,
+        },
+      ];
+    }
+
+    this.listType = listType ?? '';
+    const processedColumns = this.preProcessColumns(columns ?? []);
+
+    if (this.listType === 'associated') {
+      const dataObject = this.pConn?.getDataObject?.('') ?? {};
+      const optList = getOptionList(p as Record<string, unknown>, dataObject as Record<string, unknown>);
+      this.setOptions(optList.map((o) => ({ key: o.value, value: o.text ?? o.value })));
+    } else if (this.listType === 'datapage' && datasource) {
+      const context = this.pConn?.getContextName?.() ?? '';
+      const flatParams =
+        typeof parameters === 'object' && !Array.isArray(parameters) ? this.flattenParameters(parameters) : {};
+      (PCore.getDataPageUtils() as any)
+        .getDataAsync(datasource, context, flatParams)
+        .then((response: any) => {
+          const results = Array.isArray(response) ? response : (response?.data ?? []);
+          const displayColumn = this.getDisplayFieldsMetaData(processedColumns);
+          const optionsData: IOption[] = results.map((element: Record<string, unknown>) => ({
+            key: String(element[displayColumn.key] ?? element['pyGUID'] ?? ''),
+            value: String(element[displayColumn.primary] ?? ''),
+          }));
+          this.setOptions(optionsData);
+        })
+        .catch(() => {
+          // Data page fetch failed
+        });
+    }
+  }
+
+  private setOptions(opts: IOption[]): void {
+    this.options = opts;
+    this.updateDisplayValue();
+  }
+
+  private flattenParameters(params: Record<string, any> = {}): Record<string, unknown> {
+    const flat: Record<string, unknown> = {};
+    for (const key of Object.keys(params)) {
+      const { name, value: val } = params[key];
+      flat[name] = val;
+    }
+    return flat;
+  }
+
+  private preProcessColumns(columnList: Array<Record<string, string>>): Array<Record<string, string>> {
+    return columnList.map((col) => {
+      const temp = { ...col };
+      temp.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+      return temp;
+    });
+  }
+
+  private getDisplayFieldsMetaData(columnList: Array<Record<string, string>>): {
+    key: string;
+    primary: string;
+    secondary: string[];
+  } {
+    const displayColumns = columnList.filter((col) => col['display'] === 'true');
+    const metaData = { key: '', primary: '', secondary: [] as string[] };
+    const keyCol = columnList.filter((col) => col['key'] === 'true');
+    metaData.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (const col of displayColumns) {
+      if (col['primary'] === 'true') {
+        metaData.primary = col.value;
+      } else {
+        metaData.secondary.push(col.value);
+      }
+    }
+    return metaData;
+  }
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.inputValue = target.value;
+    this.showDropdown = true;
+    this.filterOptions();
+  }
+
+  onBlur(): void {
+    // Delay to allow click on an option
+    setTimeout(() => {
+      this.showDropdown = false;
+    }, 200);
+  }
+
+  selectOption(opt: IOption): void {
+    this.inputValue = opt.value;
+    this.showDropdown = false;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, opt.key);
+    }
+  }
+}