[ADF-3850] Create new group cloud component (#4104)

* [ADF-3850]  Create New Cloud Groups Component

* Generated groupCloud component by cli

* * Refactored GroupCloud component
* Added unit tests
* Changed service name and refactored

* * Added Documentation to the groupCloud component * Rebased

* * Create GroupSerach param model* Modified group component/service * Added Validation message

* * Fixed comments* Refactored groupCLoud component* Created GroupInirial pipe

* * Fixed selectedGroups bug

* * Removed showHint flag and used formcontrol error instead

* * After rebase* Change group-cloud to group

* * Added data-automation-id
* Improved fetching groups when appName defined
* Added unit tests

* * Rebased and  updated callCustomApi call signature

* Remove the springboot hardcoded name

* Update group-cloud.component.md

* * Fixed comments * Fixed return of js-api * Updated doc

* Unify the doc and remove useless code

docs/process-services-cloud/group-cloud.component.md

@@ -0,0 +1,92 @@
+---
+Title: Group Cloud component
+Added: v3.0.0
+Status: Active
+Last reviewed: 2018-20-11
+---
+
+# [Group Cloud component](../../lib/process-services-cloud/src/lib/group-cloud/components/group-cloud.component.ts "Defined in group-cloud.component.ts")
+
+Searches Groups.
+
+## Basic Usage
+
+```html
+<adf-cloud-group
+    [applicationName]="'simple-app'"
+    [mode]="'multiple'">
+</adf-cloud-group>
+```
+
+![adf-cloud-group](../docassets/images/group-cloud.component.png)
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| applicationName | `string` |  | Name of the application. If specified, shows the groups who have access to the app. |
+| mode | `string` | 'single' | Mode of the user selection (single/multiple). |
+| preSelectGroups | `GroupModel[]` |  Array of groups to be pre-selected. Pre-select all groups in `multiple` mode and only the first group of the array in `single` mode. |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| selectGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`GroupModel`](../../lib/process-services-cloud/src/lib/group-cloud/models/group.model.ts)`>` | Emitted when a group selected. |
+| removeGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`GroupModel`](../../lib/process-services-cloud/src/lib/group-cloud/models/group.model.ts)`>` | Emitted when selected group is removed in `multiple` mode. |
+| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` |
+
+
+## Details
+
+### Selection Mode
+
+You can provide selection mode singe(default)/multiple
+
+## Single select
+
+```html
+<adf-cloud-group></adf-cloud-group>
+```
+
+![adf-cloud-group](../docassets/images/group-cloud.component-single.png)
+
+## Multiple select
+
+```html
+<adf-cloud-group
+    [mode]="'multiple'">
+</adf-cloud-group>
+```
+
+![adf-cloud-group](../docassets/images/group-cloud.component-multiple-mode.png)
+
+## Pre-select
+
+Usage example:
+
+```ts
+import { ObjectDataTableAdapter }  from '@alfresco/adf-core';
+
+@Component({...})
+export class MyComponent {
+    groups: any;
+
+    constructor() {
+        this.groups =
+            [
+                {id: 1, name: 'Group 1'},
+                {id: 2, name: 'Group 2'}
+            ];
+    }
+}
+```
+
+```html
+<adf-cloud-group
+    [mode]="'multiple'"
+    [preSelectGroups]="groups">
+</adf-cloud-group>
+```

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -0,0 +1,51 @@
+<div class="adf-cloud-group">
+<mat-form-field>
+    <mat-chip-list #groupChipList *ngIf="isMultipleMode()" data-automation-id="adf-cloud-group-chip-list" class="apa-group-chip-list">
+      <mat-chip
+        *ngFor="let group of selectedGroups$ | async"
+        (removed)="onRemove(group)"
+        [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name">
+        {{group.name}}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+      <input
+        placeholder="{{ 'ADF_CLOUD_GROUPS.SEARCH-GROUP' | translate }}"
+        [formControl]="searchGroupsControl"
+        class="adf-group-input"
+        id="group-name"
+        data-automation-id="adf-cloud-group-search-input"
+        [matAutocomplete]="auto"
+        [matChipInputFor]="groupChipList" #groupInput>
+    </mat-chip-list>
+
+    <input *ngIf="!isMultipleMode()"
+      matInput
+      placeholder="{{ 'ADF_CLOUD_GROUPS.SEARCH-GROUP' | translate }}"
+      class="adf-group-input"
+      data-automation-id="adf-cloud-group-search-input"
+      [formControl]="searchGroupsControl"
+      [matAutocomplete]="auto" #groupInput>
+
+    <mat-autocomplete
+      #auto="matAutocomplete"
+      class="adf-cloud-group-list"
+      (optionSelected)="onSelect($event.option.value)"
+      [displayWith]="getDisplayName"
+      data-automation-id="adf-cloud-group-autocomplete">
+      <mat-option *ngFor="let group of searchGroups$ | async; let i = index" [value]="group" [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name">
+        <div class="adf-cloud-group-row" id="adf-group-{{i}}" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
+         <button class="adf-group-short-name" mat-fab>{{group | groupNameInitial }}</button>
+          <span>{{group.name}}</span>
+        </div>
+      </mat-option>
+    </mat-autocomplete>
+</mat-form-field>
+<div class="adf-cloud-group-error" *ngIf="hasError()">
+    <div fxLayout="row" fxLayoutAlign="start start" [@transitionMessages]="_subscriptAnimationState">
+        <div class="adf-cloud-group-error-message">
+        {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : searchedValue } }}
+        </div>
+        <mat-icon class="adf-cloud-group-error-icon">warning</mat-icon>
+    </div>
+</div>
+</div>

lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss

@@ -0,0 +1,56 @@
+@mixin adf-cloud-group-theme($theme) {
+
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .adf {
+        &-cloud-group {
+            .mat-form-field {
+                padding-top: 8px;
+                width: 100%;
+            }
+
+            &-error {
+                margin-top: -10px;
+            }
+
+            &-error {
+                position: absolute;
+                height: 20px;
+
+                &-message {
+                    padding-right: 8px;
+                    height: 16px;
+                    font-size: 12px;
+                    line-height: 1.33;
+                    color: mat-color($warn);
+                    width: auto;
+                }
+
+                &-icon {
+                    font-size: 17px;
+                    color: mat-color($warn);
+                }
+            }
+        }
+    }
+
+
+    .mat-autocomplete-panel .mat-fab {
+        background: mat-color($primary);
+        width: 40px;
+        height: 40px;
+        font-weight: bolder;
+        font-size: 18px;
+    }
+
+    .mat-autocomplete-panel .mat-fab {
+        box-shadow: none !important;
+    }
+
+    .mat-autocomplete-panel .mat-fab .mat-button-wrapper {
+        display: inline !important;
+    }
+}

lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts

@@ -0,0 +1,258 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+import { ProcessServiceCloudTestingModule } from './../../testing/process-service-cloud.testing.module';
+
+import { GroupCloudModule } from '../group-cloud.module';
+import { GroupCloudComponent } from './group-cloud.component';
+import { GroupCloudService } from '../services/group-cloud.service';
+import { setupTestBed, AlfrescoApiServiceMock } from '@alfresco/adf-core';
+import { mockGroups } from '../mock/group-cloud.mock';
+import { GroupModel } from '../models/group.model';
+
+describe('GroupCloudComponent', () => {
+    let component: GroupCloudComponent;
+    let fixture: ComponentFixture<GroupCloudComponent>;
+    let element: HTMLElement;
+    let service: GroupCloudService;
+    let findGroupsByNameSpy: jasmine.Spy;
+    let getClientIdByApplicationNameSpy: jasmine.Spy;
+    let checkGroupHasClientRoleMappingSpy: jasmine.Spy;
+
+    setupTestBed({
+        imports: [ProcessServiceCloudTestingModule, GroupCloudModule],
+        providers: [AlfrescoApiServiceMock, GroupCloudService]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(GroupCloudComponent);
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+        service = TestBed.get(GroupCloudService);
+        findGroupsByNameSpy = spyOn(service, 'findGroupsByName').and.returnValue(of(mockGroups));
+        getClientIdByApplicationNameSpy = spyOn(service, 'getClientIdByApplicationName').and.returnValue(of('mock-client-id'));
+        checkGroupHasClientRoleMappingSpy = spyOn(service, 'checkGroupHasClientRoleMapping').and.returnValue(of(true));
+        component.applicationName = 'mock-app-name';
+    });
+
+    it('should create GroupCloudComponent', () => {
+        expect(component instanceof GroupCloudComponent).toBeTruthy();
+    });
+
+    it('should be able to fetch client id', async(() => {
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
+            expect(component.clientId).toBe('mock-client-id');
+        });
+    }));
+
+    it('should show the groups if the typed result match', async(() => {
+        fixture.detectChanges();
+        component.searchGroups$ = of(<GroupModel[]> mockGroups);
+        let inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+        inputHTMLElement.focus();
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        inputHTMLElement.dispatchEvent(new Event('keyup'));
+        inputHTMLElement.dispatchEvent(new Event('keydown'));
+        inputHTMLElement.value = 'M';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('mat-option'))).toBeDefined();
+        });
+    }));
+
+    it('should hide result list if input is empty', async(() => {
+        fixture.detectChanges();
+        let inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+        inputHTMLElement.focus();
+        inputHTMLElement.value = '';
+        inputHTMLElement.dispatchEvent(new Event('keyup'));
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(fixture.debugElement.query(By.css('mat-option'))).toBeNull();
+            expect(fixture.debugElement.query(By.css('#adf-group-0'))).toBeNull();
+        });
+    }));
+
+    it('should emit selectedGroup if option is valid', async(() => {
+        fixture.detectChanges();
+        let selectEmitSpy = spyOn(component.selectGroup, 'emit');
+        component.onSelect(new GroupModel({ name: 'group name'}));
+        fixture.whenStable().then(() => {
+            expect(selectEmitSpy).toHaveBeenCalled();
+        });
+    }));
+
+    it('should show an error message if the group is invalid', async(() => {
+        fixture.detectChanges();
+        checkGroupHasClientRoleMappingSpy.and.returnValue(of(false));
+        findGroupsByNameSpy.and.returnValue(of([]));
+        fixture.detectChanges();
+        const inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+        inputHTMLElement.focus();
+        inputHTMLElement.value = 'ZZZ';
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            const errorMessage = element.querySelector('.adf-cloud-group-error-message');
+            expect(errorMessage).not.toBeNull();
+            expect(errorMessage.textContent).toContain('ADF_CLOUD_GROUPS.ERROR.NOT_FOUN');
+        });
+    }));
+
+    it('should show chip list when mode=multiple', async(() => {
+        component.mode = 'multiple';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            const chip = element.querySelector('mat-chip-list');
+            expect(chip).toBeDefined();
+        });
+    }));
+
+    it('should not show chip list when mode=single', async(() => {
+        component.mode = 'single';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            const chip = element.querySelector('mat-chip-list');
+            expect(chip).toBeNull();
+        });
+    }));
+
+    it('should pre-select all preSelectGroups when mode=multiple', async(() => {
+        component.mode = 'multiple';
+        component.preSelectGroups = <any> [{id: mockGroups[1].id}, {id: mockGroups[2].id}];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            const chips = fixture.debugElement.queryAll(By.css('mat-chip'));
+            expect(chips.length).toBe(2);
+        });
+    }));
+
+    it('should not pre-select any group when preSelectGroups is empty and mode=multiple', async(() => {
+        component.mode = 'multiple';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            const chip = fixture.debugElement.query(By.css('mat-chip'));
+            expect(chip).toBeNull();
+        });
+    }));
+
+    it('should pre-select preSelectGroups[0] when mode=single', async(() => {
+        component.mode = 'single';
+        component.preSelectGroups = <any> [{id: mockGroups[1].id}, {id: mockGroups[2].id}];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            const selectedGroup = component.searchGroupsControl.value;
+            expect(selectedGroup.id).toBe(mockGroups[1].id);
+        });
+    }));
+
+    it('should not pre-select any group when preSelectGroups is empty and mode=single', async(() => {
+        component.mode = 'single';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            const selectedGroup = component.searchGroupsControl.value;
+            expect(selectedGroup).toBeNull();
+        });
+    }));
+
+    it('should emit removeGroup when a selected group is removed if mode=multiple', async(() => {
+        let removeGroupSpy = spyOn(component.removeGroup, 'emit');
+
+        component.mode = 'multiple';
+        component.preSelectGroups = <any> [{id: mockGroups[1].id}, {id: mockGroups[2].id}];
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            const removeIcon = fixture.debugElement.query(By.css('mat-chip mat-icon'));
+            removeIcon.nativeElement.click();
+
+            expect(removeGroupSpy).toHaveBeenCalledWith({ id: mockGroups[1].id });
+        });
+
+    }));
+
+    it('should list groups who have access to the app when appName is specified', async(() => {
+        component.applicationName = 'sample-app';
+        fixture.detectChanges();
+        let inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+        inputHTMLElement.focus();
+        inputHTMLElement.value = 'M';
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            const groupsList = fixture.debugElement.queryAll(By.css('mat-option'));
+            expect(groupsList.length).toBe(mockGroups.length);
+        });
+    }));
+
+    it('should not list groups who do not have access to the app when appName is specified', async(() => {
+        checkGroupHasClientRoleMappingSpy.and.returnValue(of(false));
+        component.applicationName = 'sample-app';
+
+        fixture.detectChanges();
+        let inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('[data-automation-id="adf-cloud-group-search-input"]');
+        inputHTMLElement.focus();
+        inputHTMLElement.value = 'Mock';
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            const groupsList = fixture.debugElement.queryAll(By.css('mat-option'));
+            expect(groupsList.length).toBe(0);
+        });
+    }));
+
+    it('should validate access to the app when appName is specified', async(() => {
+        findGroupsByNameSpy.and.returnValue(of(mockGroups));
+        checkGroupHasClientRoleMappingSpy.and.returnValue(of(true));
+        fixture.detectChanges();
+        let inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+        inputHTMLElement.focus();
+        inputHTMLElement.value = 'Mock';
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(checkGroupHasClientRoleMappingSpy).toHaveBeenCalledTimes(mockGroups.length);
+        });
+    }));
+
+    it('should not validate access to the app when appName is not specified', async(() => {
+        fixture.detectChanges();
+        let inputHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
+        inputHTMLElement.focus();
+        inputHTMLElement.value = 'M';
+        inputHTMLElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(checkGroupHasClientRoleMappingSpy).not.toHaveBeenCalled();
+        });
+    }));
+});

lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts

@@ -0,0 +1,274 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ElementRef, OnInit, Output, EventEmitter, ViewChild, ViewEncapsulation, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Observable, of, BehaviorSubject } from 'rxjs';
+import { GroupModel, GroupSearchParam } from '../models/group.model';
+import { GroupCloudService } from '../services/group-cloud.service';
+import { debounceTime } from 'rxjs/internal/operators/debounceTime';
+import { distinctUntilChanged, switchMap, flatMap, mergeMap, filter, tap } from 'rxjs/operators';
+
+@Component({
+    selector: 'adf-cloud-group',
+    templateUrl: './group-cloud.component.html',
+    styleUrls: ['./group-cloud.component.scss'],
+    animations: [
+        trigger('transitionMessages', [
+            state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
+            transition('void => enter', [
+                style({ opacity: 0, transform: 'translateY(-100%)' }),
+                animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')
+            ])
+        ])
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class GroupCloudComponent implements OnInit {
+
+    static MODE_SINGLE = 'single';
+    static MODE_MULTIPLE = 'multiple';
+
+    @ViewChild('groupInput') groupInput: ElementRef<HTMLInputElement>;
+
+    /** Name of the application. If specified, shows the users who have access to the app. */
+    @Input()
+    applicationName: string;
+
+    /** Mode of the user selection (single/multiple). */
+    @Input()
+    mode: string = GroupCloudComponent.MODE_SINGLE;
+
+    /** Array of users to be pre-selected. Pre-select all users in multi selection mode and only the first user of the array in single selection mode. */
+    @Input()
+    preSelectGroups: GroupModel[] = [];
+
+    /** Emitted when a group is selected. */
+    @Output()
+    selectGroup: EventEmitter<GroupModel> = new EventEmitter<GroupModel>();
+
+    /** Emitted when a group is removed. */
+    @Output()
+    removeGroup: EventEmitter<GroupModel> = new EventEmitter<GroupModel>();
+
+    private selectedGroups: GroupModel[] = [];
+
+    private searchGroups: GroupModel[] = [];
+
+    private searchGroupsSubject: BehaviorSubject<GroupModel[]>;
+
+    private selectedGroupsSubject: BehaviorSubject<GroupModel[]>;
+
+    searchGroups$: Observable<GroupModel[]>;
+
+    selectedGroups$: Observable<GroupModel[]>;
+
+    searchGroupsControl: FormControl = new FormControl('');
+
+    _subscriptAnimationState = 'enter';
+
+    clientId: string;
+
+    searchedValue = '';
+
+    constructor(private groupService: GroupCloudService) {
+        this.selectedGroupsSubject = new BehaviorSubject<GroupModel[]>(this.selectedGroups);
+        this.searchGroupsSubject = new BehaviorSubject<GroupModel[]>(this.searchGroups);
+        this.selectedGroups$ = this.selectedGroupsSubject.asObservable();
+        this.searchGroups$ = this.searchGroupsSubject.asObservable();
+    }
+
+    ngOnInit() {
+        this.loadPreSelectGroups();
+        this.initSearch();
+
+        if (this.applicationName) {
+            this.disableSearch();
+            this.loadClientId();
+        }
+    }
+
+    private async loadClientId() {
+        this.clientId = await this.groupService.getClientIdByApplicationName(this.applicationName).toPromise();
+        if (this.clientId) {
+            this.enableSearch();
+        }
+    }
+
+    initSearch() {
+        this.searchGroupsControl.valueChanges.pipe(
+            debounceTime(500),
+            distinctUntilChanged(),
+            tap(() => {
+                this.resetSearchGroups();
+            }),
+            switchMap((inputValue) => {
+                const queryParams = this.createSearchParam(inputValue);
+                return this.findGroupsByName(queryParams);
+            }),
+            filter((group: any) => {
+                return !this.isGroupAlreadySelected(group);
+            }),
+            mergeMap((group: any) => {
+                if (this.clientId) {
+                    return this.checkGroupHasClientRoleMapping(group);
+                } else {
+                    return of(group);
+                }
+            })
+        ).subscribe((searchedGroup) => {
+            this.searchGroups.push(searchedGroup);
+            this.clearError();
+            this.searchGroupsSubject.next(this.searchGroups);
+        });
+    }
+
+    findGroupsByName(searchParam: GroupSearchParam): Observable<GroupModel> {
+        return this.groupService.findGroupsByName(searchParam).pipe(
+            flatMap((groups: GroupModel[]) => {
+                this.searchedValue = searchParam.name;
+                if (this.searchedValue && !this.hasGroups(groups)) {
+                    this.setError();
+                }
+                return groups;
+            })
+        );
+    }
+
+    checkGroupHasClientRoleMapping(group: GroupModel): Observable<GroupModel> {
+        return this.groupService.checkGroupHasClientRoleMapping(group.id, this.clientId).pipe(
+            mergeMap((hasRole: boolean) => {
+                if (hasRole) {
+                    return of(group);
+                } else {
+                    this.setError();
+                    return of();
+                }
+            })
+        );
+    }
+
+    isGroupAlreadySelected(group: GroupModel): boolean {
+        if (this.hasGroups(this.selectedGroups)) {
+            const result = this.selectedGroups.filter((selectedGroup: GroupModel) => {
+                return selectedGroup.id === group.id;
+            });
+            if (this.hasGroups(result)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private loadPreSelectGroups() {
+        if (this.hasGroups(this.preSelectGroups)) {
+            if (this.isMultipleMode()) {
+                this.preSelectGroups.forEach((group: GroupModel) => {
+                    this.selectedGroups.push(group);
+                });
+            } else {
+                this.searchGroupsControl.setValue(this.preSelectGroups[0]);
+                this.onSelect(this.preSelectGroups[0]);
+            }
+        }
+    }
+
+    onSelect(selectedGroup: GroupModel) {
+        if (this.isMultipleMode()) {
+            if (!this.isGroupAlreadySelected(selectedGroup)) {
+                this.selectedGroups.push(selectedGroup);
+                this.selectedGroupsSubject.next(this.selectedGroups);
+                this.selectGroup.emit(selectedGroup);
+                this.searchGroupsSubject.next([]);
+            }
+            this.groupInput.nativeElement.value = '';
+            this.searchGroupsControl.setValue('');
+        } else {
+            this.selectGroup.emit(selectedGroup);
+        }
+
+        this.clearError();
+        this.resetSearchGroups();
+    }
+
+    onRemove(selectedGroup: GroupModel) {
+        this.removeGroup.emit(selectedGroup);
+        const indexToRemove = this.selectedGroups.findIndex((group: GroupModel) => { return group.id === selectedGroup.id; });
+        this.selectedGroups.splice(indexToRemove, 1);
+        this.selectedGroupsSubject.next(this.selectedGroups);
+    }
+
+    private resetSearchGroups() {
+        this.searchGroups = [];
+        this.searchGroupsSubject.next([]);
+    }
+
+    isMultipleMode(): boolean {
+        return this.mode === GroupCloudComponent.MODE_MULTIPLE;
+    }
+
+    getDisplayName(group: GroupModel): string {
+        return group ? group.name : '';
+    }
+
+    private hasGroups(groups: GroupModel[]): boolean {
+        return groups && groups.length > 0;
+    }
+
+    createSearchParam(value: any): GroupSearchParam {
+        let queryParams: GroupSearchParam = { name: '' };
+        if (this.isString(value)) {
+            queryParams.name = value.trim();
+        } else {
+            queryParams.name = value.name.trim();
+        }
+        return queryParams;
+    }
+
+    isString(value: any): boolean {
+        return typeof value === 'string';
+    }
+
+    setValidationError() {
+        if (this.hasGroups(this.searchGroups)) {
+            this.clearError();
+        } else {
+            this.setError();
+        }
+    }
+
+    private disableSearch() {
+        this.searchGroupsControl.disable();
+    }
+
+    private enableSearch() {
+        this.searchGroupsControl.enable();
+    }
+
+    private setError() {
+        this.searchGroupsControl.setErrors({invalid: true});
+    }
+
+    private clearError() {
+        this.searchGroupsControl.setErrors(null);
+    }
+
+    hasError(): boolean {
+        return this.searchGroupsControl && this.searchGroupsControl.errors && this.searchGroupsControl.errors.invalid;
+    }
+}

lib/process-services-cloud/src/lib/group/group-cloud.module.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+
+import { TemplateModule, TranslateLoaderService, FormModule, PipeModule } from '@alfresco/adf-core';
+import { MaterialModule } from '../material.module';
+import { GroupCloudComponent } from './components/group-cloud.component';
+import { InitialGroupNamePipe } from './pipe/group-initial.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PipeModule,
+    TranslateModule.forRoot({
+          loader: {
+              provide: TranslateLoader,
+              useClass: TranslateLoaderService
+          }
+      }),
+      TemplateModule,
+      FlexLayoutModule,
+      MaterialModule,
+      FormsModule,
+      ReactiveFormsModule,
+      FormModule
+    ],
+    declarations: [GroupCloudComponent, InitialGroupNamePipe],
+    exports: [GroupCloudComponent, InitialGroupNamePipe]
+})
+export class GroupCloudModule { }

lib/process-services-cloud/src/lib/group/mock/group-cloud.mock.ts

@@ -0,0 +1,104 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { GroupModel } from '../models/group.model';
+
+export let mockGroup1 = new GroupModel({
+    id: 'mock-id-1', name: 'Mock Group 1', path: '/mock', subGroups: []
+});
+
+export let mockGroup2 = new GroupModel({
+    id: 'mock-id-2', name: 'Mock Group 2', path: '', subGroups: []
+});
+
+export let mockGroup3 = new GroupModel({
+  id: 'mock-id-3', name: 'Fake Group 3', path: '', subGroups: []
+});
+
+export let mockGroups = [
+    mockGroup1, mockGroup2, mockGroup3
+];
+
+export let mockApplicationDetails = {id: 'mock-app-id', name: 'mock-app-name'};
+
+export let mockError = {
+    error: {
+        errorKey: 'failed',
+        statusCode: 400,
+        stackTrace: 'For security reasons the stack trace is no longer displayed, but the property is kept for previous versions.'
+    }
+};
+
+export let mockApiError = {
+    oauth2Auth: {
+        callCustomApi: () => {
+            return Promise.reject(mockError);
+        }
+    }
+};
+
+export let roleMappingMock = [
+    { id: 'role-id-1', name: 'role-name-1' }, { id: 'role-id-2', name: 'role-name-2' }
+];
+
+export let roleMappingApi = {
+    oauth2Auth: {
+        callCustomApi: () => {
+            return Promise.resolve(roleMappingMock);
+        }
+    }
+};
+
+export let noRoleMappingApi = {
+    oauth2Auth: {
+        callCustomApi: () => {
+            return Promise.resolve([]);
+        }
+    }
+};
+
+export let groupsMockApi = {
+    oauth2Auth: {
+        callCustomApi: () => {
+            return Promise.resolve(mockGroups);
+        }
+    }
+};
+
+export let returnCallQueryParameters = {
+    oauth2Auth: {
+        callCustomApi: (queryUrl, operation, context, queryParams) => {
+            return Promise.resolve(queryParams);
+        }
+    }
+};
+
+export let returnCallUrl = {
+    oauth2Auth: {
+        callCustomApi: (queryUrl, operation, context, queryParams) => {
+            return Promise.resolve(queryUrl);
+        }
+    }
+};
+
+export let applicationDetailsMockApi = {
+    oauth2Auth: {
+        callCustomApi: () => {
+            return Promise.resolve([mockApplicationDetails]);
+        }
+    }
+};

lib/process-services-cloud/src/lib/group/models/group.model.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class GroupModel {
+
+    id: string;
+    name: string;
+    path: string;
+    realmRoles: string[];
+    access: any;
+    attributes: any;
+    clientRoles: any;
+
+    constructor(obj?: any) {
+        this.id = obj.id || null;
+        this.name = obj.name || null;
+        this.path = obj.path || null;
+        this.realmRoles = obj.realmRoles || null;
+        this.access = obj.access || null;
+        this.attributes = obj.attributes || null;
+        this.clientRoles = obj.clientRoles || null;
+      }
+}
+
+export interface GroupSearchParam {
+    name?: string;
+}

lib/process-services-cloud/src/lib/group/pipe/group-initial.pipe.spec.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { InitialGroupNamePipe } from './group-initial.pipe';
+import { GroupModel } from '../models/group.model';
+
+describe('InitialGroupNamePipe', () => {
+
+    let pipe: InitialGroupNamePipe;
+    let fakeGroup: GroupModel;
+
+    beforeEach(() => {
+        pipe = new InitialGroupNamePipe();
+        fakeGroup = new GroupModel({name: 'mock'});
+    });
+
+    it('should return with the group initial', () => {
+        fakeGroup.name = 'FAKE-GROUP-NAME';
+        let result = pipe.transform(fakeGroup);
+        expect(result).toBe('F');
+    });
+
+    it('should return an empty string when group is null', () => {
+        let result = pipe.transform(null);
+        expect(result).toBe('');
+    });
+});

lib/process-services-cloud/src/lib/group/pipe/group-initial.pipe.ts

@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { GroupModel } from '../models/group.model';
+
+@Pipe({
+    name: 'groupNameInitial'
+})
+export class InitialGroupNamePipe implements PipeTransform {
+
+    constructor() {}
+
+    transform(group: GroupModel): string {
+        let result = '';
+        if (group) {
+            result = this.getInitialGroupName(group.name).toUpperCase();
+        }
+        return result;
+    }
+
+    getInitialGroupName(groupName: string) {
+        groupName = (groupName ? groupName[0] : '');
+        return groupName;
+    }
+}

lib/process-services-cloud/src/lib/group/public-api.ts

@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './models/group.model';
+export * from './services/group-cloud.service';
+export * from './components/group-cloud.component';
+export * from './group-cloud.module';

lib/process-services-cloud/src/lib/group/services/group-cloud.service.spec.ts

@@ -0,0 +1,135 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { GroupCloudService } from './group-cloud.service';
+import {
+    AlfrescoApiServiceMock,
+    CoreModule,
+    setupTestBed,
+    AlfrescoApiService,
+    LogService
+} from '@alfresco/adf-core';
+import {
+    applicationDetailsMockApi,
+    groupsMockApi,
+    returnCallQueryParameters,
+    returnCallUrl,
+    mockApiError,
+    mockError,
+    roleMappingApi,
+    noRoleMappingApi
+} from '../mock/group-cloud.mock';
+import { GroupSearchParam } from '../models/group.model';
+
+describe('GroupCloudService', () => {
+    let service: GroupCloudService;
+    let apiService: AlfrescoApiService;
+    let logService: LogService;
+
+    setupTestBed({
+        imports: [CoreModule.forRoot()],
+        providers: [
+            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }
+        ]
+    });
+
+    beforeEach(async(() => {
+        service = TestBed.get(GroupCloudService);
+        apiService = TestBed.get(AlfrescoApiService);
+        logService = TestBed.get(LogService);
+    }));
+
+    it('should be able to fetch groups', (done) => {
+        spyOn(apiService, 'getInstance').and.returnValue(groupsMockApi);
+        service.findGroupsByName(<GroupSearchParam> {name: 'mock'}).subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.length).toBe(3);
+            expect(res[0].id).toBe('mock-id-1');
+            expect(res[0].name).toBe('Mock Group 1');
+            expect(res[1].id).toBe('mock-id-2');
+            expect(res[1].name).toBe('Mock Group 2');
+            expect(res[2].id).toBe('mock-id-3');
+            expect(res[2].name).toBe('Fake Group 3');
+            done();
+        });
+    });
+
+    it('should return true if group has client role mapping', (done) => {
+        spyOn(apiService, 'getInstance').and.returnValue(roleMappingApi);
+        service.checkGroupHasClientRoleMapping('mock-group-id', 'mock-app-id').subscribe((hasRole) => {
+            expect(hasRole).toBeDefined();
+            expect(hasRole).toBe(true);
+            done();
+        });
+    });
+
+    it('should return false if group does not have client role mapping', (done) => {
+        spyOn(apiService, 'getInstance').and.returnValue(noRoleMappingApi);
+        service.checkGroupHasClientRoleMapping('mock-group-id', 'mock-app-id').subscribe((hasRole) => {
+            expect(hasRole).toBeDefined();
+            expect(hasRole).toBe(false);
+            done();
+        });
+    });
+
+    it('should append to the call all the parameters', (done) => {
+        spyOn(apiService, 'getInstance').and.returnValue(returnCallQueryParameters);
+        service.findGroupsByName(<GroupSearchParam> {name: 'mock'}).subscribe((res) => {
+            expect(res).toBeDefined();
+            expect(res).not.toBeNull();
+            expect(res.search).toBe('mock');
+            done();
+        });
+    });
+
+    it('should request groups api url', (done) => {
+        spyOn(apiService, 'getInstance').and.returnValue(returnCallUrl);
+        service.findGroupsByName(<GroupSearchParam> {name: 'mock'}).subscribe((requestUrl) => {
+            expect(requestUrl).toBeDefined();
+            expect(requestUrl).not.toBeNull();
+            expect(requestUrl).toContain('/groups');
+            done();
+        });
+    });
+
+    it('should be able to fetch the client id', (done) => {
+        spyOn(apiService, 'getInstance').and.returnValue(applicationDetailsMockApi);
+        service.getClientIdByApplicationName('mock-app-name').subscribe((clientId) => {
+            expect(clientId).toBeDefined();
+            expect(clientId).not.toBeNull();
+            expect(clientId).toBe('mock-app-id');
+            done();
+        });
+    });
+
+    it('should notify errors returned from the API', (done) => {
+        const logServiceSpy = spyOn(logService, 'error').and.callThrough();
+        spyOn(apiService, 'getInstance').and.returnValue(mockApiError);
+        service.findGroupsByName(<GroupSearchParam> {name: 'mock'}).subscribe(
+            () => {},
+            (res: any) => {
+                expect(res).toBeDefined();
+                expect(res).toEqual(mockError);
+                expect(logServiceSpy).toHaveBeenCalled();
+                done();
+            }
+        );
+    });
+});

lib/process-services-cloud/src/lib/group/services/group-cloud.service.ts

@@ -0,0 +1,110 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { from, of, Observable, throwError } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+import { AlfrescoApiService, AppConfigService, LogService } from '@alfresco/adf-core';
+import { GroupSearchParam } from '../models/group.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class GroupCloudService {
+
+    constructor(
+        private apiService: AlfrescoApiService,
+        private appConfigService: AppConfigService,
+        private logService: LogService
+    ) {}
+
+    findGroupsByName(searchParams: GroupSearchParam): Observable<any> {
+        if (searchParams.name === '') {
+            return of([]);
+        }
+        const url = this.getGroupsApi();
+        const httpMethod = 'GET', pathParams = {}, queryParams = {search: searchParams.name}, bodyParam = {}, headerParams = {},
+            formParams = {}, contentTypes = ['application/json'], accepts = ['application/json'];
+
+        return (from(this.apiService.getInstance().oauth2Auth.callCustomApi(
+            url, httpMethod, pathParams, queryParams,
+            headerParams, formParams, bodyParam,
+            contentTypes, accepts, Object, null, null)
+        )).pipe(
+            catchError((err) => this.handleError(err))
+        );
+    }
+
+    getClientIdByApplicationName(applicationName: string): Observable<string> {
+        const url = this.getApplicationIdApi();
+        const httpMethod = 'GET', pathParams = {}, queryParams = {clientId: applicationName}, bodyParam = {}, headerParams = {}, formParams = {},
+              contentTypes = ['application/json'], accepts = ['application/json'];
+        return from(this.apiService.getInstance()
+                        .oauth2Auth.callCustomApi(url, httpMethod, pathParams, queryParams, headerParams,
+                                              formParams, bodyParam, contentTypes,
+                                              accepts, Object, null, null)
+            ).pipe(
+                map((response: any[]) => {
+                    const clientId = response && response.length > 0 ? response[0].id : '';
+                    return clientId;
+                }),
+                catchError((err) => this.handleError(err))
+            );
+    }
+
+    checkGroupHasClientRoleMapping(groupId: string, clientId: string): Observable<any> {
+        const url = this.groupClientRoleMappingApi(groupId, clientId);
+        const httpMethod = 'GET', pathParams = {}, queryParams = {}, bodyParam = {}, headerParams = {},
+            formParams = {}, contentTypes = ['application/json'], accepts = ['application/json'];
+
+        return from(this.apiService.getInstance().oauth2Auth.callCustomApi(
+                    url, httpMethod, pathParams, queryParams,
+                    headerParams, formParams, bodyParam,
+                    contentTypes, accepts, Object, null, null)
+                ).pipe(
+                    map((response: any[]) => {
+                        if (response && response.length > 0) {
+                            return true;
+                        }
+                        return false;
+                    }),
+                    catchError((err) => this.handleError(err))
+            );
+    }
+
+    private groupClientRoleMappingApi(groupId: string, clientId: string): any {
+        return `${this.appConfigService.get('identityHost')}/groups/${groupId}/role-mappings/clients/${clientId}`;
+    }
+
+    private getApplicationIdApi() {
+        return `${this.appConfigService.get('identityHost')}/clients`;
+    }
+
+    private getGroupsApi() {
+        return `${this.appConfigService.get('identityHost')}/groups`;
+    }
+
+    /**
+     * Throw the error
+     * @param error
+     */
+    private handleError(error: Response) {
+        this.logService.error(error);
+        return throwError(error || 'Server error');
+    }
+}

lib/process-services-cloud/src/lib/i18n/en.json

@@ -145,5 +145,11 @@
       "SAVE": "SAVE",
       "CANCEL": "CANCEL"
     }
+  },
+  "ADF_CLOUD_GROUPS": {
+    "SEARCH-GROUP": "Groups",
+    "ERROR": {
+      "NOT_FOUND": "No group found with the name {{groupName}}"
+    }
   }
 }

lib/process-services-cloud/src/lib/process-services-cloud.module.ts

@@ -20,6 +20,7 @@ import { TRANSLATION_PROVIDER } from '@alfresco/adf-core';
 import { AppListCloudModule } from './app/app-list-cloud.module';
 import { TaskCloudModule } from './task/task-cloud.module';
 import { ProcessCloudModule } from './process/process-cloud.module';
+import { GroupCloudModule } from './group/group-cloud.module';
 
 @NgModule({
     imports: [
@@ -40,7 +41,8 @@ import { ProcessCloudModule } from './process/process-cloud.module';
     exports: [
         AppListCloudModule,
         ProcessCloudModule,
-        TaskCloudModule
+        TaskCloudModule,
+        GroupCloudModule
     ]
 })
 export class ProcessServicesCloudModule { }

lib/process-services-cloud/src/lib/styles/_index.scss

@@ -5,6 +5,7 @@
 @import './../process/process-list/components/process-list-cloud.component.scss';
 @import './../task/start-task/components/start-task-cloud.component.scss';
 @import './../task/start-task/components/people-cloud/people-cloud.component.scss';
+@import './../group/components/group-cloud.component';
 
 
 @mixin adf-process-services-cloud-theme($theme) {
@@ -15,4 +16,5 @@
     @include adf-process-filters-cloud-theme($theme);
     @include adf-start-task-cloud-theme($theme);
     @include adf-cloud-people-theme($theme);
+    @include adf-cloud-group-theme($theme);
 }