@alfresco/adf-process-services-cloud 9.2.0-36573657159 → 9.2.0-36583389868

package/bundles/assets/adf-process-services-cloud/i18n/en.json

@@ -45,6 +45,7 @@
       "ERROR": {
         "LOAD_PROCESS_DEFS": "Couldn't load process definitions, check you have access.",
         "START": "Couldn't start new process instance, check you have access.",
+        "OUTCOME_NOT_FOUND": "The requested form action is no longer available.",
         "PROCESS_NAME_REQUIRED": "Process Name is required",
         "PROCESS_DEFINITION_REQUIRED": "Process Definition is required",
         "MAXIMUM_LENGTH": "Length exceeded, {{characters}} characters max.",

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, Injectable, InjectionToken, EventEmitter, DestroyRef, Output, Input, ContentChild, Directive, ViewEncapsulation, Component, Injector, NgModule, effect, ViewChild, ChangeDetectorRef, HostListener, ElementRef, Renderer2, signal, ViewContainerRef, ChangeDetectionStrategy, input, output, SecurityContext } from '@angular/core';
 import * as i3 from '@alfresco/adf-core';
-import { AppConfigService, JwtHelperService, OAuth2Service, TranslationService, DataTableSchema, UserPreferencesService, UserPreferenceValues, CustomEmptyContentTemplateDirective, ObjectDataTableAdapter, ColumnsSelectorComponent, MainMenuDataTableTemplateDirective, EmptyContentComponent, NoContentTemplateDirective, LoadingContentTemplateDirective, DataTableComponent, AdfDateFnsAdapter, MOMENT_DATE_FORMATS, AuthenticationService, StorageService, IconModule, DateFnsUtils, ADF_DATE_FORMATS, FullNamePipe, InitialUsernamePipe, FormService, FormModel, FormFieldTypes, ROW_ID_PREFIX, FormBaseComponent, ADF_DISPLAY_TEXT_SETTINGS, WidgetVisibilityService, FormExpressionService, UploadWidgetContentLinkModel, FormEvent, FormOutcomeModel, ConfirmDialogComponent, FormRulesEvent, FormOutcomeEvent, FormRendererComponent, ToolbarDividerComponent, ToolbarComponent, FormatSpacePipe, NotificationService, DownloadService, WidgetComponent, ThumbnailService, ErrorWidgetComponent, LocalizedDatePipe, UploadDirective, ContentLinkModel, ErrorMessageModel, DEFAULT_DATE_FORMAT, FormFieldValueFormatterService, ADF_TYPED_VALUE_FORMATTING_ENABLED, FormFieldEvent, SelectFilterInputComponent, FormRenderingService, DynamicComponentMapper, CardViewUpdateService, ClipboardService, CardViewTextItemModel, CardViewSelectItemModel, CardViewDatetimeItemModel, CardViewDateItemModel, CardViewArrayItemModel, CardViewComponent, CustomLoadingContentTemplateDirective, isOutcomeButtonVisible, InplaceFormInputComponent, BaseViewerWidgetComponent, BaseDisplayTextWidgetComponent, ObjectDataColumn, ObjectDataRow, FormBaseModule, provideTranslations } from '@alfresco/adf-core';
+import { AppConfigService, JwtHelperService, OAuth2Service, TranslationService, DataTableSchema, UserPreferencesService, UserPreferenceValues, CustomEmptyContentTemplateDirective, ObjectDataTableAdapter, ColumnsSelectorComponent, MainMenuDataTableTemplateDirective, EmptyContentComponent, NoContentTemplateDirective, LoadingContentTemplateDirective, DataTableComponent, AdfDateFnsAdapter, MOMENT_DATE_FORMATS, AuthenticationService, StorageService, IconModule, DateFnsUtils, ADF_DATE_FORMATS, FullNamePipe, InitialUsernamePipe, FormService, FormModel, FormFieldTypes, ROW_ID_PREFIX, FormBaseComponent, ADF_DISPLAY_TEXT_SETTINGS, WidgetVisibilityService, FormExpressionService, UploadWidgetContentLinkModel, FormEvent, FormOutcomeModel, ConfirmDialogComponent, FormRulesEvent, FormOutcomeEvent, FormRendererComponent, ToolbarDividerComponent, ToolbarComponent, FormatSpacePipe, NotificationService, DownloadService, WidgetComponent, ThumbnailService, ErrorWidgetComponent, LocalizedDatePipe, UploadDirective, ContentLinkModel, ErrorMessageModel, DEFAULT_DATE_FORMAT, FormFieldValueFormatterService, ADF_TYPED_VALUE_FORMATTING_ENABLED, FormFieldEvent, SelectFilterInputComponent, FormRenderingService, DynamicComponentMapper, CardViewUpdateService, ClipboardService, CardViewTextItemModel, CardViewSelectItemModel, CardViewDatetimeItemModel, CardViewDateItemModel, CardViewArrayItemModel, CardViewComponent, CustomLoadingContentTemplateDirective, isOutcomeButtonVisible, FormOutcomeNotFoundError, InplaceFormInputComponent, BaseViewerWidgetComponent, BaseDisplayTextWidgetComponent, ObjectDataColumn, ObjectDataRow, FormBaseModule, provideTranslations } from '@alfresco/adf-core';
 import { from, EMPTY, isObservable, of, Subject, throwError, BehaviorSubject, combineLatest, defer, merge, asapScheduler, firstValueFrom, forkJoin, catchError as catchError$1 } from 'rxjs';
 import { map, take, switchMap, catchError, distinctUntilChanged, filter, tap, finalize, debounceTime, shareReplay, mergeMap, expand, reduce, mapTo, concatMap } from 'rxjs/operators';
 import { AlfrescoApiService, NodeAction, ContentNodeSelectorComponent, NodesApiService, ContentService, ContentNodeSelectorPanelService, NewVersionUploaderService, NewVersionUploaderDataAction, ContentMetadataComponent, AlfrescoViewerComponent } from '@alfresco/adf-content-services';
@@ -8394,6 +8394,8 @@ class FormCloudComponent extends FormBaseComponent {
         this.formLoaded = new EventEmitter();
         /** Emitted when form values are refreshed due to a data property change. */
         this.formDataRefreshed = new EventEmitter();
+        /** Emitted when the outcomes rendered by the form change. */
+        this.visibleOutcomesChanged = new EventEmitter();
         /** Emitted when form content is clicked. */
         this.formContentClicked = new EventEmitter();
         /** Emitted when a display mode configuration is turned on. */
@@ -8404,6 +8406,11 @@ class FormCloudComponent extends FormBaseComponent {
         this.fieldValidators = [];
         /** Pre-computed list of outcome buttons to render, filtered by visibility rules. */
         this.visibleOutcomes = [];
+        /**
+         * Held by the task completion that is pending or has succeeded, so the same task is not completed twice.
+         * Each request owns its own lock, so a late response for a previous task cannot release the current one.
+         */
+        this.taskCompletionLock = null;
         this.displayConfiguration = DisplayModeService.DEFAULT_DISPLAY_MODE_CONFIGURATIONS[0];
         this.style = '';
         this.tabNavEnabledByHost = true;
@@ -8463,6 +8470,9 @@ class FormCloudComponent extends FormBaseComponent {
         event.stopPropagation();
     }
     ngOnChanges(changes) {
+        if (changes['taskId']) {
+            this.taskCompletionLock = null;
+        }
         const appName = changes['appName'];
         if (appName?.currentValue) {
             if (this.taskId) {
@@ -8504,6 +8514,9 @@ class FormCloudComponent extends FormBaseComponent {
         }
     }
     ngOnInit() {
+        this.formService.outcomeRequested
+            .pipe(filter((request) => request.form === this.form), takeUntilDestroyed(this.destroyRef))
+            .subscribe((request) => this.onOutcomeRequested(request.outcomeId));
         DisplayModeService.displayMode$
             .pipe(filter((change) => change.id === this.id), takeUntilDestroyed(this.destroyRef))
             .subscribe((displayModeChange) => {
@@ -8619,7 +8632,15 @@ class FormCloudComponent extends FormBaseComponent {
             this.displayModeService.onSaveTask(this.id, this.displayMode, this.displayModeConfigurations);
         }
     }
+    isOutcomeButtonEnabled(outcome) {
+        return !this.taskCompletionLock && super.isOutcomeButtonEnabled(outcome);
+    }
     completeTaskForm(outcome, outcomeId) {
+        if (this.taskCompletionLock) {
+            return;
+        }
+        const lock = this.form && this.appName && this.taskId ? { taskId: this.taskId } : null;
+        this.taskCompletionLock = lock;
         if (this.form?.confirmMessage?.show === true) {
             const dialogRef = this.dialog.open(ConfirmDialogComponent, {
                 data: {
@@ -8631,37 +8652,50 @@ class FormCloudComponent extends FormBaseComponent {
                 .afterClosed()
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((result) => {
+                if (this.taskCompletionLock !== lock) {
+                    return;
+                }
                 if (result === true) {
-                    this.completeForm(outcome, outcomeId);
+                    this.completeForm(outcome, outcomeId, lock);
                 }
                 else {
+                    this.taskCompletionLock = null;
                     this.disableSaveButton = false;
                     this.disableCompleteButton = false;
                 }
             });
         }
         else {
-            this.completeForm(outcome, outcomeId);
+            this.completeForm(outcome, outcomeId, lock);
         }
         this.displayModeService.onCompleteTask(this.id, this.displayMode, this.displayModeConfigurations);
     }
-    completeForm(outcome, outcomeId) {
+    completeForm(outcome, outcomeId, lock) {
         if (this.form && this.appName && this.taskId) {
+            const form = this.form;
             this.formCloudService
-                .completeTaskForm(this.appName, this.taskId, this.processInstanceId, `${this.form.id}`, this.getSubmissionValues(), outcome, this.appVersion)
+                .completeTaskForm(this.appName, this.taskId, this.processInstanceId, `${form.id}`, this.getSubmissionValues(form), outcome, this.appVersion)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe({
                 next: () => {
-                    this.form.selectedOutcome = outcome;
-                    this.form.selectedOutcomeId = outcomeId;
-                    this.onTaskCompleted(this.form);
+                    form.selectedOutcome = outcome;
+                    form.selectedOutcomeId = outcomeId;
+                    this.onTaskCompleted(form);
                 },
-                error: (error) => this.onTaskCompletedError(error)
+                error: (error) => {
+                    this.releaseTaskCompletionLock(lock);
+                    this.onTaskCompletedError(error);
+                }
             });
         }
     }
-    getSubmissionValues() {
-        return materializeSubmissionValues(this.form, { enableExpressionEvaluation: this.enableExpressionEvaluation }, this.expressions);
+    releaseTaskCompletionLock(lock) {
+        if (this.taskCompletionLock === lock) {
+            this.taskCompletionLock = null;
+        }
+    }
+    getSubmissionValues(form = this.form) {
+        return materializeSubmissionValues(form, { enableExpressionEvaluation: this.enableExpressionEvaluation }, this.expressions);
     }
     parseForm(formCloudRepresentationJSON) {
         if (formCloudRepresentationJSON) {
@@ -8817,9 +8851,11 @@ class FormCloudComponent extends FormBaseComponent {
         const outcomes = this.form?.outcomes;
         if (!outcomes) {
             this.visibleOutcomes = [];
+            this.visibleOutcomesChanged.emit(this.visibleOutcomes);
             return;
         }
         this.visibleOutcomes = outcomes.filter((outcome) => outcome.isVisible && this.isOutcomeButtonVisible(outcome, this.form.readOnly));
+        this.visibleOutcomesChanged.emit(this.visibleOutcomes);
     }
     /**
      * Sets the parent visibility check flag on all form fields.
@@ -8882,7 +8918,7 @@ class FormCloudComponent extends FormBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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        data-automation-id=\"adf-cloud-form-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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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", visibleOutcomesChanged: "visibleOutcomesChanged", 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        data-automation-id=\"adf-cloud-form-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: "21.2.22", ngImport: i0, type: FormCloudComponent, decorators: [{
             type: Component,
@@ -8928,6 +8964,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Output
             }], formDataRefreshed: [{
                 type: Output
+            }], visibleOutcomesChanged: [{
+                type: Output
             }], formContentClicked: [{
                 type: Output
             }], displayModeOn: [{
@@ -10787,7 +10825,7 @@ class TaskFormCloudComponent {
         this.formLoaded.emit(form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TaskFormCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: TaskFormCloudComponent, isStandalone: true, selector: "adf-cloud-task-form", inputs: { appName: "appName", candidateUsers: "candidateUsers", candidateGroups: "candidateGroups", taskId: "taskId", showTitle: "showTitle", showRefreshButton: "showRefreshButton", showValidationIcon: "showValidationIcon", showCancelButton: "showCancelButton", showCompleteButton: "showCompleteButton", showSaveButton: "showSaveButton", customCancelButtonText: "customCancelButtonText", customCompleteButtonText: "customCompleteButtonText", customSaveButtonText: "customSaveButtonText", readOnly: "readOnly", displayModeConfigurations: "displayModeConfigurations", enableParentVisibilityCheck: "enableParentVisibilityCheck", taskDetails: "taskDetails" }, outputs: { formLoaded: "formLoaded", formSaved: "formSaved", formCompleted: "formCompleted", taskCompleted: "taskCompleted", taskClaimed: "taskClaimed", taskUnclaimed: "taskUnclaimed", cancelClick: "cancelClick", error: "error", formContentClicked: "formContentClicked", executeOutcome: "executeOutcome", displayModeOn: "displayModeOn", displayModeOff: "displayModeOff" }, viewQueries: [{ propertyName: "adfCloudForm", first: true, predicate: ["adfCloudForm"], descendants: true }], ngImport: i0, template: "<div class=\"adf-task-form-cloud-container\">\n    <adf-cloud-form\n        #adfCloudForm\n        [appName]=\"appName\"\n        [appVersion]=\"taskDetails.appVersion\"\n        [taskId]=\"taskId\"\n        [showTitle]=\"showTitle\"\n        [processInstanceId]=\"taskDetails.processInstanceId\"\n        [readOnly]=\"isReadOnly()\"\n        [showRefreshButton]=\"showRefreshButton\"\n        [showValidationIcon]=\"showValidationIcon\"\n        [showCompleteButton]=\"showCompleteButton && canCompleteTask()\"\n        [showSaveButton]=\"showSaveButton && canCompleteTask()\"\n        [customSaveButtonText]=\"customSaveButtonText\"\n        [customCompleteButtonText]=\"customCompleteButtonText\"\n        [displayModeConfigurations]=\"displayModeConfigurations\"\n        [enableParentVisibilityCheck]=\"enableParentVisibilityCheck\"\n        (formLoaded)=\"onFormLoaded($event)\"\n        (formSaved)=\"onFormSaved($event)\"\n        (formCompleted)=\"onFormCompleted($event)\"\n        (formError)=\"onError($event)\"\n        (error)=\"onError($event)\"\n        (formContentClicked)=\"onFormContentClicked($event)\"\n        (executeOutcome)=\"onFormExecuteOutcome($event)\"\n        (displayModeOn)=\"onDisplayModeOn($event)\"\n        (displayModeOff)=\"onDisplayModeOff($event)\"\n    >\n        <adf-cloud-form-custom-outcomes>\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        </adf-cloud-form-custom-outcomes>\n    </adf-cloud-form>\n</div>\n", styles: [".adf-task-form-cloud-container{height:100%}.adf-task-form-cloud-container .adf-task-form-container{overflow:hidden}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button){padding-bottom:25px;padding-right:25px}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button) .adf-task-form-actions-button{height:36px;border-radius:5px}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button) .mat-mdc-button{height:36px;border-radius:5px;width:auto;padding:0 16px;margin:0 8px;white-space:nowrap}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button) .mdc-button__label{min-width:58px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UserTaskCloudButtonsComponent, selector: "adf-cloud-user-task-cloud-buttons", inputs: ["appName", "canClaimTask", "canUnclaimTask", "taskId", "showCancelButton", "customCancelButtonText"], outputs: ["error", "cancelClick", "claimTask", "unclaimTask"] }, { kind: "component", type: FormCustomOutcomesComponent, selector: "adf-cloud-form-custom-outcomes" }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: TaskFormCloudComponent, isStandalone: true, selector: "adf-cloud-task-form", inputs: { appName: "appName", candidateUsers: "candidateUsers", candidateGroups: "candidateGroups", taskId: "taskId", showTitle: "showTitle", showRefreshButton: "showRefreshButton", showValidationIcon: "showValidationIcon", showCancelButton: "showCancelButton", showCompleteButton: "showCompleteButton", showSaveButton: "showSaveButton", customCancelButtonText: "customCancelButtonText", customCompleteButtonText: "customCompleteButtonText", customSaveButtonText: "customSaveButtonText", readOnly: "readOnly", displayModeConfigurations: "displayModeConfigurations", enableParentVisibilityCheck: "enableParentVisibilityCheck", taskDetails: "taskDetails" }, outputs: { formLoaded: "formLoaded", formSaved: "formSaved", formCompleted: "formCompleted", taskCompleted: "taskCompleted", taskClaimed: "taskClaimed", taskUnclaimed: "taskUnclaimed", cancelClick: "cancelClick", error: "error", formContentClicked: "formContentClicked", executeOutcome: "executeOutcome", displayModeOn: "displayModeOn", displayModeOff: "displayModeOff" }, viewQueries: [{ propertyName: "adfCloudForm", first: true, predicate: ["adfCloudForm"], descendants: true }], ngImport: i0, template: "<div class=\"adf-task-form-cloud-container\">\n    <adf-cloud-form\n        #adfCloudForm\n        [appName]=\"appName\"\n        [appVersion]=\"taskDetails.appVersion\"\n        [taskId]=\"taskId\"\n        [showTitle]=\"showTitle\"\n        [processInstanceId]=\"taskDetails.processInstanceId\"\n        [readOnly]=\"isReadOnly()\"\n        [showRefreshButton]=\"showRefreshButton\"\n        [showValidationIcon]=\"showValidationIcon\"\n        [showCompleteButton]=\"showCompleteButton && canCompleteTask()\"\n        [showSaveButton]=\"showSaveButton && canCompleteTask()\"\n        [customSaveButtonText]=\"customSaveButtonText\"\n        [customCompleteButtonText]=\"customCompleteButtonText\"\n        [displayModeConfigurations]=\"displayModeConfigurations\"\n        [enableParentVisibilityCheck]=\"enableParentVisibilityCheck\"\n        (formLoaded)=\"onFormLoaded($event)\"\n        (formSaved)=\"onFormSaved($event)\"\n        (formCompleted)=\"onFormCompleted($event)\"\n        (formError)=\"onError($event)\"\n        (error)=\"onError($event)\"\n        (formContentClicked)=\"onFormContentClicked($event)\"\n        (executeOutcome)=\"onFormExecuteOutcome($event)\"\n        (displayModeOn)=\"onDisplayModeOn($event)\"\n        (displayModeOff)=\"onDisplayModeOff($event)\"\n    >\n        <adf-cloud-form-custom-outcomes>\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        </adf-cloud-form-custom-outcomes>\n    </adf-cloud-form>\n</div>\n", styles: [".adf-task-form-cloud-container{height:100%}.adf-task-form-cloud-container .adf-task-form-container{overflow:hidden}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button){padding-bottom:25px;padding-right:25px}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button) .adf-task-form-actions-button{height:36px;border-radius:5px}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button) .mat-mdc-button{height:36px;border-radius:5px;width:auto;padding:0 16px;margin:0 8px;white-space:nowrap}.adf-task-form-cloud-container .adf-task-form-container .adf-task-form-actions:has(button) .mdc-button__label{min-width:58px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UserTaskCloudButtonsComponent, selector: "adf-cloud-user-task-cloud-buttons", inputs: ["appName", "canClaimTask", "canUnclaimTask", "taskId", "showCancelButton", "customCancelButtonText"], outputs: ["error", "cancelClick", "claimTask", "unclaimTask"] }, { kind: "component", type: FormCustomOutcomesComponent, selector: "adf-cloud-form-custom-outcomes" }, { 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", "visibleOutcomesChanged", "formContentClicked", "displayModeOn", "displayModeOff"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TaskFormCloudComponent, decorators: [{
             type: Component,
@@ -14362,12 +14400,22 @@ class StartProcessCloudComponent {
     onFormLoaded(form) {
         this.isFormCloudLoaded = true;
         this.formCloud = form;
-        const anyOutcomeVisible = form?.outcomes?.some((outcome) => isOutcomeButtonVisible(outcome, {
+        const visibleOutcomes = form?.outcomes?.filter((outcome) => isOutcomeButtonVisible(outcome, {
             isFormReadOnly: form.readOnly,
             showCompleteButton: this.showCompleteButton,
             showSaveButton: this.showSaveButton
-        }));
-        this.hasVisibleOutcomesSubject.next(anyOutcomeVisible);
+        })) ?? [];
+        this.onVisibleOutcomesChanged(visibleOutcomes);
+    }
+    onVisibleOutcomesChanged(visibleOutcomes) {
+        this.hasVisibleOutcomesSubject.next(visibleOutcomes.length > 0);
+    }
+    onFormError(error) {
+        this.errorMessageId =
+            error instanceof FormOutcomeNotFoundError
+                ? 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.OUTCOME_NOT_FOUND'
+                : 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START';
+        this.error.emit(error);
     }
     onDisableStartProcessButtonForScreen(disable) {
         this.disableStartProcessForScreen = disable;
@@ -14386,6 +14434,7 @@ class StartProcessCloudComponent {
         }
     }
     setProcessDefinitionOnForm(selectedProcessDefinitionName) {
+        this.resetErrorMessage();
         this.isFormCloudLoading = true;
         const processDefinitionCurrent = this.filteredProcesses.find((process) => process.name === selectedProcessDefinitionName || process.key === selectedProcessDefinitionName);
         forkJoin([
@@ -14498,19 +14547,60 @@ class StartProcessCloudComponent {
         }
     }
     onCustomOutcomeClicked(outcome) {
+        if (this.isProcessStarting) {
+            return;
+        }
         this.customOutcomeName = outcome.outcome.name;
         this.customOutcomeId = outcome.outcome.id;
         this.startProcess();
     }
     startProcessWithoutConfirmation() {
+        if (this.isProcessStarting) {
+            return;
+        }
+        this.isProcessStarting = true;
+        this.executeProcessStart();
+    }
+    startProcess() {
+        if (!this.formCloud?.confirmMessage?.show) {
+            this.startProcessWithoutConfirmation();
+            return;
+        }
+        if (this.isProcessStarting) {
+            return;
+        }
+        this.isProcessStarting = true;
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                message: this.formCloud.confirmMessage.message
+            },
+            minWidth: '450px'
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.executeProcessStart();
+            }
+            else {
+                this.isProcessStarting = false;
+            }
+        });
+    }
+    cancelStartProcess() {
+        this.cancel.emit();
+    }
+    executeProcessStart() {
+        this.resetErrorMessage();
         let submissionValues = this.screenSubmitPayload;
         if (this.hasForm) {
             if (!this.formCloud) {
+                this.isProcessStarting = false;
                 return;
             }
             submissionValues = this.getFormSubmissionValues(this.formCloud);
         }
-        this.isProcessStarting = true;
+        const submittedForm = this.formCloud;
+        const requestedOutcome = this.customOutcomeName;
+        const requestedOutcomeId = this.customOutcomeId;
         let action;
         if (this.hasForm || this.hasScreen) {
             action = this.startProcessCloudService.startProcessWithForm(this.appName, this.processDefinitionCurrent.formKey, this.processDefinitionCurrent.version, new ProcessWithFormPayloadCloud({
@@ -14518,7 +14608,7 @@ class StartProcessCloudComponent {
                 processDefinitionKey: this.processPayloadCloud.processDefinitionKey,
                 variables: this.variables ?? {},
                 values: submissionValues,
-                outcome: this.customOutcomeName
+                outcome: requestedOutcome
             }));
         }
         else {
@@ -14530,7 +14620,11 @@ class StartProcessCloudComponent {
         }
         action.subscribe({
             next: (res) => {
-                this.customOutcomeSelected.emit(this.customOutcomeId);
+                if (submittedForm && requestedOutcomeId) {
+                    submittedForm.selectedOutcome = requestedOutcome;
+                    submittedForm.selectedOutcomeId = requestedOutcomeId;
+                }
+                this.customOutcomeSelected.emit(requestedOutcomeId);
                 this.success.emit(res);
                 this.isProcessStarting = false;
             },
@@ -14544,27 +14638,6 @@ class StartProcessCloudComponent {
     getFormSubmissionValues(form) {
         return materializeSubmissionValues(form, { enableExpressionEvaluation: this.enableExpressionEvaluation }, this.expressions);
     }
-    startProcess() {
-        if (!this.formCloud?.confirmMessage?.show) {
-            this.startProcessWithoutConfirmation();
-        }
-        else {
-            const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-                data: {
-                    message: this.formCloud.confirmMessage.message
-                },
-                minWidth: '450px'
-            });
-            dialogRef.afterClosed().subscribe((result) => {
-                if (result) {
-                    this.startProcessWithoutConfirmation();
-                }
-            });
-        }
-    }
-    cancelStartProcess() {
-        this.cancel.emit();
-    }
     resetErrorMessage() {
         this.errorMessageId = '';
     }
@@ -14636,7 +14709,7 @@ class StartProcessCloudComponent {
         return processName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: StartProcessCloudComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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],[formArray],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: "21.2.22", 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                            (visibleOutcomesChanged)=\"onVisibleOutcomesChanged($event)\"\n                            (executeOutcome)=\"onCustomOutcomeClicked($event)\"\n                            (error)=\"onFormError($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],[formArray],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", "visibleOutcomesChanged", "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: "21.2.22", ngImport: i0, type: StartProcessCloudComponent, decorators: [{
             type: Component,
@@ -14655,7 +14728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         FormCloudComponent,
                         FormCustomOutcomesComponent,
                         StartProcessScreenCloudComponent
-                    ], providers: [LocalizedDatePipe], encapsulation: ViewEncapsulation.None, 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"] }]
+                    ], providers: [LocalizedDatePipe], encapsulation: ViewEncapsulation.None, 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                            (visibleOutcomesChanged)=\"onVisibleOutcomesChanged($event)\"\n                            (executeOutcome)=\"onCustomOutcomeClicked($event)\"\n                            (error)=\"onFormError($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"] }]
         }], ctorParameters: () => [], propDecorators: { inputAutocomplete: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]