diff --git a/e2e/process-services/form/form-widgets-component.e2e.ts b/e2e/process-services/form/form-widgets-component.e2e.ts index a9acf98ed9..56f27000fc 100644 --- a/e2e/process-services/form/form-widgets-component.e2e.ts +++ b/e2e/process-services/form/form-widgets-component.e2e.ts @@ -145,7 +145,7 @@ describe('Form widgets', () => { }); it('[C272783] Should display displayText and displayValue in form', async () => { - const expected0 = ' ' + formInstance.getWidgetBy('id', appFields.displayText_id).value; + const expected0 = formInstance.getWidgetBy('id', appFields.displayText_id).value; const expected1 = (formInstance.getWidgetBy('id', appFields.displayValue_id).value as string) || 'Display value'; const expected2 = (formInstance.getWidgetBy('id', appFields.displayValue_id).value as string) || ''; diff --git a/lib/core/src/lib/form/components/form-field/form-field.component.html b/lib/core/src/lib/form/components/form-field/form-field.component.html index 2d49e5563d..9a3a12f5ae 100644 --- a/lib/core/src/lib/form/components/form-field/form-field.component.html +++ b/lib/core/src/lib/form/components/form-field/form-field.component.html @@ -1,6 +1,7 @@
diff --git a/lib/core/src/lib/form/components/form-field/form-field.component.ts b/lib/core/src/lib/form/components/form-field/form-field.component.ts index 635e93ff1e..ed84a3482c 100644 --- a/lib/core/src/lib/form/components/form-field/form-field.component.ts +++ b/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; diff --git a/lib/core/src/lib/form/components/form-renderer.component.html b/lib/core/src/lib/form/components/form-renderer.component.html index 598cb4170d..691c9208a5 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.html +++ b/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"> -
+

-
+
diff --git 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 index 482f82ff48..ac5d27b586 100644 --- 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)); } diff --git 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 new file mode 100644 index 0000000000..f921cedd55 --- /dev/null +++ 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'; diff --git 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 new file mode 100644 index 0000000000..418700506b --- /dev/null +++ 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 = { + 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' + } + ] +}; diff --git 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 index 7b5ae54e8c..5ef2ad3a4f 100644 --- 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; diff --git a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts index 25c5bd5bfe..e0bd8b816e 100644 --- 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, diff --git a/lib/process-services-cloud/src/lib/form/public-api.ts b/lib/process-services-cloud/src/lib/form/public-api.ts index 702c92df01..a56eb07785 100644 --- 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'; diff --git a/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts b/lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts index 769adb64ed..c661149a7d 100644 --- 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; -}; +}