alfresco-ng2-components/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

<form>
    <mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
        <ng-content select="[label]"></ng-content>
        <mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
            <mat-chip-row
                *ngFor="let user of selectedUsers"
                [removable]="!(user.readonly)"
                [attr.data-automation-id]="'adf-people-cloud-chip-' + user.username"
                (removed)="onRemove(user)"
                matTooltip="{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                {{user | fullName}}
                <mat-icon
                    matChipRemove
                    *ngIf="!(user.readonly || readOnly)"
                    [attr.data-automation-id]="'adf-people-cloud-chip-remove-icon-' + user.username">
                    cancel
                </mat-icon>
            </mat-chip-row>
            <input [disabled]="isReadonly()" matInput
                   #chipInput
                   [formControl]="searchUserCtrl"
                   [matAutocomplete]="auto"
                   [matChipInputFor]="userMultipleChipList"
                   [placeholder]="title | translate"
                   [required]="required"
                   (focus)="setFocus(true)"
                   (blur)="setFocus(false); markAsTouched()"
                   class="adf-cloud-input"
                   data-automation-id="adf-people-cloud-search-input" #userInput>
        </mat-chip-grid>

        <mat-autocomplete autoActiveFirstOption class="adf-people-cloud-list"
                          #auto="matAutocomplete"
                          (optionSelected)="onSelect($event.option.value)"
                          [displayWith]="getDisplayName">
            <ng-container *ngIf="(searchUsers$ | async)?.length else noResults" >
            <mat-option *ngFor="let user of searchUsers$ | async; let i = index" [value]="user"
                class="adf-people-cloud-option-active">
                <div class="adf-people-cloud-row" id="adf-people-cloud-user-{{user.username}}"
                     data-automation-id="adf-people-cloud-row">
                    <div [outerHTML]="user | usernameInitials:'adf-people-cloud-pic'"></div>
                    <span class="adf-people-label-name"> {{user | fullName}}</span>
                </div>
            </mat-option>
            </ng-container>
            <ng-template #noResults>
                <mat-option *ngIf="searchUserCtrl.hasError('searchTypingError') && !searchLoading" disabled
                            class="adf-people-cloud-option-not-active"
                            data-automation-id="adf-people-cloud-no-results">
                    <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>
                </mat-option>
            </ng-template>
        </mat-autocomplete>
    </mat-form-field>
    <mat-progress-bar
        *ngIf="validationLoading"
        mode="indeterminate">
    </mat-progress-bar>

    <div class="adf-error-container">
        <mat-error *ngIf="hasPreselectError() && !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }}</div>
        </mat-error>
        <mat-error *ngIf="searchUserCtrl.hasError('pattern')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>
        </mat-error>
        <mat-error *ngIf="searchUserCtrl.hasError('maxlength')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>
        </mat-error>
        <mat-error *ngIf="searchUserCtrl.hasError('minlength')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>
        </mat-error>
        <mat-error *ngIf="(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()"
            [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>
        </mat-error>
        <mat-error *ngIf="searchUserCtrl.hasError('searchTypingError') && !this.isFocused"
            [@transitionMessages]="subscriptAnimationState" data-automation-id="invalid-users-typing-error" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : searchedValue } }}</div>
        </mat-error>
    </div>
</form>