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

lib/core/src/lib/form/components/form-field/form-field.component.html

@@ -1,6 +1,7 @@
 <div [id]="'field-' + field?.id + '-container'"
      [style.visibility]="!field?.isVisible ? 'hidden' : 'visible'"
      [style.display]="!field?.isVisible ? 'none' : 'block'"
+     [style]="field | adfFieldStyle"
      [class.adf-focus]="focus"
      (focusin)="focusToggle()"
      (focusout)="focusToggle()">

lib/core/src/lib/form/components/form-field/form-field.component.ts

@@ -20,6 +20,7 @@ import {
     Component,
     ComponentFactory,
     ComponentRef,
+    inject,
     Input,
     NgModule,
     OnDestroy,
@@ -30,7 +31,8 @@ import {
 } from '@angular/core';
 import { FormRenderingService } from '../../services/form-rendering.service';
 import { WidgetVisibilityService } from '../../services/widget-visibility.service';
-import { FormFieldModel } from '../widgets';
+import { FormFieldModel } from '../widgets/core/form-field.model';
+import { FieldStylePipe } from '../../pipes/field-style.pipe';
 
 declare const adf: any;
 
@@ -38,7 +40,8 @@ declare const adf: any;
     selector: 'adf-form-field',
     standalone: true,
     templateUrl: './form-field.component.html',
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    imports: [FieldStylePipe]
 })
 export class FormFieldComponent implements OnInit, OnDestroy {
     @ViewChild('container', { read: ViewContainerRef, static: true })
@@ -57,7 +60,9 @@ export class FormFieldComponent implements OnInit, OnDestroy {
 
     focus: boolean = false;
 
-    constructor(private formRenderingService: FormRenderingService, private visibilityService: WidgetVisibilityService, private compiler: Compiler) {}
+    private readonly formRenderingService = inject(FormRenderingService);
+    private readonly visibilityService = inject(WidgetVisibilityService);
+    private readonly compiler = inject(Compiler);
 
     ngOnInit() {
         const w: any = window;

lib/core/src/lib/form/components/form-renderer.component.html

@@ -21,7 +21,7 @@
              [id]="'field-' + currentRootElement?.id + '-container'"
              class="adf-container-widget"
              [hidden]="!currentRootElement?.isVisible">
-            <div [hidden]="!currentRootElement?.isGroup()" class="adf-container-widget__header">
+            <div [hidden]="!currentRootElement?.isGroup()" [style]="currentRootElement | adfFieldStyle" class="adf-container-widget__header">
                 <h4 class="adf-container-widget__header-text" id="container-header"
                     [class.adf-collapsible]="currentRootElement?.isCollapsible()">
                     <button *ngIf="currentRootElement?.isCollapsible()"

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -11,6 +11,9 @@
     padding-bottom: 10px;
     cursor: default;
     user-select: none;
+    font-size: var(--adf-header-font-size);
+    font-weight: var(--adf-header-font-weight);
+    color: var(--adf-header-color);
 
     &.adf-collapsible {
         cursor: pointer;

lib/core/src/lib/form/components/form-renderer.component.ts

@@ -28,6 +28,7 @@ import { FormService } from '../services/form.service';
 import { FormFieldComponent } from './form-field/form-field.component';
 import { FORM_FIELD_MODEL_RENDER_MIDDLEWARE, FormFieldModelRenderMiddleware } from './middlewares/middleware';
 import { ContainerModel, FormFieldModel, FormModel, TabModel } from './widgets';
+import { FieldStylePipe } from '../pipes/field-style.pipe';
 
 @Component({
     selector: 'adf-form-renderer',
@@ -55,6 +56,7 @@ import { ContainerModel, FormFieldModel, FormModel, TabModel } from './widgets';
         FormsModule,
         JsonPipe,
         UpperCasePipe,
+        FieldStylePipe,
         NgClass
     ],
     encapsulation: ViewEncapsulation.None

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -93,6 +93,7 @@ export class FormFieldModel extends FormWidgetModel {
     variableConfig: VariableConfig;
     schemaDefinition: DataColumn[];
     externalProperty?: string;
+    style?: string;
 
     // container model members
     numberOfColumns: number = 1;
@@ -221,6 +222,7 @@ export class FormFieldModel extends FormWidgetModel {
             this.precision = json.precision;
             this.externalProperty = json.externalProperty;
             this._value = this.parseValue(json);
+            this.style = json.style;
 
             if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
                 this.placeholder = json.placeholder;

lib/core/src/lib/form/components/widgets/core/form-widget.model.ts

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @angular-eslint/component-selector */
 
 export abstract class FormWidgetModel {
-
     readonly fieldType: string;
     readonly id: string;
     readonly name: string;
     readonly type: string;
     readonly tab: string;
+    readonly style?: string;
 
     readonly form: any;
     readonly json: any;
@@ -40,6 +40,7 @@ export abstract class FormWidgetModel {
             this.type = json.type;
             this.tab = json.tab;
             this.field = json.field;
+            this.style = json.style;
         }
     }
 }

lib/core/src/lib/form/components/widgets/core/form.model.ts

@@ -33,6 +33,7 @@ import { UploadWidgetContentLinkModel } from './upload-widget-content-link.model
 import { FormValidationService } from '../../../services/form-validation-service.interface';
 import { ProcessFormModel } from './process-form-model.interface';
 import { WidgetTypeEnum, WidgetVisibilityModel } from '../../../models/widget-visibility.model';
+import { ThemeModel } from './theme.model';
 
 export interface ConfirmMessage {
     show: boolean;
@@ -58,6 +59,7 @@ export interface FormRepresentationModel {
         fields?: any[];
     };
     displayMode: string;
+    theme?: ThemeModel;
 }
 export class FormModel implements ProcessFormModel {
     static UNSET_TASK_NAME: string = 'Nameless task';
@@ -85,6 +87,7 @@ export class FormModel implements ProcessFormModel {
     outcomes: FormOutcomeModel[] = [];
     fieldValidators: FormFieldValidator[] = [...FORM_FIELD_VALIDATORS];
     customFieldTemplates: FormFieldTemplates = {};
+    theme?: ThemeModel;
 
     className: string;
     readOnly = false;
@@ -116,6 +119,7 @@ export class FormModel implements ProcessFormModel {
             this.enableFixedSpace = enableFixedSpace;
             this.confirmMessage = json.confirmMessage || {};
             this.displayMode = json.displayMode;
+            this.theme = json.theme;
 
             this.tabs = (json.tabs || []).map((tabJson) => new TabModel(this, tabJson));
 

lib/core/src/lib/form/components/widgets/core/index.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @angular-eslint/component-selector */
 
 export * from './form-field-metadata';
 export * from './form-values';
@@ -44,3 +44,5 @@ export * from './form-field-file-source';
 export * from './form-field-rule';
 export * from './form-field-utils';
 export * from './form-field-variable-options';
+export * from './widget-schema.model';
+export * from './theme.model';

lib/core/src/lib/form/components/widgets/core/theme.model.ts

@@ -0,0 +1,50 @@
+/*!
+ * @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 type FormThemeVariable = '--adf-form-label-font-size' | '--adf-form-label-font-weight' | '--adf-form-label-color';
+
+export type ReadonlyTextThemeVariable = '--adf-readonly-text-font-size' | '--adf-readonly-text-font-weight' | '--adf-readonly-text-color';
+export type HeaderThemeVariable = '--adf-header-font-size' | '--adf-header-font-weight' | '--adf-header-color';
+export type RadioButtonsThemeVariable = '--adf-radio-buttons-font-size' | '--adf-radio-buttons-font-weight' | '--adf-radio-buttons-color';
+
+export type SupportedWidgetType = 'radio-buttons' | 'group' | 'readonly-text';
+
+export interface ThemeModel {
+    form?: {
+        [variable in FormThemeVariable]?: string;
+    };
+    widgets?: {
+        ['readonly-text']?: {
+            [styleName: string]: {
+                [variable in ReadonlyTextThemeVariable]?: string;
+            };
+        };
+        ['group']?: {
+            [styleName: string]: {
+                [variable in HeaderThemeVariable]?: string;
+            };
+        };
+        ['radio-buttons']?: {
+            [styleName: string]: {
+                [variable in RadioButtonsThemeVariable]?: string;
+            };
+        };
+    };
+    defaults?: {
+        [widgetType in SupportedWidgetType]?: string;
+    };
+}

lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts

@@ -0,0 +1,38 @@
+/*!
+ * @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 { FormThemeVariable } from './theme.model';
+
+export type WidgetStylePropertySelector = 'number' | 'options' | 'colorOptions';
+
+export interface WidgetSchemaModel<TFieldVariable = string, TFormVariable = FormThemeVariable> {
+    themeProperties: WidgetSchemaThemeProperty<TFieldVariable, TFormVariable>[];
+}
+
+export interface WidgetSchemaThemeProperty<TFieldVariable, TFormVariable = FormThemeVariable> {
+    name: string;
+    cssPropertyName: string;
+    fieldVariableName: TFieldVariable;
+    formVariableName: TFormVariable;
+    type: WidgetStylePropertySelector;
+    options?: {
+        name: string;
+        value: string;
+    }[];
+    unit?: string;
+    defaultValue: string;
+}

lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts

@@ -0,0 +1,89 @@
+/*!
+ * @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 { ReadonlyTextThemeVariable } from '../core/theme.model';
+import { WidgetSchemaModel } from '../core/widget-schema.model';
+
+export const displayTextSchema: WidgetSchemaModel<ReadonlyTextThemeVariable> = {
+    themeProperties: [
+        {
+            name: 'FORM.FIELD_STYLE.FONT_SIZE',
+            cssPropertyName: 'font-size',
+            fieldVariableName: '--adf-readonly-text-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-readonly-text-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-readonly-text-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'
+        }
+    ]
+};

lib/core/src/lib/form/components/widgets/display-text/display-text.widget.html

@@ -1,3 +1 @@
-<div [title]="field.tooltip" class="adf-display-text-widget {{ field.className }}">
-    {{ field.value | translate }}
-</div>
+<div [title]="field.tooltip" [class]="'adf-display-text-widget '+ field.className">{{ field.value | translate }}</div>

lib/core/src/lib/form/components/widgets/display-text/display-text.widget.scss

@@ -1,3 +1,6 @@
 .adf-display-text-widget {
     white-space: pre-wrap;
+    font-size: var(--adf-readonly-text-font-size, var(--adf-form-label-font-size, var(--theme-body-1-font-size)));
+    font-weight: var(--adf-readonly-text-font-weight, var(--adf-form-label-font-weight, var(--theme-font-weight)));
+    color: var(--adf-readonly-text-color, var(--adf-form-label-color, var(--theme-text-color)));
 }

lib/core/src/lib/form/components/widgets/display-text/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 './display-text.schema';
+export * from './display-text.widget';

lib/core/src/lib/form/components/widgets/index.ts

@@ -44,7 +44,6 @@ export * from './decimal/decimal.component';
 export * from './checkbox/checkbox.widget';
 export * from './multiline-text/multiline-text.widget';
 export * from './hyperlink/hyperlink.widget';
-export * from './display-text/display-text.widget';
 export * from './date/date.widget';
 export * from './amount/amount.widget';
 export * from './error/error.component';
@@ -53,6 +52,9 @@ export * from './json/json.widget';
 export * from './base-viewer/base-viewer.widget';
 export * from './text/text-mask.component';
 
+// widgets with schema
+export * from './display-text';
+
 export const WIDGET_DIRECTIVES: any[] = [
     UnknownWidgetComponent,
     TextWidgetComponent,
@@ -70,6 +72,4 @@ export const WIDGET_DIRECTIVES: any[] = [
     BaseViewerWidgetComponent
 ];
 
-export const MASK_DIRECTIVE: any[] = [
-    InputMaskDirective
-];
+export const MASK_DIRECTIVE: any[] = [InputMaskDirective];

lib/core/src/lib/form/pipes/field-style.pipe.spec.ts

@@ -0,0 +1,100 @@
+/*!
+ * @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 { FieldStylePipe } from '../pipes/field-style.pipe';
+import { FormFieldModel } from '../components/widgets/core/form-field.model';
+import { ThemeModel } from '../components/widgets/core/theme.model';
+
+const mockTheme: ThemeModel = {
+    widgets: {
+        'readonly-text': {
+            'my-custom-display-text': {
+                '--adf-readonly-text-font-size': '12px',
+                '--adf-readonly-text-font-weight': 'normal',
+                '--adf-readonly-text-color': '#000000'
+            },
+            'my-custom-display-text2': {
+                '--adf-readonly-text-font-size': '15px',
+                '--adf-readonly-text-color': 'green'
+            }
+        },
+        'radio-buttons': {
+            'my-custom-radio-buttons2': {
+                '--adf-radio-buttons-font-size': '15px',
+                '--adf-radio-buttons-font-weight': 'normal',
+                '--adf-radio-buttons-color': 'green'
+            }
+        }
+    }
+};
+
+describe('FieldStylePipe', () => {
+    let pipe: FieldStylePipe;
+
+    beforeEach(() => {
+        pipe = new FieldStylePipe();
+    });
+
+    it('should return styles as a string', () => {
+        const field: Partial<FormFieldModel> = {
+            type: 'readonly-text',
+            form: {
+                theme: mockTheme
+            },
+            style: 'my-custom-display-text'
+        };
+
+        const result = pipe.transform(field as FormFieldModel);
+        expect(result).toEqual('--adf-readonly-text-font-size: 12px;--adf-readonly-text-font-weight: normal;--adf-readonly-text-color: #000000');
+    });
+
+    it('should return empty string when style name is not provided', () => {
+        const field: Partial<FormFieldModel> = {
+            type: 'readonly-text',
+            form: {
+                theme: mockTheme
+            }
+        };
+
+        const result = pipe.transform(field as FormFieldModel);
+        expect(result).toEqual('');
+    });
+
+    it('should return empty string when style name is not defined', () => {
+        const field: Partial<FormFieldModel> = {
+            type: 'readonly-text',
+            form: {
+                theme: mockTheme
+            },
+            style: 'not-defined-style'
+        };
+
+        const result = pipe.transform(field as FormFieldModel);
+        expect(result).toEqual('');
+    });
+
+    it('should return empty string when theme is not defined', () => {
+        const field: Partial<FormFieldModel> = {
+            type: 'readonly-text',
+            form: {},
+            style: 'my-custom-display-text'
+        };
+
+        const result = pipe.transform(field as FormFieldModel);
+        expect(result).toEqual('');
+    });
+});

lib/core/src/lib/form/pipes/field-style.pipe.ts

@@ -0,0 +1,38 @@
+/*!
+ * @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 { Pipe, PipeTransform } from '@angular/core';
+import { FormFieldModel } from '../components/widgets/core/form-field.model';
+
+@Pipe({
+    name: 'adfFieldStyle',
+    standalone: true
+})
+export class FieldStylePipe implements PipeTransform {
+    transform(field: FormFieldModel): string {
+        const theme = field.form?.theme?.widgets[field.type];
+        const style = field.style && theme?.[field.style];
+
+        return style ? this.flattenStyles(style) : '';
+    }
+
+    private flattenStyles(styles: { [key: string]: string }): string {
+        return Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join(';');
+    }
+}

lib/core/src/lib/form/pipes/form-style.pipe.spec.ts

@@ -0,0 +1,47 @@
+/*!
+ * @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 { FormStylePipe } from './form-style.pipe';
+import { ThemeModel } from '../components/widgets/core/theme.model';
+
+describe('FormStylePipe', () => {
+    let pipe: FormStylePipe;
+
+    beforeEach(() => {
+        pipe = new FormStylePipe();
+    });
+
+    it('should transform form theme into styles', () => {
+        const formTheme: ThemeModel = {
+            form: {
+                '--adf-form-label-font-size': '16px',
+                '--adf-form-label-color': 'black',
+                '--adf-form-label-font-weight': 'bold'
+            }
+        };
+
+        const result = pipe.transform(formTheme);
+
+        expect(result).toEqual('--adf-form-label-font-size: 16px;--adf-form-label-color: black;--adf-form-label-font-weight: bold');
+    });
+
+    it('should return an empty string if form theme is undefined', () => {
+        const result = pipe.transform(undefined);
+
+        expect(result).toEqual('');
+    });
+});

lib/core/src/lib/form/pipes/form-style.pipe.ts

@@ -0,0 +1,36 @@
+/*!
+ * @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 { Pipe, PipeTransform } from '@angular/core';
+import { ThemeModel } from '../components/widgets/core/theme.model';
+
+@Pipe({
+    name: 'adfFormStyle',
+    standalone: true
+})
+export class FormStylePipe implements PipeTransform {
+    transform(formTheme?: ThemeModel): string {
+        const theme = formTheme?.form;
+        return theme ? this.flattenStyles(theme) : '';
+    }
+
+    private flattenStyles(styles: { [key: string]: string }): string {
+        return Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join(';');
+    }
+}

lib/core/src/lib/form/pipes/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 './field-style.pipe';
+export * from './form-style.pipe';

lib/core/src/lib/form/public-api.ts

@@ -29,6 +29,8 @@ export * from './services/form.service';
 export * from './services/form-validation-service.interface';
 export * from './services/widget-visibility.service';
 
+export * from './pipes';
+
 export * from './events';
 
 export * from './form-base.module';

lib/core/src/lib/i18n/en.json

@@ -70,6 +70,20 @@
     },
     "FORM_RENDERER": {
       "NAMELESS_TASK": "Nameless task"
+    },
+    "FIELD_STYLE": {
+      "FONT_SIZE": "Font size",
+      "FONT_WEIGHT": "Font weight",
+      "FONT_COLOR": "Font color",
+      "REGULAR": "Regular",
+      "BOLD": "Bold",
+      "SYSTEM_COLOR": "System color",
+      "BLACK": "Black",
+      "GREY": "Grey",
+      "RED": "Red",
+      "GREEN": "Green",
+      "BLUE": "Blue",
+      "YELLOW": "Yellow"
     }
   },
   "CORE": {

lib/core/src/lib/styles/_index.scss

@@ -31,20 +31,17 @@
         --theme-primary-color: mat.get-color-from-palette($primary),
         --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
         --theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
-        --adf-theme-primary-50:mat.get-color-from-palette($primary, 50),
-        --adf-theme-primary-100:mat.get-color-from-palette($primary, 100),
-        --adf-theme-primary-300:mat.get-color-from-palette($primary, 300),
-        --adf-theme-primary-900:mat.get-color-from-palette($primary, 900),
-
+        --adf-theme-primary-50: mat.get-color-from-palette($primary, 50),
+        --adf-theme-primary-100: mat.get-color-from-palette($primary, 100),
+        --adf-theme-primary-300: mat.get-color-from-palette($primary, 300),
+        --adf-theme-primary-900: mat.get-color-from-palette($primary, 900),
         --theme-warn-color: mat.get-color-from-palette($warn),
         --theme-warn-color-a700: mat.get-color-from-palette($warn, A700),
         --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
-
         --theme-accent-color: mat.get-color-from-palette($accent),
         --theme-accent-color-a200: mat.get-color-from-palette($accent, A200),
         --theme-accent-color-default-contrast: mat.get-color-from-palette($accent, default-contrast),
-        --theme-accent-500:mat.get-color-from-palette($accent, 500),
-
+        --theme-accent-500: mat.get-color-from-palette($accent, 500),
         --adf-theme-foreground-base-color: mat.get-color-from-palette($foreground, base),
         --adf-theme-foreground-base-color-065: mat.get-color-from-palette($foreground, base, 0.65),
         --adf-theme-foreground-base-color-045: mat.get-color-from-palette($foreground, base, 0.45),
@@ -63,7 +60,6 @@
         --adf-theme-foreground-text-color-025: mat.get-color-from-palette($foreground, text, 0.25),
         --adf-theme-foreground-text-color-014: mat.get-color-from-palette($foreground, text, 0.14),
         --adf-theme-foreground-text-color-007: mat.get-color-from-palette($foreground, text, 0.07),
-
         --adf-theme-background-card-color: mat.get-color-from-palette($background, card),
         --adf-theme-background-card-color-087: mat.get-color-from-palette($background, card, 0.87),
         --theme-background-color: mat.get-color-from-palette($background, background),
@@ -72,9 +68,9 @@
         --adf-theme-background-selected-button-color: mat.get-color-from-palette($background, selected-button),
         --adf-theme-background-status-bar-color: mat.get-color-from-palette($background, status-bar),
         --adf-theme-background-unselected-chip-color: mat.get-color-from-palette($background, unselected-chip),
-
         // typography
         --theme-font-family: mat.font-family($typography),
+        --theme-font-weight: normal,
         --theme-body-1-font-size: mat.font-size($typography, body-2),
         --theme-body-2-font-size: mat.font-size($typography, subtitle-2),
         --theme-body-1-line-height: mat.line-height($typography, body-2),
@@ -88,17 +84,14 @@
         --theme-button-font-size: mat.font-size($typography, button),
         --theme-headline-font-size: mat.font-size($typography, headline-5),
         --theme-headline-line-height: mat.line-height($typography, headline-5),
-
         --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'),
         --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),
         --theme-adf-task-footer-font-size: map-get($custom-css-variables, 'theme-adf-task-footer-font-size'),
         --theme-adf-task-title-font-size: map-get($custom-css-variables, 'theme-adf-task-title-font-size'),
-
         // specific colors
         --adf-theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200),
         --adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
         --adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
-
         // spacing
         --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')
     );