@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.9

package/dropdown/src/dropdown.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DropdownComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/dropdown/src/dropdown.component.ts

@@ -0,0 +1,233 @@
+import {
+    Component,
+    HostBinding,
+    ViewEncapsulation,
+    Input,
+    OnInit,
+    OnChanges,
+    Output,
+    EventEmitter,
+    NgZone,
+    ElementRef,
+    Renderer2,
+    RendererStyleFlags2,
+    inject, input
+} from '@angular/core';
+import {
+    BaseComponent,
+    PositioningService,
+    ComputePositionResult,
+    DomEventsService,
+    ButtonModel,
+    OverflowStrategyType
+} from '@updevs/sdk/layout';
+import { TopBottomLeftRightType, LeftRightType } from '@updevs/sdk/types';
+import { TextService } from '@updevs/sdk';
+
+import { DropdownItem } from './models/dropdown-item';
+import { DropdownActionClickedModel } from './models/dropdown-action-clicked.model';
+
+@Component({
+    selector: 'upd-dropdown',
+    templateUrl: './dropdown.component.html',
+    styleUrls: ['./dropdown.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DropdownComponent extends BaseComponent implements OnInit, OnChanges {
+    @HostBinding('class') localWrapperClasses = '';
+
+    @Input() items: DropdownItem[] = [];
+    @Input() header?: string;
+    @Input()
+    set isOpen(value: boolean) {
+        this.updateOpenState(value);
+
+        if (this.shouldCloseOnOutsideClick) {
+            this.closeOnOutsideClick();
+        }
+    }
+    @Input() shouldCloseOnOutsideClick = false;
+    @Input() arrowType?: LeftRightType;
+    @Input() wrapperClasses = '';
+    /**
+     * Elements that won't trigger the close of the dropdown if clicked upon.
+     * Only works when `shouldCloseOnOutsideClick` is set to true.
+     */
+    @Input() elementsExcludedFromOutsideClick?: HTMLElement[];
+    /**
+     * Minimum height of the component.
+     */
+    @Input() minHeight?: number;
+    /**
+     * Maximum height of the component.
+     * If set, scroll bars will be used when the content's size is bigger than the component's.
+     */
+    @Input() maxHeight?: number;
+    /**
+     * Minimum width of the component.
+     */
+    @Input() minWidth?: number;
+    /**
+     * Maximum width of the component.
+     * If set, scroll bars will be used when the content's size is bigger than the component's.
+     */
+    @Input() maxWidth?: number;
+    /**
+     * If set, the position of the dropdown will be set according to this element.
+     */
+    @Input() dropdownReference?: ElementRef;
+    /**
+     * If a reference is provided, this will be the position of the dropdown in relation to that reference.
+     */
+    @Input() dropdownReferencePosition: TopBottomLeftRightType = 'bottom';
+
+    @Output() readonly isOpenChange = new EventEmitter<boolean>();
+    @Output() readonly selectedItem = new EventEmitter<DropdownItem>();
+    @Output() readonly checkboxChanged = new EventEmitter<DropdownItem>();
+
+    textOverflowStrategy = input<OverflowStrategyType>('wrap');
+
+    readonly textService = inject(TextService);
+    get isOpen(): boolean {
+        return this._isOpen;
+    }
+    get overflowClass(): string {
+        switch (this.textOverflowStrategy()) {
+            case 'no-wrap':
+                return 'text-nowrap';
+            case 'wrap':
+                return 'text-wrap';
+            case 'word-break':
+                return 'text-break';
+            default:
+                return 'text-truncate';
+        }
+    }
+
+    private baseWrapperClasses = 'dropdown-menu';
+    private _isOpen = false;
+    private readonly dropdownElement: HTMLElement;
+    private readonly ngZone = inject(NgZone);
+    private readonly elementRef = inject(ElementRef);
+    private readonly renderer = inject(Renderer2);
+    private readonly positioningService = inject(PositioningService);
+    private readonly domEventsService = inject(DomEventsService);
+
+    constructor() {
+        super();
+        this.dropdownElement = this.elementRef.nativeElement;
+    }
+
+    ngOnInit(): void {
+        this.updateStyle();
+    }
+
+    ngOnChanges(): void {
+        this.updateStyle();
+    }
+
+    onSelect(item: DropdownItem): void {
+        this.selectedItem.emit(item);
+    }
+
+    onCheckboxChange(item: DropdownItem, isChecked: boolean): void {
+        item.isChecked = isChecked;
+        this.checkboxChanged.emit(item);
+    }
+
+    adaptAction(btn: ButtonModel, item: DropdownItem): ButtonModel {
+        const defaultFunction = btn.clickFunction;
+        btn.clickFunction = (evt) => {
+            evt.event?.preventDefault();
+            evt.event?.stopPropagation();
+
+            if (!!defaultFunction) {
+                defaultFunction({ event: evt.event, data: { item, button: btn } as DropdownActionClickedModel });
+            }
+        };
+        return btn;
+    }
+
+    private closeOnOutsideClick(): void {
+        const excludedElements = [];
+
+        if (!!this.dropdownReference) {
+            excludedElements.push(this.dropdownReference.nativeElement);
+        }
+
+        const outsideClickSub = this.domEventsService.startOutsideClickListener(
+            () => this.ngZone.run(() => {
+                this.updateOpenState(false);
+                this.ngZone.run(() => this.updateWrapperClasses());
+            }),
+            this.dropdownElement,
+            true,
+            ...excludedElements
+        );
+        this.addSubscriptions(outsideClickSub);
+    }
+
+    private updateStyle(): void {
+        this.updateWrapperClasses();
+        this.updateMaxHeight();
+        this.startPositionUpdate();
+    }
+
+    private updateWrapperClasses(): void {
+        this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;
+
+        if (this.isOpen) {
+            this.localWrapperClasses += ' dropdown-show';
+        }
+
+        if (!!this.arrowType) {
+            this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');
+        }
+
+        if (!!this.maxHeight) {
+            this.localWrapperClasses += ' dropdown-overflow';
+        }
+    }
+
+    private updateOpenState(isOpen: boolean): void {
+        this._isOpen = isOpen;
+        this.isOpenChange.emit(isOpen);
+    }
+
+    private updateMaxHeight(): void {
+        this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);
+    }
+
+    private startPositionUpdate(): void {
+        if (!this.dropdownReference) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() =>
+            this.positioningService
+                .computePosition(this.dropdownReference!, this.elementRef, { placement: this.dropdownReferencePosition })
+                .subscribe(resp => this.updatePosition(resp))
+        );
+    }
+
+    private updatePosition(result: ComputePositionResult): void {
+        const reference = this.dropdownReference!.nativeElement.getBoundingClientRect();
+        const ddElement = this.dropdownElement;
+        const width = Math.abs(reference.width);
+        let widthOffset = 0;
+
+        if (!!this.maxWidth) {
+            this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);
+        }
+
+        if (!!this.minWidth) {
+            this.renderer.setStyle(ddElement, 'min-width', `${this.minWidth}px`, RendererStyleFlags2.Important);
+            widthOffset = (this.minWidth > width ? this.minWidth - width : 0) / 2;
+        }
+
+        this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'width', `${width}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'left', `${result.x - widthOffset}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
+    }
+}

package/dropdown/src/models/dropdown-action-clicked.model.ts

@@ -0,0 +1,8 @@
+import { ButtonModel } from '@updevs/sdk/layout';
+
+import { DropdownItem } from './dropdown-item';
+
+export interface DropdownActionClickedModel {
+    button: ButtonModel;
+    item: DropdownItem;
+}

package/dropdown/{models/dropdown-item.d.ts → src/models/dropdown-item.ts}

@@ -1,11 +1,16 @@
-import { BgColorStyleType } from '@updevs/sdk/layout';
+import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
 import { IconModel } from '@updevs/icons';
+import { TextModel } from '@updevs/sdk';
+
 import { DropdownItemType } from './dropdown-item.type';
+import { ToolbarType } from './toolbar.type';
+
 export interface DropdownItem {
     id?: any;
-    text?: string;
+    text?: TextModel;
     icon?: IconModel;
     type: DropdownItemType;
+    toolbarType?: ToolbarType;
     /**
      * If type is checkbox, and this is set, the switch style will be used.
      */
@@ -17,4 +22,5 @@ export interface DropdownItem {
     badgeColor?: BgColorStyleType;
     badgeText?: string;
     isChecked?: boolean;
+    actionButtons?: ButtonModel[];
 }

package/dropdown/{models/dropdown-item.type.d.ts → src/models/dropdown-item.type.ts}

@@ -1 +1 @@
-export type DropdownItemType = 'default' | 'radio' | 'checkbox' | 'divider';
+export type DropdownItemType = 'default' | 'radio' | 'checkbox' | 'divider' | 'with-toolbar';

package/dropdown/src/models/public-api.ts

@@ -0,0 +1,4 @@
+export * from './dropdown-action-clicked.model';
+export * from './dropdown-item';
+export * from './dropdown-item.type';
+export * from './toolbar.type';

package/dropdown/src/models/toolbar.type.ts

@@ -0,0 +1 @@
+export type ToolbarType = 'grouped' | 'spaced';

package/dropdown/src/upd-dropdown.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdRadioModule } from '@updevs/components/form-controls/radio';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+
+import { DropdownComponent } from './dropdown.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdIconsModule,
+        UpdRadioModule,
+        UpdCheckboxModule,
+        UpdButtonModule
+    ],
+    declarations: [
+        DropdownComponent
+    ],
+    exports: [
+        DropdownComponent
+    ]
+})
+export class UpdDropdownModule {}

package/form/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

package/form/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form/src/assets/i18n/en.json

@@ -0,0 +1,17 @@
+{
+    "UpDevs": {
+        "Form": {
+            "Submit": "Submit",
+            "ErrorMessages": {
+                "Generic": "Error",
+                "Email": "Invalid email",
+                "Max": "Value should not be greater than {{value}}",
+                "Min": "Value should not be lower than {{value}}",
+                "MaxLength": "Maximum length: {{value}}",
+                "MinLength": "Minimum length: {{value}}",
+                "Required": "Required field",
+                "RequiredTrue": "This field must be selected"
+            }
+        }
+    }
+}

package/form/src/assets/i18n/pt.json

@@ -0,0 +1,17 @@
+{
+    "UpDevs": {
+        "Form": {
+            "Submit": "Enviar",
+            "ErrorMessages": {
+                "Generic": "Erro",
+                "Email": "E-mail inválido",
+                "Max": "O valor não pode ser maior do que {{value}}",
+                "Min": "O valor não pode ser menor do que {{value}}",
+                "MaxLength": "Tamanho máximo permitido: {{value}}",
+                "MinLength": "Tamanho mínimo permitido: {{value}}",
+                "Required": "Campo obrigatório",
+                "RequiredTrue": "Este campo deve ser selecionado"
+            }
+        }
+    }
+}

package/form/src/components/dynamic-field/dynamic-field.component.html

@@ -0,0 +1,83 @@
+@switch (field().type) {
+    @case (DynamicFieldType.Input) {
+        <upd-input [name]="field().name" [label]="field().label" [placeholder]="field().placeholder" [hint]="field().hint"
+            [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
+            [validationStatusDescriptions]="validationStatusDescriptions" [layout]="layout()" [isDisabled]="field().isDisabled || false"
+            [type]="field().inputType || 'text'" [labelColSize]="field().labelColSize" [value]="formControl.value"
+            (valueChange)="formControl.setValue($event)" (blurred)="onBlur()"></upd-input>
+    }
+    @case (DynamicFieldType.Checkbox) {
+        <upd-checkbox [name]="field().name" [label]="field().label" [hint]="field().hint" [hintAsTooltip]="field().hintAsTooltip || false"
+            [validationStatus]="validationStatus" [validationStatusDescriptions]="validationStatusDescriptions" [value]="true"
+            [isDisabled]="field().isDisabled || false" [isChecked]="formControl.value" [isInline]="checkboxField.isInline || false"
+            [isSwitch]="checkboxField.isSwitch || false" (changed)="formControl.setValue($event)"></upd-checkbox>
+    }
+    @case (DynamicFieldType.CheckboxGroup) {
+        @if (!!field().label) {
+            <label class="form-label">{{ getText(field().label) }}</label>
+        }
+
+        @for (option of checkboxGroupOptionsKeys; track option) {
+            <upd-checkbox [name]="field().name" [label]="getOptionDescription(option, 'checkbox')" [hint]="field().hint"
+                [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
+                [validationStatusDescriptions]="validationStatusDescriptions" [value]="option" [isDisabled]="field().isDisabled || false"
+                [isChecked]="formControl.value" [isInline]="checkboxField.isInline || false" [isSwitch]="checkboxField.isSwitch || false"
+                (changed)="formControl.setValue(option)"></upd-checkbox>
+        }
+    }
+    @case (DynamicFieldType.Radio) {
+        <upd-radio [name]="field().name" [label]="field().label" [hint]="field().hint" [hintAsTooltip]="field().hintAsTooltip || false"
+            [validationStatus]="validationStatus" [validationStatusDescriptions]="validationStatusDescriptions" [value]="true"
+            [isChecked]="formControl.value" [isDisabled]="field().isDisabled || false" [isInline]="radioField.isInline || false"
+            (selected)="formControl.setValue($event)">
+        </upd-radio>
+    }
+    @case (DynamicFieldType.RadioGroup) {
+        @if (!!field().label) {
+            <label class="form-label">{{ getText(field().label) }}</label>
+        }
+
+        @for (option of radioGroupOptionsKeys; track option) {
+            <upd-radio [name]="field().name" [label]="getOptionDescription(option, 'radio')" [hint]="field().hint"
+                [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
+                [validationStatusDescriptions]="validationStatusDescriptions" [value]="option" [isDisabled]="field().isDisabled || false"
+                [isChecked]="formControl.value" [isInline]="checkboxField.isInline || false"
+                (selected)="formControl.setValue(option)"></upd-radio>
+        }
+    }
+    @case (DynamicFieldType.Select) {
+        <upd-select [name]="field().name" [label]="field().label" [hint]="field().hint" [hintAsTooltip]="field().hintAsTooltip || false"
+            [validationStatus]="validationStatus" [validationStatusDescriptions]="validationStatusDescriptions"
+            [useSystemStyle]="singleSelectField.useSystemStyle || false" [isDisabled]="field().isDisabled || false"
+            [items]="selectField.items" [layout]="layout()" [labelColSize]="field().labelColSize" [store]="selectField.store!"
+            [observable]="selectField.observable" [itemKey]="selectField.itemKey" [itemValue]="selectField.itemValue"
+            [dropdownMaxHeight]="selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight"
+            [typeaheadDebounce]="selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce"
+            [shouldAutoSearch]="selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch"
+            [shouldCloseOnOutsideClick]="selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick"
+            (selectedItem)="formControl.setValue($event?.value)"></upd-select>
+    }
+    @case (DynamicFieldType.SelectMultiple) {
+        <upd-select-multiple [name]="field().name" [label]="field().label" [hint]="field().hint"
+            [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
+            [validationStatusDescriptions]="validationStatusDescriptions" [isDisabled]="field().isDisabled || false"
+            [items]="selectField.items" [layout]="layout()" [labelColSize]="field().labelColSize" [store]="selectField.store!"
+            [observable]="selectField.observable" [itemKey]="selectField.itemKey" [itemValue]="selectField.itemValue"
+            [dropdownMaxHeight]="selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight"
+            [typeaheadDebounce]="selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce"
+            [shouldAutoSearch]="selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch"
+            [shouldCloseOnOutsideClick]="selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick"
+            (selectedIds)="formControl.setValue($event)"></upd-select-multiple>
+    }
+    @case (DynamicFieldType.Label) {
+        <label class="form-label">{{ getText(field().label) }}</label>
+    }
+    @case (DynamicFieldType.TextArea) {
+        <upd-textarea [name]="field().name" [label]="field().label" [placeholder]="field().placeholder" [hint]="field().hint"
+            [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
+            [validationStatusDescriptions]="validationStatusDescriptions" [isDisabled]="field().isDisabled || false"
+            [value]="formControl.value" [customClasses]="textareaField.customClasses" [wrapperClasses]="textareaField.wrapperClasses"
+            [maxLength]="textareaField.maxLength" [rows]="textareaField.rows"
+            [displayCharactersCount]="textareaField.displayCharactersCount || false"></upd-textarea>
+    }
+}

package/form/src/components/dynamic-field/dynamic-field.component.scss

@@ -0,0 +1 @@
+

package/form/src/components/dynamic-field/dynamic-field.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DynamicFieldComponent } from './dynamic-field.component';
+
+describe('DynamicFieldComponent', () => {
+  let component: DynamicFieldComponent;
+  let fixture: ComponentFixture<DynamicFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DynamicFieldComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DynamicFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/form/src/components/dynamic-field/dynamic-field.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit, HostBinding, inject, InputSignal, input } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { TextModel, TextService } from '@updevs/sdk';
+import { OptionalType } from '@updevs/sdk/types';
+import { BaseComponent } from '@updevs/sdk/layout';
+import { ColumnSizeHelper, HorizontalVerticalType, ValidationStatusType } from '@updevs/components';
+import { Defaults as SelectDefaults } from '@updevs/components/form-controls/select';
+
+import { ErrorsHelper } from '../../tools/errors-helper';
+import { DynamicFieldType } from '../../models/enums/dynamic-field.type';
+import { DynamicFieldModel } from '../../models/dynamic-field.model';
+import { CheckboxFieldModel } from '../../models/checkbox-field.model';
+import { RadioFieldModel } from '../../models/radio-field.model';
+import { SelectFieldModel } from '../../models/select-field.model';
+import { SingleSelectFieldModel } from '../../models/single-select-field.model';
+import { CheckboxGroupFieldModel } from '../../models/checkbox-group-field.model';
+import { RadioGroupFieldModel } from '../../models/radio-group-field.model';
+import { TextareaFieldModel } from '../../models/textarea-field.model';
+
+@Component({
+    selector: 'upd-dynamic-field',
+    templateUrl: './dynamic-field.component.html',
+    styleUrl: './dynamic-field.component.scss'
+})
+export class DynamicFieldComponent extends BaseComponent implements OnInit {
+    @HostBinding('class') wrapperClasses = '';
+
+    DynamicFieldType = DynamicFieldType;
+    SelectDefaults = SelectDefaults;
+    formGroup: InputSignal<FormGroup> = input.required();
+    field: InputSignal<DynamicFieldModel> = input.required();
+    layout: InputSignal<HorizontalVerticalType> = input.required();
+    validationStatus?: ValidationStatusType;
+    validationStatusDescriptions: TextModel[] = [];
+    get formControl(): FormControl {
+        return this.formGroup().controls[this.field().name] as FormControl;
+    }
+    get checkboxField(): CheckboxFieldModel {
+        return this.field() as CheckboxFieldModel;
+    }
+    get checkboxGroupField(): CheckboxGroupFieldModel {
+        return this.field() as CheckboxGroupFieldModel;
+    }
+    get radioField(): CheckboxFieldModel {
+        return this.field() as RadioFieldModel;
+    }
+    get radioGroupField(): RadioGroupFieldModel {
+        return this.field() as RadioGroupFieldModel;
+    }
+    get selectField(): SelectFieldModel {
+        return this.field() as SelectFieldModel;
+    }
+    get singleSelectField(): SingleSelectFieldModel {
+        return this.field() as SingleSelectFieldModel;
+    }
+    get textareaField(): TextareaFieldModel {
+        return this.field() as TextareaFieldModel;
+    }
+    get checkboxGroupOptionsKeys(): string[] {
+        return Object.keys(this.checkboxGroupField.options);
+    }
+    get radioGroupOptionsKeys(): string[] {
+        return Object.keys(this.radioGroupField.options);
+    }
+
+    private readonly errorsHelper = inject(ErrorsHelper);
+    private readonly textService = inject(TextService);
+
+    ngOnInit(): void {
+        const statusSub = this.formControl.statusChanges.subscribe(status => {
+            if (status === 'INVALID') {
+                this.validationStatusDescriptions = this.errorsHelper.getMessages(this.formControl)
+                    .map(t => ({ text: t, isTranslated: true }));
+                this.validationStatus = 'invalid';
+            } else {
+                this.validationStatusDescriptions = [];
+                this.validationStatus = this.field().showValidStatus ? 'valid' : undefined;
+            }
+        });
+
+        this.setupWrapperClasses();
+        this.addSubscriptions(statusSub);
+    }
+
+    onBlur(): void {
+        if (this.field().shouldValidateOnBlur) {
+            this.formControl.updateValueAndValidity();
+        }
+    }
+
+    getText(textModel?: TextModel): string {
+        return this.textService.getText(textModel);
+    }
+
+    getOptionDescription(key: string, type: 'checkbox' | 'radio'): OptionalType<TextModel> {
+        return type === 'checkbox' ? this.checkboxGroupField.options[key] : this.radioGroupField.options[key];
+    }
+
+    private setupWrapperClasses(): void {
+        this.wrapperClasses = ColumnSizeHelper.getSizeClasses(this.field().colSize);
+    }
+}

package/form/src/form.component.html

@@ -0,0 +1,26 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.Form'">
+    <div [class.card]="isCard()">
+        @if (!!titleText) {
+            <div [class.card-header]="isCard()">
+                <h3 [class.card-title]="isCard()">{{ titleText }}</h3>
+            </div>
+        }
+        <div [class.card-body]="isCard()">
+            @for (row of rows(); track row; let isFirst = $first) {
+                <div class="row" [class.mt-4]="!isFirst">
+                    @for (field of row.fields; track field.name) {
+                        <upd-dynamic-field [layout]="layout()" [field]="field" [formGroup]="formGroup()"></upd-dynamic-field>
+                    }
+                </div>
+            }
+        </div>
+
+        @if (hasActionsSection()) {
+            <div [class.card-footer]="isCard()" [class.mt-4]="!isCard()">
+                <upd-button colorStyle="primary" (clicked)="submit()">
+                    {{ t('Submit') }}
+                </upd-button>
+            </div>
+        }
+    </div>
+</ng-container>

package/form/src/form.component.scss

@@ -0,0 +1 @@
+

package/form/src/form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+  let component: FormComponent;
+  let fixture: ComponentFixture<FormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FormComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});