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

<form>
    <mat-form-field floatLabel="auto" class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
        <mat-label *ngIf="!isReadonly()" id="adf-group-cloud-title-id" class="adf-cloud-group-title"
            [ngClass]="{'adf-cloud-group-title--focus': isFocused}">{{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }}</mat-label>
        <mat-chip-list #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
            <mat-chip
                *ngFor="let group of selectedGroups"
                [removable]="!(group.readonly)"
                [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
                (removed)="onRemove(group)"
                matTooltip="{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}">
                {{group.name}}
                <mat-icon
                    *ngIf="!(group.readonly || readOnly)"
                    matChipRemove [attr.data-automation-id]="'adf-cloud-group-chip-remove-icon-' + group.name">
                    cancel
                </mat-icon>
            </mat-chip>
            <input *ngIf="!isReadonly()" matInput
                   [formControl]="searchGroupsControl"
                   [matAutocomplete]="auto"
                   [matChipInputFor]="groupChipList"
                   [required]="required"
                   (focus)="setFocus(true)"
                   (blur)="setFocus(false); markAsTouched()"
                   class="adf-group-input"
                   data-automation-id="adf-cloud-group-search-input" #groupInput>
        </mat-chip-list>

        <mat-autocomplete
            autoActiveFirstOption
            #auto="matAutocomplete"
            class="adf-cloud-group-list"
            (optionSelected)="onSelect($event.option.value)"
            [displayWith]="getDisplayName"
            data-automation-id="adf-cloud-group-autocomplete">
            <ng-container *ngIf="(searchGroups$ | async)?.length else noResults">
                <mat-option *ngFor="let group of searchGroups$ | async; let i = index" [value]="group"
                            [attr.data-automation-id]="'adf-cloud-group-chip-' + group.name"
                            class="adf-cloud-group-option-active">
                    <div
                        class="adf-cloud-group-row"
                        id="adf-group-{{i}}"
                        data-automation-id="adf-cloud-group-row">
                        <button class="adf-group-short-name" mat-fab>{{group | groupNameInitial }}</button>
                        <span>{{group.name}}</span>
                    </div>
                </mat-option>
            </ng-container>
            <ng-template #noResults>
                <mat-option *ngIf="searchGroupsControl.hasError('searchTypingError') && !searchLoading" disabled
                            class="adf-cloud-group-option-not-active"
                            data-automation-id="adf-cloud-group-no-results">
                    <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</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_GROUPS.ERROR.NOT_FOUND' | translate }}</div>
        </mat-error>
        <mat-error *ngIf="searchGroupsControl.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="searchGroupsControl.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="searchGroupsControl.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="(searchGroupsControl.hasError('required') || groupChipsCtrl.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="searchGroupsControl.hasError('searchTypingError') && !this.isFocused"
            data-automation-id="invalid-groups-typing-error" [@transitionMessages]="subscriptAnimationState" class="adf-error">
            <mat-icon class="adf-error-icon">error_outline</mat-icon>
            <div class="adf-error-text">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>
        </mat-error>
    </div>
</form>