Added multiselect Combobox component for Angular SDK (#157)

* Added multiselect Combobox component

* removed comment

---------

Co-authored-by: mohas22 <[email protected]>

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -68,6 +68,7 @@ import { InlineDashboardPageComponent } from '../../_components/template/inline-
 import { ListPageComponent } from '../../_components/template/list-page/list-page.component';
 import { ListViewComponent } from '../../_components/template/list-view/list-view.component';
 import { MultiReferenceReadonlyComponent } from '../../_components/template/multi-reference-readonly/multi-reference-readonly.component';
+import { MultiselectComponent } from '../../_components/field/multiselect/multiselect.component';
 import { NarrowWideFormComponent } from '../../_components/template/narrow-wide-form/narrow-wide-form.component';
 import { OneColumnComponent } from '../../_components/template/one-column/one-column.component';
 import { OneColumnPageComponent } from '../../_components/template/one-column-page/one-column-page.component';
@@ -185,6 +186,7 @@ const pegaSdkComponentMap = {
   MaterialUtility: MaterialUtilityComponent,
   ModalViewContainer: ModalViewContainerComponent,
   MultiReferenceReadOnly: MultiReferenceReadonlyComponent,
+  Multiselect: MultiselectComponent,
   MultiStep: MultiStepComponent,
   //   'NarrowWide': NarrowWideFormComponent,
   NarrowWideDetails: DetailsNarrowWideComponent,

packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.html

@@ -0,0 +1,34 @@
+<div [formGroup]="formGroup$">
+  <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
+    <mat-label>{{ label$ }}</mat-label>
+    <mat-chip-grid #chipGrid>
+      <ng-container *ngFor="let select of selectedItems">
+        <mat-chip-row (removed)="removeChip(select)">
+          {{ select.primary }}
+          <button matChipRemove>
+            <mat-icon>cancel</mat-icon>
+          </button>
+        </mat-chip-row>
+      </ng-container>
+    </mat-chip-grid>
+    <input
+      matInput
+      [placeholder]="placeholder"
+      [formControl]="fieldControl"
+      [value]="value$"
+      [required]="bRequired$"
+      [matAutocomplete]="auto"
+      (input)="fieldOnChange($event)"
+      [matChipInputFor]="chipGrid"
+      #trigger="matAutocompleteTrigger"
+    />
+    <mat-autocomplete #auto="matAutocomplete">
+      <mat-option *ngFor="let item of itemsTree" [value]="item.primary" (click)="optionClicked($event, item, trigger)">
+        <mat-checkbox [checked]="item.selected" (click)="optionClicked($event, item, trigger)">
+          <span>{{ item.primary }}</span>
+        </mat-checkbox>
+      </mat-option>
+    </mat-autocomplete>
+    <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+  </mat-form-field>
+</div>

packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.scss

@@ -0,0 +1,7 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  padding-left: 10px;
+}

packages/angular-sdk-components/src/lib/_components/field/multiselect/multiselect.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultiselectComponent } from './multiselect.component';
+
+describe('MultiselectComponent', () => {
+  let component: MultiselectComponent;
+  let fixture: ComponentFixture<MultiselectComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MultiselectComponent]
+    });
+    fixture = TestBed.createComponent(MultiselectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});