@alfresco/adf-process-services-cloud 9.2.0-32360483700 → 9.2.0-32394726710

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

@@ -37,7 +37,7 @@ import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i4$1 from '@angular/material/button';
+import * as i3$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$5 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -62,7 +62,7 @@ import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i5$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i4$2 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i6$2 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
@@ -4075,7 +4075,7 @@ class TaskFilterDialogCloudComponent {
         return this.filterForm.valid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TaskFilterDialogCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TaskFilterDialogCloudComponent, isStandalone: true, selector: "adf-cloud-task-filter-dialog", ngImport: i0, template: "<div class=\"adf-task-filter-dialog\">\n    <span mat-dialog-title id=\"adf-task-filter-dialog-title\">\n         {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE' | translate}}\n    </span>\n    <mat-card appearance=\"outlined\" class=\"adf-task-filter-dialog-card\">\n        <mat-card-content class=\"adf-task-filter-dialog-card-content\">\n        <form [formGroup]=\"filterForm\">\n            <mat-form-field class=\"adf-task-filter-name\" [floatLabel]=\"'auto'\">\n                <input matInput placeholder=\"{{ 'ADF_CLOUD_EDIT_TASK_FILTER.FILTER_NAME' | translate }}\" formControlName=\"name\" id=\"adf-filter-name-id\">\n            </mat-form-field>\n        </form>\n        </mat-card-content>\n        <mat-card-actions class=\"adf-task-filter-dialog-card-actions\">\n            <button mat-button (click)=\"onSaveClick()\" id=\"adf-save-button-id\" [disabled]=\"!isValid()\">\n                {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.SAVE' | translate}}\n            </button>\n            <button mat-button (click)=\"onCancelClick()\" id=\"adf-cancel-button-id\">\n               {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.CANCEL' | translate}}\n            </button>\n        </mat-card-actions>\n    </mat-card>\n</div>\n", styles: ["adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card{padding:0;box-shadow:none}adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card .adf-task-filter-dialog-card-actions{display:flex;max-height:100%;place-content:flex-end;align-items:flex-end}adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card-content{padding:0;box-shadow:none}adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card-content .adf-task-filter-name{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TaskFilterDialogCloudComponent, isStandalone: true, selector: "adf-cloud-task-filter-dialog", ngImport: i0, template: "<div class=\"adf-task-filter-dialog\">\n    <span mat-dialog-title id=\"adf-task-filter-dialog-title\">\n         {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE' | translate}}\n    </span>\n    <mat-card appearance=\"outlined\" class=\"adf-task-filter-dialog-card\">\n        <mat-card-content class=\"adf-task-filter-dialog-card-content\">\n        <form [formGroup]=\"filterForm\">\n            <mat-form-field class=\"adf-task-filter-name\" [floatLabel]=\"'auto'\">\n                <input matInput placeholder=\"{{ 'ADF_CLOUD_EDIT_TASK_FILTER.FILTER_NAME' | translate }}\" formControlName=\"name\" id=\"adf-filter-name-id\">\n            </mat-form-field>\n        </form>\n        </mat-card-content>\n        <mat-card-actions class=\"adf-task-filter-dialog-card-actions\">\n            <button mat-button (click)=\"onSaveClick()\" id=\"adf-save-button-id\" [disabled]=\"!isValid()\">\n                {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.SAVE' | translate}}\n            </button>\n            <button mat-button (click)=\"onCancelClick()\" id=\"adf-cancel-button-id\">\n               {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.CANCEL' | translate}}\n            </button>\n        </mat-card-actions>\n    </mat-card>\n</div>\n", styles: ["adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card{padding:0;box-shadow:none}adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card .adf-task-filter-dialog-card-actions{display:flex;max-height:100%;place-content:flex-end;align-items:flex-end}adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card-content{padding:0;box-shadow:none}adf-cloud-task-filter-dialog .adf-task-filter-dialog .adf-task-filter-dialog-card-content .adf-task-filter-name{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TaskFilterDialogCloudComponent, decorators: [{
             type: Component,
@@ -4748,7 +4748,7 @@ class PeopleCloudComponent {
         /**
          * Material form field subscript sizing (fixed / dynamic)
          */
-        this.formFieldSubscriptSizing = 'fixed';
+        this.formFieldSubscriptSizing = 'dynamic';
         /**
          * Show errors under the form field
          */
@@ -5077,7 +5077,7 @@ class PeopleCloudComponent {
         return this.searchUserCtrl.errors.minlength.requiredLength;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PeopleCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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        @if (!title) {\n            <mat-label>\n                <span>{{ label }}</span>\n            </mat-label>\n        }\n        @if (title) {\n            <mat-label>{{ title | translate }}</mat-label>\n        }\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                @if (!(user.readonly || readOnly)) {\n                    <mat-icon matChipRemove [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n                }\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            @if ((searchUsers$ | async)?.length) {\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            } @else {\n                <ng-container [ngTemplateOutlet]=\"noResults\" />\n            }\n            <ng-template #noResults>\n                @if (searchUserCtrl.hasError('searchTypingError') && !searchLoading) {\n                    <mat-option disabled class=\"adf-people-cloud-option-not-active\" data-automation-id=\"adf-people-cloud-no-results\">\n                        <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate: { userName: searchedValue } }}</span>\n                    </mat-option>\n                }\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <div class=\"adf-error-container adf-error-messages-container\">\n        @if (validationLoading) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n        @if (showErrors) {\n            @if (hasPreselectError() && !isValidationLoading()) {\n                <mat-error 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            }\n            @if (searchUserCtrl.hasError('pattern')) {\n                <mat-error 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_PATTERN' | translate: { pattern: getValidationPattern() } }}\n                    </div>\n                </mat-error>\n            }\n            @if (searchUserCtrl.hasError('maxlength')) {\n                <mat-error 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            }\n            @if (searchUserCtrl.hasError('minlength')) {\n                <mat-error 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            }\n            @if ((searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()) {\n                <mat-error 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.REQUIRED' | translate }}</div>\n                </mat-error>\n            }\n            @if (searchUserCtrl.hasError('searchTypingError') && !this.isFocused) {\n                <mat-error data-automation-id=\"invalid-users-typing-error\" 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: searchedValue } }}</div>\n                </mat-error>\n            }\n        }\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.27", ngImport: i0, type: PeopleCloudComponent, decorators: [{
             type: Component,
@@ -5095,7 +5095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         MatChipsModule,
                         MatInputModule,
                         MatTooltipModule
-                    ], 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"] }]
+                    ], 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        @if (!title) {\n            <mat-label>\n                <span>{{ label }}</span>\n            </mat-label>\n        }\n        @if (title) {\n            <mat-label>{{ title | translate }}</mat-label>\n        }\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                @if (!(user.readonly || readOnly)) {\n                    <mat-icon matChipRemove [attr.data-automation-id]=\"'adf-people-cloud-chip-remove-icon-' + user.username\" adf-icon=\"cancel\" />\n                }\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            @if ((searchUsers$ | async)?.length) {\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            } @else {\n                <ng-container [ngTemplateOutlet]=\"noResults\" />\n            }\n            <ng-template #noResults>\n                @if (searchUserCtrl.hasError('searchTypingError') && !searchLoading) {\n                    <mat-option disabled class=\"adf-people-cloud-option-not-active\" data-automation-id=\"adf-people-cloud-no-results\">\n                        <span> {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate: { userName: searchedValue } }}</span>\n                    </mat-option>\n                }\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <div class=\"adf-error-container adf-error-messages-container\">\n        @if (validationLoading) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n        @if (showErrors) {\n            @if (hasPreselectError() && !isValidationLoading()) {\n                <mat-error 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            }\n            @if (searchUserCtrl.hasError('pattern')) {\n                <mat-error 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_PATTERN' | translate: { pattern: getValidationPattern() } }}\n                    </div>\n                </mat-error>\n            }\n            @if (searchUserCtrl.hasError('maxlength')) {\n                <mat-error 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            }\n            @if (searchUserCtrl.hasError('minlength')) {\n                <mat-error 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            }\n            @if ((searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()) {\n                <mat-error 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.REQUIRED' | translate }}</div>\n                </mat-error>\n            }\n            @if (searchUserCtrl.hasError('searchTypingError') && !this.isFocused) {\n                <mat-error data-automation-id=\"invalid-users-typing-error\" 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: searchedValue } }}</div>\n                </mat-error>\n            }\n        }\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: [{
@@ -5576,7 +5576,7 @@ class GroupCloudComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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 subscriptSizing=\"dynamic\" class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n        @if (label || required) {\n            <mat-label\n                ><span>{{ label }}</span></mat-label\n            >\n        }\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            >\n                {{ group.name }}\n                @if (!(group.readonly || readOnly)) {\n                    <mat-icon matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n                }\n            </mat-chip-row>\n            <input\n                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\"\n                #groupInput\n            />\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        >\n            @if ((searchGroups$ | async)?.length) {\n                <mat-option\n                    *ngFor=\"let group of searchGroups$ | async; let i = index\"\n                    [value]=\"group\"\n                    [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                    class=\"adf-cloud-group-option-active\"\n                >\n                    <div class=\"adf-cloud-group-row\" id=\"adf-group-{{ i }}\" 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            } @else {\n                <ng-container [ngTemplateOutlet]=\"noResults\" />\n            }\n            <ng-template #noResults>\n                @if (searchGroupsControl.hasError('searchTypingError') && !searchLoading) {\n                    <mat-option disabled class=\"adf-cloud-group-option-not-active\" data-automation-id=\"adf-cloud-group-no-results\">\n                        <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n                    </mat-option>\n                }\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n    <div class=\"adf-error-container adf-error-messages-container\">\n        @if (validationLoading) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n        @if (hasPreselectError() && !isValidationLoading()) {\n            <mat-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        }\n        @if (searchGroupsControl.hasError('pattern')) {\n            <mat-error 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_PATTERN' | translate: { pattern: getValidationPattern() } }}\n                </div>\n            </mat-error>\n        }\n        @if (searchGroupsControl.hasError('maxlength')) {\n            <mat-error 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        }\n        @if (searchGroupsControl.hasError('minlength')) {\n            <mat-error 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        }\n        @if ((searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()) {\n            <mat-error 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        }\n        @if (searchGroupsControl.hasError('searchTypingError') && !this.isFocused) {\n            <mat-error 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        }\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3$2.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.27", ngImport: i0, type: GroupCloudComponent, decorators: [{
             type: Component,
@@ -5592,7 +5592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         ReactiveFormsModule,
                         MatInputModule,
                         MatChipsModule
-                    ], 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"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<form>\n    <mat-form-field subscriptSizing=\"dynamic\" class=\"adf-cloud-group adf-form-field-input\" [class.adf-invalid]=\"hasError() && isDirty()\">\n        @if (label || required) {\n            <mat-label\n                ><span>{{ label }}</span></mat-label\n            >\n        }\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            >\n                {{ group.name }}\n                @if (!(group.readonly || readOnly)) {\n                    <mat-icon matChipRemove [attr.data-automation-id]=\"'adf-cloud-group-chip-remove-icon-' + group.name\" adf-icon=\"cancel\" />\n                }\n            </mat-chip-row>\n            <input\n                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\"\n                #groupInput\n            />\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        >\n            @if ((searchGroups$ | async)?.length) {\n                <mat-option\n                    *ngFor=\"let group of searchGroups$ | async; let i = index\"\n                    [value]=\"group\"\n                    [attr.data-automation-id]=\"'adf-cloud-group-chip-' + group.name\"\n                    class=\"adf-cloud-group-option-active\"\n                >\n                    <div class=\"adf-cloud-group-row\" id=\"adf-group-{{ i }}\" 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            } @else {\n                <ng-container [ngTemplateOutlet]=\"noResults\" />\n            }\n            <ng-template #noResults>\n                @if (searchGroupsControl.hasError('searchTypingError') && !searchLoading) {\n                    <mat-option disabled class=\"adf-cloud-group-option-not-active\" data-automation-id=\"adf-cloud-group-no-results\">\n                        <span> {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate }}</span>\n                    </mat-option>\n                }\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n    <div class=\"adf-error-container adf-error-messages-container\">\n        @if (validationLoading) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n        @if (hasPreselectError() && !isValidationLoading()) {\n            <mat-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        }\n        @if (searchGroupsControl.hasError('pattern')) {\n            <mat-error 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_PATTERN' | translate: { pattern: getValidationPattern() } }}\n                </div>\n            </mat-error>\n        }\n        @if (searchGroupsControl.hasError('maxlength')) {\n            <mat-error 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        }\n        @if (searchGroupsControl.hasError('minlength')) {\n            <mat-error 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        }\n        @if ((searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()) {\n            <mat-error 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        }\n        @if (searchGroupsControl.hasError('searchTypingError') && !this.isFocused) {\n            <mat-error 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        }\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: [{
@@ -5902,7 +5902,7 @@ class EditServiceTaskFilterCloudComponent extends BaseEditTaskFilterCloudCompone
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: EditServiceTaskFilterCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: EditServiceTaskFilterCloudComponent, isStandalone: true, selector: "adf-cloud-edit-service-task-filter", usesInheritance: true, ngImport: i0, template: "<mat-accordion [hideToggle]=\"isLoading\" class=\"adf-edit-task-filter\">\n    <mat-expansion-panel (afterExpand)=\"onExpand()\" (closed)=\"onClose()\">\n        <mat-expansion-panel-header *ngIf=\"taskFilter\" id=\"adf-edit-task-filter-expansion-header\" class=\"adf-edit-task-filter-header\">\n            <ng-container *ngIf=\"!isLoading; else loadingTemplate\">\n                <mat-panel-title *ngIf=\"showTaskFilterName\" id=\"adf-edit-task-filter-title-id\" class=\"adf-edit-task-filter-header__title\"\n                    >{{taskFilter.name | translate}}</mat-panel-title>\n                <mat-panel-description class=\"adf-edit-task-filter-header__description\" id=\"adf-edit-task-filter-sub-title-id\">\n                    <span *ngIf=\"showTitle\">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>\n                    <div *ngIf=\"showFilterActions\" class=\"adf-cloud-edit-task-filter-actions\">\n                        <ng-container *ngIf=\"toggleFilterActions\">\n                            <button \n                                *ngFor=\"let filterAction of taskFilterActions\"\n                                mat-icon-button\n                                [title]=\"filterAction.tooltip | translate\"\n                                [attr.data-automation-id]=\"'adf-filter-action-' + filterAction.actionType\"\n                                [disabled]=\"isDisabledAction(filterAction)\"\n                                (click)=\"executeFilterActions(filterAction)\"\n                            >\n                                @if (filterAction.icon.includes(':')) {\n                                    <mat-icon [svgIcon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } @else {\n                                    <mat-icon [adf-icon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } \n                            </button>\n                        </ng-container>\n                    </div>\n                </mat-panel-description>\n            </ng-container>\n            <ng-template #loadingTemplate>\n                <div class=\"adf-cloud-edit-task-filter-loading-margin\">\n                    <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"30\" />\n                </div>\n            </ng-template>\n        </mat-expansion-panel-header>\n        <ng-container *ngIf=\"!isLoading;\">\n            <form *ngIf=\"editTaskFilterForm\" [formGroup]=\"editTaskFilterForm\" class=\"adf-edit-task-filter-content\">\n                <div class=\"adf-edit-task-filter-form\">\n                    <ng-container *ngFor=\"let taskFilterProperty of taskFilterProperties\">\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'select'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__select-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"taskFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\"\n                                (selectionChange)=\"onStatusChange($event)\">\n                                    <mat-option *ngFor=\"let propertyOption of taskFilterProperty.options\"\n                                        [value]=\"propertyOption.value\"\n                                        [attr.data-automation-id]=\"'adf-cloud-edit-task-property-options-' + taskFilterProperty.key\">\n                                        {{ propertyOption.label | translate }}\n                                    </mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'text'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__text-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   [formControlName]=\"taskFilterProperty.key\"\n                                   type=\"text\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\" />\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                                        class=\"adf-form-field-input\"\n                                        *ngIf=\"taskFilterProperty.type === 'date'\"\n                                        [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label>{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   (keyup)=\"onDateChanged($any($event).target.value, taskFilterProperty)\"\n                                   (dateChange)=\"onDateChanged($event.value, taskFilterProperty)\"\n                                   [matDatepicker]=\"dateController\"\n                                   [placeholder]=\"taskFilterProperty.label | translate\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\">\n                            <mat-datepicker-toggle matSuffix\n                                                   [for]=\"dateController\"\n                                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-toggle-' + taskFilterProperty.key\" />\n                            <mat-datepicker #dateController\n                                            [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key\" />\n                            <mat-error *ngIf=\"hasError(taskFilterProperty)\">\n                                <mat-icon class=\"adf-error-icon\">warning</mat-icon>\n                                <span class=\"adf-error-text\">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</span>\n                            </mat-error>\n                        </mat-form-field>\n                        <div class=\"adf-edit-task-filter-checkbox\"\n                             *ngIf=\"taskFilterProperty.type === 'checkbox'\">\n                            <mat-checkbox\n                                          [formControlName]=\"taskFilterProperty.key\"\n                                          [attr.data-automation-id]=\"taskFilterProperty.key\"\n                            >{{taskFilterProperty.label | translate}}</mat-checkbox>\n                        </div>\n\n                        <adf-cloud-date-range-filter\n                            *ngIf=\"taskFilterProperty.type === 'date-range'\"\n                            [processFilterProperty]=\"taskFilterProperty\"\n                            [options]=\"taskFilterProperty.dateFilterOptions\"\n                            (dateTypeChange)=\"onDateTypeChange($event, taskFilterProperty)\"\n                            (dateChanged)=\"onDateRangeFilterChanged($event, taskFilterProperty)\" />\n                        <adf-cloud-people\n                            class=\"{{ 'adf-edit-task-filter-' + taskFilterProperty.key }}\"\n                            *ngIf=\"taskFilterProperty.type === 'people'\"\n                            [preSelectUsers]=\"taskFilterProperty.value\"\n                            [title]=\"taskFilterProperty.label\"\n                            [validate]=\"true\"\n                            [appName]=\"appName\"\n                            [mode]=\"taskFilterProperty.selectionMode\"\n                            (changedUsers)=\"onChangedUser($event, taskFilterProperty)\" />\n\n                        <adf-cloud-task-assignment-filter\n                            *ngIf=\"taskFilterProperty.type === 'assignment'\"\n                            [taskFilterProperty]=\"taskFilterProperty\"\n                            [status]=\"selectedStatus\"\n                            [appName]=\"appName\"\n                            (assignedUsersChange)=\"onAssignedUsersChange($event)\"\n                            (assignedGroupsChange)=\"onAssignedGroupsChange($event)\"\n                            (assignmentTypeChange)=\"onAssignmentTypeChange($event)\" />\n\n                    </ng-container>\n                </div>\n            </form>\n        </ng-container>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [".adf-edit-task-filter-checkbox{padding-top:10px;text-align:center;flex:1 23%}.adf-edit-task-filter-date-error-container{position:absolute;height:20px;margin-top:12px;width:100%}.adf-edit-task-filter-date-error-container>div{display:flex;flex-flow:row;justify-content:flex-start}.adf-edit-task-filter-date-error-container .adf-error-text{padding-right:8px;height:16px;width:auto}.adf-edit-task-filter-dateRange mat-grid-list{width:450px}.adf-cloud-edit-task-filter-loading-margin{margin-left:calc((100% - 100px)/2);margin-right:calc((100% - 100px)/2)}.adf-edit-task-filter-form{flex-flow:row wrap;display:flex;place-content:center flex-start;align-items:center}.adf-edit-task-filter-form :not(:last-child){margin-right:10px}.adf-edit-task-filter-form mat-form-field,.adf-edit-task-filter-form adf-cloud-people,.adf-edit-task-filter-form adf-cloud-task-assignment-filter{flex:1 1 23%}@media(max-width:599.9px){.adf-edit-task-filter-form{flex-flow:column}.adf-edit-task-filter-form :not(:last-child){margin-bottom:10px;margin-right:0}}.adf-edit-task-filter-header{height:48px}.adf-edit-task-filter-header__description{place-content:center space-between}.adf-form-field-input .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: MatExpansionModule }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatCheckboxModule }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DateRangeFilterComponent, selector: "adf-cloud-date-range-filter", inputs: ["processFilterProperty", "options"], outputs: ["dateChanged", "dateTypeChange"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "component", type: TaskAssignmentFilterCloudComponent, selector: "adf-cloud-task-assignment-filter", inputs: ["appName", "taskFilterProperty", "status"], outputs: ["assignedUsersChange", "assignedGroupsChange", "assignmentTypeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: EditServiceTaskFilterCloudComponent, isStandalone: true, selector: "adf-cloud-edit-service-task-filter", usesInheritance: true, ngImport: i0, template: "<mat-accordion [hideToggle]=\"isLoading\" class=\"adf-edit-task-filter\">\n    <mat-expansion-panel (afterExpand)=\"onExpand()\" (closed)=\"onClose()\">\n        <mat-expansion-panel-header *ngIf=\"taskFilter\" id=\"adf-edit-task-filter-expansion-header\" class=\"adf-edit-task-filter-header\">\n            <ng-container *ngIf=\"!isLoading; else loadingTemplate\">\n                <mat-panel-title *ngIf=\"showTaskFilterName\" id=\"adf-edit-task-filter-title-id\" class=\"adf-edit-task-filter-header__title\"\n                    >{{taskFilter.name | translate}}</mat-panel-title>\n                <mat-panel-description class=\"adf-edit-task-filter-header__description\" id=\"adf-edit-task-filter-sub-title-id\">\n                    <span *ngIf=\"showTitle\">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>\n                    <div *ngIf=\"showFilterActions\" class=\"adf-cloud-edit-task-filter-actions\">\n                        <ng-container *ngIf=\"toggleFilterActions\">\n                            <button \n                                *ngFor=\"let filterAction of taskFilterActions\"\n                                mat-icon-button\n                                [title]=\"filterAction.tooltip | translate\"\n                                [attr.data-automation-id]=\"'adf-filter-action-' + filterAction.actionType\"\n                                [disabled]=\"isDisabledAction(filterAction)\"\n                                (click)=\"executeFilterActions(filterAction)\"\n                            >\n                                @if (filterAction.icon.includes(':')) {\n                                    <mat-icon [svgIcon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } @else {\n                                    <mat-icon [adf-icon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } \n                            </button>\n                        </ng-container>\n                    </div>\n                </mat-panel-description>\n            </ng-container>\n            <ng-template #loadingTemplate>\n                <div class=\"adf-cloud-edit-task-filter-loading-margin\">\n                    <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"30\" />\n                </div>\n            </ng-template>\n        </mat-expansion-panel-header>\n        <ng-container *ngIf=\"!isLoading;\">\n            <form *ngIf=\"editTaskFilterForm\" [formGroup]=\"editTaskFilterForm\" class=\"adf-edit-task-filter-content\">\n                <div class=\"adf-edit-task-filter-form\">\n                    <ng-container *ngFor=\"let taskFilterProperty of taskFilterProperties\">\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'select'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__select-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"taskFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\"\n                                (selectionChange)=\"onStatusChange($event)\">\n                                    <mat-option *ngFor=\"let propertyOption of taskFilterProperty.options\"\n                                        [value]=\"propertyOption.value\"\n                                        [attr.data-automation-id]=\"'adf-cloud-edit-task-property-options-' + taskFilterProperty.key\">\n                                        {{ propertyOption.label | translate }}\n                                    </mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'text'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__text-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   [formControlName]=\"taskFilterProperty.key\"\n                                   type=\"text\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\" />\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                                        class=\"adf-form-field-input\"\n                                        *ngIf=\"taskFilterProperty.type === 'date'\"\n                                        [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label>{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   (keyup)=\"onDateChanged($any($event).target.value, taskFilterProperty)\"\n                                   (dateChange)=\"onDateChanged($event.value, taskFilterProperty)\"\n                                   [matDatepicker]=\"dateController\"\n                                   [placeholder]=\"taskFilterProperty.label | translate\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\">\n                            <mat-datepicker-toggle matSuffix\n                                                   [for]=\"dateController\"\n                                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-toggle-' + taskFilterProperty.key\" />\n                            <mat-datepicker #dateController\n                                            [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key\" />\n                            <mat-error *ngIf=\"hasError(taskFilterProperty)\">\n                                <mat-icon class=\"adf-error-icon\">warning</mat-icon>\n                                <span class=\"adf-error-text\">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</span>\n                            </mat-error>\n                        </mat-form-field>\n                        <div class=\"adf-edit-task-filter-checkbox\"\n                             *ngIf=\"taskFilterProperty.type === 'checkbox'\">\n                            <mat-checkbox\n                                          [formControlName]=\"taskFilterProperty.key\"\n                                          [attr.data-automation-id]=\"taskFilterProperty.key\"\n                            >{{taskFilterProperty.label | translate}}</mat-checkbox>\n                        </div>\n\n                        <adf-cloud-date-range-filter\n                            *ngIf=\"taskFilterProperty.type === 'date-range'\"\n                            [processFilterProperty]=\"taskFilterProperty\"\n                            [options]=\"taskFilterProperty.dateFilterOptions\"\n                            (dateTypeChange)=\"onDateTypeChange($event, taskFilterProperty)\"\n                            (dateChanged)=\"onDateRangeFilterChanged($event, taskFilterProperty)\" />\n                        <adf-cloud-people\n                            class=\"{{ 'adf-edit-task-filter-' + taskFilterProperty.key }}\"\n                            *ngIf=\"taskFilterProperty.type === 'people'\"\n                            [preSelectUsers]=\"taskFilterProperty.value\"\n                            [title]=\"taskFilterProperty.label\"\n                            [validate]=\"true\"\n                            [appName]=\"appName\"\n                            [mode]=\"taskFilterProperty.selectionMode\"\n                            (changedUsers)=\"onChangedUser($event, taskFilterProperty)\" />\n\n                        <adf-cloud-task-assignment-filter\n                            *ngIf=\"taskFilterProperty.type === 'assignment'\"\n                            [taskFilterProperty]=\"taskFilterProperty\"\n                            [status]=\"selectedStatus\"\n                            [appName]=\"appName\"\n                            (assignedUsersChange)=\"onAssignedUsersChange($event)\"\n                            (assignedGroupsChange)=\"onAssignedGroupsChange($event)\"\n                            (assignmentTypeChange)=\"onAssignmentTypeChange($event)\" />\n\n                    </ng-container>\n                </div>\n            </form>\n        </ng-container>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [".adf-edit-task-filter-checkbox{padding-top:10px;text-align:center;flex:1 23%}.adf-edit-task-filter-date-error-container{position:absolute;height:20px;margin-top:12px;width:100%}.adf-edit-task-filter-date-error-container>div{display:flex;flex-flow:row;justify-content:flex-start}.adf-edit-task-filter-date-error-container .adf-error-text{padding-right:8px;height:16px;width:auto}.adf-edit-task-filter-dateRange mat-grid-list{width:450px}.adf-cloud-edit-task-filter-loading-margin{margin-left:calc((100% - 100px)/2);margin-right:calc((100% - 100px)/2)}.adf-edit-task-filter-form{flex-flow:row wrap;display:flex;place-content:center flex-start;align-items:center}.adf-edit-task-filter-form :not(:last-child){margin-right:10px}.adf-edit-task-filter-form mat-form-field,.adf-edit-task-filter-form adf-cloud-people,.adf-edit-task-filter-form adf-cloud-task-assignment-filter{flex:1 1 23%}@media(max-width:599.9px){.adf-edit-task-filter-form{flex-flow:column}.adf-edit-task-filter-form :not(:last-child){margin-bottom:10px;margin-right:0}}.adf-edit-task-filter-header{height:48px}.adf-edit-task-filter-header__description{place-content:center space-between}.adf-form-field-input .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: MatExpansionModule }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatCheckboxModule }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DateRangeFilterComponent, selector: "adf-cloud-date-range-filter", inputs: ["processFilterProperty", "options"], outputs: ["dateChanged", "dateTypeChange"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "component", type: TaskAssignmentFilterCloudComponent, selector: "adf-cloud-task-assignment-filter", inputs: ["appName", "taskFilterProperty", "status"], outputs: ["assignedUsersChange", "assignedGroupsChange", "assignmentTypeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: EditServiceTaskFilterCloudComponent, decorators: [{
             type: Component,
@@ -6181,7 +6181,7 @@ class EditTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: EditTaskFilterCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: EditTaskFilterCloudComponent, isStandalone: true, selector: "adf-cloud-edit-task-filter", usesInheritance: true, ngImport: i0, template: "<mat-accordion [hideToggle]=\"isLoading\" class=\"adf-edit-task-filter\">\n    <mat-expansion-panel (afterExpand)=\"onExpand()\" (closed)=\"onClose()\">\n        <mat-expansion-panel-header *ngIf=\"taskFilter\" id=\"adf-edit-task-filter-expansion-header\" class=\"adf-edit-task-filter-header\">\n            <ng-container *ngIf=\"!isLoading; else loadingTemplate\">\n                <mat-panel-title *ngIf=\"showTaskFilterName\" id=\"adf-edit-task-filter-title-id\" class=\"adf-edit-task-filter-header__title\"\n                    >{{taskFilter.name | translate}}</mat-panel-title>\n                <mat-panel-description class=\"adf-edit-task-filter-header__description\" id=\"adf-edit-task-filter-sub-title-id\">\n                    <span *ngIf=\"showTitle\">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>\n                    <div *ngIf=\"showFilterActions\" class=\"adf-cloud-edit-task-filter-actions\">\n                        <ng-container *ngIf=\"toggleFilterActions\">\n                            <button \n                                *ngFor=\"let filterAction of taskFilterActions\"\n                                mat-icon-button\n                                [title]=\"filterAction.tooltip | translate\"\n                                [attr.data-automation-id]=\"'adf-filter-action-' + filterAction.actionType\"\n                                [disabled]=\"isDisabledAction(filterAction)\"\n                                (click)=\"executeFilterActions(filterAction)\"\n                            >\n                                @if (filterAction.icon.includes(':')) {\n                                    <mat-icon [svgIcon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } @else {\n                                    <mat-icon [adf-icon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                }      \n                            </button>\n                        </ng-container>\n                    </div>\n                </mat-panel-description>\n            </ng-container>\n            <ng-template #loadingTemplate>\n                <div class=\"adf-cloud-edit-task-filter-loading-margin\">\n                    <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"30\" />\n                </div>\n            </ng-template>\n        </mat-expansion-panel-header>\n        <ng-container *ngIf=\"!isLoading;\">\n            <form *ngIf=\"editTaskFilterForm\" [formGroup]=\"editTaskFilterForm\" class=\"adf-edit-task-filter-content\">\n                <div class=\"adf-edit-task-filter-form\">\n                    <ng-container *ngFor=\"let taskFilterProperty of taskFilterProperties\">\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'select'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__select-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"taskFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\"\n                                (selectionChange)=\"onStatusChange($event)\">\n                                    <mat-option *ngFor=\"let propertyOption of taskFilterProperty.options\"\n                                        [value]=\"propertyOption.value\"\n                                        [attr.data-automation-id]=\"'adf-cloud-edit-task-property-options-' + taskFilterProperty.key\">\n                                        {{ propertyOption.label | translate }}\n                                    </mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'text'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__text-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   [formControlName]=\"taskFilterProperty.key\"\n                                   type=\"text\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\" />\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                                        class=\"adf-form-field-input\"\n                                        *ngIf=\"taskFilterProperty.type === 'date'\"\n                                        [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label>{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   (keyup)=\"onDateChanged($any($event).target.value, taskFilterProperty)\"\n                                   (dateChange)=\"onDateChanged($event.value, taskFilterProperty)\"\n                                   [matDatepicker]=\"dateController\"\n                                   [placeholder]=\"taskFilterProperty.label | translate\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\">\n                            <mat-datepicker-toggle matSuffix\n                                                   [for]=\"dateController\"\n                                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-toggle-' + taskFilterProperty.key\" />\n                            <mat-datepicker #dateController\n                                            [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key\" />\n                            @if (hasError(taskFilterProperty)) {\n                                <mat-error>\n                                    <mat-icon class=\"adf-error-icon\">error_outline</mat-icon>\n                                    <span class=\"adf-error-text\">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</span>\n                                </mat-error>\n                            }\n                        </mat-form-field>\n                        <div class=\"adf-edit-task-filter-checkbox\"\n                             *ngIf=\"taskFilterProperty.type === 'checkbox'\">\n                            <mat-checkbox\n                                          [formControlName]=\"taskFilterProperty.key\"\n                                          [attr.data-automation-id]=\"taskFilterProperty.key\"\n                            >{{taskFilterProperty.label | translate}}</mat-checkbox>\n                        </div>\n\n                        <adf-cloud-date-range-filter #dateRange\n                            *ngIf=\"taskFilterProperty.type === 'date-range'\"\n                            [processFilterProperty]=\"taskFilterProperty\"\n                            [options]=\"taskFilterProperty.dateFilterOptions\"\n                            (dateTypeChange)=\"onDateTypeChange($event, taskFilterProperty)\"\n                            (dateChanged)=\"onDateRangeFilterChanged($event, taskFilterProperty)\" />\n                        <adf-cloud-people\n                            class=\"{{ 'adf-edit-task-filter-' + taskFilterProperty.key }}\"\n                            *ngIf=\"taskFilterProperty.type === 'people'\"\n                            [preSelectUsers]=\"taskFilterProperty.value\"\n                            [title]=\"taskFilterProperty.label\"\n                            [validate]=\"true\"\n                            [appName]=\"appName\"\n                            [mode]=\"taskFilterProperty.selectionMode\"\n                            (changedUsers)=\"onChangedUser($event, taskFilterProperty)\" />\n\n                        <adf-cloud-task-assignment-filter\n                            *ngIf=\"taskFilterProperty.type === 'assignment'\"\n                            [taskFilterProperty]=\"taskFilterProperty\"\n                            [status]=\"selectedStatus\"\n                            [appName]=\"appName\"\n                            (assignedUsersChange)=\"onAssignedUsersChange($event)\"\n                            (assignedGroupsChange)=\"onAssignedGroupsChange($event)\"\n                            (assignmentTypeChange)=\"onAssignmentTypeChange($event)\" />\n\n                    </ng-container>\n                </div>\n            </form>\n        </ng-container>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [".adf-edit-task-filter-checkbox{padding-top:10px;text-align:center;flex:1 23%}.adf-edit-task-filter-date-error-container{position:absolute;height:20px;margin-top:12px;width:100%}.adf-edit-task-filter-date-error-container>div{display:flex;flex-flow:row;justify-content:flex-start}.adf-edit-task-filter-date-error-container .adf-error-text{padding-right:8px;height:16px;width:auto}.adf-edit-task-filter-dateRange mat-grid-list{width:450px}.adf-cloud-edit-task-filter-loading-margin{margin-left:calc((100% - 100px)/2);margin-right:calc((100% - 100px)/2)}.adf-edit-task-filter-form{flex-flow:row wrap;display:flex;place-content:center flex-start;align-items:center}.adf-edit-task-filter-form :not(:last-child){margin-right:10px}.adf-edit-task-filter-form mat-form-field,.adf-edit-task-filter-form adf-cloud-people,.adf-edit-task-filter-form adf-cloud-task-assignment-filter{flex:1 1 23%}@media(max-width:599.9px){.adf-edit-task-filter-form{flex-flow:column}.adf-edit-task-filter-form :not(:last-child){margin-bottom:10px;margin-right:0}}.adf-edit-task-filter-header{height:48px}.adf-edit-task-filter-header__description{place-content:center space-between}.adf-form-field-input .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: MatExpansionModule }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatCheckboxModule }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DateRangeFilterComponent, selector: "adf-cloud-date-range-filter", inputs: ["processFilterProperty", "options"], outputs: ["dateChanged", "dateTypeChange"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "component", type: TaskAssignmentFilterCloudComponent, selector: "adf-cloud-task-assignment-filter", inputs: ["appName", "taskFilterProperty", "status"], outputs: ["assignedUsersChange", "assignedGroupsChange", "assignmentTypeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: EditTaskFilterCloudComponent, isStandalone: true, selector: "adf-cloud-edit-task-filter", usesInheritance: true, ngImport: i0, template: "<mat-accordion [hideToggle]=\"isLoading\" class=\"adf-edit-task-filter\">\n    <mat-expansion-panel (afterExpand)=\"onExpand()\" (closed)=\"onClose()\">\n        <mat-expansion-panel-header *ngIf=\"taskFilter\" id=\"adf-edit-task-filter-expansion-header\" class=\"adf-edit-task-filter-header\">\n            <ng-container *ngIf=\"!isLoading; else loadingTemplate\">\n                <mat-panel-title *ngIf=\"showTaskFilterName\" id=\"adf-edit-task-filter-title-id\" class=\"adf-edit-task-filter-header__title\"\n                    >{{taskFilter.name | translate}}</mat-panel-title>\n                <mat-panel-description class=\"adf-edit-task-filter-header__description\" id=\"adf-edit-task-filter-sub-title-id\">\n                    <span *ngIf=\"showTitle\">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>\n                    <div *ngIf=\"showFilterActions\" class=\"adf-cloud-edit-task-filter-actions\">\n                        <ng-container *ngIf=\"toggleFilterActions\">\n                            <button \n                                *ngFor=\"let filterAction of taskFilterActions\"\n                                mat-icon-button\n                                [title]=\"filterAction.tooltip | translate\"\n                                [attr.data-automation-id]=\"'adf-filter-action-' + filterAction.actionType\"\n                                [disabled]=\"isDisabledAction(filterAction)\"\n                                (click)=\"executeFilterActions(filterAction)\"\n                            >\n                                @if (filterAction.icon.includes(':')) {\n                                    <mat-icon [svgIcon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } @else {\n                                    <mat-icon [adf-icon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                }      \n                            </button>\n                        </ng-container>\n                    </div>\n                </mat-panel-description>\n            </ng-container>\n            <ng-template #loadingTemplate>\n                <div class=\"adf-cloud-edit-task-filter-loading-margin\">\n                    <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"30\" />\n                </div>\n            </ng-template>\n        </mat-expansion-panel-header>\n        <ng-container *ngIf=\"!isLoading;\">\n            <form *ngIf=\"editTaskFilterForm\" [formGroup]=\"editTaskFilterForm\" class=\"adf-edit-task-filter-content\">\n                <div class=\"adf-edit-task-filter-form\">\n                    <ng-container *ngFor=\"let taskFilterProperty of taskFilterProperties\">\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'select'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__select-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"taskFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\"\n                                (selectionChange)=\"onStatusChange($event)\">\n                                    <mat-option *ngFor=\"let propertyOption of taskFilterProperty.options\"\n                                        [value]=\"propertyOption.value\"\n                                        [attr.data-automation-id]=\"'adf-cloud-edit-task-property-options-' + taskFilterProperty.key\">\n                                        {{ propertyOption.label | translate }}\n                                    </mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                            *ngIf=\"taskFilterProperty.type === 'text'\"\n                            [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label class=\"adf-edit-task-filter-content__text-label\">{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   [formControlName]=\"taskFilterProperty.key\"\n                                   type=\"text\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\" />\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\"\n                                        class=\"adf-form-field-input\"\n                                        *ngIf=\"taskFilterProperty.type === 'date'\"\n                                        [attr.data-automation-id]=\"taskFilterProperty.key\">\n                            <mat-label>{{taskFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                   (keyup)=\"onDateChanged($any($event).target.value, taskFilterProperty)\"\n                                   (dateChange)=\"onDateChanged($event.value, taskFilterProperty)\"\n                                   [matDatepicker]=\"dateController\"\n                                   [placeholder]=\"taskFilterProperty.label | translate\"\n                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-' + taskFilterProperty.key\">\n                            <mat-datepicker-toggle matSuffix\n                                                   [for]=\"dateController\"\n                                                   [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-toggle-' + taskFilterProperty.key\" />\n                            <mat-datepicker #dateController\n                                            [attr.data-automation-id]=\"'adf-cloud-edit-task-property-date-picker-' + taskFilterProperty.key\" />\n                            @if (hasError(taskFilterProperty)) {\n                                <mat-error>\n                                    <mat-icon class=\"adf-error-icon\">error_outline</mat-icon>\n                                    <span class=\"adf-error-text\">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</span>\n                                </mat-error>\n                            }\n                        </mat-form-field>\n                        <div class=\"adf-edit-task-filter-checkbox\"\n                             *ngIf=\"taskFilterProperty.type === 'checkbox'\">\n                            <mat-checkbox\n                                          [formControlName]=\"taskFilterProperty.key\"\n                                          [attr.data-automation-id]=\"taskFilterProperty.key\"\n                            >{{taskFilterProperty.label | translate}}</mat-checkbox>\n                        </div>\n\n                        <adf-cloud-date-range-filter #dateRange\n                            *ngIf=\"taskFilterProperty.type === 'date-range'\"\n                            [processFilterProperty]=\"taskFilterProperty\"\n                            [options]=\"taskFilterProperty.dateFilterOptions\"\n                            (dateTypeChange)=\"onDateTypeChange($event, taskFilterProperty)\"\n                            (dateChanged)=\"onDateRangeFilterChanged($event, taskFilterProperty)\" />\n                        <adf-cloud-people\n                            class=\"{{ 'adf-edit-task-filter-' + taskFilterProperty.key }}\"\n                            *ngIf=\"taskFilterProperty.type === 'people'\"\n                            [preSelectUsers]=\"taskFilterProperty.value\"\n                            [title]=\"taskFilterProperty.label\"\n                            [validate]=\"true\"\n                            [appName]=\"appName\"\n                            [mode]=\"taskFilterProperty.selectionMode\"\n                            (changedUsers)=\"onChangedUser($event, taskFilterProperty)\" />\n\n                        <adf-cloud-task-assignment-filter\n                            *ngIf=\"taskFilterProperty.type === 'assignment'\"\n                            [taskFilterProperty]=\"taskFilterProperty\"\n                            [status]=\"selectedStatus\"\n                            [appName]=\"appName\"\n                            (assignedUsersChange)=\"onAssignedUsersChange($event)\"\n                            (assignedGroupsChange)=\"onAssignedGroupsChange($event)\"\n                            (assignmentTypeChange)=\"onAssignmentTypeChange($event)\" />\n\n                    </ng-container>\n                </div>\n            </form>\n        </ng-container>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [".adf-edit-task-filter-checkbox{padding-top:10px;text-align:center;flex:1 23%}.adf-edit-task-filter-date-error-container{position:absolute;height:20px;margin-top:12px;width:100%}.adf-edit-task-filter-date-error-container>div{display:flex;flex-flow:row;justify-content:flex-start}.adf-edit-task-filter-date-error-container .adf-error-text{padding-right:8px;height:16px;width:auto}.adf-edit-task-filter-dateRange mat-grid-list{width:450px}.adf-cloud-edit-task-filter-loading-margin{margin-left:calc((100% - 100px)/2);margin-right:calc((100% - 100px)/2)}.adf-edit-task-filter-form{flex-flow:row wrap;display:flex;place-content:center flex-start;align-items:center}.adf-edit-task-filter-form :not(:last-child){margin-right:10px}.adf-edit-task-filter-form mat-form-field,.adf-edit-task-filter-form adf-cloud-people,.adf-edit-task-filter-form adf-cloud-task-assignment-filter{flex:1 1 23%}@media(max-width:599.9px){.adf-edit-task-filter-form{flex-flow:column}.adf-edit-task-filter-form :not(:last-child){margin-bottom:10px;margin-right:0}}.adf-edit-task-filter-header{height:48px}.adf-edit-task-filter-header__description{place-content:center space-between}.adf-form-field-input .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: MatExpansionModule }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: MatCheckboxModule }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DateRangeFilterComponent, selector: "adf-cloud-date-range-filter", inputs: ["processFilterProperty", "options"], outputs: ["dateChanged", "dateTypeChange"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "component", type: TaskAssignmentFilterCloudComponent, selector: "adf-cloud-task-assignment-filter", inputs: ["appName", "taskFilterProperty", "status"], outputs: ["assignedUsersChange", "assignedGroupsChange", "assignmentTypeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: EditTaskFilterCloudComponent, decorators: [{
             type: Component,
@@ -7466,7 +7466,7 @@ class FormCloudComponent extends FormBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FormCloudComponent, isStandalone: true, selector: "adf-cloud-form", inputs: { appName: "appName", appVersion: "appVersion", formId: "formId", processInstanceId: "processInstanceId", taskId: "taskId", data: "data", displayModeConfigurations: "displayModeConfigurations", showCompleteButton: "showCompleteButton", customSaveButtonText: "customSaveButtonText", customCompleteButtonText: "customCompleteButtonText", enableParentVisibilityCheck: "enableParentVisibilityCheck", form: "form" }, outputs: { formSaved: "formSaved", formCompleted: "formCompleted", formLoaded: "formLoaded", formDataRefreshed: "formDataRefreshed", formContentClicked: "formContentClicked", displayModeOn: "displayModeOn", displayModeOff: "displayModeOff" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [FormCloudSpinnerService], viewQueries: [{ propertyName: "formRenderer", first: true, predicate: FormRendererComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hasForm()) {\n    <div>\n        <ng-content select=\"[empty-form]\" />\n    </div>\n} @else {\n    <div\n        class=\"adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container\"\n        [style]=\"formStyle\"\n    >\n        <div\n            class=\"adf-cloud-form-content\"\n            [class.adf-cloud-form-content-standalone-fullscreen]=\"displayMode === 'standalone' && displayConfiguration?.options?.fullscreen\"\n            [class.adf-cloud-form-content-toolbar]=\"!!displayConfiguration?.options?.displayToolbar\"\n            [cdkTrapFocus]=\"displayConfiguration?.options?.trapFocus\"\n            cdkTrapFocusAutoCapture>\n            @if (displayConfiguration?.options?.displayToolbar) {\n                <adf-toolbar class=\"adf-cloud-form-toolbar\">\n                    <div class=\"adf-cloud-form__form-title\">\n                        <span class=\"adf-cloud-form__display-name\" [title]=\"form.taskName\">\n                            {{ form.taskName }}\n                            @if (!form.taskName) {\n                                {{ 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}\n                            }\n                        </span>\n                    </div>\n\n                    @if (displayConfiguration?.options?.displayCloseButton) {\n                        <adf-toolbar-divider />\n                        <button\n                            class=\"adf-cloud-form-close-button\"\n                            data-automation-id=\"adf-toolbar-right-back\"\n                            [attr.aria-label]=\"'ADF_VIEWER.ACTIONS.CLOSE' | translate\"\n                            [attr.data-automation-id]=\"'adf-cloud-form-close-button'\"\n                            [title]=\"'ADF_VIEWER.ACTIONS.CLOSE' | translate\"\n                            mat-icon-button\n                            (click)=\"switchToDisplayMode()\"\n                        >\n                            <mat-icon adf-icon=\"close\" />\n                        </button>\n                    }\n                </adf-toolbar>\n            }\n\n            <mat-card\n                appearance=\"outlined\"\n                class=\"adf-cloud-form-content-card\"\n                [class.adf-cloud-form-content-card-fullscreen]=\"displayMode === 'fullScreen'\"\n                [class.adf-cloud-form-content-card-fullscreen-toolbar]=\"displayMode === 'fullScreen' && displayConfiguration?.options?.displayToolbar\"\n            >\n                <div class=\"adf-cloud-form-content-card-container\">\n                    @if (showTitle || showRefreshButton || showValidationIcon) {\n                        <mat-card-header>\n                            <mat-card-title>\n                                <h4>\n                                    @if (showValidationIcon) {\n                                        <div class=\"adf-form-validation-button\">\n                                            @if (form.isValid) {\n                                                <i id=\"adf-valid-form-icon\" class=\"material-icons\">check_circle</i>\n                                            } @else {\n                                                <i id=\"adf-invalid-form-icon\" class=\"material-icons adf-invalid-color\">error</i>\n                                            }\n                                        </div>\n                                    }\n                                    @if (!displayConfiguration?.options?.fullscreen && findDisplayConfiguration('fullScreen')) {\n                                        <div class=\"adf-cloud-form-fullscreen-button\">\n                                            <button\n                                                mat-icon-button\n                                                (click)=\"switchToDisplayMode('fullScreen')\"\n                                                [attr.data-automation-id]=\"'adf-cloud-form-fullscreen-button'\"\n                                            >\n                                                <mat-icon adf-icon=\"fullscreen\" />\n                                            </button>\n                                        </div>\n                                    }\n                                    @if (showRefreshButton) {\n                                        <div class=\"adf-cloud-form-reload-button\" [title]=\"'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate\">\n                                            <button mat-icon-button (click)=\"onRefreshClicked()\" [attr.aria-label]=\"'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate\">\n                                                <mat-icon adf-icon=\"refresh\" />\n                                            </button>\n                                        </div>\n                                    }\n                                    @if (isTitleEnabled()) {\n                                        <span class=\"adf-cloud-form-title\" [title]=\"form.taskName\">\n                                            {{ form.taskName }}\n                                            @if (!form.taskName) {\n                                                {{ 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}\n                                            }\n                                        </span>\n                                    }\n                                </h4>\n                            </mat-card-title>\n                        </mat-card-header>\n                    }\n                    <mat-card-content class=\"adf-form-container-card-content\">\n                        <adf-form-renderer [formDefinition]=\"form\" [readOnly]=\"readOnly\" />\n                    </mat-card-content>\n                    @if (form.hasOutcomes() || shouldShowTabNavigation) {\n                        <mat-card-actions class=\"adf-cloud-form-content-card-actions\" [class.adf-has-tab-navigation]=\"shouldShowTabNavigation\" align=\"end\">\n                            @if (shouldShowTabNavigation) {\n                                <div class=\"adf-tab-navigation-buttons\">\n                                    <button\n                                        mat-button\n                                        [title]=\"'FORM.BUTTON.PREVIOUS_TAB_TITLE' | translate\"\n                                        [disabled]=\"!canNavigatePreviousTab\"\n                                        (click)=\"navigateToPreviousTab()\"\n                                        data-automation-id=\"tab-nav-previous-button\">\n                                        <mat-icon adf-icon=\"keyboard_arrow_left\" />\n                                        {{ 'FORM.BUTTON.PREVIOUS_TAB' | translate }}\n                                    </button>\n                                    <button\n                                        mat-button\n                                        [title]=\"'FORM.BUTTON.NEXT_TAB_TITLE' | translate\"\n                                        [disabled]=\"!canNavigateNextTab\"\n                                        (click)=\"navigateToNextTab()\"\n                                        data-automation-id=\"tab-nav-next-button\">\n                                        {{ 'FORM.BUTTON.NEXT_TAB' | translate }}\n                                        <mat-icon adf-icon=\"keyboard_arrow_right\" iconPositionEnd />\n                                    </button>\n                                </div>\n                                <span class=\"adf-tab-navigation-divider\" aria-hidden=\"true\"></span>\n                            }\n                            <div class=\"adf-cloud-form-outcome-buttons\">\n                                <ng-content select=\"adf-cloud-form-custom-outcomes\" />\n                                @for (outcome of visibleOutcomes; track outcome.name) {\n                                    <button\n                                        [id]=\"'adf-form-' + outcome.name | formatSpace\"\n                                        mat-button\n                                        [disabled]=\"!isOutcomeButtonEnabled(outcome)\"\n                                        class=\"adf-cloud-form-custom-outcome-button\"\n                                        (click)=\"onOutcomeClicked(outcome)\"\n                                    >\n                                        {{ getCustomOutcomeButtonText(outcome) || (outcome.name | translate | uppercase) }}\n                                    </button>\n                                }\n                            </div>\n                        </mat-card-actions>\n                    }\n                </div>\n            </mat-card>\n        </div>\n    </div>\n}\n", styles: [".adf-full-screen,.adf-cloud-form-inline-container,.adf-cloud-form-container .adf-cloud-form-content{width:100%;height:100%}.adf-cloud-form-content-standalone-fullscreen{background-color:transparent;border-radius:14px}.adf-cloud-form-content-toolbar{padding-top:0}.adf-cloud-form-container{border-radius:14px}.adf-cloud-form-container .adf-cloud-form-content{flex:1;flex-direction:column;display:flex;position:relative}.adf-cloud-form-fullscreen-container{position:fixed;top:0;left:0;z-index:100000;background-color:var(--mat-sys-surface-container);display:block;height:100%;width:100vw;overflow-y:auto;border-radius:0 0 14px}.adf-cloud-form-fullscreen-container .adf-cloud-form-content{width:calc(100% - 80px);max-width:1366px;height:auto;margin:40px auto;border-radius:14px}.adf-cloud-form-inline-container .adf-cloud-form-content{border-radius:14px}.adf-cloud-form-fullscreen-button{position:absolute;right:70px;top:30px}.adf-cloud-form__display-name{font-size:var(--mat-sys-title-small-size);opacity:.87;line-height:1.5;letter-spacing:-.4px;font-weight:400;font-style:normal;font-stretch:normal;max-width:400px;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle}.adf-cloud-form__form-title{text-align:center;flex:1 1 auto}.adf-cloud-form-content-card{padding-bottom:2rem;overflow-y:auto;position:static;height:70%;border-radius:14px}.adf-cloud-form-content-card-fullscreen{padding-top:0;height:100%;width:100%;position:relative}.adf-cloud-form-content-card-fullscreen-toolbar{border-radius:0 0 14px 14px}.adf-cloud-form-content-card-fullscreen-container{display:flex;flex-direction:column;height:100%}.adf-cloud-form-content-card-fullscreen-container .mat-mdc-card-content{height:100%;overflow:hidden auto}.adf-cloud-form-content-card-container .adf-form-container-card-content{padding-left:1%;padding-right:1%}.adf-cloud-form-sidebars{display:flex;flex:1 1 auto}.adf-cloud-form-sidebars adf-viewer-render{order:1;flex:1 1 auto;display:flex}.adf-cloud-form .adf-label{white-space:normal}.adf-cloud-form-content-card-actions.adf-has-tab-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}@media(max-width:599.9px){.adf-cloud-form-content-card-actions.adf-has-tab-navigation{flex-direction:column;align-items:stretch}}.adf-tab-navigation-buttons{display:flex;align-items:center;gap:4px}@media(max-width:599.9px){.adf-tab-navigation-buttons{justify-content:center}}.adf-tab-navigation-divider{width:1px;height:24px;background-color:var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}@media(max-width:599.9px){.adf-tab-navigation-divider{display:none}}.adf-cloud-form-outcome-buttons{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: FormRendererComponent, selector: "adf-form-renderer", inputs: ["formDefinition", "readOnly"] }, { 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: "component", type: ToolbarDividerComponent, selector: "adf-toolbar-divider" }, { kind: "component", type: ToolbarComponent, selector: "adf-toolbar", inputs: ["title"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatSpacePipe, name: "formatSpace" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FormCloudComponent, isStandalone: true, selector: "adf-cloud-form", inputs: { appName: "appName", appVersion: "appVersion", formId: "formId", processInstanceId: "processInstanceId", taskId: "taskId", data: "data", displayModeConfigurations: "displayModeConfigurations", showCompleteButton: "showCompleteButton", customSaveButtonText: "customSaveButtonText", customCompleteButtonText: "customCompleteButtonText", enableParentVisibilityCheck: "enableParentVisibilityCheck", form: "form" }, outputs: { formSaved: "formSaved", formCompleted: "formCompleted", formLoaded: "formLoaded", formDataRefreshed: "formDataRefreshed", formContentClicked: "formContentClicked", displayModeOn: "displayModeOn", displayModeOff: "displayModeOff" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [FormCloudSpinnerService], viewQueries: [{ propertyName: "formRenderer", first: true, predicate: FormRendererComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!hasForm()) {\n    <div>\n        <ng-content select=\"[empty-form]\" />\n    </div>\n} @else {\n    <div\n        class=\"adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container\"\n        [style]=\"formStyle\"\n    >\n        <div\n            class=\"adf-cloud-form-content\"\n            [class.adf-cloud-form-content-standalone-fullscreen]=\"displayMode === 'standalone' && displayConfiguration?.options?.fullscreen\"\n            [class.adf-cloud-form-content-toolbar]=\"!!displayConfiguration?.options?.displayToolbar\"\n            [cdkTrapFocus]=\"displayConfiguration?.options?.trapFocus\"\n            cdkTrapFocusAutoCapture>\n            @if (displayConfiguration?.options?.displayToolbar) {\n                <adf-toolbar class=\"adf-cloud-form-toolbar\">\n                    <div class=\"adf-cloud-form__form-title\">\n                        <span class=\"adf-cloud-form__display-name\" [title]=\"form.taskName\">\n                            {{ form.taskName }}\n                            @if (!form.taskName) {\n                                {{ 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}\n                            }\n                        </span>\n                    </div>\n\n                    @if (displayConfiguration?.options?.displayCloseButton) {\n                        <adf-toolbar-divider />\n                        <button\n                            class=\"adf-cloud-form-close-button\"\n                            data-automation-id=\"adf-toolbar-right-back\"\n                            [attr.aria-label]=\"'ADF_VIEWER.ACTIONS.CLOSE' | translate\"\n                            [attr.data-automation-id]=\"'adf-cloud-form-close-button'\"\n                            [title]=\"'ADF_VIEWER.ACTIONS.CLOSE' | translate\"\n                            mat-icon-button\n                            (click)=\"switchToDisplayMode()\"\n                        >\n                            <mat-icon adf-icon=\"close\" />\n                        </button>\n                    }\n                </adf-toolbar>\n            }\n\n            <mat-card\n                appearance=\"outlined\"\n                class=\"adf-cloud-form-content-card\"\n                [class.adf-cloud-form-content-card-fullscreen]=\"displayMode === 'fullScreen'\"\n                [class.adf-cloud-form-content-card-fullscreen-toolbar]=\"displayMode === 'fullScreen' && displayConfiguration?.options?.displayToolbar\"\n            >\n                <div class=\"adf-cloud-form-content-card-container\">\n                    @if (showTitle || showRefreshButton || showValidationIcon) {\n                        <mat-card-header>\n                            <mat-card-title>\n                                <h4>\n                                    @if (showValidationIcon) {\n                                        <div class=\"adf-form-validation-button\">\n                                            @if (form.isValid) {\n                                                <i id=\"adf-valid-form-icon\" class=\"material-icons\">check_circle</i>\n                                            } @else {\n                                                <i id=\"adf-invalid-form-icon\" class=\"material-icons adf-invalid-color\">error</i>\n                                            }\n                                        </div>\n                                    }\n                                    @if (!displayConfiguration?.options?.fullscreen && findDisplayConfiguration('fullScreen')) {\n                                        <div class=\"adf-cloud-form-fullscreen-button\">\n                                            <button\n                                                mat-icon-button\n                                                (click)=\"switchToDisplayMode('fullScreen')\"\n                                                [attr.data-automation-id]=\"'adf-cloud-form-fullscreen-button'\"\n                                            >\n                                                <mat-icon adf-icon=\"fullscreen\" />\n                                            </button>\n                                        </div>\n                                    }\n                                    @if (showRefreshButton) {\n                                        <div class=\"adf-cloud-form-reload-button\" [title]=\"'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate\">\n                                            <button mat-icon-button (click)=\"onRefreshClicked()\" [attr.aria-label]=\"'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate\">\n                                                <mat-icon adf-icon=\"refresh\" />\n                                            </button>\n                                        </div>\n                                    }\n                                    @if (isTitleEnabled()) {\n                                        <span class=\"adf-cloud-form-title\" [title]=\"form.taskName\">\n                                            {{ form.taskName }}\n                                            @if (!form.taskName) {\n                                                {{ 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}\n                                            }\n                                        </span>\n                                    }\n                                </h4>\n                            </mat-card-title>\n                        </mat-card-header>\n                    }\n                    <mat-card-content class=\"adf-form-container-card-content\">\n                        <adf-form-renderer [formDefinition]=\"form\" [readOnly]=\"readOnly\" />\n                    </mat-card-content>\n                    @if (form.hasOutcomes() || shouldShowTabNavigation) {\n                        <mat-card-actions class=\"adf-cloud-form-content-card-actions\" [class.adf-has-tab-navigation]=\"shouldShowTabNavigation\" align=\"end\">\n                            @if (shouldShowTabNavigation) {\n                                <div class=\"adf-tab-navigation-buttons\">\n                                    <button\n                                        mat-button\n                                        [title]=\"'FORM.BUTTON.PREVIOUS_TAB_TITLE' | translate\"\n                                        [disabled]=\"!canNavigatePreviousTab\"\n                                        (click)=\"navigateToPreviousTab()\"\n                                        data-automation-id=\"tab-nav-previous-button\">\n                                        <mat-icon adf-icon=\"keyboard_arrow_left\" />\n                                        {{ 'FORM.BUTTON.PREVIOUS_TAB' | translate }}\n                                    </button>\n                                    <button\n                                        mat-button\n                                        [title]=\"'FORM.BUTTON.NEXT_TAB_TITLE' | translate\"\n                                        [disabled]=\"!canNavigateNextTab\"\n                                        (click)=\"navigateToNextTab()\"\n                                        data-automation-id=\"tab-nav-next-button\">\n                                        {{ 'FORM.BUTTON.NEXT_TAB' | translate }}\n                                        <mat-icon adf-icon=\"keyboard_arrow_right\" iconPositionEnd />\n                                    </button>\n                                </div>\n                                <span class=\"adf-tab-navigation-divider\" aria-hidden=\"true\"></span>\n                            }\n                            <div class=\"adf-cloud-form-outcome-buttons\">\n                                <ng-content select=\"adf-cloud-form-custom-outcomes\" />\n                                @for (outcome of visibleOutcomes; track outcome.name) {\n                                    <button\n                                        [id]=\"'adf-form-' + outcome.name | formatSpace\"\n                                        mat-button\n                                        [disabled]=\"!isOutcomeButtonEnabled(outcome)\"\n                                        class=\"adf-cloud-form-custom-outcome-button\"\n                                        (click)=\"onOutcomeClicked(outcome)\"\n                                    >\n                                        {{ getCustomOutcomeButtonText(outcome) || (outcome.name | translate | uppercase) }}\n                                    </button>\n                                }\n                            </div>\n                        </mat-card-actions>\n                    }\n                </div>\n            </mat-card>\n        </div>\n    </div>\n}\n", styles: [".adf-full-screen,.adf-cloud-form-inline-container,.adf-cloud-form-container .adf-cloud-form-content{width:100%;height:100%}.adf-cloud-form-content-standalone-fullscreen{background-color:transparent;border-radius:14px}.adf-cloud-form-content-toolbar{padding-top:0}.adf-cloud-form-container{border-radius:14px}.adf-cloud-form-container .adf-cloud-form-content{flex:1;flex-direction:column;display:flex;position:relative}.adf-cloud-form-fullscreen-container{position:fixed;top:0;left:0;z-index:100000;background-color:var(--mat-sys-surface-container);display:block;height:100%;width:100vw;overflow-y:auto;border-radius:0 0 14px}.adf-cloud-form-fullscreen-container .adf-cloud-form-content{width:calc(100% - 80px);max-width:1366px;height:auto;margin:40px auto;border-radius:14px}.adf-cloud-form-inline-container .adf-cloud-form-content{border-radius:14px}.adf-cloud-form-fullscreen-button{position:absolute;right:70px;top:30px}.adf-cloud-form__display-name{font-size:var(--mat-sys-title-small-size);opacity:.87;line-height:1.5;letter-spacing:-.4px;font-weight:400;font-style:normal;font-stretch:normal;max-width:400px;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle}.adf-cloud-form__form-title{text-align:center;flex:1 1 auto}.adf-cloud-form-content-card{padding-bottom:2rem;overflow-y:auto;position:static;height:70%;border-radius:14px}.adf-cloud-form-content-card-fullscreen{padding-top:0;height:100%;width:100%;position:relative}.adf-cloud-form-content-card-fullscreen-toolbar{border-radius:0 0 14px 14px}.adf-cloud-form-content-card-fullscreen-container{display:flex;flex-direction:column;height:100%}.adf-cloud-form-content-card-fullscreen-container .mat-mdc-card-content{height:100%;overflow:hidden auto}.adf-cloud-form-content-card-container .adf-form-container-card-content{padding-left:1%;padding-right:1%}.adf-cloud-form-sidebars{display:flex;flex:1 1 auto}.adf-cloud-form-sidebars adf-viewer-render{order:1;flex:1 1 auto;display:flex}.adf-cloud-form .adf-label{white-space:normal}.adf-cloud-form-content-card-actions.adf-has-tab-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}@media(max-width:599.9px){.adf-cloud-form-content-card-actions.adf-has-tab-navigation{flex-direction:column;align-items:stretch}}.adf-tab-navigation-buttons{display:flex;align-items:center;gap:4px}@media(max-width:599.9px){.adf-tab-navigation-buttons{justify-content:center}}.adf-tab-navigation-divider{width:1px;height:24px;background-color:var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}@media(max-width:599.9px){.adf-tab-navigation-divider{display:none}}.adf-cloud-form-outcome-buttons{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: FormRendererComponent, selector: "adf-form-renderer", inputs: ["formDefinition", "readOnly"] }, { 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: "component", type: ToolbarDividerComponent, selector: "adf-toolbar-divider" }, { kind: "component", type: ToolbarComponent, selector: "adf-toolbar", inputs: ["title"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormatSpacePipe, name: "formatSpace" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormCloudComponent, decorators: [{
             type: Component,
@@ -7866,7 +7866,7 @@ class UploadCloudWidgetComponent extends WidgetComponent {
         return this.field.form.getProcessVariableValue(this.field.params.fileSource?.destinationFolderPath?.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadCloudWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: UploadCloudWidgetComponent, isStandalone: true, selector: "upload-cloud-widget", outputs: { error: "error" }, host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploadFiles"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"adf-upload-widget {{field.className}}\" [class.adf-invalid]=\"!field.isValid\" [class.adf-readonly]=\"field.readOnly\">\n    <label class=\"adf-label\" [attr.for]=\"field.id\"\n        >{{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n    >\n    <div class=\"adf-cloud-upload-widget-container\">\n        <div>\n            <mat-list *ngIf=\"hasFile\">\n                <mat-list-item class=\"adf-upload-files-row\" *ngFor=\"let file of uploadedFiles\">\n                    <img\n                        matListItemLine\n                        class=\"adf-upload-widget__icon\"\n                        [id]=\"'file-'+file.id+'-icon'\"\n                        [src]=\"getIcon(file.content.mimeType)\"\n                        [alt]=\"mimeTypeIcon\"\n                        (click)=\"fileClicked(file)\"\n                        (keyup.enter)=\"fileClicked(file)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                    />\n                    <span\n                        class=\"adf-upload-widget__button adf-file\"\n                        matLine\n                        id=\"{{'file-'+file.id}}\"\n                        (click)=\"fileClicked(file)\"\n                        (keyup.enter)=\"fileClicked(file)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        >{{file.name}}</span\n                    >\n                    <button\n                        *ngIf=\"!field.readOnly\"\n                        mat-icon-button\n                        [id]=\"'file-'+file.id+'-remove'\"\n                        (click)=\"removeFile(file);\"\n                        (keyup.enter)=\"removeFile(file);\"\n                    >\n                        <mat-icon class=\"mat-24\" adf-icon=\"highlight_off\" />\n                    </button>\n                </mat-list-item>\n            </mat-list>\n        </div>\n\n        <div *ngIf=\"(!hasFile || multipleOption) && !field.readOnly\">\n            <button mat-raised-button (click)=\"uploadFiles.click()\" [title]=\"field.tooltip\">\n                {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon=\"file_upload\" />\n                <input #uploadFiles [multiple]=\"multipleOption\" type=\"file\" [id]=\"field.form.nodeId\" (change)=\"onFileChanged($event)\" />\n            </button>\n        </div>\n\n        <div *ngIf=\"!hasFile && field.readOnly\">{{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}</div>\n    </div>\n    <error-widget [error]=\"field.validationSummary\" />\n    <error-widget *ngIf=\"isInvalidFieldRequired()\" required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n</div>\n", styles: [".adf-cloud-upload-widget-container{margin-bottom:15px}.adf-cloud-upload-widget-container input{display:none}.adf-cloud-upload-widget{width:100%;word-break:break-all;padding:.4375em 0;border-top:.8438em solid transparent}.adf-cloud-upload-widget__icon{padding:6px;float:left;cursor:pointer}.adf-cloud-upload-widget__reset{margin-top:-2px}.adf-cloud-upload-files-row .adf-upload-widget__button{margin-bottom:0}\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: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { 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: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "ngmodule", type: MatLineModule }, { kind: "directive", type: i6$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: UploadCloudWidgetComponent, isStandalone: true, selector: "upload-cloud-widget", outputs: { error: "error" }, host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["uploadFiles"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"adf-upload-widget {{field.className}}\" [class.adf-invalid]=\"!field.isValid\" [class.adf-readonly]=\"field.readOnly\">\n    <label class=\"adf-label\" [attr.for]=\"field.id\"\n        >{{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n    >\n    <div class=\"adf-cloud-upload-widget-container\">\n        <div>\n            @if (hasFile) {\n                <mat-list>\n                    <mat-list-item class=\"adf-upload-files-row\" *ngFor=\"let file of uploadedFiles\">\n                        <img\n                            matListItemLine\n                            class=\"adf-upload-widget__icon\"\n                            [id]=\"'file-'+file.id+'-icon'\"\n                            [src]=\"getIcon(file.content.mimeType)\"\n                            [alt]=\"mimeTypeIcon\"\n                            (click)=\"fileClicked(file)\"\n                            (keyup.enter)=\"fileClicked(file)\"\n                            role=\"button\"\n                            tabindex=\"0\"\n                        />\n                        <span\n                            class=\"adf-upload-widget__button adf-file\"\n                            matLine\n                            id=\"{{'file-'+file.id}}\"\n                            (click)=\"fileClicked(file)\"\n                            (keyup.enter)=\"fileClicked(file)\"\n                            role=\"button\"\n                            tabindex=\"0\"\n                            >{{file.name}}</span\n                        >\n                        @if (!field.readOnly) {\n                            <button mat-icon-button [id]=\"'file-'+file.id+'-remove'\" (click)=\"removeFile(file);\" (keyup.enter)=\"removeFile(file);\">\n                                <mat-icon class=\"mat-24\" adf-icon=\"highlight_off\" />\n                            </button>\n                        }\n                    </mat-list-item>\n                </mat-list>\n            }\n        </div>\n\n        @if ((!hasFile || multipleOption) && !field.readOnly) {\n            <div>\n                <button mat-raised-button (click)=\"uploadFiles.click()\" [title]=\"field.tooltip\">\n                    {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon=\"file_upload\" />\n                    <input #uploadFiles [multiple]=\"multipleOption\" type=\"file\" [id]=\"field.form.nodeId\" (change)=\"onFileChanged($event)\" />\n                </button>\n            </div>\n        } @if (!hasFile && field.readOnly) {\n            <div>{{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}</div>\n        }\n    </div>\n    <error-widget [error]=\"field.validationSummary\" [required]=\"isInvalidFieldRequired() ? ('FORM.FIELD.REQUIRED' | translate) : ''\" />\n</div>\n", styles: [".adf-cloud-upload-widget-container{margin-bottom:15px}.adf-cloud-upload-widget-container input{display:none}.adf-cloud-upload-widget{width:100%;word-break:break-all;padding:.4375em 0;border-top:.8438em solid transparent}.adf-cloud-upload-widget__icon{padding:6px;float:left;cursor:pointer}.adf-cloud-upload-widget__reset{margin-top:-2px}.adf-cloud-upload-files-row .adf-upload-widget__button{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { 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: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "ngmodule", type: MatLineModule }, { kind: "directive", type: i6$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UploadCloudWidgetComponent, decorators: [{
             type: Component,
@@ -7880,7 +7880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         '(input)': 'event($event)',
                         '(invalid)': 'event($event)',
                         '(select)': 'event($event)'
-                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-upload-widget {{field.className}}\" [class.adf-invalid]=\"!field.isValid\" [class.adf-readonly]=\"field.readOnly\">\n    <label class=\"adf-label\" [attr.for]=\"field.id\"\n        >{{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n    >\n    <div class=\"adf-cloud-upload-widget-container\">\n        <div>\n            <mat-list *ngIf=\"hasFile\">\n                <mat-list-item class=\"adf-upload-files-row\" *ngFor=\"let file of uploadedFiles\">\n                    <img\n                        matListItemLine\n                        class=\"adf-upload-widget__icon\"\n                        [id]=\"'file-'+file.id+'-icon'\"\n                        [src]=\"getIcon(file.content.mimeType)\"\n                        [alt]=\"mimeTypeIcon\"\n                        (click)=\"fileClicked(file)\"\n                        (keyup.enter)=\"fileClicked(file)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                    />\n                    <span\n                        class=\"adf-upload-widget__button adf-file\"\n                        matLine\n                        id=\"{{'file-'+file.id}}\"\n                        (click)=\"fileClicked(file)\"\n                        (keyup.enter)=\"fileClicked(file)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        >{{file.name}}</span\n                    >\n                    <button\n                        *ngIf=\"!field.readOnly\"\n                        mat-icon-button\n                        [id]=\"'file-'+file.id+'-remove'\"\n                        (click)=\"removeFile(file);\"\n                        (keyup.enter)=\"removeFile(file);\"\n                    >\n                        <mat-icon class=\"mat-24\" adf-icon=\"highlight_off\" />\n                    </button>\n                </mat-list-item>\n            </mat-list>\n        </div>\n\n        <div *ngIf=\"(!hasFile || multipleOption) && !field.readOnly\">\n            <button mat-raised-button (click)=\"uploadFiles.click()\" [title]=\"field.tooltip\">\n                {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon=\"file_upload\" />\n                <input #uploadFiles [multiple]=\"multipleOption\" type=\"file\" [id]=\"field.form.nodeId\" (change)=\"onFileChanged($event)\" />\n            </button>\n        </div>\n\n        <div *ngIf=\"!hasFile && field.readOnly\">{{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}</div>\n    </div>\n    <error-widget [error]=\"field.validationSummary\" />\n    <error-widget *ngIf=\"isInvalidFieldRequired()\" required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n</div>\n", styles: [".adf-cloud-upload-widget-container{margin-bottom:15px}.adf-cloud-upload-widget-container input{display:none}.adf-cloud-upload-widget{width:100%;word-break:break-all;padding:.4375em 0;border-top:.8438em solid transparent}.adf-cloud-upload-widget__icon{padding:6px;float:left;cursor:pointer}.adf-cloud-upload-widget__reset{margin-top:-2px}.adf-cloud-upload-files-row .adf-upload-widget__button{margin-bottom:0}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-upload-widget {{field.className}}\" [class.adf-invalid]=\"!field.isValid\" [class.adf-readonly]=\"field.readOnly\">\n    <label class=\"adf-label\" [attr.for]=\"field.id\"\n        >{{ field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n    >\n    <div class=\"adf-cloud-upload-widget-container\">\n        <div>\n            @if (hasFile) {\n                <mat-list>\n                    <mat-list-item class=\"adf-upload-files-row\" *ngFor=\"let file of uploadedFiles\">\n                        <img\n                            matListItemLine\n                            class=\"adf-upload-widget__icon\"\n                            [id]=\"'file-'+file.id+'-icon'\"\n                            [src]=\"getIcon(file.content.mimeType)\"\n                            [alt]=\"mimeTypeIcon\"\n                            (click)=\"fileClicked(file)\"\n                            (keyup.enter)=\"fileClicked(file)\"\n                            role=\"button\"\n                            tabindex=\"0\"\n                        />\n                        <span\n                            class=\"adf-upload-widget__button adf-file\"\n                            matLine\n                            id=\"{{'file-'+file.id}}\"\n                            (click)=\"fileClicked(file)\"\n                            (keyup.enter)=\"fileClicked(file)\"\n                            role=\"button\"\n                            tabindex=\"0\"\n                            >{{file.name}}</span\n                        >\n                        @if (!field.readOnly) {\n                            <button mat-icon-button [id]=\"'file-'+file.id+'-remove'\" (click)=\"removeFile(file);\" (keyup.enter)=\"removeFile(file);\">\n                                <mat-icon class=\"mat-24\" adf-icon=\"highlight_off\" />\n                            </button>\n                        }\n                    </mat-list-item>\n                </mat-list>\n            }\n        </div>\n\n        @if ((!hasFile || multipleOption) && !field.readOnly) {\n            <div>\n                <button mat-raised-button (click)=\"uploadFiles.click()\" [title]=\"field.tooltip\">\n                    {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon=\"file_upload\" />\n                    <input #uploadFiles [multiple]=\"multipleOption\" type=\"file\" [id]=\"field.form.nodeId\" (change)=\"onFileChanged($event)\" />\n                </button>\n            </div>\n        } @if (!hasFile && field.readOnly) {\n            <div>{{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}</div>\n        }\n    </div>\n    <error-widget [error]=\"field.validationSummary\" [required]=\"isInvalidFieldRequired() ? ('FORM.FIELD.REQUIRED' | translate) : ''\" />\n</div>\n", styles: [".adf-cloud-upload-widget-container{margin-bottom:15px}.adf-cloud-upload-widget-container input{display:none}.adf-cloud-upload-widget{width:100%;word-break:break-all;padding:.4375em 0;border-top:.8438em solid transparent}.adf-cloud-upload-widget__icon{padding:6px;float:left;cursor:pointer}.adf-cloud-upload-widget__reset{margin-top:-2px}.adf-cloud-upload-files-row .adf-upload-widget__button{margin-bottom:0}\n"] }]
         }], propDecorators: { error: [{
                 type: Output
             }], fileInput: [{
@@ -7963,7 +7963,7 @@ class FilePropertiesTableCloudComponent {
         return this.field?.params?.menuOptions ? this.field.params.menuOptions[option] : option !== RETRIEVE_METADATA_OPTION$1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilePropertiesTableCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: FilePropertiesTableCloudComponent, isStandalone: true, selector: "adf-cloud-file-properties-table", inputs: { uploadedFiles: "uploadedFiles", hasFile: "hasFile", selectedNode: "selectedNode", field: "field", displayedColumns: "displayedColumns", mimeTypeIcon: "mimeTypeIcon" }, outputs: { rowClick: "rowClick", attachFileClick: "attachFileClick", downloadFile: "downloadFile", uploadNewFileVersion: "uploadNewFileVersion", contentModelFileHandler: "contentModelFileHandler", removeAttachFile: "removeAttachFile" }, providers: [LocalizedDatePipe], ngImport: i0, template: "<div class=\"adf-file-properties-table-container\">\n    <table mat-table [dataSource]=\"uploadedFiles\" class=\"adf-properties-table adf-file-properties-table mat-elevation-z0\" *ngIf=\"hasFile\">\n        <ng-container matColumnDef=\"icon\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td class=\"adf-file-properties-table-cell\" mat-cell *matCellDef=\"let element\">\n                <mat-icon matListItemLine class=\"adf-datatable-selected\" *ngIf=\"selectedNode && element.id === selectedNode.id\" (click)=\"onRowClicked(element)\" adf-icon=\"check_circle\" />\n                <img matListItemLine class=\"adf-attach-widget__icon\"\n                    *ngIf=\"!selectedNode || element.id !== selectedNode.id\" [id]=\"'file-'+element?.id+'-icon'\"\n                    (click)=\"onRowClicked(element)\"\n                    (keyup.enter)=\"onRowClicked(element)\"\n                    [src]=\"element.content ? getIcon(element.content.mimeType) : getIcon(element['mimeType'])\"\n                    [alt]=\"mimeTypeIcon\" role=\"button\" tabindex=\"0\" />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"fileName\">\n            <th mat-header-cell *matHeaderCellDef>{{ 'FORM.FIELD.FILE_NAME' | translate }}</th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let element\">\n                <span matLine id=\"{{'file-'+element?.id}}\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      class=\"adf-file\"\n                      (keyup.enter)=\"onAttachFileClicked(element)\"\n                      (click)=\"onAttachFileClicked(element)\"\n                >{{ element.name }}</span>\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"title\">\n            <th mat-header-cell *matHeaderCellDef>{{ 'FORM.FIELD.TITLE' | translate }}</th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let element\">{{ element.title }}</td>\n        </ng-container>\n\n        <ng-container *ngFor=\"let prop of field?.params?.displayableCMProperties\" [matColumnDef]=\"prop.name\">\n            <th mat-header-cell *matHeaderCellDef>{{prop.title ? prop.title : prop.name | titlecase }}</th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let row\">\n                <span matLine id=\"{{'fileProperty-'+row?.id+'-'+prop?.name}}\" role=\"button\" tabindex=\"0\"\n                      (keyup.enter)=\"onRowClicked(row)\"\n                      (click)=\"onRowClicked(row)\">{{ getColumnValue(row, prop) }}</span>\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let element\">\n                <button id=\"{{'file-'+element?.id+'-option-menu'}}\" mat-icon-button [matMenuTriggerFor]=\"fileActionMenu\"\n                        *ngIf=\"!!element.content?.mimeType\"\n                        [attr.aria-label]=\"'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate\">\n                    <mat-icon adf-icon=\"more_vert\" />\n                </button>\n                <mat-menu #fileActionMenu=\"matMenu\" xPosition=\"before\">\n                    <button *ngIf=\"displayMenuOption('show') && !!element.content?.mimeType\"\n                            id=\"{{'file-'+element?.id+'-show-file'}}\" mat-menu-item\n                            (click)=\"onAttachFileClicked(element)\">\n                        <mat-icon adf-icon=\"visibility\" />\n                        <span>{{ 'FORM.FIELD.VIEW_FILE' | translate }}</span>\n                    </button>\n                    <button *ngIf=\"displayMenuOption('download') && !!element.content?.mimeType\"\n                            id=\"{{'file-'+element?.id+'-download-file'}}\" mat-menu-item\n                            (click)=\"downloadContent(element)\">\n                        <mat-icon adf-icon=\"file_download\" />\n                        <span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>\n                    </button>\n                    <button *ngIf=\"displayMenuOption('retrieveMetadata') && !!element.content?.mimeType\"\n                            id=\"{{'file-'+element?.id+'-retrieve-file-metadata'}}\" mat-menu-item\n                            (click)=\"contentModelFormFileHandler(element)\">\n                        <mat-icon class=\"mat-24\" adf-icon=\"low_priority\" />\n                        <span>{{ 'ADF_CLOUD_FORM_COMPONENT.RETRIEVE_METADATA' | translate }}</span>\n                    </button>\n                    <button *ngIf=\"!field.readOnly && displayMenuOption('remove')\"\n                            mat-menu-item\n                            [id]=\"'file-'+element?.id+'-remove'\"\n                            (click)=\"onRemoveAttachFile(element);\" (keyup.enter)=\"onRemoveAttachFile(element);\">\n                        <mat-icon class=\"mat-24\" adf-icon=\"highlight_off\" />\n                        <span>{{ 'FORM.FIELD.REMOVE_FILE' | translate }}</span>\n                    </button>\n                    <div *ngIf=\"displayMenuOption('newVersion')\">\n                        <button [adf-upload]=\"true\" [mode]=\"['click']\"\n                                (upload-files)=\"onUploadNewFileVersion($event, element);\"\n                                id=\"{{'file-'+ element?.id +'-upload-new-version'}}\" mat-menu-item>\n                            <mat-icon class=\"mat-24\" adf-icon=\"file_upload\" />\n                            <span>{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TITLE' | translate }}</span>\n                        </button>\n                    </div>\n                </mat-menu>\n            </td>\n        </ng-container>\n        <tr mat-header-row class=\"adf-file-properties-table-header-row\" *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n</div>\n", styles: [".adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table{width:100%;border:1px solid var(--mat-sys-outline-variant);box-shadow:none}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table .adf-file{cursor:pointer}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table .adf-file:hover{text-decoration:underline}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table .adf-datatable-selected{padding:6px}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table tr.adf-file-properties-table-header-row{height:32px}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table th{font-weight:700;padding-right:0}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table td{max-width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:0}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table td.adf-file-properties-table-cell:first-of-type,.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table td.adf-file-properties-table-cell:last-of-type{width:18%}\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: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: UploadDirective, selector: "[adf-upload]", inputs: ["adf-upload", "adf-upload-data", "mode", "multiple", "accept", "directory"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatLineModule }, { kind: "directive", type: i6$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: FilePropertiesTableCloudComponent, isStandalone: true, selector: "adf-cloud-file-properties-table", inputs: { uploadedFiles: "uploadedFiles", hasFile: "hasFile", selectedNode: "selectedNode", field: "field", displayedColumns: "displayedColumns", mimeTypeIcon: "mimeTypeIcon" }, outputs: { rowClick: "rowClick", attachFileClick: "attachFileClick", downloadFile: "downloadFile", uploadNewFileVersion: "uploadNewFileVersion", contentModelFileHandler: "contentModelFileHandler", removeAttachFile: "removeAttachFile" }, providers: [LocalizedDatePipe], ngImport: i0, template: "<div class=\"adf-file-properties-table-container\">\n    <table mat-table [dataSource]=\"uploadedFiles\" class=\"adf-properties-table adf-file-properties-table mat-elevation-z0\" *ngIf=\"hasFile\">\n        <ng-container matColumnDef=\"icon\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td class=\"adf-file-properties-table-cell\" mat-cell *matCellDef=\"let element\">\n                <mat-icon matListItemLine class=\"adf-datatable-selected\" *ngIf=\"selectedNode && element.id === selectedNode.id\" (click)=\"onRowClicked(element)\" adf-icon=\"check_circle\" />\n                <img matListItemLine class=\"adf-attach-widget__icon\"\n                    *ngIf=\"!selectedNode || element.id !== selectedNode.id\" [id]=\"'file-'+element?.id+'-icon'\"\n                    (click)=\"onRowClicked(element)\"\n                    (keyup.enter)=\"onRowClicked(element)\"\n                    [src]=\"element.content ? getIcon(element.content.mimeType) : getIcon(element['mimeType'])\"\n                    [alt]=\"mimeTypeIcon\" role=\"button\" tabindex=\"0\" />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"fileName\">\n            <th mat-header-cell *matHeaderCellDef>{{ 'FORM.FIELD.FILE_NAME' | translate }}</th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let element\">\n                <span matLine id=\"{{'file-'+element?.id}}\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      class=\"adf-file\"\n                      (keyup.enter)=\"onAttachFileClicked(element)\"\n                      (click)=\"onAttachFileClicked(element)\"\n                >{{ element.name }}</span>\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"title\">\n            <th mat-header-cell *matHeaderCellDef>{{ 'FORM.FIELD.TITLE' | translate }}</th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let element\">{{ element.title }}</td>\n        </ng-container>\n\n        <ng-container *ngFor=\"let prop of field?.params?.displayableCMProperties\" [matColumnDef]=\"prop.name\">\n            <th mat-header-cell *matHeaderCellDef>{{prop.title ? prop.title : prop.name | titlecase }}</th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let row\">\n                <span matLine id=\"{{'fileProperty-'+row?.id+'-'+prop?.name}}\" role=\"button\" tabindex=\"0\"\n                      (keyup.enter)=\"onRowClicked(row)\"\n                      (click)=\"onRowClicked(row)\">{{ getColumnValue(row, prop) }}</span>\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell class=\"adf-file-properties-table-cell\" *matCellDef=\"let element\">\n                <button id=\"{{'file-'+element?.id+'-option-menu'}}\" mat-icon-button [matMenuTriggerFor]=\"fileActionMenu\"\n                        *ngIf=\"!!element.content?.mimeType\"\n                        [attr.aria-label]=\"'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate\">\n                    <mat-icon adf-icon=\"more_vert\" />\n                </button>\n                <mat-menu #fileActionMenu=\"matMenu\" xPosition=\"before\">\n                    <button *ngIf=\"displayMenuOption('show') && !!element.content?.mimeType\"\n                            id=\"{{'file-'+element?.id+'-show-file'}}\" mat-menu-item\n                            (click)=\"onAttachFileClicked(element)\">\n                        <mat-icon adf-icon=\"visibility\" />\n                        <span>{{ 'FORM.FIELD.VIEW_FILE' | translate }}</span>\n                    </button>\n                    <button *ngIf=\"displayMenuOption('download') && !!element.content?.mimeType\"\n                            id=\"{{'file-'+element?.id+'-download-file'}}\" mat-menu-item\n                            (click)=\"downloadContent(element)\">\n                        <mat-icon adf-icon=\"file_download\" />\n                        <span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>\n                    </button>\n                    <button *ngIf=\"displayMenuOption('retrieveMetadata') && !!element.content?.mimeType\"\n                            id=\"{{'file-'+element?.id+'-retrieve-file-metadata'}}\" mat-menu-item\n                            (click)=\"contentModelFormFileHandler(element)\">\n                        <mat-icon class=\"mat-24\" adf-icon=\"low_priority\" />\n                        <span>{{ 'ADF_CLOUD_FORM_COMPONENT.RETRIEVE_METADATA' | translate }}</span>\n                    </button>\n                    <button *ngIf=\"!field.readOnly && displayMenuOption('remove')\"\n                            mat-menu-item\n                            [id]=\"'file-'+element?.id+'-remove'\"\n                            (click)=\"onRemoveAttachFile(element);\" (keyup.enter)=\"onRemoveAttachFile(element);\">\n                        <mat-icon class=\"mat-24\" adf-icon=\"highlight_off\" />\n                        <span>{{ 'FORM.FIELD.REMOVE_FILE' | translate }}</span>\n                    </button>\n                    <div *ngIf=\"displayMenuOption('newVersion')\">\n                        <button [adf-upload]=\"true\" [mode]=\"['click']\"\n                                (upload-files)=\"onUploadNewFileVersion($event, element);\"\n                                id=\"{{'file-'+ element?.id +'-upload-new-version'}}\" mat-menu-item>\n                            <mat-icon class=\"mat-24\" adf-icon=\"file_upload\" />\n                            <span>{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TITLE' | translate }}</span>\n                        </button>\n                    </div>\n                </mat-menu>\n            </td>\n        </ng-container>\n        <tr mat-header-row class=\"adf-file-properties-table-header-row\" *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n</div>\n", styles: [".adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table{width:100%;border:1px solid var(--mat-sys-outline-variant);box-shadow:none}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table .adf-file{cursor:pointer}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table .adf-file:hover{text-decoration:underline}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table .adf-datatable-selected{padding:6px}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table tr.adf-file-properties-table-header-row{height:32px}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table th{font-weight:700;padding-right:0}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table td{max-width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:0}.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table td.adf-file-properties-table-cell:first-of-type,.adf-file-properties-table-container .adf-file-properties-table.adf-properties-table table td.adf-file-properties-table-cell:last-of-type{width:18%}\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: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: UploadDirective, selector: "[adf-upload]", inputs: ["adf-upload", "adf-upload-data", "mode", "multiple", "accept", "directory"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatLineModule }, { kind: "directive", type: i6$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FilePropertiesTableCloudComponent, decorators: [{
             type: Component,
@@ -8192,14 +8192,14 @@ class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent {
         this.previewState = this.formService.getPreviewState();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AttachFileCloudWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: AttachFileCloudWidgetComponent, isStandalone: true, selector: "adf-cloud-attach-file-cloud-widget", outputs: { error: "error" }, usesInheritance: true, ngImport: i0, template: "<div class=\"adf-attach-file-widget-container\">\n    <div class=\"adf-attach-widget {{field.className}}\"\n        [class.adf-readonly]=\"field.readOnly\">\n        <label class=\"adf-label\" [attr.for]=\"field.id + '-label'\">{{field.name}}\n            <span class=\"adf-asterisk\" *ngIf=\"isRequired()\">*</span>\n        </label>\n        <div class=\"adf-attach-widget-container\" (focusout)=\"markAsTouched()\">\n            <div class=\"adf-attach-widget__menu-upload\" *ngIf=\"isUploadButtonVisible()\">\n                <button\n                    (click)=\"openSelectDialog()\"\n                    mat-raised-button\n                    class=\"adf-attach-widget__menu-upload__button\"\n                    [id]=\"field.id\"\n                    [title]=\"field.tooltip\">\n                        {{ 'FORM.FIELD.ATTACH' | translate }}\n                        <mat-icon class=\"adf-attach-widget__menu-upload__button__icon\" [adf-icon]=\"getWidgetIcon()\" />\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <div data-automation-id=\"adf-attach-widget-readonly-list\" class=\"adf-attach-widget-readonly-table\">\n        <adf-cloud-file-properties-table\n            [uploadedFiles]=\"uploadedFiles\"\n            [hasFile]=\"hasFile\"\n            [selectedNode]=\"selectedNode\"\n            [field]=\"field\"\n            [displayedColumns]=\"displayedColumns\"\n            [mimeTypeIcon]=\"mimeTypeIcon\"\n            (rowClick)=\"onRowClicked($event)\"\n            (attachFileClick)=\"onAttachFileClicked($event)\"\n            (downloadFile)=\"downloadContent($event)\"\n            (uploadNewFileVersion)=\"onUploadNewFileVersion($event)\"\n            (contentModelFileHandler)=\"contentModelFormFileHandler($event)\"\n            (removeAttachFile)=\"onRemoveAttachFile($event)\"\n        />\n        <div *ngIf=\"!hasFile && field.readOnly\" id=\"{{'adf-attach-empty-list-'+field.id}}\">\n            {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}\n        </div>\n\n    </div>\n\n    <error-widget [error]=\"field.validationSummary\" />\n    <error-widget *ngIf=\"!field.isValid && isTouched() && !isSelected()\" required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n</div>\n", styles: [".adf-attach-widget-container{display:flex;align-items:center}.adf-attach-widget-container input{cursor:pointer;height:100%;right:0;opacity:0;position:absolute;top:0;width:300px;z-index:4}.adf-label{white-space:normal;height:100%}.adf-attach-widget__menu-upload{display:flex;align-items:center;margin-right:8px;word-break:normal}.adf-attach-widget__input-type{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.adf-attach-widget__image-logo{padding-left:5px}.adf-attach-widget{display:flex;justify-content:space-between;word-break:break-all;padding:.4375em;border-bottom:none;background:var(--mat-sys-surface-variant);min-height:27px;margin-bottom:12px}.adf-attach-widget .adf-label{width:100%;font:var(--mat-sys-body-small);text-align:left;white-space:normal;margin-left:8px;padding-right:8px;height:100%}.adf-attach-widget__reset{margin-top:-2px}.adf-attach-files-row>div:first-child{cursor:pointer}.adf-attach-files-row{margin-bottom:0}.adf-attach-selected-file-row>div:first-child .adf-datatable-selected{color:var(--mat-sys-primary);padding-right:6px}.adf-attach-file-widget-container{margin:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { 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: "component", type: FilePropertiesTableCloudComponent, selector: "adf-cloud-file-properties-table", inputs: ["uploadedFiles", "hasFile", "selectedNode", "field", "displayedColumns", "mimeTypeIcon"], outputs: ["rowClick", "attachFileClick", "downloadFile", "uploadNewFileVersion", "contentModelFileHandler", "removeAttachFile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: AttachFileCloudWidgetComponent, isStandalone: true, selector: "adf-cloud-attach-file-cloud-widget", outputs: { error: "error" }, usesInheritance: true, ngImport: i0, template: "<div class=\"adf-attach-file-widget-container\">\n    <div class=\"adf-attach-widget {{ field.className }}\" [class.adf-readonly]=\"field.readOnly\">\n        <label class=\"adf-label\" [attr.for]=\"field.id + '-label'\"\n            >{{ field.name }}\n            @if (isRequired()) {\n                <span class=\"adf-asterisk\">*</span>\n            }\n        </label>\n        <div class=\"adf-attach-widget-container\" (focusout)=\"markAsTouched()\">\n            @if (isUploadButtonVisible()) {\n                <div class=\"adf-attach-widget__menu-upload\">\n                    <button\n                        (click)=\"openSelectDialog()\"\n                        mat-raised-button\n                        class=\"adf-attach-widget__menu-upload__button\"\n                        [id]=\"field.id\"\n                        [title]=\"field.tooltip\"\n                    >\n                        {{ 'FORM.FIELD.ATTACH' | translate }}\n                        <mat-icon class=\"adf-attach-widget__menu-upload__button__icon\" [adf-icon]=\"getWidgetIcon()\" />\n                    </button>\n                </div>\n            }\n        </div>\n    </div>\n\n    <div data-automation-id=\"adf-attach-widget-readonly-list\" class=\"adf-attach-widget-readonly-table\">\n        <adf-cloud-file-properties-table\n            [uploadedFiles]=\"uploadedFiles\"\n            [hasFile]=\"hasFile\"\n            [selectedNode]=\"selectedNode\"\n            [field]=\"field\"\n            [displayedColumns]=\"displayedColumns\"\n            [mimeTypeIcon]=\"mimeTypeIcon\"\n            (rowClick)=\"onRowClicked($event)\"\n            (attachFileClick)=\"onAttachFileClicked($event)\"\n            (downloadFile)=\"downloadContent($event)\"\n            (uploadNewFileVersion)=\"onUploadNewFileVersion($event)\"\n            (contentModelFileHandler)=\"contentModelFormFileHandler($event)\"\n            (removeAttachFile)=\"onRemoveAttachFile($event)\"\n        />\n        @if (!hasFile && field.readOnly) {\n            <div id=\"{{ 'adf-attach-empty-list-' + field.id }}\">\n                {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}\n            </div>\n        }\n    </div>\n\n    <error-widget\n        [error]=\"field.validationSummary\"\n        [required]=\"!field.isValid && isTouched() && !isSelected() ? ('FORM.FIELD.REQUIRED' | translate) : ''\"\n    />\n</div>\n", styles: [".adf-attach-widget-container{display:flex;align-items:center}.adf-attach-widget-container input{cursor:pointer;height:100%;right:0;opacity:0;position:absolute;top:0;width:300px;z-index:4}.adf-label{white-space:normal;height:100%}.adf-attach-widget__menu-upload{display:flex;align-items:center;margin-right:8px;word-break:normal}.adf-attach-widget__input-type{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.adf-attach-widget__image-logo{padding-left:5px}.adf-attach-widget{display:flex;justify-content:space-between;word-break:break-all;padding:.4375em;border-bottom:none;background:var(--mat-sys-surface-variant);min-height:27px;margin-bottom:12px}.adf-attach-widget .adf-label{width:100%;font:var(--mat-sys-body-small);text-align:left;white-space:normal;margin-left:8px;padding-right:8px;height:100%}.adf-attach-widget__reset{margin-top:-2px}.adf-attach-files-row>div:first-child{cursor:pointer}.adf-attach-files-row{margin-bottom:0}.adf-attach-selected-file-row>div:first-child .adf-datatable-selected{color:var(--mat-sys-primary);padding-right:6px}.adf-attach-file-widget-container{margin:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { 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: "component", type: FilePropertiesTableCloudComponent, selector: "adf-cloud-file-properties-table", inputs: ["uploadedFiles", "hasFile", "selectedNode", "field", "displayedColumns", "mimeTypeIcon"], outputs: ["rowClick", "attachFileClick", "downloadFile", "uploadNewFileVersion", "contentModelFileHandler", "removeAttachFile"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     LazyApi((self) => new NodesApi(self.apiService.getInstance()))
 ], AttachFileCloudWidgetComponent.prototype, "nodesApi", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AttachFileCloudWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adf-cloud-attach-file-cloud-widget', imports: [CommonModule, ErrorWidgetComponent, TranslatePipe, IconModule, FilePropertiesTableCloudComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-attach-file-widget-container\">\n    <div class=\"adf-attach-widget {{field.className}}\"\n        [class.adf-readonly]=\"field.readOnly\">\n        <label class=\"adf-label\" [attr.for]=\"field.id + '-label'\">{{field.name}}\n            <span class=\"adf-asterisk\" *ngIf=\"isRequired()\">*</span>\n        </label>\n        <div class=\"adf-attach-widget-container\" (focusout)=\"markAsTouched()\">\n            <div class=\"adf-attach-widget__menu-upload\" *ngIf=\"isUploadButtonVisible()\">\n                <button\n                    (click)=\"openSelectDialog()\"\n                    mat-raised-button\n                    class=\"adf-attach-widget__menu-upload__button\"\n                    [id]=\"field.id\"\n                    [title]=\"field.tooltip\">\n                        {{ 'FORM.FIELD.ATTACH' | translate }}\n                        <mat-icon class=\"adf-attach-widget__menu-upload__button__icon\" [adf-icon]=\"getWidgetIcon()\" />\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <div data-automation-id=\"adf-attach-widget-readonly-list\" class=\"adf-attach-widget-readonly-table\">\n        <adf-cloud-file-properties-table\n            [uploadedFiles]=\"uploadedFiles\"\n            [hasFile]=\"hasFile\"\n            [selectedNode]=\"selectedNode\"\n            [field]=\"field\"\n            [displayedColumns]=\"displayedColumns\"\n            [mimeTypeIcon]=\"mimeTypeIcon\"\n            (rowClick)=\"onRowClicked($event)\"\n            (attachFileClick)=\"onAttachFileClicked($event)\"\n            (downloadFile)=\"downloadContent($event)\"\n            (uploadNewFileVersion)=\"onUploadNewFileVersion($event)\"\n            (contentModelFileHandler)=\"contentModelFormFileHandler($event)\"\n            (removeAttachFile)=\"onRemoveAttachFile($event)\"\n        />\n        <div *ngIf=\"!hasFile && field.readOnly\" id=\"{{'adf-attach-empty-list-'+field.id}}\">\n            {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}\n        </div>\n\n    </div>\n\n    <error-widget [error]=\"field.validationSummary\" />\n    <error-widget *ngIf=\"!field.isValid && isTouched() && !isSelected()\" required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n</div>\n", styles: [".adf-attach-widget-container{display:flex;align-items:center}.adf-attach-widget-container input{cursor:pointer;height:100%;right:0;opacity:0;position:absolute;top:0;width:300px;z-index:4}.adf-label{white-space:normal;height:100%}.adf-attach-widget__menu-upload{display:flex;align-items:center;margin-right:8px;word-break:normal}.adf-attach-widget__input-type{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.adf-attach-widget__image-logo{padding-left:5px}.adf-attach-widget{display:flex;justify-content:space-between;word-break:break-all;padding:.4375em;border-bottom:none;background:var(--mat-sys-surface-variant);min-height:27px;margin-bottom:12px}.adf-attach-widget .adf-label{width:100%;font:var(--mat-sys-body-small);text-align:left;white-space:normal;margin-left:8px;padding-right:8px;height:100%}.adf-attach-widget__reset{margin-top:-2px}.adf-attach-files-row>div:first-child{cursor:pointer}.adf-attach-files-row{margin-bottom:0}.adf-attach-selected-file-row>div:first-child .adf-datatable-selected{color:var(--mat-sys-primary);padding-right:6px}.adf-attach-file-widget-container{margin:15px}\n"] }]
+            args: [{ selector: 'adf-cloud-attach-file-cloud-widget', imports: [CommonModule, ErrorWidgetComponent, TranslatePipe, IconModule, FilePropertiesTableCloudComponent, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-attach-file-widget-container\">\n    <div class=\"adf-attach-widget {{ field.className }}\" [class.adf-readonly]=\"field.readOnly\">\n        <label class=\"adf-label\" [attr.for]=\"field.id + '-label'\"\n            >{{ field.name }}\n            @if (isRequired()) {\n                <span class=\"adf-asterisk\">*</span>\n            }\n        </label>\n        <div class=\"adf-attach-widget-container\" (focusout)=\"markAsTouched()\">\n            @if (isUploadButtonVisible()) {\n                <div class=\"adf-attach-widget__menu-upload\">\n                    <button\n                        (click)=\"openSelectDialog()\"\n                        mat-raised-button\n                        class=\"adf-attach-widget__menu-upload__button\"\n                        [id]=\"field.id\"\n                        [title]=\"field.tooltip\"\n                    >\n                        {{ 'FORM.FIELD.ATTACH' | translate }}\n                        <mat-icon class=\"adf-attach-widget__menu-upload__button__icon\" [adf-icon]=\"getWidgetIcon()\" />\n                    </button>\n                </div>\n            }\n        </div>\n    </div>\n\n    <div data-automation-id=\"adf-attach-widget-readonly-list\" class=\"adf-attach-widget-readonly-table\">\n        <adf-cloud-file-properties-table\n            [uploadedFiles]=\"uploadedFiles\"\n            [hasFile]=\"hasFile\"\n            [selectedNode]=\"selectedNode\"\n            [field]=\"field\"\n            [displayedColumns]=\"displayedColumns\"\n            [mimeTypeIcon]=\"mimeTypeIcon\"\n            (rowClick)=\"onRowClicked($event)\"\n            (attachFileClick)=\"onAttachFileClicked($event)\"\n            (downloadFile)=\"downloadContent($event)\"\n            (uploadNewFileVersion)=\"onUploadNewFileVersion($event)\"\n            (contentModelFileHandler)=\"contentModelFormFileHandler($event)\"\n            (removeAttachFile)=\"onRemoveAttachFile($event)\"\n        />\n        @if (!hasFile && field.readOnly) {\n            <div id=\"{{ 'adf-attach-empty-list-' + field.id }}\">\n                {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}\n            </div>\n        }\n    </div>\n\n    <error-widget\n        [error]=\"field.validationSummary\"\n        [required]=\"!field.isValid && isTouched() && !isSelected() ? ('FORM.FIELD.REQUIRED' | translate) : ''\"\n    />\n</div>\n", styles: [".adf-attach-widget-container{display:flex;align-items:center}.adf-attach-widget-container input{cursor:pointer;height:100%;right:0;opacity:0;position:absolute;top:0;width:300px;z-index:4}.adf-label{white-space:normal;height:100%}.adf-attach-widget__menu-upload{display:flex;align-items:center;margin-right:8px;word-break:normal}.adf-attach-widget__input-type{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.adf-attach-widget__image-logo{padding-left:5px}.adf-attach-widget{display:flex;justify-content:space-between;word-break:break-all;padding:.4375em;border-bottom:none;background:var(--mat-sys-surface-variant);min-height:27px;margin-bottom:12px}.adf-attach-widget .adf-label{width:100%;font:var(--mat-sys-body-small);text-align:left;white-space:normal;margin-left:8px;padding-right:8px;height:100%}.adf-attach-widget__reset{margin-top:-2px}.adf-attach-files-row>div:first-child{cursor:pointer}.adf-attach-files-row{margin-bottom:0}.adf-attach-selected-file-row>div:first-child .adf-datatable-selected{color:var(--mat-sys-primary);padding-right:6px}.adf-attach-file-widget-container{margin:15px}\n"] }]
         }], propDecorators: { error: [{
                 type: Output
             }], nodesApi: [] } });
@@ -9162,7 +9162,7 @@ class UserTaskCloudButtonsComponent {
         this.cancelClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UserTaskCloudButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: UserTaskCloudButtonsComponent, isStandalone: true, selector: "adf-cloud-user-task-cloud-buttons", inputs: { appName: "appName", canClaimTask: "canClaimTask", canUnclaimTask: "canUnclaimTask", taskId: "taskId", showCancelButton: "showCancelButton", customCancelButtonText: "customCancelButtonText" }, outputs: { error: "error", cancelClick: "cancelClick", claimTask: "claimTask", unclaimTask: "unclaimTask" }, ngImport: i0, template: "<button *ngIf=\"showCancelButton\" mat-button id=\"adf-cloud-cancel-task\" (click)=\"onCancelClick()\">\n    {{ customCancelButtonText || ('ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.CANCEL' | translate) }}\n</button>\n<button\n    *ngIf=\"canClaimTask\"\n    adf-cloud-claim-task\n    class=\"adf-user-task-cloud-claim-btn\"\n    mat-button\n    [appName]=\"appName\"\n    [taskId]=\"taskId\"\n    (success)=\"onClaimTask()\"\n    (error)=\"onError($event)\"\n>\n    {{ 'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.CLAIM' | translate }}\n</button>\n<button\n    *ngIf=\"canUnclaimTask\"\n    adf-cloud-unclaim-task\n    class=\"adf-user-task-cloud-unclaim-btn\"\n    mat-button\n    [appName]=\"appName\"\n    [taskId]=\"taskId\"\n    (success)=\"onUnclaimTask()\"\n    (error)=\"onError($event)\"\n>\n    {{ 'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.UNCLAIM' | translate }}\n</button>\n", styles: ["button{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UnClaimTaskCloudDirective, selector: "[adf-cloud-unclaim-task]", inputs: ["taskId", "appName"], outputs: ["success", "error"] }, { kind: "directive", type: ClaimTaskCloudDirective, selector: "[adf-cloud-claim-task]", inputs: ["taskId", "appName"], outputs: ["success", "error"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: UserTaskCloudButtonsComponent, isStandalone: true, selector: "adf-cloud-user-task-cloud-buttons", inputs: { appName: "appName", canClaimTask: "canClaimTask", canUnclaimTask: "canUnclaimTask", taskId: "taskId", showCancelButton: "showCancelButton", customCancelButtonText: "customCancelButtonText" }, outputs: { error: "error", cancelClick: "cancelClick", claimTask: "claimTask", unclaimTask: "unclaimTask" }, ngImport: i0, template: "<button *ngIf=\"showCancelButton\" mat-button id=\"adf-cloud-cancel-task\" (click)=\"onCancelClick()\">\n    {{ customCancelButtonText || ('ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.CANCEL' | translate) }}\n</button>\n<button\n    *ngIf=\"canClaimTask\"\n    adf-cloud-claim-task\n    class=\"adf-user-task-cloud-claim-btn\"\n    mat-button\n    [appName]=\"appName\"\n    [taskId]=\"taskId\"\n    (success)=\"onClaimTask()\"\n    (error)=\"onError($event)\"\n>\n    {{ 'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.CLAIM' | translate }}\n</button>\n<button\n    *ngIf=\"canUnclaimTask\"\n    adf-cloud-unclaim-task\n    class=\"adf-user-task-cloud-unclaim-btn\"\n    mat-button\n    [appName]=\"appName\"\n    [taskId]=\"taskId\"\n    (success)=\"onUnclaimTask()\"\n    (error)=\"onError($event)\"\n>\n    {{ 'ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.UNCLAIM' | translate }}\n</button>\n", styles: ["button{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UnClaimTaskCloudDirective, selector: "[adf-cloud-unclaim-task]", inputs: ["taskId", "appName"], outputs: ["success", "error"] }, { kind: "directive", type: ClaimTaskCloudDirective, selector: "[adf-cloud-claim-task]", inputs: ["taskId", "appName"], outputs: ["success", "error"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UserTaskCloudButtonsComponent, decorators: [{
             type: Component,
@@ -10111,7 +10111,7 @@ class UserTaskCloudComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UserTaskCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: UserTaskCloudComponent, isStandalone: true, selector: "adf-cloud-user-task", inputs: { appName: "appName", displayModeConfigurations: "displayModeConfigurations", enableParentVisibilityCheck: "enableParentVisibilityCheck", readOnly: "readOnly", showCancelButton: "showCancelButton", showCompleteButton: "showCompleteButton", showSaveButton: "showSaveButton", customCancelButtonText: "customCancelButtonText", customCompleteButtonText: "customCompleteButtonText", customSaveButtonText: "customSaveButtonText", showNextTaskCheckbox: "showNextTaskCheckbox", isNextTaskCheckboxChecked: "isNextTaskCheckboxChecked", showTitle: "showTitle", showValidationIcon: "showValidationIcon", taskId: "taskId" }, outputs: { cancelClick: "cancelClick", error: "error", nextTaskCheckboxCheckedChanged: "nextTaskCheckboxCheckedChanged", executeOutcome: "executeOutcome", formContentClicked: "formContentClicked", formLoaded: "formLoaded", formSaved: "formSaved", onTaskLoaded: "onTaskLoaded", taskClaimed: "taskClaimed", taskUnclaimed: "taskUnclaimed", taskCompleted: "taskCompleted" }, viewQueries: [{ propertyName: "adfCloudTaskForm", first: true, predicate: ["adfCloudTaskForm"], descendants: true }, { propertyName: "adfCloudTaskScreen", first: true, predicate: ["adfCloudTaskScreen"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"adf-user-task-cloud-container\">\n    <div *ngIf=\"!loading; else loadingTemplate\">\n        <ng-container [ngSwitch]=\"taskType\">\n            <ng-container *ngSwitchCase=\"taskTypeEnum.Form\">\n                <adf-cloud-task-form\n                    #adfCloudTaskForm\n                    [appName]=\"appName\"\n                    [candidateUsers]=\"candidateUsers\"\n                    [candidateGroups]=\"candidateGroups\"\n                    [displayModeConfigurations]=\"displayModeConfigurations\"\n                    [enableParentVisibilityCheck]=\"enableParentVisibilityCheck\"\n                    [showValidationIcon]=\"showValidationIcon\"\n                    [showTitle]=\"showTitle\"\n                    [taskId]=\"taskId\"\n                    [taskDetails]=\"taskDetails\"\n                    [showCancelButton]=\"showCancelButton\"\n                    [showSaveButton]=\"showSaveButton && canCompleteTask()\"\n                    [showCompleteButton]=\"showCompleteButton && canCompleteTask()\"\n                    [customCancelButtonText]=\"customCancelButtonText\"\n                    [customSaveButtonText]=\"customSaveButtonText\"\n                    [customCompleteButtonText]=\"customCompleteButtonText\"\n                    (cancelClick)=\"onCancelForm()\"\n                    (executeOutcome)=\"onExecuteOutcome($event)\"\n                    (error)=\"onError($event)\"\n                    (formLoaded)=\"onFormLoaded($event)\"\n                    (formSaved)=\"onFormSaved()\"\n                    (formContentClicked)=\"onFormContentClicked($event)\"\n                    (taskCompleted)=\"onCompleteTaskForm()\"\n                    (taskClaimed)=\"onClaimTask()\"\n                    (taskUnclaimed)=\"onTaskUnclaimed()\"\n                />\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"taskTypeEnum.Screen\">\n                <adf-cloud-task-screen\n                    #adfCloudTaskScreen\n                    [appName]=\"appName\"\n                    [canClaimTask]=\"canClaimTask()\"\n                    [canUnclaimTask]=\"canUnclaimTask()\"\n                    [processInstanceId]=\"taskDetails.processInstanceId\"\n                    [rootProcessInstanceId]=\"taskDetails.rootProcessInstanceId\"\n                    [screenId]=\"screenId\"\n                    [showCancelButton]=\"showCancelButton\"\n                    [taskName]=\"taskDetails.name\"\n                    [taskId]=\"taskId\"\n                    [showNextTaskCheckbox]=\"showNextTaskCheckbox && canCompleteTask()\"\n                    [isNextTaskCheckboxChecked]=\"isNextTaskCheckboxChecked\"\n                    (cancelTask)=\"onCancelClick()\"\n                    (claimTask)=\"onClaimTask()\"\n                    (error)=\"onError($event)\"\n                    (taskCompleted)=\"onCompleteTask($event, taskType)\"\n                    (taskSaved)=\"onFormSaved()\"\n                    (unclaimTask)=\"onUnclaimTask()\"\n                    (nextTaskCheckboxCheckedChanged)=\"onNextTaskCheckboxCheckedChanged($event)\"\n                />\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"taskTypeEnum.None\">\n                <mat-card appearance=\"outlined\" class=\"adf-task-form-container\">\n                    <mat-card-header *ngIf=\"showTitle\">\n                        <mat-card-title>\n                            <h4>\n                                <span class=\"adf-form-title\">\n                                    {{ taskDetails?.name || 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}\n                                </span>\n                            </h4>\n                        </mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                        <adf-empty-content\n                            [icon]=\"'description'\"\n                            [title]=\"'ADF_CLOUD_TASK_FORM.EMPTY_FORM.TITLE'\"\n                            [subtitle]=\"'ADF_CLOUD_TASK_FORM.EMPTY_FORM.SUBTITLE'\"\n                        />\n                    </mat-card-content>\n                    <mat-card-actions class=\"adf-task-form-actions\" align=\"end\">\n                        <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                        <button\n                            *ngIf=\"canCompleteTask()\"\n                            mat-flat-button\n                            adf-cloud-complete-task\n                            [appName]=\"appName\"\n                            [taskId]=\"taskId\"\n                            (success)=\"onCompleteTask(false, taskType)\"\n                            (error)=\"onError($event)\"\n                                id=\"adf-form-complete\"\n                        >\n                            {{ customCompleteButtonText || ('ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate) }}\n                        </button>\n                    </mat-card-actions>\n                </mat-card>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #loadingTemplate>\n    <mat-spinner class=\"adf-user-task-cloud-spinner\" />\n</ng-template>\n\n<ng-template #taskFormCloudButtons>\n    <adf-cloud-user-task-cloud-buttons\n        [appName]=\"appName\"\n        [canClaimTask]=\"canClaimTask()\"\n        [canUnclaimTask]=\"canUnclaimTask()\"\n        [showCancelButton]=\"showCancelButton\"\n        [customCancelButtonText]=\"customCancelButtonText\"\n        [taskId]=\"taskId\"\n        (cancelClick)=\"onCancelClick()\"\n        (claimTask)=\"onClaimTask()\"\n        (unclaimTask)=\"onUnclaimTask()\"\n        (error)=\"onError($event)\"\n    />\n</ng-template>\n", styles: [".adf-user-task-cloud-container{height:100%}.adf-user-task-cloud-container>div{height:100%}.adf-user-task-cloud-spinner{top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: UserTaskCloudButtonsComponent, selector: "adf-cloud-user-task-cloud-buttons", inputs: ["appName", "canClaimTask", "canUnclaimTask", "taskId", "showCancelButton", "customCancelButtonText"], outputs: ["error", "cancelClick", "claimTask", "unclaimTask"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: EmptyContentComponent, selector: "adf-empty-content", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: TaskScreenCloudComponent, selector: "adf-cloud-task-screen", inputs: ["taskId", "appName", "canClaimTask", "canUnclaimTask", "showCancelButton", "processInstanceId", "taskName", "readOnly", "rootProcessInstanceId", "isNextTaskCheckboxChecked", "showNextTaskCheckbox"], outputs: ["taskSaved", "taskCompleted", "error", "cancelTask", "claimTask", "unclaimTask", "nextTaskCheckboxCheckedChanged"] }, { kind: "component", type: TaskFormCloudComponent, selector: "adf-cloud-task-form", inputs: ["appName", "candidateUsers", "candidateGroups", "taskId", "showTitle", "showRefreshButton", "showValidationIcon", "showCancelButton", "showCompleteButton", "showSaveButton", "customCancelButtonText", "customCompleteButtonText", "customSaveButtonText", "readOnly", "displayModeConfigurations", "enableParentVisibilityCheck", "taskDetails"], outputs: ["formLoaded", "formSaved", "formCompleted", "taskCompleted", "taskClaimed", "taskUnclaimed", "cancelClick", "error", "formContentClicked", "executeOutcome", "displayModeOn", "displayModeOff"] }, { kind: "directive", type: CompleteTaskDirective, selector: "[adf-cloud-complete-task]", inputs: ["taskId", "appName"], outputs: ["success", "error"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: UserTaskCloudComponent, isStandalone: true, selector: "adf-cloud-user-task", inputs: { appName: "appName", displayModeConfigurations: "displayModeConfigurations", enableParentVisibilityCheck: "enableParentVisibilityCheck", readOnly: "readOnly", showCancelButton: "showCancelButton", showCompleteButton: "showCompleteButton", showSaveButton: "showSaveButton", customCancelButtonText: "customCancelButtonText", customCompleteButtonText: "customCompleteButtonText", customSaveButtonText: "customSaveButtonText", showNextTaskCheckbox: "showNextTaskCheckbox", isNextTaskCheckboxChecked: "isNextTaskCheckboxChecked", showTitle: "showTitle", showValidationIcon: "showValidationIcon", taskId: "taskId" }, outputs: { cancelClick: "cancelClick", error: "error", nextTaskCheckboxCheckedChanged: "nextTaskCheckboxCheckedChanged", executeOutcome: "executeOutcome", formContentClicked: "formContentClicked", formLoaded: "formLoaded", formSaved: "formSaved", onTaskLoaded: "onTaskLoaded", taskClaimed: "taskClaimed", taskUnclaimed: "taskUnclaimed", taskCompleted: "taskCompleted" }, viewQueries: [{ propertyName: "adfCloudTaskForm", first: true, predicate: ["adfCloudTaskForm"], descendants: true }, { propertyName: "adfCloudTaskScreen", first: true, predicate: ["adfCloudTaskScreen"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"adf-user-task-cloud-container\">\n    <div *ngIf=\"!loading; else loadingTemplate\">\n        <ng-container [ngSwitch]=\"taskType\">\n            <ng-container *ngSwitchCase=\"taskTypeEnum.Form\">\n                <adf-cloud-task-form\n                    #adfCloudTaskForm\n                    [appName]=\"appName\"\n                    [candidateUsers]=\"candidateUsers\"\n                    [candidateGroups]=\"candidateGroups\"\n                    [displayModeConfigurations]=\"displayModeConfigurations\"\n                    [enableParentVisibilityCheck]=\"enableParentVisibilityCheck\"\n                    [showValidationIcon]=\"showValidationIcon\"\n                    [showTitle]=\"showTitle\"\n                    [taskId]=\"taskId\"\n                    [taskDetails]=\"taskDetails\"\n                    [showCancelButton]=\"showCancelButton\"\n                    [showSaveButton]=\"showSaveButton && canCompleteTask()\"\n                    [showCompleteButton]=\"showCompleteButton && canCompleteTask()\"\n                    [customCancelButtonText]=\"customCancelButtonText\"\n                    [customSaveButtonText]=\"customSaveButtonText\"\n                    [customCompleteButtonText]=\"customCompleteButtonText\"\n                    (cancelClick)=\"onCancelForm()\"\n                    (executeOutcome)=\"onExecuteOutcome($event)\"\n                    (error)=\"onError($event)\"\n                    (formLoaded)=\"onFormLoaded($event)\"\n                    (formSaved)=\"onFormSaved()\"\n                    (formContentClicked)=\"onFormContentClicked($event)\"\n                    (taskCompleted)=\"onCompleteTaskForm()\"\n                    (taskClaimed)=\"onClaimTask()\"\n                    (taskUnclaimed)=\"onTaskUnclaimed()\"\n                />\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"taskTypeEnum.Screen\">\n                <adf-cloud-task-screen\n                    #adfCloudTaskScreen\n                    [appName]=\"appName\"\n                    [canClaimTask]=\"canClaimTask()\"\n                    [canUnclaimTask]=\"canUnclaimTask()\"\n                    [processInstanceId]=\"taskDetails.processInstanceId\"\n                    [rootProcessInstanceId]=\"taskDetails.rootProcessInstanceId\"\n                    [screenId]=\"screenId\"\n                    [showCancelButton]=\"showCancelButton\"\n                    [taskName]=\"taskDetails.name\"\n                    [taskId]=\"taskId\"\n                    [showNextTaskCheckbox]=\"showNextTaskCheckbox && canCompleteTask()\"\n                    [isNextTaskCheckboxChecked]=\"isNextTaskCheckboxChecked\"\n                    (cancelTask)=\"onCancelClick()\"\n                    (claimTask)=\"onClaimTask()\"\n                    (error)=\"onError($event)\"\n                    (taskCompleted)=\"onCompleteTask($event, taskType)\"\n                    (taskSaved)=\"onFormSaved()\"\n                    (unclaimTask)=\"onUnclaimTask()\"\n                    (nextTaskCheckboxCheckedChanged)=\"onNextTaskCheckboxCheckedChanged($event)\"\n                />\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"taskTypeEnum.None\">\n                <mat-card appearance=\"outlined\" class=\"adf-task-form-container\">\n                    <mat-card-header *ngIf=\"showTitle\">\n                        <mat-card-title>\n                            <h4>\n                                <span class=\"adf-form-title\">\n                                    {{ taskDetails?.name || 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}\n                                </span>\n                            </h4>\n                        </mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                        <adf-empty-content\n                            [icon]=\"'description'\"\n                            [title]=\"'ADF_CLOUD_TASK_FORM.EMPTY_FORM.TITLE'\"\n                            [subtitle]=\"'ADF_CLOUD_TASK_FORM.EMPTY_FORM.SUBTITLE'\"\n                        />\n                    </mat-card-content>\n                    <mat-card-actions class=\"adf-task-form-actions\" align=\"end\">\n                        <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                        <button\n                            *ngIf=\"canCompleteTask()\"\n                            mat-flat-button\n                            adf-cloud-complete-task\n                            [appName]=\"appName\"\n                            [taskId]=\"taskId\"\n                            (success)=\"onCompleteTask(false, taskType)\"\n                            (error)=\"onError($event)\"\n                                id=\"adf-form-complete\"\n                        >\n                            {{ customCompleteButtonText || ('ADF_CLOUD_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate) }}\n                        </button>\n                    </mat-card-actions>\n                </mat-card>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #loadingTemplate>\n    <mat-spinner class=\"adf-user-task-cloud-spinner\" />\n</ng-template>\n\n<ng-template #taskFormCloudButtons>\n    <adf-cloud-user-task-cloud-buttons\n        [appName]=\"appName\"\n        [canClaimTask]=\"canClaimTask()\"\n        [canUnclaimTask]=\"canUnclaimTask()\"\n        [showCancelButton]=\"showCancelButton\"\n        [customCancelButtonText]=\"customCancelButtonText\"\n        [taskId]=\"taskId\"\n        (cancelClick)=\"onCancelClick()\"\n        (claimTask)=\"onClaimTask()\"\n        (unclaimTask)=\"onUnclaimTask()\"\n        (error)=\"onError($event)\"\n    />\n</ng-template>\n", styles: [".adf-user-task-cloud-container{height:100%}.adf-user-task-cloud-container>div{height:100%}.adf-user-task-cloud-spinner{top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: UserTaskCloudButtonsComponent, selector: "adf-cloud-user-task-cloud-buttons", inputs: ["appName", "canClaimTask", "canUnclaimTask", "taskId", "showCancelButton", "customCancelButtonText"], outputs: ["error", "cancelClick", "claimTask", "unclaimTask"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: EmptyContentComponent, selector: "adf-empty-content", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: TaskScreenCloudComponent, selector: "adf-cloud-task-screen", inputs: ["taskId", "appName", "canClaimTask", "canUnclaimTask", "showCancelButton", "processInstanceId", "taskName", "readOnly", "rootProcessInstanceId", "isNextTaskCheckboxChecked", "showNextTaskCheckbox"], outputs: ["taskSaved", "taskCompleted", "error", "cancelTask", "claimTask", "unclaimTask", "nextTaskCheckboxCheckedChanged"] }, { kind: "component", type: TaskFormCloudComponent, selector: "adf-cloud-task-form", inputs: ["appName", "candidateUsers", "candidateGroups", "taskId", "showTitle", "showRefreshButton", "showValidationIcon", "showCancelButton", "showCompleteButton", "showSaveButton", "customCancelButtonText", "customCompleteButtonText", "customSaveButtonText", "readOnly", "displayModeConfigurations", "enableParentVisibilityCheck", "taskDetails"], outputs: ["formLoaded", "formSaved", "formCompleted", "taskCompleted", "taskClaimed", "taskUnclaimed", "cancelClick", "error", "formContentClicked", "executeOutcome", "displayModeOn", "displayModeOff"] }, { kind: "directive", type: CompleteTaskDirective, selector: "[adf-cloud-complete-task]", inputs: ["taskId", "appName"], outputs: ["success", "error"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: UserTaskCloudComponent, decorators: [{
             type: Component,
@@ -11840,7 +11840,7 @@ class ProcessFilterDialogCloudComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ProcessFilterDialogCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ProcessFilterDialogCloudComponent, isStandalone: true, selector: "adf-cloud-process-filter-dialog-cloud", ngImport: i0, template: "<div class=\"adf-process-filter-dialog\">\n    <span mat-dialog-title id=\"adf-process-filter-dialog-title\">\n         {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.TITLE' | translate}}\n    </span>\n    <mat-card appearance=\"outlined\" class=\"adf-process-filter-dialog-card\">\n        <mat-card-content class=\"adf-process-filter-dialog-card-content\">\n            <form [formGroup]=\"filterForm\">\n                <mat-form-field class=\"adf-process-filter-name\" [floatLabel]=\"'auto'\">\n                    <input\n                        matInput\n                       placeholder=\"{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.FILTER_NAME' | translate }}\"\n                       [formControl]=\"filterForm.controls.name\" id=\"adf-filter-name-id\">\n                </mat-form-field>\n            </form>\n        </mat-card-content>\n        <mat-card-actions class='adf-process-filter-dialog-actions'>\n            <button mat-button (click)=\"onSaveClick()\" id=\"adf-save-button-id\" [disabled]=\"!filterForm.valid\">\n                {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.SAVE' | translate}}\n            </button>\n            <button mat-button (click)=\"onCancelClick()\" id=\"adf-cancel-button-id\">\n               {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.CANCEL' | translate}}\n            </button>\n        </mat-card-actions>\n    </mat-card>\n</div>\n", styles: ["adf-cloud-process-filter-dialog-cloud .adf-process-filter-dialog .adf-process-filter-dialog-card{padding:0;box-shadow:none}adf-cloud-process-filter-dialog-cloud .adf-process-filter-dialog .adf-process-filter-dialog-card .adf-process-filter-name{flex:1}adf-cloud-process-filter-dialog-cloud .adf-process-filter-dialog .adf-process-filter-dialog-card .adf-process-filter-dialog-actions{display:flex;max-height:100%;place-content:flex-end;align-items:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { 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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ProcessFilterDialogCloudComponent, isStandalone: true, selector: "adf-cloud-process-filter-dialog-cloud", ngImport: i0, template: "<div class=\"adf-process-filter-dialog\">\n    <span mat-dialog-title id=\"adf-process-filter-dialog-title\">\n         {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.TITLE' | translate}}\n    </span>\n    <mat-card appearance=\"outlined\" class=\"adf-process-filter-dialog-card\">\n        <mat-card-content class=\"adf-process-filter-dialog-card-content\">\n            <form [formGroup]=\"filterForm\">\n                <mat-form-field class=\"adf-process-filter-name\" [floatLabel]=\"'auto'\">\n                    <input\n                        matInput\n                       placeholder=\"{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.FILTER_NAME' | translate }}\"\n                       [formControl]=\"filterForm.controls.name\" id=\"adf-filter-name-id\">\n                </mat-form-field>\n            </form>\n        </mat-card-content>\n        <mat-card-actions class='adf-process-filter-dialog-actions'>\n            <button mat-button (click)=\"onSaveClick()\" id=\"adf-save-button-id\" [disabled]=\"!filterForm.valid\">\n                {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.SAVE' | translate}}\n            </button>\n            <button mat-button (click)=\"onCancelClick()\" id=\"adf-cancel-button-id\">\n               {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.CANCEL' | translate}}\n            </button>\n        </mat-card-actions>\n    </mat-card>\n</div>\n", styles: ["adf-cloud-process-filter-dialog-cloud .adf-process-filter-dialog .adf-process-filter-dialog-card{padding:0;box-shadow:none}adf-cloud-process-filter-dialog-cloud .adf-process-filter-dialog .adf-process-filter-dialog-card .adf-process-filter-name{flex:1}adf-cloud-process-filter-dialog-cloud .adf-process-filter-dialog .adf-process-filter-dialog-card .adf-process-filter-dialog-actions{display:flex;max-height:100%;place-content:flex-end;align-items:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { 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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ProcessFilterDialogCloudComponent, decorators: [{
             type: Component,
@@ -12655,7 +12655,7 @@ class EditProcessFilterCloudComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: EditProcessFilterCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: EditProcessFilterCloudComponent, isStandalone: true, selector: "adf-cloud-edit-process-filter", inputs: { appName: "appName", role: "role", id: "id", filterProperties: "filterProperties", sortProperties: "sortProperties", actions: "actions", environmentId: "environmentId", environmentList: "environmentList", showFilterActions: "showFilterActions", showTitle: "showTitle", showProcessFilterName: "showProcessFilterName", processFilter: "processFilter" }, outputs: { filterChange: "filterChange", action: "action" }, usesOnChanges: true, ngImport: i0, template: "<mat-accordion [hideToggle]=\"isLoading\" class=\"adf-edit-process-filter\">\n    <mat-expansion-panel (afterExpand)=\"onExpand()\" (closed)=\"onClose()\">\n        <mat-expansion-panel-header *ngIf=\"processFilter\" id=\"adf-edit-process-filter-expansion-header\" class=\"adf-edit-process-filter-header\">\n            <ng-container *ngIf=\"!isLoading; else loadingTemplate\">\n                <mat-panel-title *ngIf=\"showProcessFilterName\" id=\"adf-edit-process-filter-title-id\" class=\"adf-edit-process-filter-header__title\">\n                    {{processFilter.name | translate}}</mat-panel-title>\n                <mat-panel-description  class=\"adf-edit-process-filter-header__description\" id=\"adf-edit-process-filter-sub-title-id\">\n                    <span *ngIf=\"showTitle\"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>\n                    <div *ngIf=\"showFilterActions\" class=\"adf-cloud-edit-process-filter-actions\">\n                        <ng-container *ngIf=\"toggleFilterActions\">\n                            <button \n                                *ngFor=\"let filterAction of processFilterActions\"\n                                mat-icon-button\n                                [title]=\"filterAction.tooltip | translate\"\n                                [attr.data-automation-id]=\"'adf-filter-action-' + filterAction.actionType\"\n                                [disabled]=\"isDisabledAction(filterAction)\"\n                                (click)=\"executeFilterActions($event, filterAction)\"\n                            >\n                                @if (filterAction.icon.includes(':')) {\n                                    <mat-icon [svgIcon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } @else {\n                                    <mat-icon [adf-icon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                }   \n                            </button>\n                        </ng-container>\n                    </div>\n                </mat-panel-description>\n            </ng-container>\n            <ng-template #loadingTemplate>\n                <div class=\"adf-cloud-edit-process-filter-loading-margin\">\n                    <mat-spinner [diameter]=\"30\" />\n                </div>\n            </ng-template>\n        </mat-expansion-panel-header>\n        <ng-container *ngIf=\"!isLoading\">\n            <form [formGroup]=\"editProcessFilterForm\" *ngIf=\"editProcessFilterForm\" class=\"adf-edit-process-filter-content\">\n                <div class=\"adf-edit-process-filter-form\">\n                    <ng-container *ngFor=\"let processFilterProperty of processFilterProperties; trackBy: filterTracker\">\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'select'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label class=\"adf-edit-process-filter-content__select-label\">{{processFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"processFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\">\n                                <mat-option\n                                    *ngFor=\"let propertyOption of processFilterProperty.options\"\n                                    [value]=\"propertyOption.value\"\n                                    [attr.data-automation-id]=\"'adf-cloud-edit-process-property-options-' + processFilterProperty.key\"\n                                >{{ propertyOption.label | translate }}</mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'multi-select'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label class=\"adf-edit-process-filter-content__select-label\">{{processFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"processFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\"\n                                [multiple]=\"true\">\n                                <mat-option *ngFor=\"let propertyOption of processFilterProperty.options\" [value]=\"propertyOption.value\" [attr.data-automation-id]=\"'adf-cloud-edit-process-property-options-' + processFilterProperty.key\">\n                                    {{ propertyOption.label | translate }}\n                                </mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'text'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label class=\"adf-edit-process-filter-content__text-label\">{{processFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                [formControlName]=\"processFilterProperty.key\"\n                                type=\"text\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\"/>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'number'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <input matInput\n                                [formControlName]=\"processFilterProperty.key\"\n                                type=\"number\" min=\"0\"\n                                placeholder=\"{{processFilterProperty.label | translate}}\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\"/>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" class=\"adf-form-field-input\" *ngIf=\"processFilterProperty.type === 'date'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label>{{processFilterProperty.label | translate}}</mat-label>\n                            <input\n                                matInput\n                                [formControlName]=\"processFilterProperty.key\"\n                                (keyup)=\"onDateChanged($any($event).target.value, processFilterProperty)\"\n                                (dateChange)=\"onDateChanged($event.value, processFilterProperty)\"\n                                [matDatepicker]=\"dateController\"\n                                placeholder=\"{{processFilterProperty.label | translate}}\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\">\n                            <mat-datepicker-toggle\n                                matSuffix [for]=\"dateController\"\n                               [attr.data-automation-id]=\"'adf-cloud-edit-process-property-date-toggle-' + processFilterProperty.key\" />\n                            <mat-datepicker #dateController [attr.data-automation-id]=\"'adf-cloud-edit-process-property-date-picker-' + processFilterProperty.key\" />\n                            @if (hasError(processFilterProperty)) {\n                                <mat-error>\n                                    <mat-icon class=\"adf-error-icon\">error_outline</mat-icon>\n                                    <span class=\"adf-error-text\">{{'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.DATE' | translate}}</span>\n                                </mat-error>\n                            }\n                        </mat-form-field>\n\n                        <adf-cloud-date-range-filter *ngIf=\"processFilterProperty.type === 'date-range'\"\n                            [processFilterProperty]=\"processFilterProperty\"\n                            [options]=\"processFilterProperty.dateFilterOptions\"\n                            (dateTypeChange)=\"onDateTypeChange($event, processFilterProperty)\"\n                            (dateChanged)=\"onDateRangeFilterChanged($event, processFilterProperty)\" />\n                        <adf-cloud-people\n                            *ngIf=\"processFilterProperty.type === 'people'\"\n                            [preSelectUsers]=\"initiatorOptions\"\n                            [title]=\"processFilterProperty.label\"\n                            [validate]=\"true\"\n                            [appName]=\"appName\"\n                            [mode]=\"processFilterProperty.selectionMode\"\n                            (changedUsers)=\"onChangedUser($event, processFilterProperty)\" />\n                    </ng-container>\n                </div>\n            </form>\n        </ng-container>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [".adf-edit-process-filter-date-error-container{position:absolute;height:20px;margin-top:12px;width:100%}.adf-edit-process-filter-date-error-container>div{display:flex;flex-flow:row;justify-content:flex-start}.adf-edit-process-filter-date-error-container .adf-error-text{padding-right:8px;height:16px;width:auto}.adf-cloud-edit-process-filter-loading-margin{margin-left:calc((100% - 100px)/2);margin-right:calc((100% - 100px)/2)}.adf-edit-process-filter-form{flex-flow:row wrap;display:flex;max-width:100%;place-content:stretch flex-start;align-items:stretch}.adf-edit-process-filter-form :not(:last-child){margin-right:10px}.adf-edit-process-filter-form mat-form-field,.adf-edit-process-filter-form adf-cloud-people{flex:1 1 23%;max-width:23%}@media(max-width:599.9px){.adf-edit-process-filter-form{flex-flow:column}.adf-edit-process-filter-form :not(:last-child){margin-bottom:10px;margin-right:0}}.adf-edit-process-filter-header{height:48px}.adf-edit-process-filter-header__description{place-content:center space-between}.adf-form-field-input .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: "component", type: DateRangeFilterComponent, selector: "adf-cloud-date-range-filter", inputs: ["processFilterProperty", "options"], outputs: ["dateChanged", "dateTypeChange"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: EditProcessFilterCloudComponent, isStandalone: true, selector: "adf-cloud-edit-process-filter", inputs: { appName: "appName", role: "role", id: "id", filterProperties: "filterProperties", sortProperties: "sortProperties", actions: "actions", environmentId: "environmentId", environmentList: "environmentList", showFilterActions: "showFilterActions", showTitle: "showTitle", showProcessFilterName: "showProcessFilterName", processFilter: "processFilter" }, outputs: { filterChange: "filterChange", action: "action" }, usesOnChanges: true, ngImport: i0, template: "<mat-accordion [hideToggle]=\"isLoading\" class=\"adf-edit-process-filter\">\n    <mat-expansion-panel (afterExpand)=\"onExpand()\" (closed)=\"onClose()\">\n        <mat-expansion-panel-header *ngIf=\"processFilter\" id=\"adf-edit-process-filter-expansion-header\" class=\"adf-edit-process-filter-header\">\n            <ng-container *ngIf=\"!isLoading; else loadingTemplate\">\n                <mat-panel-title *ngIf=\"showProcessFilterName\" id=\"adf-edit-process-filter-title-id\" class=\"adf-edit-process-filter-header__title\">\n                    {{processFilter.name | translate}}</mat-panel-title>\n                <mat-panel-description  class=\"adf-edit-process-filter-header__description\" id=\"adf-edit-process-filter-sub-title-id\">\n                    <span *ngIf=\"showTitle\"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>\n                    <div *ngIf=\"showFilterActions\" class=\"adf-cloud-edit-process-filter-actions\">\n                        <ng-container *ngIf=\"toggleFilterActions\">\n                            <button \n                                *ngFor=\"let filterAction of processFilterActions\"\n                                mat-icon-button\n                                [title]=\"filterAction.tooltip | translate\"\n                                [attr.data-automation-id]=\"'adf-filter-action-' + filterAction.actionType\"\n                                [disabled]=\"isDisabledAction(filterAction)\"\n                                (click)=\"executeFilterActions($event, filterAction)\"\n                            >\n                                @if (filterAction.icon.includes(':')) {\n                                    <mat-icon [svgIcon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                } @else {\n                                    <mat-icon [adf-icon]=\"filterAction.icon\" aria-hidden=\"true\" />\n                                }   \n                            </button>\n                        </ng-container>\n                    </div>\n                </mat-panel-description>\n            </ng-container>\n            <ng-template #loadingTemplate>\n                <div class=\"adf-cloud-edit-process-filter-loading-margin\">\n                    <mat-spinner [diameter]=\"30\" />\n                </div>\n            </ng-template>\n        </mat-expansion-panel-header>\n        <ng-container *ngIf=\"!isLoading\">\n            <form [formGroup]=\"editProcessFilterForm\" *ngIf=\"editProcessFilterForm\" class=\"adf-edit-process-filter-content\">\n                <div class=\"adf-edit-process-filter-form\">\n                    <ng-container *ngFor=\"let processFilterProperty of processFilterProperties; trackBy: filterTracker\">\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'select'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label class=\"adf-edit-process-filter-content__select-label\">{{processFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"processFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\">\n                                <mat-option\n                                    *ngFor=\"let propertyOption of processFilterProperty.options\"\n                                    [value]=\"propertyOption.value\"\n                                    [attr.data-automation-id]=\"'adf-cloud-edit-process-property-options-' + processFilterProperty.key\"\n                                >{{ propertyOption.label | translate }}</mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'multi-select'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label class=\"adf-edit-process-filter-content__select-label\">{{processFilterProperty.label | translate}}</mat-label>\n                            <mat-select\n                                [formControlName]=\"processFilterProperty.key\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\"\n                                [multiple]=\"true\">\n                                <mat-option *ngFor=\"let propertyOption of processFilterProperty.options\" [value]=\"propertyOption.value\" [attr.data-automation-id]=\"'adf-cloud-edit-process-property-options-' + processFilterProperty.key\">\n                                    {{ propertyOption.label | translate }}\n                                </mat-option>\n                            </mat-select>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'text'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label class=\"adf-edit-process-filter-content__text-label\">{{processFilterProperty.label | translate}}</mat-label>\n                            <input matInput\n                                [formControlName]=\"processFilterProperty.key\"\n                                type=\"text\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\"/>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" *ngIf=\"processFilterProperty.type === 'number'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <input matInput\n                                [formControlName]=\"processFilterProperty.key\"\n                                type=\"number\" min=\"0\"\n                                placeholder=\"{{processFilterProperty.label | translate}}\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\"/>\n                        </mat-form-field>\n                        <mat-form-field [floatLabel]=\"'auto'\" class=\"adf-form-field-input\" *ngIf=\"processFilterProperty.type === 'date'\" [attr.data-automation-id]=\"processFilterProperty.key\">\n                            <mat-label>{{processFilterProperty.label | translate}}</mat-label>\n                            <input\n                                matInput\n                                [formControlName]=\"processFilterProperty.key\"\n                                (keyup)=\"onDateChanged($any($event).target.value, processFilterProperty)\"\n                                (dateChange)=\"onDateChanged($event.value, processFilterProperty)\"\n                                [matDatepicker]=\"dateController\"\n                                placeholder=\"{{processFilterProperty.label | translate}}\"\n                                [attr.data-automation-id]=\"'adf-cloud-edit-process-property-' + processFilterProperty.key\">\n                            <mat-datepicker-toggle\n                                matSuffix [for]=\"dateController\"\n                               [attr.data-automation-id]=\"'adf-cloud-edit-process-property-date-toggle-' + processFilterProperty.key\" />\n                            <mat-datepicker #dateController [attr.data-automation-id]=\"'adf-cloud-edit-process-property-date-picker-' + processFilterProperty.key\" />\n                            @if (hasError(processFilterProperty)) {\n                                <mat-error>\n                                    <mat-icon class=\"adf-error-icon\">error_outline</mat-icon>\n                                    <span class=\"adf-error-text\">{{'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.DATE' | translate}}</span>\n                                </mat-error>\n                            }\n                        </mat-form-field>\n\n                        <adf-cloud-date-range-filter *ngIf=\"processFilterProperty.type === 'date-range'\"\n                            [processFilterProperty]=\"processFilterProperty\"\n                            [options]=\"processFilterProperty.dateFilterOptions\"\n                            (dateTypeChange)=\"onDateTypeChange($event, processFilterProperty)\"\n                            (dateChanged)=\"onDateRangeFilterChanged($event, processFilterProperty)\" />\n                        <adf-cloud-people\n                            *ngIf=\"processFilterProperty.type === 'people'\"\n                            [preSelectUsers]=\"initiatorOptions\"\n                            [title]=\"processFilterProperty.label\"\n                            [validate]=\"true\"\n                            [appName]=\"appName\"\n                            [mode]=\"processFilterProperty.selectionMode\"\n                            (changedUsers)=\"onChangedUser($event, processFilterProperty)\" />\n                    </ng-container>\n                </div>\n            </form>\n        </ng-container>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [".adf-edit-process-filter-date-error-container{position:absolute;height:20px;margin-top:12px;width:100%}.adf-edit-process-filter-date-error-container>div{display:flex;flex-flow:row;justify-content:flex-start}.adf-edit-process-filter-date-error-container .adf-error-text{padding-right:8px;height:16px;width:auto}.adf-cloud-edit-process-filter-loading-margin{margin-left:calc((100% - 100px)/2);margin-right:calc((100% - 100px)/2)}.adf-edit-process-filter-form{flex-flow:row wrap;display:flex;max-width:100%;place-content:stretch flex-start;align-items:stretch}.adf-edit-process-filter-form :not(:last-child){margin-right:10px}.adf-edit-process-filter-form mat-form-field,.adf-edit-process-filter-form adf-cloud-people{flex:1 1 23%;max-width:23%}@media(max-width:599.9px){.adf-edit-process-filter-form{flex-flow:column}.adf-edit-process-filter-form :not(:last-child){margin-bottom:10px;margin-right:0}}.adf-edit-process-filter-header{height:48px}.adf-edit-process-filter-header__description{place-content:center space-between}.adf-form-field-input .adf-error-icon{font-size:16px;width:16px;height:16px;margin-right:4px;vertical-align:text-bottom}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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: "component", type: DateRangeFilterComponent, selector: "adf-cloud-date-range-filter", inputs: ["processFilterProperty", "options"], outputs: ["dateChanged", "dateTypeChange"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: EditProcessFilterCloudComponent, decorators: [{
             type: Component,
@@ -14143,7 +14143,7 @@ class StartProcessCloudComponent {
         return processName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StartProcessCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: StartProcessCloudComponent, isStandalone: true, selector: "adf-cloud-start-process", inputs: { appName: "appName", maxNameLength: "maxNameLength", name: "name", processDefinitionName: "processDefinitionName", variables: "variables", values: "values", showSelectProcessDropdown: "showSelectProcessDropdown", showTitle: "showTitle", showCancelButton: "showCancelButton", displayModeConfigurations: "displayModeConfigurations", enableParentVisibilityCheck: "enableParentVisibilityCheck" }, outputs: { success: "success", cancel: "cancel", error: "error", formContentClicked: "formContentClicked", processDefinitionSelection: "processDefinitionSelection", customOutcomeSelected: "customOutcomeSelected" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [LocalizedDatePipe], viewQueries: [{ propertyName: "inputAutocomplete", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (processDefinitionLoaded && !isFormCloudLoading) {\n    <mat-card appearance=\"outlined\" class=\"adf-start-process\">\n        <mat-card-content>\n            @if (showTitle) {\n                <mat-card-title class=\"adf-title\">\n                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}\n                </mat-card-title>\n            }\n\n            @if (errorMessageId) {\n                <mat-card-subtitle class=\"adf-error-message\" id=\"error-message\">\n                    {{ errorMessageId | translate }}\n                </mat-card-subtitle>\n            }\n\n            @if (!isProcessDefinitionsEmpty) {\n                <div>\n                    <form [formGroup]=\"processForm\" class=\"adf-select-process-form\">\n                        @if (showSelectProcessDropdown) {\n                            <mat-form-field\n                                class=\"adf-process-input-container\"\n                                floatLabel=\"always\"\n                                data-automation-id=\"adf-select-cloud-process-dropdown\"\n                            >\n                                <mat-label class=\"adf-start-process-input-label\">{{\n                                    'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate\n                                }}</mat-label>\n                                <input matInput formControlName=\"processDefinition\" [matAutocomplete]=\"auto\" id=\"processDefinitionName\" />\n\n                                <div class=\"adf-process-input-autocomplete\">\n                                    <mat-autocomplete\n                                        #auto=\"matAutocomplete\"\n                                        id=\"processDefinitionOptions\"\n                                        [displayWith]=\"displayProcessNameOnDropdown\"\n                                        (optionSelected)=\"setProcessDefinitionOnForm($event.option.value)\"\n                                    >\n                                        <mat-option\n                                            *ngFor=\"let processDef of filteredProcesses\"\n                                            [value]=\"getProcessDefinitionValue(processDef)\"\n                                            (click)=\"processDefinitionSelectionChanged(processDef)\"\n                                        >\n                                            {{ getProcessDefinitionValue(processDef) }}\n                                        </mat-option>\n                                    </mat-autocomplete>\n\n                                    <button\n                                        id=\"adf-select-process-dropdown\"\n                                        title=\"{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}\"\n                                        mat-icon-button\n                                        (click)=\"displayDropdown($event)\"\n                                    >\n                                        <mat-icon adf-icon=\"arrow_drop_down\" />\n                                    </button>\n                                </div>\n                                @if (processDefinition.hasError('required')) {\n                                    <mat-error>\n                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}\n                                    </mat-error>\n                                }\n                            </mat-form-field>\n                        }\n\n                        <adf-inplace-form-input [control]=\"processInstanceName\">\n                            <ng-container label>\n                                {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}\n                            </ng-container>\n\n                            <ng-container error>\n                                @if (processInstanceName.hasError('required')) {\n                                    <span>\n                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}\n                                    </span>\n                                }\n                                @if (processInstanceName.hasError('maxlength')) {\n                                    <span id=\"adf-start-process-maxlength-error\">\n                                        {{\n                                            'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH'\n                                                | translate: { characters: maxNameLength }\n                                        }}\n                                    </span>\n                                }\n                                @if (processInstanceName.hasError('pattern')) {\n                                    <span>\n                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}\n                                    </span>\n                                }\n                            </ng-container>\n                        </adf-inplace-form-input>\n                    </form>\n\n                    @if (hasForm) {\n                        <adf-cloud-form\n                            #startForm\n                            [appName]=\"appName\"\n                            [appVersion]=\"processDefinitionCurrent.appVersion\"\n                            [data]=\"resolvedValues\"\n                            [formId]=\"processDefinitionCurrent.formKey\"\n                            [displayModeConfigurations]=\"displayModeConfigurations\"\n                            [enableParentVisibilityCheck]=\"enableParentVisibilityCheck\"\n                            [showSaveButton]=\"showSaveButton\"\n                            [showCompleteButton]=\"showCompleteButton\"\n                            [showRefreshButton]=\"false\"\n                            [showValidationIcon]=\"false\"\n                            [showTitle]=\"false\"\n                            (formContentClicked)=\"onFormContentClicked($event)\"\n                            (formLoaded)=\"onFormLoaded($event)\"\n                            (executeOutcome)=\"onCustomOutcomeClicked($event)\"\n                        >\n                            <adf-cloud-form-custom-outcomes>\n                                <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                            </adf-cloud-form-custom-outcomes>\n                        </adf-cloud-form>\n                    } @else if (hasScreen) {\n                        <adf-cloud-start-process-screen-cloud\n                            [screenId]=\"processDefinitionCurrent.formKey\"\n                            [appName]=\"appName\"\n                            [processDefinitionId]=\"processDefinitionCurrent?.id ?? ''\"\n                            [resolvedValues]=\"resolvedValues\"\n                            (screenStartProcessPayloadChange)=\"onScreenStartProcessPayloadChange($event)\"\n                            (disableStartProcessButton)=\"onDisableStartProcessButtonForScreen($event)\"\n                        >\n                            <adf-cloud-form-custom-outcomes>\n                                <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                            </adf-cloud-form-custom-outcomes>\n                        </adf-cloud-start-process-screen-cloud>\n                    } @else {\n                        <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                    }\n                </div>\n            } @else {\n                @if (processDefinitionLoaded) {\n                    <mat-card-content>\n                        <mat-card-subtitle class=\"error-message\" id=\"no-process-message\">\n                            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}\n                        </mat-card-subtitle>\n                    </mat-card-content>\n                }\n            }\n        </mat-card-content>\n    </mat-card>\n} @else {\n    <div class=\"adf-loading-container\">\n        <mat-progress-spinner class=\"adf-loading\" mode=\"indeterminate\" />\n    </div>\n}\n\n<ng-template #taskFormCloudButtons>\n    <div class=\"adf-start-process-cloud-actions\">\n        @if (showCancelButton) {\n            <button mat-button (click)=\"cancelStartProcess()\" id=\"cancel_process\">\n                {{ cancelButtonLabel }}\n            </button>\n        }\n        @if (showStartProcessButton$ | async) {\n            <button\n                mat-flat-button\n                [disabled]=\"disableStartButton || !isProcessFormValid\"\n                (click)=\"startProcess()\"\n                data-automation-id=\"btn-start\"\n                id=\"button-start\"\n                class=\"adf-btn-start\"\n            >\n                {{ startProcessButtonLabel }}\n            </button>\n        }\n    </div>\n</ng-template>\n", styles: [".adf-start-process-cloud-actions{display:flex;justify-content:flex-end}.adf-select-process-form{display:flex;flex-direction:column}.adf-title{padding-bottom:1.25em}.adf-error-message{padding-left:.5em}.adf-process-input-container{margin:0 7px}.adf-process-input-autocomplete{display:flex}.adf-process-input-autocomplete button{position:absolute;right:-14px;top:0}.adf-form-container .adf-form-container-card:has(.adf-form-container-card-content){box-shadow:none;padding:0}.adf-start-form-actions{text-align:right}.adf-loading{margin:auto}.adf-loading-container{min-height:300px;display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InplaceFormInputComponent, selector: "adf-inplace-form-input", inputs: ["control"] }, { 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: 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: "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: MatOptionModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormCloudComponent, selector: "adf-cloud-form", inputs: ["appName", "appVersion", "formId", "processInstanceId", "taskId", "data", "displayModeConfigurations", "showCompleteButton", "customSaveButtonText", "customCompleteButtonText", "enableParentVisibilityCheck", "form"], outputs: ["formSaved", "formCompleted", "formLoaded", "formDataRefreshed", "formContentClicked", "displayModeOn", "displayModeOff"] }, { kind: "component", type: FormCustomOutcomesComponent, selector: "adf-cloud-form-custom-outcomes" }, { kind: "component", type: StartProcessScreenCloudComponent, selector: "adf-cloud-start-process-screen-cloud", inputs: ["appName", "processDefinitionId", "resolvedValues"], outputs: ["screenStartProcessPayloadChange", "disableStartProcessButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: StartProcessCloudComponent, isStandalone: true, selector: "adf-cloud-start-process", inputs: { appName: "appName", maxNameLength: "maxNameLength", name: "name", processDefinitionName: "processDefinitionName", variables: "variables", values: "values", showSelectProcessDropdown: "showSelectProcessDropdown", showTitle: "showTitle", showCancelButton: "showCancelButton", displayModeConfigurations: "displayModeConfigurations", enableParentVisibilityCheck: "enableParentVisibilityCheck" }, outputs: { success: "success", cancel: "cancel", error: "error", formContentClicked: "formContentClicked", processDefinitionSelection: "processDefinitionSelection", customOutcomeSelected: "customOutcomeSelected" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [LocalizedDatePipe], viewQueries: [{ propertyName: "inputAutocomplete", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (processDefinitionLoaded && !isFormCloudLoading) {\n    <mat-card appearance=\"outlined\" class=\"adf-start-process\">\n        <mat-card-content>\n            @if (showTitle) {\n                <mat-card-title class=\"adf-title\">\n                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}\n                </mat-card-title>\n            }\n\n            @if (errorMessageId) {\n                <mat-card-subtitle class=\"adf-error-message\" id=\"error-message\">\n                    {{ errorMessageId | translate }}\n                </mat-card-subtitle>\n            }\n\n            @if (!isProcessDefinitionsEmpty) {\n                <div>\n                    <form [formGroup]=\"processForm\" class=\"adf-select-process-form\">\n                        @if (showSelectProcessDropdown) {\n                            <mat-form-field\n                                class=\"adf-process-input-container\"\n                                floatLabel=\"always\"\n                                data-automation-id=\"adf-select-cloud-process-dropdown\"\n                            >\n                                <mat-label class=\"adf-start-process-input-label\">{{\n                                    'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate\n                                }}</mat-label>\n                                <input matInput formControlName=\"processDefinition\" [matAutocomplete]=\"auto\" id=\"processDefinitionName\" />\n\n                                <div class=\"adf-process-input-autocomplete\">\n                                    <mat-autocomplete\n                                        #auto=\"matAutocomplete\"\n                                        id=\"processDefinitionOptions\"\n                                        [displayWith]=\"displayProcessNameOnDropdown\"\n                                        (optionSelected)=\"setProcessDefinitionOnForm($event.option.value)\"\n                                    >\n                                        <mat-option\n                                            *ngFor=\"let processDef of filteredProcesses\"\n                                            [value]=\"getProcessDefinitionValue(processDef)\"\n                                            (click)=\"processDefinitionSelectionChanged(processDef)\"\n                                        >\n                                            {{ getProcessDefinitionValue(processDef) }}\n                                        </mat-option>\n                                    </mat-autocomplete>\n\n                                    <button\n                                        id=\"adf-select-process-dropdown\"\n                                        title=\"{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}\"\n                                        mat-icon-button\n                                        (click)=\"displayDropdown($event)\"\n                                    >\n                                        <mat-icon adf-icon=\"arrow_drop_down\" />\n                                    </button>\n                                </div>\n                                @if (processDefinition.hasError('required')) {\n                                    <mat-error>\n                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}\n                                    </mat-error>\n                                }\n                            </mat-form-field>\n                        }\n\n                        <adf-inplace-form-input [control]=\"processInstanceName\">\n                            <ng-container label>\n                                {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}\n                            </ng-container>\n\n                            <ng-container error>\n                                @if (processInstanceName.hasError('required')) {\n                                    <span>\n                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}\n                                    </span>\n                                }\n                                @if (processInstanceName.hasError('maxlength')) {\n                                    <span id=\"adf-start-process-maxlength-error\">\n                                        {{\n                                            'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH'\n                                                | translate: { characters: maxNameLength }\n                                        }}\n                                    </span>\n                                }\n                                @if (processInstanceName.hasError('pattern')) {\n                                    <span>\n                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}\n                                    </span>\n                                }\n                            </ng-container>\n                        </adf-inplace-form-input>\n                    </form>\n\n                    @if (hasForm) {\n                        <adf-cloud-form\n                            #startForm\n                            [appName]=\"appName\"\n                            [appVersion]=\"processDefinitionCurrent.appVersion\"\n                            [data]=\"resolvedValues\"\n                            [formId]=\"processDefinitionCurrent.formKey\"\n                            [displayModeConfigurations]=\"displayModeConfigurations\"\n                            [enableParentVisibilityCheck]=\"enableParentVisibilityCheck\"\n                            [showSaveButton]=\"showSaveButton\"\n                            [showCompleteButton]=\"showCompleteButton\"\n                            [showRefreshButton]=\"false\"\n                            [showValidationIcon]=\"false\"\n                            [showTitle]=\"false\"\n                            (formContentClicked)=\"onFormContentClicked($event)\"\n                            (formLoaded)=\"onFormLoaded($event)\"\n                            (executeOutcome)=\"onCustomOutcomeClicked($event)\"\n                        >\n                            <adf-cloud-form-custom-outcomes>\n                                <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                            </adf-cloud-form-custom-outcomes>\n                        </adf-cloud-form>\n                    } @else if (hasScreen) {\n                        <adf-cloud-start-process-screen-cloud\n                            [screenId]=\"processDefinitionCurrent.formKey\"\n                            [appName]=\"appName\"\n                            [processDefinitionId]=\"processDefinitionCurrent?.id ?? ''\"\n                            [resolvedValues]=\"resolvedValues\"\n                            (screenStartProcessPayloadChange)=\"onScreenStartProcessPayloadChange($event)\"\n                            (disableStartProcessButton)=\"onDisableStartProcessButtonForScreen($event)\"\n                        >\n                            <adf-cloud-form-custom-outcomes>\n                                <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                            </adf-cloud-form-custom-outcomes>\n                        </adf-cloud-start-process-screen-cloud>\n                    } @else {\n                        <ng-template [ngTemplateOutlet]=\"taskFormCloudButtons\" />\n                    }\n                </div>\n            } @else {\n                @if (processDefinitionLoaded) {\n                    <mat-card-content>\n                        <mat-card-subtitle class=\"error-message\" id=\"no-process-message\">\n                            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}\n                        </mat-card-subtitle>\n                    </mat-card-content>\n                }\n            }\n        </mat-card-content>\n    </mat-card>\n} @else {\n    <div class=\"adf-loading-container\">\n        <mat-progress-spinner class=\"adf-loading\" mode=\"indeterminate\" />\n    </div>\n}\n\n<ng-template #taskFormCloudButtons>\n    <div class=\"adf-start-process-cloud-actions\">\n        @if (showCancelButton) {\n            <button mat-button (click)=\"cancelStartProcess()\" id=\"cancel_process\">\n                {{ cancelButtonLabel }}\n            </button>\n        }\n        @if (showStartProcessButton$ | async) {\n            <button\n                mat-flat-button\n                [disabled]=\"disableStartButton || !isProcessFormValid\"\n                (click)=\"startProcess()\"\n                data-automation-id=\"btn-start\"\n                id=\"button-start\"\n                class=\"adf-btn-start\"\n            >\n                {{ startProcessButtonLabel }}\n            </button>\n        }\n    </div>\n</ng-template>\n", styles: [".adf-start-process-cloud-actions{display:flex;justify-content:flex-end}.adf-select-process-form{display:flex;flex-direction:column}.adf-title{padding-bottom:1.25em}.adf-error-message{padding-left:.5em}.adf-process-input-container{margin:0 7px}.adf-process-input-autocomplete{display:flex}.adf-process-input-autocomplete button{position:absolute;right:-14px;top:0}.adf-form-container .adf-form-container-card:has(.adf-form-container-card-content){box-shadow:none;padding:0}.adf-start-form-actions{text-align:right}.adf-loading{margin:auto}.adf-loading-container{min-height:300px;display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InplaceFormInputComponent, selector: "adf-inplace-form-input", inputs: ["control"] }, { 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: 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: "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: MatOptionModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormCloudComponent, selector: "adf-cloud-form", inputs: ["appName", "appVersion", "formId", "processInstanceId", "taskId", "data", "displayModeConfigurations", "showCompleteButton", "customSaveButtonText", "customCompleteButtonText", "enableParentVisibilityCheck", "form"], outputs: ["formSaved", "formCompleted", "formLoaded", "formDataRefreshed", "formContentClicked", "displayModeOn", "displayModeOff"] }, { kind: "component", type: FormCustomOutcomesComponent, selector: "adf-cloud-form-custom-outcomes" }, { kind: "component", type: StartProcessScreenCloudComponent, selector: "adf-cloud-start-process-screen-cloud", inputs: ["appName", "processDefinitionId", "resolvedValues"], outputs: ["screenStartProcessPayloadChange", "disableStartProcessButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: StartProcessCloudComponent, decorators: [{
             type: Component,
@@ -14511,11 +14511,11 @@ class GroupCloudWidgetComponent extends WidgetComponent {
         return this.mode === 'multiple';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupCloudWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: GroupCloudWidgetComponent, isStandalone: true, selector: "group-cloud-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, providers: [ReactivePreselectionService], viewQueries: [{ propertyName: "groupCloud", first: true, predicate: GroupCloudComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"adf-dropdown-widget {{field.className}}\"\n    [class.adf-invalid]=\"!field.isValid && isTouched()\"\n    [class.adf-readonly]=\"field.readOnly\"\n    [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n    <div *ngIf=\"field.leftLabels\">\n        <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n            >{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n        >\n    </div>\n    <div>\n        <adf-cloud-group\n            [mode]=\"mode\"\n            [title]=\"title\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [roles]=\"roles\"\n            [searchGroupsControl]=\"search\"\n            [required]=\"field.required\"\n            (changedGroups)=\"onChangedGroup($event)\"\n            [preSelectGroups]=\"preSelectGroup\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label] = \"field.name | translate\"\n        />\n        <error-widget [error]=\"field.validationSummary\" />\n        <error-widget\n            class=\"adf-dropdown-required-message\"\n            *ngIf=\"isInvalidFieldRequired() && isTouched()\"\n            required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\"\n        />\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "component", type: GroupCloudComponent, selector: "adf-cloud-group", inputs: ["label", "appName", "title", "mode", "preSelectGroups", "validate", "readOnly", "required", "groupChipsCtrl", "searchGroupsControl", "roles"], outputs: ["selectGroup", "removeGroup", "changedGroups", "warning"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: GroupCloudWidgetComponent, isStandalone: true, selector: "group-cloud-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, providers: [ReactivePreselectionService], viewQueries: [{ propertyName: "groupCloud", first: true, predicate: GroupCloudComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"adf-dropdown-widget {{field.className}}\"\n    [class.adf-invalid]=\"!field.isValid && isTouched()\"\n    [class.adf-readonly]=\"field.readOnly\"\n    [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n    @if (field.leftLabels) {\n        <div>\n            <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n                >{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n            >\n        </div>\n    }\n    <div>\n        <adf-cloud-group\n            [mode]=\"mode\"\n            [title]=\"title\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [roles]=\"roles\"\n            [searchGroupsControl]=\"search\"\n            [required]=\"field.required\"\n            (changedGroups)=\"onChangedGroup($event)\"\n            [preSelectGroups]=\"preSelectGroup\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label]=\"field.name | translate\"\n        />\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: GroupCloudComponent, selector: "adf-cloud-group", inputs: ["label", "appName", "title", "mode", "preSelectGroups", "validate", "readOnly", "required", "groupChipsCtrl", "searchGroupsControl", "roles"], outputs: ["selectGroup", "removeGroup", "changedGroups", "warning"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: GroupCloudWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'group-cloud-widget', imports: [CommonModule, TranslatePipe, ErrorWidgetComponent, GroupCloudComponent], host: {
+            args: [{ selector: 'group-cloud-widget', imports: [CommonModule, TranslatePipe, GroupCloudComponent], host: {
                         '(click)': 'event($event)',
                         '(blur)': 'event($event)',
                         '(change)': 'event($event)',
@@ -14525,7 +14525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         '(input)': 'event($event)',
                         '(invalid)': 'event($event)',
                         '(select)': 'event($event)'
-                    }, encapsulation: ViewEncapsulation.None, providers: [ReactivePreselectionService], template: "<div\n    class=\"adf-dropdown-widget {{field.className}}\"\n    [class.adf-invalid]=\"!field.isValid && isTouched()\"\n    [class.adf-readonly]=\"field.readOnly\"\n    [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n    <div *ngIf=\"field.leftLabels\">\n        <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n            >{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n        >\n    </div>\n    <div>\n        <adf-cloud-group\n            [mode]=\"mode\"\n            [title]=\"title\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [roles]=\"roles\"\n            [searchGroupsControl]=\"search\"\n            [required]=\"field.required\"\n            (changedGroups)=\"onChangedGroup($event)\"\n            [preSelectGroups]=\"preSelectGroup\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label] = \"field.name | translate\"\n        />\n        <error-widget [error]=\"field.validationSummary\" />\n        <error-widget\n            class=\"adf-dropdown-required-message\"\n            *ngIf=\"isInvalidFieldRequired() && isTouched()\"\n            required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\"\n        />\n    </div>\n</div>\n" }]
+                    }, encapsulation: ViewEncapsulation.None, providers: [ReactivePreselectionService], template: "<div\n    class=\"adf-dropdown-widget {{field.className}}\"\n    [class.adf-invalid]=\"!field.isValid && isTouched()\"\n    [class.adf-readonly]=\"field.readOnly\"\n    [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n    @if (field.leftLabels) {\n        <div>\n            <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n                >{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n            >\n        </div>\n    }\n    <div>\n        <adf-cloud-group\n            [mode]=\"mode\"\n            [title]=\"title\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [roles]=\"roles\"\n            [searchGroupsControl]=\"search\"\n            [required]=\"field.required\"\n            (changedGroups)=\"onChangedGroup($event)\"\n            [preSelectGroups]=\"preSelectGroup\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label]=\"field.name | translate\"\n        />\n    </div>\n</div>\n" }]
         }], propDecorators: { groupCloud: [{
                 type: ViewChild,
                 args: [GroupCloudComponent]
@@ -14601,11 +14601,11 @@ class PeopleCloudWidgetComponent extends WidgetComponent {
         return this.mode === 'multiple';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PeopleCloudWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PeopleCloudWidgetComponent, isStandalone: true, selector: "people-cloud-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, providers: [ReactivePreselectionService], viewQueries: [{ propertyName: "peopleCloud", first: true, predicate: PeopleCloudComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"adf-dropdown-widget {{field.className}}\"\n     [class.adf-invalid]=\"!field.isValid && isTouched()\"\n     [class.adf-readonly]=\"field.readOnly\"\n     [class.adf-left-label-input-container]=\"field.leftLabels\">\n     <div *ngIf=\"field.leftLabels\">\n        <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\">{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label>\n    </div>\n    <div>\n        <adf-cloud-people\n            [preSelectUsers]=\"preSelectUsers\"\n            [appName]=\"appName\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [searchUserCtrl]=\"search\"\n            [required]=\"field.required\"\n            (changedUsers)=\"onChangedUser($event)\"\n            [roles]=\"roles\"\n            [mode]=\"mode\"\n            [groupsRestriction]=\"groupsRestriction\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label]=\"field.name | translate\"\n        />\n        <error-widget [error]=\"field.validationSummary\" />\n        <error-widget\n            class=\"adf-dropdown-required-message\"\n            *ngIf=\"isInvalidFieldRequired() && isTouched()\"\n            required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n    </div>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: PeopleCloudWidgetComponent, isStandalone: true, selector: "people-cloud-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, providers: [ReactivePreselectionService], viewQueries: [{ propertyName: "peopleCloud", first: true, predicate: PeopleCloudComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"adf-dropdown-widget {{field.className}}\"\n    [class.adf-invalid]=\"!field.isValid && isTouched()\"\n    [class.adf-readonly]=\"field.readOnly\"\n    [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n    @if (field.leftLabels) {\n        <div>\n            <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n                >{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n            >\n        </div>\n    }\n    <div>\n        <adf-cloud-people\n            [preSelectUsers]=\"preSelectUsers\"\n            [appName]=\"appName\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [searchUserCtrl]=\"search\"\n            [required]=\"field.required\"\n            (changedUsers)=\"onChangedUser($event)\"\n            [roles]=\"roles\"\n            [mode]=\"mode\"\n            [groupsRestriction]=\"groupsRestriction\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label]=\"field.name | translate\"\n        />\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PeopleCloudComponent, selector: "adf-cloud-people", inputs: ["label", "appName", "mode", "roles", "validate", "readOnly", "required", "preSelectUsers", "excludedUsers", "groupsRestriction", "userChipsCtrl", "searchUserCtrl", "title", "placeholder", "hideInputOnSingleSelection", "formFieldAppearance", "formFieldSubscriptSizing", "showErrors", "showFullNameOnHover"], outputs: ["selectUser", "removeUser", "changedUsers", "warning"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PeopleCloudWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'people-cloud-widget', imports: [CommonModule, TranslatePipe, ErrorWidgetComponent, PeopleCloudComponent, MatFormFieldModule], host: {
+            args: [{ selector: 'people-cloud-widget', imports: [CommonModule, TranslatePipe, PeopleCloudComponent], host: {
                         '(click)': 'event($event)',
                         '(blur)': 'event($event)',
                         '(change)': 'event($event)',
@@ -14615,7 +14615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         '(input)': 'event($event)',
                         '(invalid)': 'event($event)',
                         '(select)': 'event($event)'
-                    }, encapsulation: ViewEncapsulation.None, providers: [ReactivePreselectionService], template: "<div class=\"adf-dropdown-widget {{field.className}}\"\n     [class.adf-invalid]=\"!field.isValid && isTouched()\"\n     [class.adf-readonly]=\"field.readOnly\"\n     [class.adf-left-label-input-container]=\"field.leftLabels\">\n     <div *ngIf=\"field.leftLabels\">\n        <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\">{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label>\n    </div>\n    <div>\n        <adf-cloud-people\n            [preSelectUsers]=\"preSelectUsers\"\n            [appName]=\"appName\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [searchUserCtrl]=\"search\"\n            [required]=\"field.required\"\n            (changedUsers)=\"onChangedUser($event)\"\n            [roles]=\"roles\"\n            [mode]=\"mode\"\n            [groupsRestriction]=\"groupsRestriction\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label]=\"field.name | translate\"\n        />\n        <error-widget [error]=\"field.validationSummary\" />\n        <error-widget\n            class=\"adf-dropdown-required-message\"\n            *ngIf=\"isInvalidFieldRequired() && isTouched()\"\n            required=\"{{ 'FORM.FIELD.REQUIRED' | translate }}\" />\n    </div>\n</div>\n\n" }]
+                    }, encapsulation: ViewEncapsulation.None, providers: [ReactivePreselectionService], template: "<div\n    class=\"adf-dropdown-widget {{field.className}}\"\n    [class.adf-invalid]=\"!field.isValid && isTouched()\"\n    [class.adf-readonly]=\"field.readOnly\"\n    [class.adf-left-label-input-container]=\"field.leftLabels\"\n>\n    @if (field.leftLabels) {\n        <div>\n            <label class=\"adf-label adf-left-label\" [attr.for]=\"field.id\"\n                >{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span></label\n            >\n        </div>\n    }\n    <div>\n        <adf-cloud-people\n            [preSelectUsers]=\"preSelectUsers\"\n            [appName]=\"appName\"\n            [readOnly]=\"field.readOnly\"\n            [validate]=\"validate\"\n            [searchUserCtrl]=\"search\"\n            [required]=\"field.required\"\n            (changedUsers)=\"onChangedUser($event)\"\n            [roles]=\"roles\"\n            [mode]=\"mode\"\n            [groupsRestriction]=\"groupsRestriction\"\n            (blur)=\"markAsTouched()\"\n            [attr.title]=\"field.tooltip\"\n            [label]=\"field.name | translate\"\n        />\n    </div>\n</div>\n" }]
         }], propDecorators: { peopleCloud: [{
                 type: ViewChild,
                 args: [PeopleCloudComponent]
@@ -14816,7 +14816,7 @@ class RadioButtonsCloudWidgetComponent extends WidgetComponent {
         return this.isRestType() && this.hasRestUrl();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonsCloudWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadioButtonsCloudWidgetComponent, isStandalone: true, selector: "radio-buttons-cloud-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"adf-radio-buttons-widget-cloud {{field.className}}\"\n    [class.adf-readonly]=\"field.readOnly\" [id]=\"field.id\">\n    <div [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-button-container': 'adf-radio-button-container-horizontal'\">\n        <label class=\"adf-label\"\n               [attr.for]=\"field.id\">{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n        </label>\n        <mat-radio-group\n            [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'\"\n            class=\"adf-radio-group\"\n            [(ngModel)]=\"field.value\"\n            [disabled]=\"field.readOnly\">\n            <mat-radio-button\n                [title]=\"field.tooltip\"\n                [id]=\"field.id + '-' + opt.id\"\n                [name]=\"field.id\"\n                [value]=\"opt.id\"\n                [checked]=\"isChecked(opt)\"\n                (change)=\"onOptionClick(opt.id)\"\n                class=\"adf-radio-button\" *ngFor=\"let opt of field.options\" >\n                {{opt.name}}\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>\n    <error-widget class=\"adf-radio-group-error-message\" [error]=\"hasError()\" />\n</div>\n", styles: [".adf-radio-button-container{display:flex;flex-direction:column}.adf-radio-button-container .adf-label{width:auto;height:auto;white-space:normal}.adf-radio-button-container-horizontal{margin-bottom:15px;display:flex;flex-flow:column wrap;align-items:flex-start;justify-content:flex-start}.adf-radio-button-container-horizontal .adf-label{width:auto;height:auto;white-space:normal;margin-right:25%}.adf-radio-group{margin-top:15px;margin-left:5px;display:inline-flex;flex-direction:column}.adf-radio-group-horizontal{margin-top:0;margin-left:0;display:table-column-group}.adf-radio-button{margin:5px}.adf-radio-button label{white-space:normal;word-break:break-word}.adf-radio-group-error-message .adf-error-container{margin-top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadioButtonsCloudWidgetComponent, isStandalone: true, selector: "radio-buttons-cloud-widget", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"adf-radio-buttons-widget-cloud {{field.className}}\"\n    [class.adf-readonly]=\"field.readOnly\" [id]=\"field.id\">\n    <div [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-button-container': 'adf-radio-button-container-horizontal'\">\n        <label class=\"adf-label\"\n               [attr.for]=\"field.id\">{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n        </label>\n        <mat-radio-group\n            [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'\"\n            class=\"adf-radio-group\"\n            [(ngModel)]=\"field.value\"\n            [disabled]=\"field.readOnly\">\n            <mat-radio-button\n                [title]=\"field.tooltip\"\n                [id]=\"field.id + '-' + opt.id\"\n                [name]=\"field.id\"\n                [value]=\"opt.id\"\n                [checked]=\"isChecked(opt)\"\n                (change)=\"onOptionClick(opt.id)\"\n                class=\"adf-radio-button\" *ngFor=\"let opt of field.options\" >\n                {{opt.name}}\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>\n    <error-widget class=\"adf-radio-group-error-message\" [error]=\"hasError()\" />\n</div>\n", styles: [".adf-radio-button-container{display:flex;flex-direction:column}.adf-radio-button-container .adf-label{width:auto;height:auto;white-space:normal}.adf-radio-button-container-horizontal{display:flex;flex-flow:column wrap;align-items:flex-start;justify-content:flex-start}.adf-radio-button-container-horizontal .adf-label{width:auto;height:auto;white-space:normal;margin-right:25%}.adf-radio-group{margin-top:15px;margin-left:5px;display:inline-flex;flex-direction:column}.adf-radio-group-horizontal{margin-top:0;margin-left:0;display:table-column-group}.adf-radio-button{margin:5px}.adf-radio-button label{white-space:normal;word-break:break-word}.adf-radio-group-error-message .adf-error-container{margin-top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonsCloudWidgetComponent, decorators: [{
             type: Component,
@@ -14830,7 +14830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         '(input)': 'event($event)',
                         '(invalid)': 'event($event)',
                         '(select)': 'event($event)'
-                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-radio-buttons-widget-cloud {{field.className}}\"\n    [class.adf-readonly]=\"field.readOnly\" [id]=\"field.id\">\n    <div [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-button-container': 'adf-radio-button-container-horizontal'\">\n        <label class=\"adf-label\"\n               [attr.for]=\"field.id\">{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n        </label>\n        <mat-radio-group\n            [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'\"\n            class=\"adf-radio-group\"\n            [(ngModel)]=\"field.value\"\n            [disabled]=\"field.readOnly\">\n            <mat-radio-button\n                [title]=\"field.tooltip\"\n                [id]=\"field.id + '-' + opt.id\"\n                [name]=\"field.id\"\n                [value]=\"opt.id\"\n                [checked]=\"isChecked(opt)\"\n                (change)=\"onOptionClick(opt.id)\"\n                class=\"adf-radio-button\" *ngFor=\"let opt of field.options\" >\n                {{opt.name}}\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>\n    <error-widget class=\"adf-radio-group-error-message\" [error]=\"hasError()\" />\n</div>\n", styles: [".adf-radio-button-container{display:flex;flex-direction:column}.adf-radio-button-container .adf-label{width:auto;height:auto;white-space:normal}.adf-radio-button-container-horizontal{margin-bottom:15px;display:flex;flex-flow:column wrap;align-items:flex-start;justify-content:flex-start}.adf-radio-button-container-horizontal .adf-label{width:auto;height:auto;white-space:normal;margin-right:25%}.adf-radio-group{margin-top:15px;margin-left:5px;display:inline-flex;flex-direction:column}.adf-radio-group-horizontal{margin-top:0;margin-left:0;display:table-column-group}.adf-radio-button{margin:5px}.adf-radio-button label{white-space:normal;word-break:break-word}.adf-radio-group-error-message .adf-error-container{margin-top:5px}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-radio-buttons-widget-cloud {{field.className}}\"\n    [class.adf-readonly]=\"field.readOnly\" [id]=\"field.id\">\n    <div [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-button-container': 'adf-radio-button-container-horizontal'\">\n        <label class=\"adf-label\"\n               [attr.for]=\"field.id\">{{field.name | translate }}<span class=\"adf-asterisk\" [style.visibility]=\"isRequired() ? 'visible' : 'hidden'\">*</span>\n        </label>\n        <mat-radio-group\n            [ngClass]=\"(field.alignmentType === 'vertical') ? 'adf-radio-group': 'adf-radio-group-horizontal'\"\n            class=\"adf-radio-group\"\n            [(ngModel)]=\"field.value\"\n            [disabled]=\"field.readOnly\">\n            <mat-radio-button\n                [title]=\"field.tooltip\"\n                [id]=\"field.id + '-' + opt.id\"\n                [name]=\"field.id\"\n                [value]=\"opt.id\"\n                [checked]=\"isChecked(opt)\"\n                (change)=\"onOptionClick(opt.id)\"\n                class=\"adf-radio-button\" *ngFor=\"let opt of field.options\" >\n                {{opt.name}}\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>\n    <error-widget class=\"adf-radio-group-error-message\" [error]=\"hasError()\" />\n</div>\n", styles: [".adf-radio-button-container{display:flex;flex-direction:column}.adf-radio-button-container .adf-label{width:auto;height:auto;white-space:normal}.adf-radio-button-container-horizontal{display:flex;flex-flow:column wrap;align-items:flex-start;justify-content:flex-start}.adf-radio-button-container-horizontal .adf-label{width:auto;height:auto;white-space:normal;margin-right:25%}.adf-radio-group{margin-top:15px;margin-left:5px;display:inline-flex;flex-direction:column}.adf-radio-group-horizontal{margin-top:0;margin-left:0;display:table-column-group}.adf-radio-button{margin:5px}.adf-radio-button label{white-space:normal;word-break:break-word}.adf-radio-group-error-message .adf-error-container{margin-top:5px}\n"] }]
         }] });
 
 /*!
@@ -15406,11 +15406,11 @@ class DataTableWidgetComponent extends WidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataTableWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: DataTableWidgetComponent, isStandalone: true, selector: "data-table", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"adf-data-table-widget-container\">\n    <div class=\"adf-data-table-widget-label\">\n        <label\n            class=\"adf-label\"\n            [class.adf-left-label]=\"field.leftLabels\"\n            [attr.for]=\"field.id\">\n                {{field.name | translate }}\n        </label>\n    </div>\n\n    <ng-container *ngIf=\"!previewState; else previewTemplate\">\n        <adf-datatable data-automation-id=\"adf-data-table-widget\" [data]=\"dataSource\">\n            <adf-no-content-template>\n                <ng-template>\n                    <adf-empty-content\n                        icon=\"border_all\"\n                        [title]=\"'FORM.FIELD.DATA_TABLE_EMPTY_CONTENT' | translate\" />\n                </ng-template>\n            </adf-no-content-template>\n        </adf-datatable>\n\n        <error-widget *ngIf=\"dataTableLoadFailed\"\n            class=\"adf-data-table-widget-failed-message\"\n            [required]=\"'FORM.FIELD.DATA_TABLE_LOAD_FAILED' | translate\" />\n    </ng-container>\n\n    <ng-template #previewTemplate>\n        <adf-datatable data-automation-id=\"adf-data-table-widget-preview\" />\n        <div class=\"adf-preview-placeholder\"></div>\n    </ng-template>\n</div>\n", styles: [".adf-data-table-widget-failed-message{margin:10px}.adf-preview-placeholder{height:100%;width:100%;min-height:100px;margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormBaseModule }, { kind: "component", type: i3.ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "component", type: DataTableComponent, selector: "adf-datatable", inputs: ["data", "rows", "sorting", "columns", "selectionMode", "multiselect", "mainTableAction", "actions", "showMainDatatableActions", "showProvidedActions", "actionsPosition", "actionsVisibleOnHover", "fallbackThumbnail", "contextMenu", "rowStyle", "rowStyleClass", "showHeader", "stickyHeader", "loading", "noPermission", "rowMenuCacheEnabled", "resolverFn", "allowFiltering", "isResizingEnabled", "blurOnResize", "displayCheckboxesOnHover", "enableDragRows"], outputs: ["rowClick", "rowDblClick", "showRowContextMenu", "showRowActionsMenu", "executeRowAction", "columnOrderChanged", "columnsWidthChanged", "selectedItemsCountChanged", "dragDropped"] }, { kind: "directive", type: NoContentTemplateDirective, selector: "adf-no-content-template, no-content-template" }, { kind: "component", type: EmptyContentComponent, selector: "adf-empty-content", inputs: ["icon", "title", "subtitle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DataTableWidgetComponent, isStandalone: true, selector: "data-table", host: { listeners: { "click": "event($event)", "blur": "event($event)", "change": "event($event)", "focus": "event($event)", "focusin": "event($event)", "focusout": "event($event)", "input": "event($event)", "invalid": "event($event)", "select": "event($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"adf-data-table-widget-container\">\n    <div class=\"adf-data-table-widget-label\">\n        <label class=\"adf-label\" [class.adf-left-label]=\"field.leftLabels\" [attr.for]=\"field.id\"> {{field.name | translate }} </label>\n    </div>\n\n    @if (!previewState) {\n        <adf-datatable data-automation-id=\"adf-data-table-widget\" [data]=\"dataSource\">\n            <adf-no-content-template>\n                <ng-template>\n                    <adf-empty-content icon=\"border_all\" [title]=\"'FORM.FIELD.DATA_TABLE_EMPTY_CONTENT' | translate\" />\n                </ng-template>\n            </adf-no-content-template>\n        </adf-datatable>\n\n        <error-widget\n            class=\"adf-data-table-widget-failed-message\"\n            [required]=\"dataTableLoadFailed ? ('FORM.FIELD.DATA_TABLE_LOAD_FAILED' | translate) : ''\"\n        />\n    } @else {\n        <adf-datatable data-automation-id=\"adf-data-table-widget-preview\" />\n        <div class=\"adf-preview-placeholder\"></div>\n    }\n</div>\n", styles: [".adf-data-table-widget-failed-message{display:block;margin:10px}.adf-preview-placeholder{height:100%;width:100%;min-height:100px;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormBaseModule }, { kind: "component", type: i3.ErrorWidgetComponent, selector: "error-widget", inputs: ["error", "required"] }, { kind: "component", type: DataTableComponent, selector: "adf-datatable", inputs: ["data", "rows", "sorting", "columns", "selectionMode", "multiselect", "mainTableAction", "actions", "showMainDatatableActions", "showProvidedActions", "actionsPosition", "actionsVisibleOnHover", "fallbackThumbnail", "contextMenu", "rowStyle", "rowStyleClass", "showHeader", "stickyHeader", "loading", "noPermission", "rowMenuCacheEnabled", "resolverFn", "allowFiltering", "isResizingEnabled", "blurOnResize", "displayCheckboxesOnHover", "enableDragRows"], outputs: ["rowClick", "rowDblClick", "showRowContextMenu", "showRowActionsMenu", "executeRowAction", "columnOrderChanged", "columnsWidthChanged", "selectedItemsCountChanged", "dragDropped"] }, { kind: "directive", type: NoContentTemplateDirective, selector: "adf-no-content-template, no-content-template" }, { kind: "component", type: EmptyContentComponent, selector: "adf-empty-content", inputs: ["icon", "title", "subtitle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataTableWidgetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, TranslatePipe, FormBaseModule, DataTableComponent, NoContentTemplateDirective, EmptyContentComponent], selector: 'data-table', host: {
+            args: [{ standalone: true, imports: [TranslatePipe, FormBaseModule, DataTableComponent, NoContentTemplateDirective, EmptyContentComponent], selector: 'data-table', host: {
                         '(click)': 'event($event)',
                         '(blur)': 'event($event)',
                         '(change)': 'event($event)',
@@ -15420,7 +15420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         '(input)': 'event($event)',
                         '(invalid)': 'event($event)',
                         '(select)': 'event($event)'
-                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-data-table-widget-container\">\n    <div class=\"adf-data-table-widget-label\">\n        <label\n            class=\"adf-label\"\n            [class.adf-left-label]=\"field.leftLabels\"\n            [attr.for]=\"field.id\">\n                {{field.name | translate }}\n        </label>\n    </div>\n\n    <ng-container *ngIf=\"!previewState; else previewTemplate\">\n        <adf-datatable data-automation-id=\"adf-data-table-widget\" [data]=\"dataSource\">\n            <adf-no-content-template>\n                <ng-template>\n                    <adf-empty-content\n                        icon=\"border_all\"\n                        [title]=\"'FORM.FIELD.DATA_TABLE_EMPTY_CONTENT' | translate\" />\n                </ng-template>\n            </adf-no-content-template>\n        </adf-datatable>\n\n        <error-widget *ngIf=\"dataTableLoadFailed\"\n            class=\"adf-data-table-widget-failed-message\"\n            [required]=\"'FORM.FIELD.DATA_TABLE_LOAD_FAILED' | translate\" />\n    </ng-container>\n\n    <ng-template #previewTemplate>\n        <adf-datatable data-automation-id=\"adf-data-table-widget-preview\" />\n        <div class=\"adf-preview-placeholder\"></div>\n    </ng-template>\n</div>\n", styles: [".adf-data-table-widget-failed-message{margin:10px}.adf-preview-placeholder{height:100%;width:100%;min-height:100px;margin-bottom:10px}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"adf-data-table-widget-container\">\n    <div class=\"adf-data-table-widget-label\">\n        <label class=\"adf-label\" [class.adf-left-label]=\"field.leftLabels\" [attr.for]=\"field.id\"> {{field.name | translate }} </label>\n    </div>\n\n    @if (!previewState) {\n        <adf-datatable data-automation-id=\"adf-data-table-widget\" [data]=\"dataSource\">\n            <adf-no-content-template>\n                <ng-template>\n                    <adf-empty-content icon=\"border_all\" [title]=\"'FORM.FIELD.DATA_TABLE_EMPTY_CONTENT' | translate\" />\n                </ng-template>\n            </adf-no-content-template>\n        </adf-datatable>\n\n        <error-widget\n            class=\"adf-data-table-widget-failed-message\"\n            [required]=\"dataTableLoadFailed ? ('FORM.FIELD.DATA_TABLE_LOAD_FAILED' | translate) : ''\"\n        />\n    } @else {\n        <adf-datatable data-automation-id=\"adf-data-table-widget-preview\" />\n        <div class=\"adf-preview-placeholder\"></div>\n    }\n</div>\n", styles: [".adf-data-table-widget-failed-message{display:block;margin:10px}.adf-preview-placeholder{height:100%;width:100%;min-height:100px;margin-bottom:10px}\n"] }]
         }] });
 
 /*!