AAE-24927 Add ability to style form widgets (#10171)

* AAE-25211 form styling PoC * AAE-25211 poc * AAE-25211 revert cloud form service * AAE-24927 display text schema * AAE-24927 radio button styles * AAE-24927 header styles * AAE-24927 style pipes * AAE-24927 remove redundand field * remove redundand comment * fix build error * remove space from protractor test
2025-07-24 17:32:15 +00:00 · 2024-09-05 10:58:36 +02:00
parent a86b23f8a1
commit 5d5c1ac527
33 changed files with 672 additions and 48 deletions
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@@ -3,7 +3,7 @@
    </ng-content>
 </div>

-<div *ngIf="hasForm()" class="adf-cloud-form-container adf-cloud-form-{{displayMode?.toLowerCase() || 'inline'}}-container">
+<div *ngIf="hasForm()" class="adf-cloud-form-container adf-cloud-form-{{displayMode?.toLowerCase() || 'inline'}}-container" [style]="form.theme | adfFormStyle">
    <div class="adf-cloud-form-content"
        [cdkTrapFocus]="displayMode === 'fullScreen'"
        cdkTrapFocusAutoCapture>
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts
@@ -15,7 +15,19 @@
 * limitations under the License.
 */

-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, HostListener, OnInit, ChangeDetectorRef } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+    OnDestroy,
+    HostListener,
+    OnInit,
+    ChangeDetectorRef,
+    inject
+} from '@angular/core';
 import { Observable, of, forkJoin, Subject, Subscription } from 'rxjs';
 import { switchMap, takeUntil, map, filter } from 'rxjs/operators';
 import {
@@ -123,16 +135,17 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,

    readonly id: string;
    displayMode: FormCloudDisplayMode;
+    style: string = '';

-    constructor(
-        protected formCloudService: FormCloudService,
-        protected formService: FormService,
-        private dialog: MatDialog,
-        protected visibilityService: WidgetVisibilityService,
-        private readonly displayModeService: DisplayModeService,
-        private spinnerService: FormCloudSpinnerService,
-        private readonly changeDetector: ChangeDetectorRef
-    ) {
+    protected formCloudService = inject(FormCloudService);
+    protected formService = inject(FormService);
+    protected visibilityService = inject(WidgetVisibilityService);
+    protected dialog = inject(MatDialog);
+    protected spinnerService = inject(FormCloudSpinnerService);
+    protected displayModeService = inject(DisplayModeService);
+    protected changeDetector = inject(ChangeDetectorRef);
+
+    constructor() {
        super();

        this.spinnerService.initSpinnerHandling(this.onDestroy$);
@@ -419,6 +432,7 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
                this.displayMode,
                this.displayModeConfigurations
            );
+
            this.displayModeOn.emit(this.displayModeService.findConfiguration(this.displayMode, this.displayModeConfigurations));
        }

--- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/index.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/index.ts
@@ -0,0 +1,19 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './radio-buttons-cloud.schema';
+export * from './radio-buttons-cloud.widget';
--- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts
@@ -0,0 +1,88 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WidgetSchemaModel, RadioButtonsThemeVariable } from '@alfresco/adf-core';
+
+export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
+    themeProperties: [
+        {
+            name: 'FORM.FIELD_STYLE.FONT_SIZE',
+            cssPropertyName: 'font-size',
+            fieldVariableName: '--adf-radio-buttons-font-size',
+            formVariableName: '--adf-form-label-font-size',
+            type: 'number',
+            unit: 'px',
+            defaultValue: '16px'
+        },
+        {
+            name: 'FORM.FIELD_STYLE.FONT_WEIGHT',
+            cssPropertyName: 'font-weight',
+            fieldVariableName: '--adf-radio-buttons-font-weight',
+            formVariableName: '--adf-form-label-font-weight',
+            type: 'options',
+            options: [
+                {
+                    name: 'FORM.FIELD_STYLE.REGULAR',
+                    value: 'normal'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.BOLD',
+                    value: 'bold'
+                }
+            ],
+            defaultValue: 'normal'
+        },
+        {
+            name: 'FORM.FIELD_STYLE.FONT_COLOR',
+            cssPropertyName: 'color',
+            fieldVariableName: '--adf-radio-buttons-color',
+            formVariableName: '--adf-form-label-color',
+            type: 'colorOptions',
+            options: [
+                {
+                    name: 'FORM.FIELD_STYLE.SYSTEM_COLOR',
+                    value: 'inherit'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.BLACK',
+                    value: '#000000'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.GREY',
+                    value: '#9CA3AF'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.RED',
+                    value: '#DA1500'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.GREEN',
+                    value: '#04A003'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.BLUE',
+                    value: '#0A60CE'
+                },
+                {
+                    name: 'FORM.FIELD_STYLE.YELLOW',
+                    value: '#FACC15'
+                }
+            ],
+            defaultValue: 'inherit'
+        }
+    ]
+};
--- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss
@@ -1,4 +1,12 @@
 .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)));
+        }
+    }
+
    &-radio-button-container {
        margin-bottom: 15px;
        display: flex;
--- a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts
+++ b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts
@@ -17,7 +17,7 @@

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CoreModule, FormatSpacePipe, TOOLBAR_DIRECTIVES } from '@alfresco/adf-core';
+import { CoreModule, FormatSpacePipe, TOOLBAR_DIRECTIVES, FormStylePipe } from '@alfresco/adf-core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../material.module';
 import { FormCloudComponent } from './components/form-cloud.component';
@@ -65,7 +65,8 @@ import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.s
        FormatSpacePipe,
        AlfrescoViewerComponent,
        ...CONTENT_UPLOAD_DIRECTIVES,
-        ...CONTENT_METADATA_DIRECTIVES
+        ...CONTENT_METADATA_DIRECTIVES,
+        FormStylePipe
    ],
    declarations: [
        FormCloudComponent,
--- a/lib/process-services-cloud/src/lib/form/public-api.ts
+++ b/lib/process-services-cloud/src/lib/form/public-api.ts
@@ -29,10 +29,12 @@ export * from './components/widgets/dropdown/dropdown-cloud.widget';
 export * from './components/widgets/group/group-cloud.widget';
 export * from './components/widgets/people/people-cloud.widget';
 export * from './components/widgets/properties-viewer/properties-viewer.widget';
-export * from './components/widgets/radio-buttons/radio-buttons-cloud.widget';
 export * from './components/widgets/file-viewer/file-viewer.widget';
 export * from './components/widgets/display-rich-text/display-rich-text.widget';

+// widgets with schema
+export * from './components/widgets/radio-buttons';
+
 export * from './services/content-cloud-node-selector.service';
 export * from './services/form-cloud.service';
 export * from './services/form-definition-selector-cloud.service';
--- a/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts
+++ b/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts
@@ -35,6 +35,19 @@ export interface FormTab {
    visibilityCondition: VisibilityCondition | null;
 }

+export interface FormTheme {
+    form: {
+        [key: string]: string;
+    };
+    widgets: {
+        [key: string]: {
+            [key: string]: {
+                [key: string]: string;
+            };
+        };
+    };
+}
+
 export interface FormOutcome {
    id: string;
    name: string;
@@ -46,6 +59,7 @@ export interface FormDefinition {
    outcomes: FormOutcome[];
    metadata: any;
    variables: any[];
+    theme?: FormTheme;
 }

 export interface Container {
@@ -59,8 +73,19 @@ export interface Container {
    };
 }

-export type FormFieldRepresentation = (DateField | DateTimeField | TextField | AttachFileField | DropDownField |
-    RadioField | TypeaheadField | PeopleField | AmountField | NumberField | CheckboxField | HyperlinkField);
+export type FormFieldRepresentation =
+    | DateField
+    | DateTimeField
+    | TextField
+    | AttachFileField
+    | DropDownField
+    | RadioField
+    | TypeaheadField
+    | PeopleField
+    | AmountField
+    | NumberField
+    | CheckboxField
+    | HyperlinkField;

 export interface AttachFileField extends FormField {
    required: boolean;
@@ -125,6 +150,7 @@ export interface FormField {
        [anyKey: string]: any;
    };
    visibilityCondition: null | VisibilityCondition;
+    style?: string;
 }

 export interface FormOption {
@@ -241,21 +267,21 @@ export interface FormCloudDisplayModeConfigurationOptions {
    onDisplayModeOn(id?: string): void;
    onDisplayModeOff(id?: string): void;
    [key: string]: any;
-};
+}

 export interface FormCloudDisplayModeConfiguration {
    displayMode: FormCloudDisplayMode;
    options?: FormCloudDisplayModeConfigurationOptions;
    default?: boolean;
-};
+}

 // eslint-disable-next-line no-shadow
 export enum FormCloudDisplayMode {
    inline = 'inline',
    fullScreen = 'fullScreen'
-};
+}

 export interface FormCloudDisplayModeChange {
    displayMode: FormCloudDisplayMode;
    id?: string;
-};
+}