@alfresco/adf-process-services-cloud 8.5.0-24716296101 → 8.5.0

package/lib/app/components/app-details-cloud/app-details-cloud.component.scss

@@ -0,0 +1,168 @@
+/* stylelint-disable scss/no-global-function-names */
+@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
+    position: relative;
+    line-height: $line-height;
+    padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* stylelint-disable */
+    @supports (-webkit-line-clamp: 1) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $lines;
+        height: calc(0.99em * #{$line-height} * #{$lines});
+    }
+
+    @supports not (-webkit-line-clamp: 1) {
+        white-space: nowrap;
+        width: 100%;
+    }
+
+    /* stylelint-enable */
+}
+
+$tile-themes: (
+    theme-1: (
+        bg: #269abc,
+        color: #168aac
+    ),
+    theme-2: (
+        bg: #7da9b0,
+        color: #6d99a0
+    ),
+    theme-3: (
+        bg: #7689ab,
+        color: #66799b
+    ),
+    theme-4: (
+        bg: #c74e3e,
+        color: #b73e2e
+    ),
+    theme-5: (
+        bg: #fab96c,
+        color: #eaa95c
+    ),
+    theme-6: (
+        bg: #759d4c,
+        color: #658d3c
+    ),
+    theme-7: (
+        bg: #b1b489,
+        color: #a1a479
+    ),
+    theme-8: (
+        bg: #a17299,
+        color: #916289
+    ),
+    theme-9: (
+        bg: #696c67,
+        color: #595c57
+    ),
+    theme-10: (
+        bg: #cabb33,
+        color: #baab23
+    )
+);
+
+adf-cloud-app-details {
+    .adf-app-listgrid {
+        padding: 8px;
+        display: block;
+
+        .adf-app-listgrid-item {
+            outline: none;
+            padding: 8px;
+            box-sizing: border-box;
+            flex: unset;
+            max-width: unset;
+
+            &-card {
+                @for $i from 1 through 10 {
+                    &.theme-#{$i} {
+                        $tile-theme: map-get($tile-themes, theme-#{$i});
+
+                        background-color: map-get($tile-theme, bg);
+
+                        .adf-app-listgrid-item-card-logo-icon {
+                            color: map-get($tile-theme, color);
+                        }
+                    }
+                }
+
+                outline: none;
+                transition:
+                    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
+                    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+                min-height: 200px;
+                flex-direction: column;
+                box-sizing: border-box;
+                display: flex;
+                padding: 0;
+                max-width: unset;
+
+                &:hover {
+                    box-shadow:
+                        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                        0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                        0 5px 5px -3px rgba(0, 0, 0, 0.2);
+                    cursor: pointer;
+                    transform: scale(1.015);
+                }
+
+                &-logo {
+                    position: absolute;
+                    right: 20px;
+                    top: 20px;
+                    padding: 16px;
+                    z-index: 9;
+
+                    .adf-app-listgrid-item-card-logo-icon {
+                        font-size: 70px;
+                        width: 1em;
+                        height: 1em;
+                    }
+                }
+
+                &-title:has(.adf-app-listgrid-item-card-title-text) {
+                    padding: 16px;
+                    margin-bottom: 0;
+                    z-index: 9999;
+
+                    h1 {
+                        color: white;
+                        width: 80%;
+                        font-size: var(--mat-sys-headline-small-size);
+                        margin: 0;
+                        line-height: normal;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
+
+                &-subtitle:has(.adf-line-clamp) {
+                    color: white;
+                    z-index: 9999;
+                    padding: 16px;
+                    flex: 1 0 auto;
+
+                    .adf-line-clamp {
+                        @include adf-line-clamp(1.25, 3);
+                    }
+                }
+
+                &-actions {
+                    padding: 0 16px 16px;
+                    border-top: 1px solid rgba(0, 0, 0, 0.1);
+                    min-height: 48px;
+                    box-sizing: border-box;
+
+                    &-icon {
+                        color: #e9f1f3;
+                    }
+                }
+            }
+        }
+    }
+}

package/lib/form/components/form-cloud.component.d.ts

@@ -16,7 +16,7 @@
  */
 import { ChangeDetectorRef, EventEmitter, InjectionToken, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
-import { ContentLinkModel, FormBaseComponent, FormFieldModel, FormFieldValidator, FormModel, FormOutcomeModel, FormService, WidgetVisibilityService } from '@alfresco/adf-core';
+import { ContentLinkModel, FormBaseComponent, FormFieldModel, FormFieldValidator, FormModel, FormOutcomeModel, FormRendererComponent, FormService, WidgetVisibilityService } from '@alfresco/adf-core';
 import { FormCloudService } from '../services/form-cloud.service';
 import { TaskVariableCloud } from '../models/task-variable-cloud.model';
 import { TaskDetailsCloudModel } from '../../task/models/task-details-cloud.model';
@@ -26,6 +26,7 @@ import { FormCloudSpinnerService } from '../services/spinner/form-cloud-spinner.
 import { DisplayModeService } from '../services/display-mode.service';
 import * as i0 from "@angular/core";
 export declare const FORM_CLOUD_FIELD_VALIDATORS_TOKEN: InjectionToken<FormFieldValidator[]>;
+export declare const ADF_FORM_TAB_NAV_ENABLED: InjectionToken<boolean | Observable<boolean>>;
 export declare class FormCloudComponent extends FormBaseComponent implements OnChanges, OnInit {
     /** App name to fetch corresponding form and values. */
     appName: string;
@@ -76,10 +77,19 @@ export declare class FormCloudComponent extends FormBaseComponent implements OnC
     nodeId: string;
     formCloudRepresentationJSON: any;
     fieldValidators: FormFieldValidator[];
+    /** Pre-computed list of outcome buttons to render, filtered by visibility rules. */
+    visibleOutcomes: FormOutcomeModel[];
+    get form(): FormModel;
+    set form(form: FormModel);
     readonly id: string;
     displayMode: string;
     displayConfiguration: FormCloudDisplayModeConfiguration;
     style: string;
+    formRenderer: FormRendererComponent<any>;
+    private tabNavEnabledByHost;
+    get shouldShowTabNavigation(): boolean;
+    get canNavigatePreviousTab(): boolean;
+    get canNavigateNextTab(): boolean;
     protected formCloudService: FormCloudService;
     protected formService: FormService;
     protected visibilityService: WidgetVisibilityService;
@@ -88,6 +98,10 @@ export declare class FormCloudComponent extends FormBaseComponent implements OnC
     protected displayModeService: DisplayModeService;
     protected changeDetector: ChangeDetectorRef;
     private readonly destroyRef;
+    private get currentForm();
+    private get visibleTabCount();
+    navigateToPreviousTab(): void;
+    navigateToNextTab(): void;
     constructor();
     onKeyDown(event: KeyboardEvent): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -115,6 +129,10 @@ export declare class FormCloudComponent extends FormBaseComponent implements OnC
     getFormDefinitionOutcomes(form: FormModel): FormOutcomeModel[];
     checkVisibility(field: FormFieldModel): void;
     private refreshFormData;
+    private snapshotRuntimeState;
+    private getChangedFieldIds;
+    private restoreRuntimeState;
+    private recomputeVisibleOutcomes;
     /**
      * Sets the parent visibility check flag on all form fields.
      * When enabled, fields inside hidden groups/sections will skip validation.
@@ -133,5 +151,5 @@ export declare class FormCloudComponent extends FormBaseComponent implements OnC
     findDisplayConfiguration(displayMode?: string): FormCloudDisplayModeConfiguration;
     loadInjectedFieldValidators(injectedFieldValidators: FormFieldValidator[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormCloudComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormCloudComponent, "adf-cloud-form", never, { "appName": { "alias": "appName"; "required": false; }; "appVersion": { "alias": "appVersion"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; "processInstanceId": { "alias": "processInstanceId"; "required": false; }; "taskId": { "alias": "taskId"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayModeConfigurations": { "alias": "displayModeConfigurations"; "required": false; }; "showCompleteButton": { "alias": "showCompleteButton"; "required": false; }; "customSaveButtonText": { "alias": "customSaveButtonText"; "required": false; }; "customCompleteButtonText": { "alias": "customCompleteButtonText"; "required": false; }; "enableParentVisibilityCheck": { "alias": "enableParentVisibilityCheck"; "required": false; }; }, { "formSaved": "formSaved"; "formCompleted": "formCompleted"; "formLoaded": "formLoaded"; "formDataRefreshed": "formDataRefreshed"; "formContentClicked": "formContentClicked"; "displayModeOn": "displayModeOn"; "displayModeOff": "displayModeOff"; }, never, ["[empty-form]", "adf-cloud-form-custom-outcomes"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormCloudComponent, "adf-cloud-form", never, { "appName": { "alias": "appName"; "required": false; }; "appVersion": { "alias": "appVersion"; "required": false; }; "formId": { "alias": "formId"; "required": false; }; "processInstanceId": { "alias": "processInstanceId"; "required": false; }; "taskId": { "alias": "taskId"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayModeConfigurations": { "alias": "displayModeConfigurations"; "required": false; }; "showCompleteButton": { "alias": "showCompleteButton"; "required": false; }; "customSaveButtonText": { "alias": "customSaveButtonText"; "required": false; }; "customCompleteButtonText": { "alias": "customCompleteButtonText"; "required": false; }; "enableParentVisibilityCheck": { "alias": "enableParentVisibilityCheck"; "required": false; }; "form": { "alias": "form"; "required": false; }; }, { "formSaved": "formSaved"; "formCompleted": "formCompleted"; "formLoaded": "formLoaded"; "formDataRefreshed": "formDataRefreshed"; "formContentClicked": "formContentClicked"; "displayModeOn": "displayModeOn"; "displayModeOff": "displayModeOff"; }, never, ["[empty-form]", "adf-cloud-form-custom-outcomes"], true, never>;
 }

package/lib/form/components/form-cloud.component.scss

@@ -1,4 +1,5 @@
 @use '../../mat-selectors' as ms;
+@use '../../flex' as flex;
 
 /* cspell: disable-next-line */
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
@@ -6,7 +7,6 @@
 .adf-full-screen {
     width: 100%;
     height: 100%;
-    background-color: var(--adf-theme-background-card-color);
 }
 
 .adf-cloud-form {
@@ -37,7 +37,7 @@
         top: 0;
         left: 0;
         z-index: 100000;
-        background-color: var(--adf-theme-mat-grey-color-a400);
+        background-color: var(--mat-sys-surface-container);
         display: block;
         height: 100%;
         width: 100vw;
@@ -61,13 +61,6 @@
         }
     }
 
-    &-toolbar ::ng-deep {
-        #{ms.$mat-toolbar} {
-            background-color: var(--adf-theme-background-card-color-087);
-            border-radius: 14px 14px 0 0;
-        }
-    }
-
     &-fullscreen-button {
         position: absolute;
         right: 70px;
@@ -75,7 +68,7 @@
     }
 
     &__display-name {
-        font-size: var(--theme-subheading-2-font-size);
+        font-size: var(--mat-sys-title-small-size);
         opacity: 0.87;
         line-height: 1.5;
         letter-spacing: -0.4px;
@@ -87,7 +80,6 @@
         overflow: hidden;
         display: inline-block;
         vertical-align: middle;
-        color: var(--adf-theme-foreground-text-color);
     }
 
     &__form-title {
@@ -147,3 +139,40 @@
         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;
+
+    @include flex.layout-bp(lt-sm) {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+.adf-tab-navigation-buttons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    @include flex.layout-bp(lt-sm) {
+        justify-content: center;
+    }
+}
+
+.adf-tab-navigation-divider {
+    width: 1px;
+    height: 24px;
+    background-color: var(--mat-sys-outline-variant, rgba(0, 0, 0, 0.12));
+
+    @include flex.layout-bp(lt-sm) {
+        display: none;
+    }
+}
+
+.adf-cloud-form-outcome-buttons {
+    display: flex;
+    align-items: center;
+}

package/lib/form/components/spinner/form-spinner.component.scss

@@ -13,7 +13,7 @@
             align-items: center;
 
             &-message {
-                font-size: var(--theme-body-4-font-size);
+                font-size: var(--mat-sys-body-large-size);
             }
         }
     }

package/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss

@@ -25,15 +25,6 @@
         align-items: center;
         margin-right: 8px;
         word-break: normal;
-
-        .adf-attach-widget__menu-upload__button {
-            line-height: 28px;
-            font-size: var(--theme-caption-font-size);
-        }
-
-        button span {
-            font-size: var(--theme-caption-font-size);
-        }
     }
 
     &-attach-widget__input-type {
@@ -55,14 +46,13 @@
         word-break: break-all;
         padding: 0.4375em;
         border-bottom: none;
-        background: var(--adf-theme-mat-grey-color-a200);
+        background: var(--mat-sys-surface-variant);
         min-height: 27px;
         margin-bottom: 12px;
 
         .adf-label {
             width: 100%;
-            font-size: var(--theme-caption-font-size);
-            line-height: var(--theme-headline-line-height);
+            font: var(--mat-sys-body-small);
             text-align: left;
             white-space: normal;
             margin-left: 8px;
@@ -71,13 +61,6 @@
         }
     }
 
-    &-attach-widget__icon {
-        font-size: var(--theme-adf-picture-1-font-size);
-        height: var(--theme-adf-picture-1-font-size);
-        width: var(--theme-adf-picture-1-font-size);
-        line-height: calc(var(--theme-adf-picture-1-font-size) - 2px);
-    }
-
     &-attach-widget__reset {
         margin-top: -2px;
     }
@@ -93,7 +76,7 @@
     &-attach-selected-file-row {
         > div:first-child {
             .adf-datatable-selected {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
                 padding-right: 6px;
             }
         }

package/lib/form/components/widgets/attach-file/file-properties-table/file-properties-table-cloud.component.scss

@@ -1,7 +1,7 @@
 .adf-file-properties-table-container {
     .adf-file-properties-table.adf-properties-table table {
         width: 100%;
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
         box-shadow: none;
 
         .adf-file {

package/lib/form/components/widgets/data-table/data-table.widget.scss

@@ -3,7 +3,6 @@
 }
 
 .adf-preview-placeholder {
-    background-color: var(--adf-theme-mat-grey-color-50);
     height: 100%;
     width: 100%;
     min-height: 100px;

package/lib/form/components/widgets/display-external-property/display-external-property.widget.d.ts

@@ -23,7 +23,12 @@ export declare class DisplayExternalPropertyWidgetComponent extends WidgetCompon
     previewState: boolean;
     propertyControl: FormControl;
     private readonly formCloudService;
+    private readonly formatter;
+    private readonly formattingEnabledToken;
+    private readonly destroyRef;
+    private formattingEnabled;
     ngOnInit(): void;
+    private computeDisplayValue;
     private initFormControl;
     private isPropertyLoadFailed;
     private handleFailedPropertyLoad;

package/lib/form/components/widgets/display-external-property/display-external-property.widget.scss

@@ -7,7 +7,6 @@
         }
 
         &-preview {
-            color: var(--adf-theme-foreground-secondary-text-color);
             word-break: break-all;
         }
     }

package/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss

@@ -1,19 +1,10 @@
 .adf-display-rich-text-widget {
     pre {
         min-height: 100px;
-        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-        color: #41314e;
-        line-height: 1.6em;
-        font-size: 12px;
-        background: #f8f7fa;
-        border: 1px solid #f1f1f4;
-        box-shadow: none;
         white-space: pre;
         word-wrap: normal;
         overflow-x: auto;
         resize: vertical;
-        border-radius: 3px;
-        outline: none;
         width: 100%;
     }
 }

package/lib/form/components/widgets/dropdown/dropdown-cloud.widget.d.ts

@@ -31,6 +31,10 @@ export declare class DropdownCloudWidgetComponent extends WidgetComponent implem
     private readonly appConfig;
     private readonly formUtilsService;
     private readonly destroyRef;
+    private readonly formatter;
+    private readonly formattingEnabledToken;
+    private formattingEnabled;
+    readOnlyDisplayValue: string | undefined;
     typeId: string;
     showInputFilter: boolean;
     isRestApiFailed: boolean;
@@ -54,6 +58,7 @@ export declare class DropdownCloudWidgetComponent extends WidgetComponent implem
     private get isRestOptionType();
     private get isVariableOptionType();
     ngOnInit(): void;
+    private computeReadOnlyDisplayValue;
     updateReactiveFormControl(): void;
     compareDropdownValues(opt1: FormFieldOption | string, opt2: FormFieldOption | string): boolean;
     selectionChangedForField(field: FormFieldModel): void;

package/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss

@@ -9,10 +9,6 @@
             width: 100%;
         }
 
-        .adf-select-filter {
-            font-size: var(--theme-body-1-font-size);
-        }
-
         &-select {
             width: 100%;
         }

package/lib/form/components/widgets/properties-viewer/properties-viewer.widget.scss

@@ -6,7 +6,7 @@ adf-properties-viewer-widget {
         display: block;
         height: 100%;
         width: 100%;
-        border: 1px solid var(--adf-theme-foreground-text-color-007);
+        border: 1px solid var(--mat-sys-outline-variant);
         border-radius: 6px;
 
         .adf-properties-viewer-wrapper-loading {

package/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss

@@ -1,13 +1,4 @@
 .adf {
-    &-radio-buttons-widget-cloud {
-        .adf-label {
-            font-size: var(--adf-radio-buttons-font-size, var(--adf-form-label-font-size, var(--theme-caption-font-size)));
-            font-weight: var(--adf-radio-buttons-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
-            color: var(--adf-radio-buttons-color, var(--adf-form-label-color, var(--adf-theme-foreground-secondary-text-color)));
-            line-height: normal;
-        }
-    }
-
     &-radio-button-container {
         display: flex;
         flex-direction: column;

package/lib/group/components/group-cloud.component.d.ts

@@ -104,6 +104,7 @@ export declare class GroupCloudComponent implements OnInit, OnChanges {
     private setTypingError;
     hasPreselectError(): boolean;
     isReadonly(): boolean;
+    updateSearchControlState(): void;
     getDisplayName(group: IdentityGroupModel): string;
     hasError(): boolean;
     isValidationLoading(): boolean;

package/lib/group/components/group-cloud.component.scss

@@ -10,10 +10,8 @@
 
             .adf-group-short-name {
                 margin-right: 20px;
-                background: var(--theme-primary-color);
                 width: 40px;
                 height: 40px;
-                box-shadow: none;
             }
         }
     }
@@ -22,24 +20,15 @@
         width: 100%;
 
         &-title {
-            color: var(--adf-theme-foreground-secondary-text-color);
+            color: var(--mat-sys-on-surface-variant);
 
             &--focus {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
             }
         }
 
-        &-option-active:not(&:disabled) {
-            color: var(--adf-theme-foreground-text-color);
-        }
-
-        &-option-not-active:not(&:active) {
-            background: inherit;
-            color: var(--adf-theme-foreground-secondary-text-color);
-        }
-
         &-error {
-            color: var(--theme-warn-color);
+            color: var(--mat-sys-error);
             margin-top: -10px;
             position: absolute;
             height: 20px;

package/lib/people/components/people-cloud.component.d.ts

@@ -152,6 +152,7 @@ export declare class PeopleCloudComponent implements OnInit, OnChanges, AfterVie
     getSelectedUsers(): IdentityUserModel[];
     isReadonly(): boolean;
     isValidationLoading(): boolean;
+    updateSearchControlState(): void;
     markAsTouched(): void;
     isTouched(): boolean;
     isSelected(): boolean;

package/lib/people/components/people-cloud.component.scss

@@ -2,16 +2,11 @@
     &-people-cloud {
         width: 100%;
 
-        &-option-not-active:not(&:active) {
-            background: inherit;
-            color: var(--adf-theme-foreground-secondary-text-color);
-        }
-
         &-title {
-            color: var(--adf-theme-foreground-secondary-text-color);
+            color: var(--mat-sys-on-surface-variant);
 
             &--focus {
-                color: var(--theme-primary-color);
+                color: var(--mat-sys-primary);
             }
         }
     }
@@ -21,14 +16,6 @@
         padding: 10px 0;
     }
 
-    &-people-cloud-option-active:not(&:disabled) {
-        color: var(--adf-theme-foreground-text-color);
-    }
-
-    &-people-cloud-option-not-active:not(&:active) {
-        color: var(--adf-theme-foreground-secondary-text-color);
-    }
-
     &-people-cloud-row {
         display: flex;
         align-items: center;
@@ -36,7 +23,7 @@
     }
 
     &-people-cloud-pic {
-        background: var(--theme-primary-color);
+        background: var(--mat-sys-primary);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -58,10 +45,4 @@
             width: auto;
         }
     }
-
-    &-error,
-    &-error-text,
-    &-error-icon {
-        color: var(--theme-warn-color);
-    }
 }

package/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss

@@ -15,16 +15,8 @@
     .adf-error-text {
         padding-right: 8px;
         height: 16px;
-        font-size: var(--theme-caption-font-size);
-        line-height: 1.33;
-        color: var(--theme-warn-color);
         width: auto;
     }
-
-    .adf-error-icon {
-        font-size: var(--theme-subheading-2-font-size);
-        color: var(--theme-warn-color);
-    }
 }
 
 .adf {
@@ -64,24 +56,9 @@
         &-header {
             height: 48px;
 
-            &__title {
-                color: var(--adf-theme-foreground-text-color);
-            }
-
             &__description {
-                color: var(--adf-theme-foreground-secondary-text-color);
                 place-content: center space-between;
             }
         }
-
-        &-content {
-            &__text-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-
-            &__select-label {
-                color: var(--adf-theme-foreground-secondary-text-color);
-            }
-        }
     }
 }