[ADF-3797] Task management view - Task with Form (#4534)

* [ADF-4248] Created form cloud service

* [ADF-4248] Created form cloud model

* [ADF-4248] Created new cloud form

* [ADF-4248] Exported cloud from module

* [ADF-4248] Added form saving feature

* [ADF-4248] Added form to task details

* [ADF-4248] Added services to save form

* [ADF-4248] Added data support

* [ADF-4248] Added outcome support in form model

* [ADF-4248] Modified demo component to show form

* [ADF-4248] Copied tests

* [ADF-4248] Added form parsing service

* [ADF-4248] Added form cloud demo

* [ADF-4248] Added form input to fom-cloud

* [ADF-4248] Added tests for form cloud model

* [ADF-4248] Improved form model json parsing

* [ADF-4248]  Added test for form could

* [ADF-4248] Refactored types in the form model

* [ADF-4248] Improved tests

* [ADF-4248] Added tests for form cloud service

* [ADF-4248] Added tests for form services

* [ADF-4248] Refactored form services

* [ADF-4248] Handled form events in demo shell

* [ADF-4248] Improved form value parsing

* [ADF-4248] Added form-cloud demo to routing

* [ADF-4248] Added field validation without handler

* [ADF-4248] Added task variable model

* [ADF-4248] Added adf-cloud prefix to css classes

* [ADF-4248] Translated name of nameless task

* [ADF-4248] Added docs for cloud form component

* [ADF-4248] Added docs for cloud form service

* create base component

* [ADF-4248] Created formBase and formModelbase

* [ADF-4248] Used base classes in cloud package

* Update form-cloud.component.md

* Update form-cloud.service.md

* [ADF-4248] Created form cloud service

* [ADF-4248] Created form cloud model

* [ADF-4248] Created new cloud form

* [ADF-4248] Exported cloud from module

* [ADF-4248] Added form saving feature

* [ADF-4248] Added form to task details

* [ADF-4248] Added services to save form

* [ADF-4248] Added data support

* [ADF-4248] Added outcome support in form model

* [ADF-4248] Modified demo component to show form

* [ADF-4248] Copied tests

* [ADF-4248] Added form parsing service

* [ADF-4248] Added form cloud demo

* [ADF-4248] Added form input to fom-cloud

* [ADF-4248] Added tests for form cloud model

* [ADF-4248] Improved form model json parsing

* [ADF-4248]  Added test for form could

* [ADF-4248] Refactored types in the form model

* [ADF-4248] Improved tests

* [ADF-4248] Added tests for form cloud service

* [ADF-4248] Added tests for form services

* [ADF-4248] Refactored form services

* [ADF-4248] Handled form events in demo shell

* [ADF-4248] Improved form value parsing

* [ADF-4248] Added form-cloud demo to routing

* [ADF-4248] Added field validation without handler

* [ADF-4248] Added task variable model

* [ADF-4248] Added adf-cloud prefix to css classes

* [ADF-4248] Translated name of nameless task

* [ADF-4248] Added docs for cloud form component

* [ADF-4248] Added docs for cloud form service

* create base component

* [ADF-4248] Created formBase and formModelbase

* [ADF-4248] Used base classes in cloud package

* [ADF-4248] Moved documentation to process services

* [ADF-4248] Removed duplicate import

* [ADF-4248] Fixed wrong imports

* [ADF-4248] Renamed form renderer input

* [ADF-4248] Show translated name for nameless form

* Enable the uploadWidget

* Make the form great again!

* Move the class style on the parent

* Fix the debugMode

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html

@@ -1,19 +1,30 @@
 <h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
 
-<div class="adf-task-detail-container">
-    <div class="adf-task-control">
-        <button mat-button (click)="goBack()">Cancel</button>
-        <button mat-button color="primary" *ngIf="canCompleteTask()" adf-cloud-complete-task [appName]="appName" [taskId]="taskId"
-            (success)="onCompletedTask()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
-
-        <button mat-button color="primary" *ngIf="canClaimTask()" adf-cloud-claim-task [appName]="appName" [taskId]="taskId"
-        (success)="onClaimTask()">{{ 'ADF_CLOUD_TASK_HEADER.BUTTON.CLAIM' | translate }}</button>
-
-        <button mat-button color="primary" *ngIf="canUnClaimTask()" adf-cloud-unclaim-task [appName]="appName" [taskId]="taskId"
-        (success)="onUnclaimTask()">{{ 'ADF_CLOUD_TASK_HEADER.BUTTON.RELEASE' | translate }}</button>
+<div fxLayout="column" fxFill fxLayoutGap="2px">
+    <div fxLayout="row" fxFill>
+        <div fxLayout="column" fxFlex="80%">
+            <div class="adf-task-control">
+                <button mat-button (click)="goBack()">Cancel</button>
+                <button mat-button color="primary" *ngIf="canCompleteTask()" adf-cloud-complete-task
+                    (success)="onCompletedTask()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
+        
+                <button mat-button color="primary" *ngIf="canClaimTask()" adf-cloud-claim-task
+                (success)="onClaimTask()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.CLAIM' | translate }}</button>
+        
+                <button mat-button color="primary" *ngIf="canUnClaimTask()" adf-cloud-unclaim-task
+                (success)="onUnclaimTask()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.UNCLAIM' | translate }}</button>
+            </div>
+            <adf-cloud-form *ngIf="hasTaskForm()" fxFlex="100%"
+                [appName]="appName"
+                [taskId]="taskId"
+                (formCompleted)="onTaskCompleted()"
+                (formSaved)="onFormSaved()">
+            </adf-cloud-form>
+        </div>
+        <adf-cloud-task-header fxFlex
+            [appName]="appName"
+            [taskId]="taskId"
+            [readOnly]="readOnly">
+        </adf-cloud-task-header>
     </div>
-
-    <adf-cloud-task-header class="adf-demop-card-container" [appName]="appName" [taskId]="taskId" [readOnly]="readOnly">
-    </adf-cloud-task-header>
-
-</div>
+</div>