@alfresco/adf-process-services-cloud 9.2.0-29924979257 → 9.2.0-30002804257

package/fesm2022/adf-process-services-cloud.mjs

@@ -48,7 +48,6 @@ import * as i2$4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i11 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i5 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i7$1 from '@angular/material/autocomplete';
@@ -4768,7 +4767,6 @@ class PeopleCloudComponent {
         this.selectedUsers = [];
         this.invalidUsers = [];
         this.searchUsers$ = new BehaviorSubject(this.searchUsers);
-        this.subscriptAnimationState = 'enter';
         this.touched = false;
         this.searchedValue = '';
         this.validationLoading = false;
@@ -5077,12 +5075,7 @@ class PeopleCloudComponent {
         return this.searchUserCtrl.errors.minlength.requiredLength;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PeopleCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PeopleCloudComponent, isStandalone: true, selector: "adf-cloud-people", inputs: { label: "label", appName: "appName", mode: "mode", roles: "roles", validate: "validate", readOnly: "readOnly", required: "required", preSelectUsers: "preSelectUsers", excludedUsers: "excludedUsers", groupsRestriction: "groupsRestriction", userChipsCtrl: "userChipsCtrl", searchUserCtrl: "searchUserCtrl", title: "title", placeholder: "placeholder", hideInputOnSingleSelection: "hideInputOnSingleSelection", formFieldAppearance: "formFieldAppearance", formFieldSubscriptSizing: "formFieldSubscriptSizing", showErrors: "showErrors", showFullNameOnHover: "showFullNameOnHover" }, outputs: { selectUser: "selectUser", removeUser: "removeUser", changedUsers: "changedUsers", warning: "warning" }, providers: [FullNamePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n    <mat-form-field\n        [subscriptSizing]=\"formFieldSubscriptSizing\"\n        class=\"adf-people-cloud adf-form-field-input\"\n        [class.adf-invalid]=\"hasError() && isDirty()\"\n    >\n        <mat-label *ngIf=\"!title\">\n            <span>{{label}}</span>\n        </mat-label>\n        <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let user of selectedUsers\"\n                [removable]=\"!user.readonly\"\n                [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n                (removed)=\"onRemove(user)\"\n                [disabled]=\"isReadonly() || isValidationLoading()\"\n                title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n                [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n            >\n                {{ user | fullName }}\n                <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input\n                matInput\n                [formControl]=\"searchUserCtrl\"\n                [matAutocomplete]=\"auto\"\n                [matChipInputFor]=\"userMultipleChipList\"\n                [required]=\"required\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"setFocus(true)\"\n                (blur)=\"setFocus(false); markAsTouched()\"\n                class=\"adf-cloud-input\"\n                data-automation-id=\"adf-people-cloud-search-input\"\n                #userInput\n            />\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            class=\"adf-people-cloud-list\"\n            #auto=\"matAutocomplete\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n        >\n            <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n                <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n                    <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n                        <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n                        <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option\n                    *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n                    disabled\n                    class=\"adf-people-cloud-option-not-active\"\n                    data-automation-id=\"adf-people-cloud-no-results\"\n                >\n                    <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n        <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n            </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n            </div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n            [@transitionMessages]=\"subscriptAnimationState\"\n            class=\"adf-error\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n            [@transitionMessages]=\"subscriptAnimationState\"\n            data-automation-id=\"invalid-users-typing-error\"\n            class=\"adf-error\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: [".adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "pipe", type: FullNamePipe, name: "fullName" }], 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: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PeopleCloudComponent, isStandalone: true, selector: "adf-cloud-people", inputs: { label: "label", appName: "appName", mode: "mode", roles: "roles", validate: "validate", readOnly: "readOnly", required: "required", preSelectUsers: "preSelectUsers", excludedUsers: "excludedUsers", groupsRestriction: "groupsRestriction", userChipsCtrl: "userChipsCtrl", searchUserCtrl: "searchUserCtrl", title: "title", placeholder: "placeholder", hideInputOnSingleSelection: "hideInputOnSingleSelection", formFieldAppearance: "formFieldAppearance", formFieldSubscriptSizing: "formFieldSubscriptSizing", showErrors: "showErrors", showFullNameOnHover: "showFullNameOnHover" }, outputs: { selectUser: "selectUser", removeUser: "removeUser", changedUsers: "changedUsers", warning: "warning" }, providers: [FullNamePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n    <mat-form-field\n        [subscriptSizing]=\"formFieldSubscriptSizing\"\n        class=\"adf-people-cloud adf-form-field-input\"\n        [class.adf-invalid]=\"hasError() && isDirty()\"\n    >\n        <mat-label *ngIf=\"!title\">\n            <span>{{label}}</span>\n        </mat-label>\n        <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let user of selectedUsers\"\n                [removable]=\"!user.readonly\"\n                [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n                (removed)=\"onRemove(user)\"\n                [disabled]=\"isReadonly() || isValidationLoading()\"\n                title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n                [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n            >\n                {{ user | fullName }}\n                <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input\n                matInput\n                [formControl]=\"searchUserCtrl\"\n                [matAutocomplete]=\"auto\"\n                [matChipInputFor]=\"userMultipleChipList\"\n                [required]=\"required\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"setFocus(true)\"\n                (blur)=\"setFocus(false); markAsTouched()\"\n                class=\"adf-cloud-input\"\n                data-automation-id=\"adf-people-cloud-search-input\"\n                #userInput\n            />\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            class=\"adf-people-cloud-list\"\n            #auto=\"matAutocomplete\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n        >\n            <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n                <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n                    <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n                        <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n                        <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option\n                    *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n                    disabled\n                    class=\"adf-people-cloud-option-not-active\"\n                    data-automation-id=\"adf-people-cloud-no-results\"\n                >\n                    <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n        <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n            </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n            </div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n            class=\"adf-error adf-error-animate\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n            data-automation-id=\"invalid-users-typing-error\"\n            class=\"adf-error adf-error-animate\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: ["@keyframes adf-people-cloud-slide-in-down{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}.adf-error-messages-container .adf-error-animate{animation:adf-people-cloud-slide-in-down .3s cubic-bezier(.55,0,.55,.2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "pipe", type: FullNamePipe, name: "fullName" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PeopleCloudComponent, decorators: [{
             type: Component,
@@ -5100,12 +5093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         MatChipsModule,
                         MatInputModule,
                         MatTooltipModule
-                    ], providers: [FullNamePipe], 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, template: "<form>\n    <mat-form-field\n        [subscriptSizing]=\"formFieldSubscriptSizing\"\n        class=\"adf-people-cloud adf-form-field-input\"\n        [class.adf-invalid]=\"hasError() && isDirty()\"\n    >\n        <mat-label *ngIf=\"!title\">\n            <span>{{label}}</span>\n        </mat-label>\n        <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let user of selectedUsers\"\n                [removable]=\"!user.readonly\"\n                [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n                (removed)=\"onRemove(user)\"\n                [disabled]=\"isReadonly() || isValidationLoading()\"\n                title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n                [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n            >\n                {{ user | fullName }}\n                <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input\n                matInput\n                [formControl]=\"searchUserCtrl\"\n                [matAutocomplete]=\"auto\"\n                [matChipInputFor]=\"userMultipleChipList\"\n                [required]=\"required\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"setFocus(true)\"\n                (blur)=\"setFocus(false); markAsTouched()\"\n                class=\"adf-cloud-input\"\n                data-automation-id=\"adf-people-cloud-search-input\"\n                #userInput\n            />\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            class=\"adf-people-cloud-list\"\n            #auto=\"matAutocomplete\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n        >\n            <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n                <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n                    <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n                        <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n                        <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option\n                    *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n                    disabled\n                    class=\"adf-people-cloud-option-not-active\"\n                    data-automation-id=\"adf-people-cloud-no-results\"\n                >\n                    <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n        <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n            </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n            </div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n            [@transitionMessages]=\"subscriptAnimationState\"\n            class=\"adf-error\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n            [@transitionMessages]=\"subscriptAnimationState\"\n            data-automation-id=\"invalid-users-typing-error\"\n            class=\"adf-error\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: [".adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}\n"] }]
+                    ], providers: [FullNamePipe], encapsulation: ViewEncapsulation.None, template: "<form>\n    <mat-form-field\n        [subscriptSizing]=\"formFieldSubscriptSizing\"\n        class=\"adf-people-cloud adf-form-field-input\"\n        [class.adf-invalid]=\"hasError() && isDirty()\"\n    >\n        <mat-label *ngIf=\"!title\">\n            <span>{{label}}</span>\n        </mat-label>\n        <mat-label *ngIf=\"title\">{{ title | translate }}</mat-label>\n\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #userMultipleChipList data-automation-id=\"adf-cloud-people-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let user of selectedUsers\"\n                [removable]=\"!user.readonly\"\n                [attr.data-automation-id]=\"'adf-people-cloud-chip-' + user.username\"\n                (removed)=\"onRemove(user)\"\n                [disabled]=\"isReadonly() || isValidationLoading()\"\n                title=\"{{ (user.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\"\n                [matTooltip]=\"showFullNameOnHover ? (user | fullName : true) : user.email\"\n            >\n                {{ user | fullName }}\n                <mat-icon matChipRemove *ngIf=\"!(user.readonly || readOnly)\" [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input\n                matInput\n                [formControl]=\"searchUserCtrl\"\n                [matAutocomplete]=\"auto\"\n                [matChipInputFor]=\"userMultipleChipList\"\n                [required]=\"required\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"setFocus(true)\"\n                (blur)=\"setFocus(false); markAsTouched()\"\n                class=\"adf-cloud-input\"\n                data-automation-id=\"adf-people-cloud-search-input\"\n                #userInput\n            />\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            class=\"adf-people-cloud-list\"\n            #auto=\"matAutocomplete\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n        >\n            <ng-container *ngIf=\"(searchUsers$ | async)?.length; else noResults\">\n                <mat-option *ngFor=\"let user of searchUsers$ | async; let i = index\" [value]=\"user\" class=\"adf-people-cloud-option-active\">\n                    <div class=\"adf-people-cloud-row\" id=\"adf-people-cloud-user-{{ user.username }}\" data-automation-id=\"adf-people-cloud-row\">\n                        <div [outerHTML]=\"user | usernameInitials : 'adf-people-cloud-pic'\"></div>\n                        <span class=\"adf-people-label-name\"> {{ user | fullName : true }}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option\n                    *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !searchLoading\"\n                    disabled\n                    class=\"adf-people-cloud-option-not-active\"\n                    data-automation-id=\"adf-people-cloud-no-results\"\n                >\n                    <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\" *ngIf=\"showErrors\">\n        <mat-error *ngIf=\"hasPreselectError() && !isValidationLoading()\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: validateUsersMessage } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('pattern')\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate : { pattern: getValidationPattern() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('maxlength')\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate : { requiredLength: getValidationMaxLength() } }}\n            </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchUserCtrl.hasError('minlength')\" class=\"adf-error adf-error-animate\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">\n                {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate : { requiredLength: getValidationMinLength() } }}\n            </div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()\"\n            class=\"adf-error adf-error-animate\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>\n        </mat-error>\n        <mat-error\n            *ngIf=\"searchUserCtrl.hasError('searchTypingError') && !this.isFocused\"\n            data-automation-id=\"invalid-users-typing-error\"\n            class=\"adf-error adf-error-animate\"\n        >\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName: searchedValue } }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: ["@keyframes adf-people-cloud-slide-in-down{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.adf-people-cloud{width:100%}.adf-people-cloud-title{color:var(--mat-sys-on-surface-variant)}.adf-people-cloud-title--focus{color:var(--mat-sys-primary)}.adf-people-cloud-list{margin:5px 0;padding:10px 0}.adf-people-cloud-row{display:flex;align-items:center;column-gap:10px}.adf-people-cloud-pic{background:var(--mat-sys-primary);display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100px;text-transform:uppercase}.adf-start-task-cloud-error{margin-top:-10px;position:absolute;height:20px}.adf-start-task-cloud-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}.adf-error-messages-container .adf-error-animate{animation:adf-people-cloud-slide-in-down .3s cubic-bezier(.55,0,.55,.2)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], appName: [{
@@ -5296,7 +5284,6 @@ class GroupCloudComponent {
         this.selectedGroups = [];
         this.invalidGroups = [];
         this.searchGroups$ = new BehaviorSubject(this.searchGroups);
-        this.subscriptAnimationState = 'enter';
         this.touched = false;
         this.searchedValue = '';
         this.validationLoading = false;
@@ -5587,12 +5574,7 @@ class GroupCloudComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GroupCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: GroupCloudComponent, isStandalone: true, selector: "adf-cloud-group", inputs: { label: "label", appName: "appName", title: "title", mode: "mode", preSelectGroups: "preSelectGroups", validate: "validate", readOnly: "readOnly", required: "required", groupChipsCtrl: "groupChipsCtrl", searchGroupsControl: "searchGroupsControl", roles: "roles" }, outputs: { selectGroup: "selectGroup", removeGroup: "removeGroup", changedGroups: "changedGroups", warning: "warning" }, viewQueries: [{ propertyName: "groupInput", first: true, predicate: ["groupInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n    <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n        @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let group of selectedGroups\"\n                [removable]=\"!(group.readonly)\"\n                [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                (removed)=\"onRemove(group)\"\n                [disabled]=\"readOnly || isValidationLoading()\"\n                title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n                {{group.name}}\n                <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input matInput\n                   [formControl]=\"searchGroupsControl\"\n                   [matAutocomplete]=\"auto\"\n                   [matChipInputFor]=\"groupChipList\"\n                   [placeholder]=\"isReadonly() ? '' : (title | translate)\"\n                   [required]=\"required\"\n                   (focus)=\"setFocus(true)\"\n                   (blur)=\"setFocus(false); markAsTouched()\"\n                   class=\"adf-group-input\"\n                   data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            #auto=\"matAutocomplete\"\n            class=\"adf-cloud-group-list\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n            data-automation-id=\"adf-cloud-group-autocomplete\">\n            <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n                <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n                            [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                            class=\"adf-cloud-group-option-active\">\n                    <div\n                        class=\"adf-cloud-group-row\"\n                        id=\"adf-group-{{i}}\"\n                        data-automation-id=\"adf-cloud-group-row\">\n                        <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n                        <span>{{group.name}}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n                            class=\"adf-cloud-group-option-not-active\"\n                            data-automation-id=\"adf-cloud-group-no-results\">\n                    <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\">\n        <mat-error *ngIf=\"hasPreselectError() &&  !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n            </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n            [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n            data-automation-id=\"invalid-groups-typing-error\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: GroupCloudComponent, isStandalone: true, selector: "adf-cloud-group", inputs: { label: "label", appName: "appName", title: "title", mode: "mode", preSelectGroups: "preSelectGroups", validate: "validate", readOnly: "readOnly", required: "required", groupChipsCtrl: "groupChipsCtrl", searchGroupsControl: "searchGroupsControl", roles: "roles" }, outputs: { selectGroup: "selectGroup", removeGroup: "removeGroup", changedGroups: "changedGroups", warning: "warning" }, viewQueries: [{ propertyName: "groupInput", first: true, predicate: ["groupInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form>\n    <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n        @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let group of selectedGroups\"\n                [removable]=\"!(group.readonly)\"\n                [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                (removed)=\"onRemove(group)\"\n                [disabled]=\"readOnly || isValidationLoading()\"\n                title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n                {{group.name}}\n                <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input matInput\n                   [formControl]=\"searchGroupsControl\"\n                   [matAutocomplete]=\"auto\"\n                   [matChipInputFor]=\"groupChipList\"\n                   [placeholder]=\"isReadonly() ? '' : (title | translate)\"\n                   [required]=\"required\"\n                   (focus)=\"setFocus(true)\"\n                   (blur)=\"setFocus(false); markAsTouched()\"\n                   class=\"adf-group-input\"\n                   data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            #auto=\"matAutocomplete\"\n            class=\"adf-cloud-group-list\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n            data-automation-id=\"adf-cloud-group-autocomplete\">\n            <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n                <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n                            [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                            class=\"adf-cloud-group-option-active\">\n                    <div\n                        class=\"adf-cloud-group-row\"\n                        id=\"adf-group-{{i}}\"\n                        data-automation-id=\"adf-cloud-group-row\">\n                        <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n                        <span>{{group.name}}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n                            class=\"adf-cloud-group-option-not-active\"\n                            data-automation-id=\"adf-cloud-group-no-results\">\n                    <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\">\n        <mat-error *ngIf=\"hasPreselectError() &&  !isValidationLoading()\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n            </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n            class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n            data-automation-id=\"invalid-groups-typing-error\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}@keyframes slide-down-fade-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}.adf-error-messages-container .adf-error{animation:slide-down-fade-in .3s cubic-bezier(.55,0,.55,.2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "mat-icon[adf-icon]", inputs: ["adf-icon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GroupCloudComponent, decorators: [{
             type: Component,
@@ -5608,12 +5590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         ReactiveFormsModule,
                         MatInputModule,
                         MatChipsModule
-                    ], 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, template: "<form>\n    <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n        @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let group of selectedGroups\"\n                [removable]=\"!(group.readonly)\"\n                [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                (removed)=\"onRemove(group)\"\n                [disabled]=\"readOnly || isValidationLoading()\"\n                title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n                {{group.name}}\n                <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input matInput\n                   [formControl]=\"searchGroupsControl\"\n                   [matAutocomplete]=\"auto\"\n                   [matChipInputFor]=\"groupChipList\"\n                   [placeholder]=\"isReadonly() ? '' : (title | translate)\"\n                   [required]=\"required\"\n                   (focus)=\"setFocus(true)\"\n                   (blur)=\"setFocus(false); markAsTouched()\"\n                   class=\"adf-group-input\"\n                   data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            #auto=\"matAutocomplete\"\n            class=\"adf-cloud-group-list\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n            data-automation-id=\"adf-cloud-group-autocomplete\">\n            <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n                <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n                            [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                            class=\"adf-cloud-group-option-active\">\n                    <div\n                        class=\"adf-cloud-group-row\"\n                        id=\"adf-group-{{i}}\"\n                        data-automation-id=\"adf-cloud-group-row\">\n                        <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n                        <span>{{group.name}}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n                            class=\"adf-cloud-group-option-not-active\"\n                            data-automation-id=\"adf-cloud-group-no-results\">\n                    <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\">\n        <mat-error *ngIf=\"hasPreselectError() &&  !isValidationLoading()\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n            </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n            [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n            data-automation-id=\"invalid-groups-typing-error\" [@transitionMessages]=\"subscriptAnimationState\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<form>\n    <mat-form-field class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n        @if (label || required) { <mat-label><span>{{label}}</span></mat-label> }\n        <mat-chip-grid [required]=\"required\" [disabled]=\"isReadonly()\" #groupChipList data-automation-id=\"adf-cloud-group-chip-list\">\n            <mat-chip-row\n                *ngFor=\"let group of selectedGroups\"\n                [removable]=\"!(group.readonly)\"\n                [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                (removed)=\"onRemove(group)\"\n                [disabled]=\"readOnly || isValidationLoading()\"\n                title=\"{{ (group.readonly ? 'ADF_CLOUD_GROUPS.MANDATORY' : '') | translate }}\">\n                {{group.name}}\n                <mat-icon *ngIf=\"!(group.readonly || readOnly)\" matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n            </mat-chip-row>\n            <input matInput\n                   [formControl]=\"searchGroupsControl\"\n                   [matAutocomplete]=\"auto\"\n                   [matChipInputFor]=\"groupChipList\"\n                   [placeholder]=\"isReadonly() ? '' : (title | translate)\"\n                   [required]=\"required\"\n                   (focus)=\"setFocus(true)\"\n                   (blur)=\"setFocus(false); markAsTouched()\"\n                   class=\"adf-group-input\"\n                   data-automation-id=\"adf-cloud-group-search-input\" #groupInput>\n        </mat-chip-grid>\n\n        <mat-autocomplete\n            autoActiveFirstOption\n            #auto=\"matAutocomplete\"\n            class=\"adf-cloud-group-list\"\n            (optionSelected)=\"onSelect($event.option.value)\"\n            [displayWith]=\"getDisplayName\"\n            data-automation-id=\"adf-cloud-group-autocomplete\">\n            <ng-container *ngIf=\"(searchGroups$ | async)?.length else noResults\">\n                <mat-option *ngFor=\"let group of searchGroups$ | async; let i = index\" [value]=\"group\"\n                            [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                            class=\"adf-cloud-group-option-active\">\n                    <div\n                        class=\"adf-cloud-group-row\"\n                        id=\"adf-group-{{i}}\"\n                        data-automation-id=\"adf-cloud-group-row\">\n                        <button class=\"adf-group-short-name\" mat-fab>{{getGroupNameInitials(group)}}</button>\n                        <span>{{group.name}}</span>\n                    </div>\n                </mat-option>\n            </ng-container>\n            <ng-template #noResults>\n                <mat-option *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !searchLoading\" disabled\n                            class=\"adf-cloud-group-option-not-active\"\n                            data-automation-id=\"adf-cloud-group-no-results\">\n                    <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n    <mat-progress-bar *ngIf=\"validationLoading\" mode=\"indeterminate\" />\n\n    <div class=\"adf-error-container adf-error-messages-container\">\n        <mat-error *ngIf=\"hasPreselectError() &&  !isValidationLoading()\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('pattern')\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>\n            </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('maxlength')\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('minlength')\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>\n        </mat-error>\n        <mat-error *ngIf=\"(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()\"\n            class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>\n        </mat-error>\n        <mat-error *ngIf=\"searchGroupsControl.hasError('searchTypingError') && !this.isFocused\"\n            data-automation-id=\"invalid-groups-typing-error\" class=\"adf-error\">\n            <mat-icon class=\"adf-error-icon\" adf-icon=\"error_outline\" />\n            <div class=\"adf-error-text\">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</div>\n        </mat-error>\n    </div>\n</form>\n", styles: [".adf-cloud-group-list{margin:5px 0;padding:10px 0}.adf-cloud-group-list .adf-cloud-group-row{place-content:center flex-start;align-items:center;display:flex}.adf-cloud-group-list .adf-cloud-group-row .adf-group-short-name{margin-right:20px;width:40px;height:40px}.adf-cloud-group{width:100%}.adf-cloud-group-title{color:var(--mat-sys-on-surface-variant)}.adf-cloud-group-title--focus{color:var(--mat-sys-primary)}.adf-cloud-group-error{color:var(--mat-sys-error);margin-top:-10px;position:absolute;height:20px}.adf-cloud-group-error-message{padding-right:8px;height:16px;line-height:1.33;width:auto}@keyframes slide-down-fade-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.adf-error-messages-container .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}.adf-error-messages-container .adf-error{animation:slide-down-fade-in .3s cubic-bezier(.55,0,.55,.2)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], appName: [{