@verisoft/ui-govcz 18.3.0 → 18.4.0

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@verisoft/ui-govcz",
-  "version": "18.3.0",
+  "version": "18.4.0",
   "peerDependencies": {
     "@angular/common": "^18.2.8",
     "@angular/core": "^18.2.8",
     "@angular/router": "18.2.8",
     "@gov-design-system-ce/angular": "^1.1.1",
-    "@verisoft/ui-core": "18.0.0",
+    "@verisoft/ui-core": "18.4.0",
     "@gov-design-system-ce/components": "^4.1.3-BETA-10",
     "@angular/forms": "18.2.8",
     "uuid": "^10.0.0",
-    "@verisoft/core": "18.0.0",
+    "@verisoft/core": "18.4.0",
     "zxcvbn": "^4.4.2",
     "rxjs": "~7.8.0",
     "@angular/cdk": "^18.2.14",
     "@ngx-translate/core": "^15.0.0",
-    "@verisoft/security-core": "18.0.0"
+    "@verisoft/security-core": "18.4.0"
   },
   "sideEffects": false
 }

package/src/lib/components/shared-components/action-button-group/action-button-group.component.ts

@@ -15,8 +15,8 @@ import {
   queryListChanged,
   ScreenSizeService,
   UnsubscribeComponent,
-  MenuItem,
 } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
 import { MenuModule } from 'primeng/menu';
 import {
   combineLatestWith,

package/src/lib/components/shared-components/dynamic-component/dynamic-component-factory.service.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Injectable,
   ViewContainerRef,
@@ -6,22 +7,29 @@ import {
   Injector,
   ComponentRef,
   ComponentFactory,
-  OnInit,
   OnChanges,
   SimpleChanges,
   SimpleChange,
+  EventEmitter,
+  OnDestroy,
 } from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
+import { Subscription } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
-export class DynamicComponentFactoryService {
-  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
+export class DynamicComponentFactoryService implements OnDestroy {
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngOnDestroy(): void {
+    this.unsubscribeComponentEvents(this);
+  }
 
   async createDynamicComponent<TComponent>(
     componentType: Type<TComponent>,
     viewContainerRef: ViewContainerRef,
-    inputs: Partial<TComponent>,
+    inputs: ExtendedComponent<TComponent>,
     injector: Injector | undefined = undefined
   ) {
     const componentFactory =
@@ -32,7 +40,6 @@ export class DynamicComponentFactoryService {
       undefined,
       injector
     );
-
     this.setComponentDataInt(componentFactory, component, inputs);
     this.fireComponentEvents(component.instance, inputs);
     return component;
@@ -49,27 +56,26 @@ export class DynamicComponentFactoryService {
     this.setComponentDataInt(factory, component, inputs);
   }
 
-  private fireComponentEvents<TComponent>(instance: TComponent, inputs: Partial<TComponent>) {
-    if (instance) {
-      const onChangeComponent = instance as unknown as OnChanges;
-      if (onChangeComponent.ngOnChanges && inputs) {
-        const changeEventArgs = Object.keys(inputs).reduce((changes: SimpleChanges, key: string) => {
-          const inputValue = (inputs as { [key: string]: unknown })[key];
-          changes[key] = new SimpleChange(undefined, inputValue, true);
-          return changes;
-        }, {} as SimpleChanges);
-        
-
-        onChangeComponent.ngOnChanges(changeEventArgs);
-      }
+  private unsubscribeComponentEvents<TComponent>(instance: TComponent) {
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
 
-      const onInitComponent = instance as unknown as OnInit;
-      if (onInitComponent.ngOnInit) {
-        onInitComponent.ngOnInit();
-      }
+    if (subscriptions) {
+      subscriptions.forEach((sub) => sub.unsubscribe());
+      subscriptions.clear();
     }
   }
 
+  private fireComponentEvents<TComponent>(
+    instance: TComponent,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    if (!instance || typeof instance !== 'object') return;
+
+    this.fireInputComponentEvents(instance, inputs);
+    this.fireOutputComponentEvents(instance, inputs);
+  }
+
   private setComponentDataInt<TComponent>(
     factory: ComponentFactory<TComponent>,
     component: ComponentRef<TComponent>,
@@ -83,8 +89,54 @@ export class DynamicComponentFactoryService {
         .forEach((x) => {
           (<{ [key: string]: unknown }>component.instance)[x] = (<
             { [key: string]: unknown }
-          >inputs)[x];
+            >inputs)[x];
         });
     }
   }
+
+  private fireInputComponentEvents<TComponent>(
+    instance: TComponent,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    const onChangeComponent = instance as unknown as OnChanges;
+    if (onChangeComponent.ngOnChanges && inputs) {
+      const changeEventArgs = Object.keys(inputs).reduce((changes: SimpleChanges, key: string) => {
+        const inputValue = (inputs as { [key: string]: unknown })[key];
+        changes[key] = new SimpleChange(undefined, inputValue, true);
+        return changes;
+      }, {} as SimpleChanges);
+
+      onChangeComponent.ngOnChanges(changeEventArgs);
+    }
+  }
+
+  private fireOutputComponentEvents<TComponent>(
+    instance: TComponent & object,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    const outputs = Object.keys(inputs).filter((key) => {
+      const emitter = (instance as Record<string, any>)[key];
+      return emitter instanceof EventEmitter;
+    });
+
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    if (!(subscriptionStoreKey in instance)) {
+      (instance as any)[subscriptionStoreKey] = new Map<string, Subscription>();
+    }
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
+
+    for (const outputKey of outputs) {
+      const eventEmitter = (instance as Record<string, any>)[outputKey] as EventEmitter<any>;
+      const callback = inputs[outputKey] as (value: any) => void;
+
+      if (eventEmitter && typeof callback === 'function') {
+        if (subscriptions.has(outputKey)) {
+          subscriptions.get(outputKey)!.unsubscribe();
+        }
+
+        const subscription = eventEmitter.subscribe((value: any) => callback(value));
+        subscriptions.set(outputKey, subscription);
+      }
+    }
+  }
 }

package/src/lib/components/shared-components/dynamic-component/dynamic-component.component.ts

@@ -11,6 +11,7 @@ import {
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
 import { DynamicComponentFactoryService } from './dynamic-component-factory.service';
 
 @Component({
@@ -22,7 +23,7 @@ import { DynamicComponentFactoryService } from './dynamic-component-factory.serv
 export class DynamicComponent<TComponent> implements AfterViewInit, OnChanges {
   @Input() componentType!: Type<TComponent>;
 
-  @Input() data!: Partial<TComponent>;
+  @Input() data!: ExtendedComponent<TComponent>;
 
   @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
   container!: ViewContainerRef;
@@ -34,15 +35,15 @@ export class DynamicComponent<TComponent> implements AfterViewInit, OnChanges {
   private injector = inject(Injector);
 
   ngOnChanges(): void {
-    this.crateComponent();
+    this.createComponent();
   }
 
   ngAfterViewInit(): void {
-    this.crateComponent();
+    this.createComponent();
     this.changeDetectorRef.detectChanges();
   }
 
-  private crateComponent() {
+  private createComponent() {
     if (this.container) {
       this.factoryServices.createDynamicComponent(
         this.componentType,

package/src/lib/components/shared-components/feature-list/directives/feature-list-column.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, Input } from '@angular/core';
-import { TableColumnDirective } from '@verisoft/ui-core';
+import { GenericFieldType, GenericFieldTypeType, TableColumnDirective } from '@verisoft/ui-core';
 import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListColumnProvider } from '../feature-list-page.model';
 
 @Directive({
@@ -14,13 +14,19 @@ import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListC
     },
   ],
 })
-export class FeatureListColumnDirective<T> extends TableColumnDirective<T> implements FeatureListColumnProvider<T> {
-  @Input()
-  filter = false;
+export class FeatureListColumnDirective<T>
+  extends TableColumnDirective<T>
+  implements FeatureListColumnProvider<T>
+{
+  @Input() filter = false;
+
+  @Input() type: GenericFieldTypeType = GenericFieldType.text;
 
   override getDefinition(): FeatureListColumnDefinition<T> {
     const definition = super.getDefinition() as FeatureListColumnDefinition<T>;
     definition.filter = this.filter;
+    definition.type = this.type;
+    definition.format = this.format;
     return definition;
   }
 }

package/src/lib/components/shared-components/feature-list/feature-list-page.model.ts

@@ -1,6 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { Route } from '@angular/router';
-import { ColumnDefinition } from '@verisoft/ui-core';
+import { ColumnDefinition, GenericFieldTypeType } from '@verisoft/ui-core';
 import { FeatureListPageComponent } from './feature-list-page.component';
 
 export interface FeatureListPageConfig {
@@ -30,6 +30,7 @@ export function addFeatureListPage(
 
 export interface FeatureListColumnDefinition<T> extends ColumnDefinition<T> {
   filter?: boolean;
+  type?: GenericFieldTypeType;
 }
 
 export const FEATURE_LIST_COLUMN_PROVIDER = new InjectionToken(

package/src/lib/components/shared-components/feature-list/feature-list.component.html

@@ -48,6 +48,9 @@
         [autoBind]="true"
         [datasource]="datasource"
         [columns]="columns"
+        [extraFilter]="extraFilter"
+        [maximumColumnLength]="maximumColumnLength"
+        [disableCustomClicks]="disableCustomClicks"
         (selectionChange)="selectItems($event)"
       >
       </v-table>

package/src/lib/components/shared-components/feature-list/feature-list.component.scss

@@ -7,4 +7,4 @@
 
 :host {
     @extend .full-height-container;
-  }
+}

package/src/lib/components/shared-components/feature-list/feature-list.component.ts

@@ -25,12 +25,13 @@ import {
   DialogService,
   downloadFile,
   GenericFieldDefinition,
+  MAX_COLUMN_CHAR_COUNT,
   TableDatasourceDirective,
   TableFilterDirective,
   TableSelectionMode,
   TableSelectionModeType,
 } from '@verisoft/ui-core';
-import { forkJoin, Observable, of, switchMap, take } from 'rxjs';
+import { take, switchMap, forkJoin, Observable, of } from 'rxjs';
 import { Icons } from '../../../icons';
 import { TableComponent } from '../../table';
 import {
@@ -75,7 +76,7 @@ export class FeatureListComponent<T> implements AfterViewInit {
 
   @Input() autoBind = true;
 
-  @Input({ required: true }) title!: string;
+  @Input() title!: string;
 
   @Input() columns!: FeatureListColumnDefinition<T>[];
 
@@ -119,21 +120,37 @@ export class FeatureListComponent<T> implements AfterViewInit {
 
   @Input() datasource!: DatasourceType<T>;
 
+  @Input() extraFilter!: any;
+
+  @Input() disableCustomClicks = false;
+
+  @Input() maximumColumnLength = MAX_COLUMN_CHAR_COUNT;
+
   @Output() addClick = new EventEmitter();
 
   @Output() downloadClick = new EventEmitter();
 
   @Output() deleteClick = new EventEmitter<T[]>();
 
+  @Output() selectionChange = new EventEmitter();
+
+  @Input() set selectionMode(mode: TableSelectionModeType | undefined) {
+    this._selectionMode = mode;
+  }
+
+  get selectionMode(): TableSelectionModeType | undefined {
+    return this.canDelete
+      ? TableSelectionMode.single
+      : this._selectionMode;
+  }
+
   icons = Icons;
 
   private httpClient = inject(HttpClient);
 
   private baseUrl: string = inject(BASE_URL_PATH);
 
-  get selectionMode(): TableSelectionModeType | undefined {
-    return this.canDelete ? TableSelectionMode.single : undefined;
-  }
+  private _selectionMode: TableSelectionModeType | undefined;
 
   private cdRef = inject(ChangeDetectorRef);
 
@@ -153,10 +170,20 @@ export class FeatureListComponent<T> implements AfterViewInit {
     if (this.fieldDeclarations?.length) {
       this.filters = this.fieldDeclarations?.toArray();
     }
+
+    this.cdRef.detectChanges();
   }
 
   selectItems(items: T[]) {
     this.selection = items ?? [];
+
+    if (this.selectionMode !== undefined) {
+      this.selectionChange.emit(
+        this.selectionMode === 'multiple'
+          ? this.selection
+          : this.selection[0]
+      );
+    }
   }
 
   startDeleteItems() {

package/src/lib/components/shared-components/feature-list/index.ts

@@ -2,3 +2,4 @@ export * from './feature-list.component';
 export * from './feature-list-page.model';
 export * from './directives/feature-list-column.directive';
 export * from './directives/feature-list-filter-field.directive';
+export * from './feature-list-filter.pipe';

package/src/lib/components/shared-components/filter/directives/filter-field.directive.ts

@@ -1,4 +1,6 @@
 import { Directive, Input } from '@angular/core';
+import { ValidatorFn } from '@angular/forms';
+import { DatasourceType } from '@verisoft/core';
 import { GenericFieldDefinition, GenericFieldType, GenericFieldTypeType } from '@verisoft/ui-core';
 
 @Directive({
@@ -7,18 +9,27 @@ import { GenericFieldDefinition, GenericFieldType, GenericFieldTypeType } from '
   standalone: true,
 })
 export class FilterFieldDirective implements GenericFieldDefinition {
-  
-    @Input({ required: true }) name!: string;
+  @Input({ required: true }) name!: string;
 
-    @Input() type?: GenericFieldTypeType | undefined = GenericFieldType.text;
+  @Input() type: GenericFieldTypeType | undefined = GenericFieldType.text;
 
-    @Input() label?: string | undefined;
+  @Input() label: string | undefined;
 
-    @Input() optionLabel!: string;
+  @Input() optionLabel!: string;
 
-    @Input() optionValue?: string | undefined;
+  @Input() optionValue: string | undefined;
 
-    @Input() options?: unknown[] | undefined;
+  @Input() options: unknown[] | undefined;
 
-    @Input() value?: unknown;
+  @Input() value?: unknown;
+
+  @Input() validator?: ValidatorFn[];
+
+  @Input() datasource: DatasourceType<any> | undefined;
+
+  @Input() filterField?: string;
+
+  @Input() showFilter?: boolean;
+
+  @Input() localSearch?: boolean;
 }

package/src/lib/components/shared-components/filter/filter.component.html

@@ -27,6 +27,7 @@
         [fields]="declaration"
         [formGroup]="formGroup"
       ></v-generic-form>
+      <v-button label="X" class="mt-3" (click)="clear()" />
     </div>
   }
     <div class="v-filter_action-buttons d-flex">

package/src/lib/components/shared-components/generic-field/generic-field.component.html

@@ -4,8 +4,8 @@
   [floatLabel]="floatLabel === true"
   [size]="size"
   [formControl]="formControl"
-></v-textfield>
-} @if (type === fieldTypes.dropdown) {
+/>
+} @else if (type === fieldTypes.dropdown && !datasource) {
 <v-dropdown
   [label]="!floatLabel ? label : ''"
   [floatLabel]="floatLabel ? label : ''"
@@ -14,14 +14,36 @@
   [optionLabel]="optionLabel"
   [optionValue]="optionValue ?? optionLabel"
   [loading]="loading"
+  [forceMinWidth]="true"
   [formControl]="formControl"
+  [showFilter]="showFilter ?? false"
+  [localSearch]="localSearch ?? false"
   (changeEvent)="changed.emit($event)"
   (clearEvent)="cleared.emit($event)"
   (lazyLoadEvent)="lazyLoad.emit($any($event))"
   (showEvent)="showed.emit($event)"
->
-</v-dropdown>
-} @else if (type === fieldTypes.multiselect) {
+/> 
+} @else if (type === fieldTypes.dropdown && datasource) {
+  <v-dropdown
+    useDatasource
+    [forceMinWidth]="true"
+    [datasource]="datasource"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue ?? optionLabel"
+    [label]="!floatLabel ? label : ''"
+    [floatLabel]="floatLabel ? label : ''"
+    [testId]="testId"
+    [loading]="loading"
+    [formControl]="formControl"
+    [showFilter]="showFilter ?? false"
+    [filterField]="filterField ?? 'fulltext'"
+    [localSearch]="localSearch ?? false"
+    (changeEvent)="changed.emit($event)"
+    (clearEvent)="cleared.emit($event)"
+    (lazyLoadEvent)="lazyLoad.emit($any($event))"
+    (showEvent)="showed.emit($event)"
+  />
+} @else if (type === fieldTypes.multiselect && !datasource) {
 <v-multiselect
   [label]="!floatLabel ? label : ''"
   [floatLabel]="floatLabel ? label : ''"
@@ -35,14 +57,35 @@
   (clearEvent)="cleared.emit($event)"
   (lazyLoadEvent)="lazyLoad.emit($any($event))"
   (showEvent)="showed.emit($event)"
->
-</v-multiselect>
+/>
+} @else if (type === fieldTypes.multiselect && datasource) {
+<v-multiselect
+  useDatasource
+  [datasource]="datasource"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [loading]="loading"
+  [formControl]="formControl"
+  (changeEvent)="changed.emit($event)"
+  (clearEvent)="cleared.emit($event)"
+  (lazyLoadEvent)="lazyLoad.emit($any($event))"
+  (showEvent)="showed.emit($event)"
+/>
 } @else if (type === fieldTypes.checkbox) {
 <v-tristatecheckbox
   [label]="label"
   [testId]="testId"
   [formControl]="formControl"
-></v-tristatecheckbox>
+/>
+} @else if (type === fieldTypes.simplecheckbox) {
+<v-checkbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+/>
 } @else if (type === fieldTypes.calendar) {
 <v-calendar
   [label]="!floatLabel ? label : ''"
@@ -50,5 +93,5 @@
   [testId]="testId"
   [formControl]="formControl"
   [icon]="icons.calendar"
-></v-calendar>
+/>
 }

package/src/lib/components/shared-components/generic-field/generic-field.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -7,11 +8,13 @@ import {
 } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
+  DatasourceType,
   FilterEvent,
   LazyLoadEvent,
 } from '@verisoft/core';
 import {
   BaseFormInputComponent,
+  DatasourceDirective,
   FieldSize,
   FieldSizeType,
   GENERIC_FIELD_COMPONENT_TOKEN,
@@ -21,6 +24,7 @@ import {
 } from '@verisoft/ui-core';
 import { Icons } from '../../../icons';
 import { CalendarComponent } from '../../calendar';
+import { CheckboxComponent } from '../../checkbox';
 import { DropdownComponent } from '../../dropdown';
 import { MultiselectComponent } from '../../multiselect';
 import { TextfieldComponent } from '../../textfield';
@@ -30,13 +34,16 @@ import { TristatecheckboxComponent } from '../../tristatecheckbox';
   selector: 'v-generic-field',
   standalone: true,
   imports: [
+    CommonModule,
     DropdownComponent,
     CalendarComponent,
     TristatecheckboxComponent,
     MultiselectComponent,
     TextfieldComponent,
     ReactiveFormsModule,
-  ],
+    CheckboxComponent,
+    DatasourceDirective,
+],
   providers: [
     {
       provide: GENERIC_FIELD_COMPONENT_TOKEN,
@@ -68,6 +75,14 @@ export class GenericFieldComponent<T>
 
   @Input() filter = true;
 
+  @Input() datasource?: DatasourceType<T>
+
+  @Input() filterField?: string;
+
+  @Input() showFilter?: boolean;
+
+  @Input() localSearch?: boolean;
+
   @Output() changed = new EventEmitter<any>();
   @Output() showed = new EventEmitter<any>();
   @Output() cleared = new EventEmitter<any>();

package/src/lib/components/shared-components/generic-form/generic-form.component.html

@@ -1,10 +1,33 @@
 @if (formGroupComputed) {
-<div class="v-generic-form row" [formGroup]="formGroupComputed">
-  @for(field of fields; track field){ @if (columnClass) {
-  <div class="v-generic-form__column {{ columnClass }}">
+  <div
+    class="v-generic-form"
+    [ngClass]="showAsRow ? 'd-flex flex-row' : 'row'"
+    [formGroup]="formGroupComputed"
+  >
+    @for(field of fields; track field) { @if (columnClass) {
+    <div class="v-generic-form__column {{ columnClass }}">
+      <v-generic-field
+        [type]="field.type"
+        [label]="field.label ?? 'NOT SET' | translate"
+        [floatLabel]="field.floatLabel"
+        [testId]="field.testId"
+        [options]="field.options"
+        [optionLabel]="field.optionLabel"
+        [optionValue]="field.optionValue ?? field.optionLabel"
+        [options]="field.options"
+        [size]="field.size"
+        [formControlName]="field.name"
+        [datasource]="field.datasource"
+        [showFilter]="field.showFilter"
+        [filterField]="field.filterField"
+        [localSearch]="field.localSearch"
+      ></v-generic-field>
+    </div>
+    } @else {
     <v-generic-field
+      class="me-4"
       [type]="field.type"
-      [label]="field.label"
+      [label]="field.label ?? 'NOT SET' | translate"
       [floatLabel]="field.floatLabel"
       [testId]="field.testId"
       [options]="field.options"
@@ -13,21 +36,11 @@
       [options]="field.options"
       [size]="field.size"
       [formControlName]="field.name"
+      [datasource]="field.datasource"
+      [showFilter]="field.showFilter"
+      [filterField]="field.filterField"
+      [localSearch]="field.localSearch"
     ></v-generic-field>
+    } }
   </div>
-  } @else {
-  <v-generic-field
-    [type]="field.type"
-    [label]="field.label"
-    [floatLabel]="field.floatLabel"
-    [testId]="field.testId"
-    [options]="field.options"
-    [optionLabel]="field.optionLabel"
-    [optionValue]="field.optionValue ?? field.optionLabel"
-    [options]="field.options"
-    [size]="field.size"
-    [formControlName]="field.name"
-  ></v-generic-field>
-  } }
-</div>
-}
+  }

package/src/lib/components/shared-components/generic-form/generic-form.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -6,6 +7,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 import { GenericFieldDefinition } from '@verisoft/ui-core';
 import { GenericFieldComponent } from '../generic-field';
 import {
@@ -16,7 +18,12 @@ import {
 @Component({
   selector: 'v-generic-form',
   standalone: true,
-  imports: [GenericFieldComponent, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    GenericFieldComponent,
+    ReactiveFormsModule,
+    TranslateModule,
+  ],
   templateUrl: './generic-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -27,6 +34,8 @@ export class GenericFormComponent implements OnChanges {
 
   @Input() columns?: number;
 
+  @Input() showAsRow!: boolean;
+
   formGroupComputed!: UntypedFormGroup;
 
   columnClass?: string;

package/src/lib/components/shared-components/generic-form/generic-form.model.ts

@@ -22,9 +22,17 @@ export function generateFormGroup(
         field.name,
         new UntypedFormControl(field.value, field.validator)
       );
-    } else {
+    } else if (control && control.value !== field.value) {
+      control.setValue(field.value);
       control.setValidators(field.validator ?? null);
     }
+    else {
+      control.setValidators(field.validator ?? null);
+    }
+
+    if (field.readonly && (control || formGroup.get(field.name))) {
+      formGroup.get(field.name)?.disable();
+    }
   });
   if (!inputGroupChanged) {
     for (const field in formGroup.controls) {
@@ -55,6 +63,6 @@ export function getColumnClass(value?: number): string | undefined {
     case 6:
       return 'col-12 col-md-2';
   }
-  
+
   return 'col-12 col-md-1';
 }

package/tsconfig.json

@@ -25,6 +25,8 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "compilationMode": "partial",
+    "enableIvy": true
   }
 }

package/tsconfig.lib.prod.json

@@ -4,6 +4,7 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "compilationMode": "partial"
+    "compilationMode": "partial",
+    "enableIvy": true
   }
 }