implements OnInit, OnDestroy {
return this.formDefinition.tabs.filter((tab) => tab.isVisible);
}
- onExpanderClicked(content: ContainerModel) {
- if (content?.isCollapsible()) {
- content.isExpanded = !content.isExpanded;
- }
- }
-
getNumberOfColumns(content: ContainerModel): number {
return (content.json?.numberOfColumns || 1) > (content.columns?.length || 1)
? content.json?.numberOfColumns || 1
diff --git a/lib/core/src/lib/form/components/widgets/core/theme.model.ts b/lib/core/src/lib/form/components/widgets/core/theme.model.ts
index 01925888e9..71945e1561 100644
--- a/lib/core/src/lib/form/components/widgets/core/theme.model.ts
+++ b/lib/core/src/lib/form/components/widgets/core/theme.model.ts
@@ -15,7 +15,13 @@
* limitations under the License.
*/
-export type FormThemeVariable = '--adf-form-label-font-size' | '--adf-form-label-font-weight' | '--adf-form-label-color';
+export type FormThemeVariable =
+ | '--adf-form-label-font-size'
+ | '--adf-form-label-font-weight'
+ | '--adf-form-label-color'
+ | '--adf-header-font-size'
+ | '--adf-header-font-weight'
+ | '--adf-header-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';
diff --git a/lib/core/src/lib/form/components/widgets/header/header.schema.ts b/lib/core/src/lib/form/components/widgets/header/header.schema.ts
new file mode 100644
index 0000000000..a631f36100
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/header/header.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 { HeaderThemeVariable } from '../core/theme.model';
+import { WidgetSchemaModel } from '../core/widget-schema.model';
+
+export const headerSchema: WidgetSchemaModel = {
+ themeProperties: [
+ {
+ name: 'FORM.FIELD_STYLE.FONT_SIZE',
+ cssPropertyName: 'font-size',
+ fieldVariableName: '--adf-header-font-size',
+ formVariableName: '--adf-header-font-size',
+ type: 'number',
+ unit: 'px',
+ defaultValue: '16px'
+ },
+ {
+ name: 'FORM.FIELD_STYLE.FONT_WEIGHT',
+ cssPropertyName: 'font-weight',
+ fieldVariableName: '--adf-header-font-weight',
+ formVariableName: '--adf-header-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-header-color',
+ formVariableName: '--adf-header-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/core/src/lib/form/components/widgets/header/header.widget.html b/lib/core/src/lib/form/components/widgets/header/header.widget.html
new file mode 100644
index 0000000000..7afef5293f
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/header/header.widget.html
@@ -0,0 +1,18 @@
+
diff --git a/lib/core/src/lib/form/components/widgets/header/header.widget.scss b/lib/core/src/lib/form/components/widgets/header/header.widget.scss
new file mode 100644
index 0000000000..99d4ce8816
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/header/header.widget.scss
@@ -0,0 +1,13 @@
+.adf-container-widget-header__text {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.87);
+ 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;
+ }
+}
diff --git a/lib/core/src/lib/form/components/widgets/header/header.widget.spec.ts b/lib/core/src/lib/form/components/widgets/header/header.widget.spec.ts
new file mode 100644
index 0000000000..e5cebb9506
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/header/header.widget.spec.ts
@@ -0,0 +1,69 @@
+/*!
+ * @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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContainerModel } from '../core/container.model';
+import { FormFieldTypes } from '../core/form-field-types';
+import { FormFieldModel } from '../core/form-field.model';
+import { HeaderWidgetComponent } from './header.widget';
+
+describe('HeaderWidgetComponent', () => {
+ let component: HeaderWidgetComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [HeaderWidgetComponent, TranslateModule.forRoot()]
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeaderWidgetComponent);
+ component = fixture.componentInstance;
+ fixture.componentRef.setInput(
+ 'element',
+ new ContainerModel(
+ new FormFieldModel(
+ {
+ onFormFieldChanged: () => {}
+ },
+ {
+ type: FormFieldTypes.GROUP,
+ name: 'test-name',
+ id: 'test-id',
+ params: { allowCollapse: true }
+ }
+ )
+ )
+ );
+ fixture.detectChanges();
+ });
+
+ it('should render the header widget template', () => {
+ const nativeElement = fixture.nativeElement;
+ expect(nativeElement.querySelector('.adf-container-widget-header')).toBeTruthy();
+ expect(nativeElement.querySelector('#container-header-label-test-id').textContent.trim()).toEqual('test-name');
+ });
+
+ it('should call onExpanderClicked method when expander is clicked', () => {
+ spyOn(component, 'onExpanderClicked');
+ const expander = fixture.nativeElement.querySelector('#container-header-label-test-id');
+ expander.click();
+ expect(component.onExpanderClicked).toHaveBeenCalled();
+ });
+});
diff --git a/lib/core/src/lib/form/components/widgets/header/header.widget.ts b/lib/core/src/lib/form/components/widgets/header/header.widget.ts
new file mode 100644
index 0000000000..49d94b9cb4
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/header/header.widget.ts
@@ -0,0 +1,42 @@
+/*!
+ * @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 { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ContainerModel } from '../core/container.model';
+import { FieldStylePipe } from './../../../pipes/field-style.pipe';
+import { MatIconModule } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+ selector: 'adf-header-widget',
+ templateUrl: './header.widget.html',
+ styleUrls: ['./header.widget.scss'],
+ standalone: true,
+ encapsulation: ViewEncapsulation.None,
+ imports: [FieldStylePipe, MatIconModule, MatButtonModule, TranslateModule, NgIf]
+})
+export class HeaderWidgetComponent {
+ @Input() element: ContainerModel;
+
+ onExpanderClicked(content: ContainerModel) {
+ if (content?.isCollapsible()) {
+ content.isExpanded = !content.isExpanded;
+ }
+ }
+}
diff --git a/lib/core/src/lib/form/components/widgets/header/index.ts b/lib/core/src/lib/form/components/widgets/header/index.ts
new file mode 100644
index 0000000000..47a1e31938
--- /dev/null
+++ b/lib/core/src/lib/form/components/widgets/header/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 './header.schema';
+export * from './header.widget';
diff --git a/lib/core/src/lib/form/components/widgets/index.ts b/lib/core/src/lib/form/components/widgets/index.ts
index 0cf65bb57a..2a14020fc3 100644
--- a/lib/core/src/lib/form/components/widgets/index.ts
+++ b/lib/core/src/lib/form/components/widgets/index.ts
@@ -54,6 +54,7 @@ export * from './text/text-mask.component';
// widgets with schema
export * from './display-text';
+export * from './header';
export const WIDGET_DIRECTIVES: any[] = [
UnknownWidgetComponent,
diff --git a/lib/core/src/lib/form/pipes/field-style.pipe.ts b/lib/core/src/lib/form/pipes/field-style.pipe.ts
index 77d7b3dee1..fe22dcc1e2 100644
--- a/lib/core/src/lib/form/pipes/field-style.pipe.ts
+++ b/lib/core/src/lib/form/pipes/field-style.pipe.ts
@@ -17,13 +17,14 @@
import { Pipe, PipeTransform } from '@angular/core';
import { FormFieldModel } from '../components/widgets/core/form-field.model';
+import { ContainerModel } from '../components/widgets/core/container.model';
@Pipe({
name: 'adfFieldStyle',
standalone: true
})
export class FieldStylePipe implements PipeTransform {
- transform(field: FormFieldModel): string {
+ transform(field: FormFieldModel | ContainerModel): string {
const theme = field.form?.theme?.widgets[field.type];
const style = field.style && theme?.[field.style];