[ADF-4009] - People/GroupComponentDemoPage - add role input filter (#4260)

* [ADF-4009] - add roles input for GroupCloudComponent

* [ADF-4009] - fix lint

* [ADF-4009] - change role variable name

* [ADF-4009] - fix PR changes and add people input filter

* [ADF-4009] - fix lint

demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts

@@ -28,26 +28,28 @@ import { MatRadioChange } from '@angular/material';
 export class PeopleGroupCloudDemoComponent {
 
     peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
-    preSelectUsers: any = [];
+    preSelectUsers: string[] = [];
+    peopleRoles: string[] = [];
 
     groupMode: string = GroupCloudComponent.MODE_SINGLE;
-    preSelectGroup: any = [];
-    selectedGroupList: any = [];
+    preSelectGroup: string[] = [];
+    selectedGroupList: GroupModel[] = [];
+    groupRoles: string[];
 
-    setPeoplePreselectValue(value: string) {
-        if (this.isStringArray(value)) {
-            this.preSelectUsers = JSON.parse(value);
-        } else if (value.length === 0) {
-            this.preSelectUsers = [];
-        }
+    setPeoplePreselectValue(event: any) {
+        this.preSelectUsers = this.getArrayFromString(event.target.value);
     }
 
-    setGroupsPreselectValue(value: string) {
-        if (this.isStringArray(value)) {
-            this.preSelectGroup = JSON.parse(value);
-        } else if (value.length === 0) {
-            this.preSelectGroup = [];
-        }
+    setGroupsPreselectValue(event: any) {
+        this.preSelectGroup = this.getArrayFromString(event.target.value);
+    }
+
+    setPeopleRoles(event: any) {
+        this.peopleRoles = this.getArrayFromString(event.target.value);
+    }
+
+    setGroupRoles(event: any) {
+        this.groupRoles = this.getArrayFromString(event.target.value);
     }
 
     onChangePeopleMode(event: MatRadioChange) {
@@ -67,6 +69,15 @@ export class PeopleGroupCloudDemoComponent {
         }
     }
 
+    private getArrayFromString(value: string) {
+
+        if (this.isStringArray(value)) {
+            return JSON.parse(value);
+        } else {
+            return [];
+        }
+    }
+
     canShowPeopleList() {
         return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
     }