@verisoft/ui-primeng 19.0.1-1 → 20.1.0

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

@@ -0,0 +1,69 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  ControlSeverityType,
+  FieldSizeType,
+} from '@verisoft/ui-core';
+import { Observable, Subject } from 'rxjs';
+import { Icons } from '../../../../../icons';
+import { ButtonComponent } from '../../../../button';
+
+@Component({
+    selector: 'v-action-button',
+    imports: [ButtonComponent],
+    templateUrl: './action-button.component.html',
+    styleUrl: './action-button.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionButtonComponent implements ActionButton, OnChanges {
+  @Input() disabled = false;
+  @Input() toolTip?: string;
+  @Input() id?: string;
+  @Input() icon?: string;
+  @Input() outlined = false;
+  @Input() raised = false;
+  @Input() severity?: ControlSeverityType;
+  @Input() label?: string;
+  @Input() size?: FieldSizeType;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() click = new EventEmitter<MouseEvent>();
+
+  icons = Icons
+
+  private propertyChangeSubject = new Subject();
+
+  propertyChanged: Observable<unknown> =
+    this.propertyChangeSubject.asObservable();
+
+  buttonGroup: ActionButtonGroupCore | null = inject<ActionButtonGroupCore>(
+    ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+    {
+      optional: true,
+    }
+  );
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const isValueChange = Object.keys(changes).some(
+      (x) => !changes[x].firstChange
+    );
+    if (isValueChange) {
+      this.propertyChangeSubject.next(null);
+    }
+  }
+
+  handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.click.emit(event);
+  }
+}

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

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Injectable,
+  ViewContainerRef,
+  Type,
+  ComponentFactoryResolver,
+  Injector,
+  ComponentRef,
+  ComponentFactory,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+  EventEmitter,
+  OnDestroy,
+} from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
+import { Subscription } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicComponentFactoryService implements OnDestroy {
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngOnDestroy(): void {
+    this.unsubscribeComponentEvents(this);
+  }
+
+  async createDynamicComponent<TComponent>(
+    componentType: Type<TComponent>,
+    viewContainerRef: ViewContainerRef,
+    inputs: ExtendedComponent<TComponent>,
+    injector: Injector | undefined = undefined
+  ) {
+    const componentFactory =
+      this.componentFactoryResolver.resolveComponentFactory(componentType);
+    viewContainerRef.clear();
+    const component = viewContainerRef.createComponent(
+      componentFactory,
+      undefined,
+      injector
+    );
+    this.setComponentDataInt(componentFactory, component, inputs);
+    this.fireComponentEvents(component.instance, inputs);
+    return component;
+  }
+
+  setComponentData<TComponent>(
+    component: ComponentRef<TComponent>,
+    inputs: Partial<TComponent>
+  ) {
+    const factory = this.componentFactoryResolver.resolveComponentFactory(
+      component.componentType
+    );
+
+    this.setComponentDataInt(factory, component, inputs);
+  }
+
+  private unsubscribeComponentEvents<TComponent>(instance: TComponent) {
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
+
+    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>,
+    inputs: Partial<TComponent>
+  ) {
+    if (inputs) {
+      const propertyNames = factory.inputs.map((x) => x.propName);
+      const inputsHash = new Set(propertyNames);
+      Object.keys(inputs)
+        .filter((x) => inputsHash.has(x))
+        .forEach((x) => {
+          (<{ [key: string]: unknown }>component.instance)[x] = (<
+            { [key: string]: unknown }
+            >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

@@ -0,0 +1,56 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Injector,
+  Input,
+  OnChanges,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
+import { DynamicComponentFactoryService } from './dynamic-component-factory.service';
+
+@Component({
+  selector: 'v-dynamic-component',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-container #dynamicContainer></ng-container>`,
+})
+export class DynamicComponent<TComponent> implements AfterViewInit, OnChanges {
+  @Input() componentType!: Type<TComponent>;
+
+  @Input() data!: ExtendedComponent<TComponent>;
+
+  @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
+  container!: ViewContainerRef;
+
+  private factoryServices = inject(DynamicComponentFactoryService);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private injector = inject(Injector);
+
+  ngOnChanges(): void {
+    this.createComponent();
+  }
+
+  ngAfterViewInit(): void {
+    this.createComponent();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private createComponent() {
+    if (this.container) {
+      this.factoryServices.createDynamicComponent(
+        this.componentType,
+        this.container,
+        this.data,
+        this.injector
+      );
+    }
+  }
+}

package/{lib/components/shared-components/dynamic-component/index.d.ts → src/lib/components/shared-components/dynamic-component/index.ts}

@@ -1,2 +1,2 @@
-export * from './dynamic-component-factory.service';
-export * from './dynamic-component.component';
+export * from './dynamic-component-factory.service';
+export * from './dynamic-component.component';

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

@@ -0,0 +1,98 @@
+@if (!type || type === fieldTypes.text) {
+<v-textfield
+  [label]="label"
+  [floatLabel]="floatLabel === true"
+  [size]="size"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.dropdown && !datasource) {
+<v-dropdown
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [options]="options"
+  [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)"
+/> 
+} @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 : ''"
+  [testId]="testId"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue ?? optionLabel"
+  [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.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-checkbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+  [indeterminate]="true"
+/>
+} @else if (type === fieldTypes.simplecheckbox) {
+<v-checkbox
+  [label]="label"
+  [testId]="testId"
+  [formControl]="formControl"
+/>
+} @else if (type === fieldTypes.calendar) {
+<v-calendar
+  [label]="!floatLabel ? label : ''"
+  [floatLabel]="floatLabel ? label : ''"
+  [testId]="testId"
+  [formControl]="formControl"
+  [icon]="icons.calendar"
+/>
+}

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

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

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

@@ -0,0 +1,90 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  DatasourceType,
+  FilterEvent,
+  LazyLoadEvent,
+} from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  DatasourceDirective,
+  FieldSize,
+  FieldSizeType,
+  GENERIC_FIELD_COMPONENT_TOKEN,
+  GenericFieldCore,
+  GenericFieldType,
+  GenericFieldTypeType,
+} 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';
+
+@Component({
+    selector: 'v-generic-field',
+    imports: [
+    DropdownComponent,
+    CalendarComponent,
+    MultiselectComponent,
+    TextfieldComponent,
+    ReactiveFormsModule,
+    CheckboxComponent,
+    DatasourceDirective
+],
+    providers: [
+        {
+            provide: GENERIC_FIELD_COMPONENT_TOKEN,
+            useExisting: GenericFieldComponent,
+        },
+    ],
+    templateUrl: './generic-field.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GenericFieldComponent<T>
+  extends BaseFormInputComponent
+  implements GenericFieldCore<T>
+{
+  @Input() type?: GenericFieldTypeType = GenericFieldType.text;
+
+  @Input() floatLabel?: boolean;
+
+  @Input() optionLabel: string | undefined;
+
+  @Input() optionValue: string | undefined;
+
+  @Input() options: T[] | undefined;
+
+  @Input() size?: FieldSizeType = FieldSize.medium;
+
+  @Input() loading = false;
+
+  @Input() lazy = false;
+
+  @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>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  fieldTypes = GenericFieldType;
+  icons = Icons;
+}

package/{lib/components/shared-components/generic-field/index.d.ts → src/lib/components/shared-components/generic-field/index.ts}

@@ -1 +1 @@
-export * from './generic-field.component';
+export * from './generic-field.component';

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

@@ -0,0 +1,46 @@
+@if (formGroupComputed) {
+  <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 ?? '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>
+  }

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

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

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

@@ -0,0 +1,56 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  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 {
+  generateFormGroup,
+  getColumnClass,
+} from './generic-form.model';
+
+@Component({
+    selector: 'v-generic-form',
+    imports: [
+        CommonModule,
+        GenericFieldComponent,
+        ReactiveFormsModule,
+        TranslateModule,
+    ],
+    templateUrl: './generic-form.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GenericFormComponent implements OnChanges {
+  @Input() formGroup?: UntypedFormGroup;
+
+  @Input() fields?: GenericFieldDefinition[];
+
+  @Input() columns?: number;
+
+  @Input() showAsRow!: boolean;
+
+  formGroupComputed!: UntypedFormGroup;
+
+  columnClass?: string;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['fields'] || changes['formGroup']) {
+      this.formGroupComputed = generateFormGroup(
+        this.fields,
+        this.formGroupComputed,
+        this.formGroup,
+        !!changes['formGroup']
+      );
+    }
+
+    if (changes['columns']) {
+      this.columnClass = getColumnClass(this.columns);
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { generateFormGroup, GenericFieldDefinition } from './generic-form.model';
+
+describe('GenericFormModel', () => {
+  describe('generateFormGroup', () => {
+    const fields = [{ name: 'name' }, { name: 'age' }];
+
+    const containsField = (formGroup: UntypedFormGroup, field: GenericFieldDefinition) => expect(formGroup.get(field.name)).toBeDefined();
+
+    test('Should create a new group when no group was provided', () => {
+      const formGroup = generateFormGroup([], undefined, undefined, false);
+
+      expect(formGroup).toBeDefined();
+    });
+
+    test('Should create a new group when no fields are provided', () => {
+      const formGroup = generateFormGroup(
+        undefined,
+        undefined,
+        undefined,
+        false
+      );
+
+      expect(formGroup).toBeDefined();
+    });
+
+    test('Should create a new group with defined control when fields are provided', () => {
+      const formGroup = generateFormGroup(fields, undefined, undefined, false);
+
+      expect(formGroup).toBeDefined();
+      containsField(formGroup, fields[0]);
+      containsField(formGroup, fields[1]);
+    });
+
+    test('Should used input group and creates control when fields are provided and formgroup does not have a controls', () => {
+      const inputGroup = new UntypedFormGroup({});
+
+      const formGroup = generateFormGroup(fields, undefined, inputGroup, false);
+
+      expect(formGroup).toBe(inputGroup);
+      containsField(formGroup, fields[0]);
+    });
+
+    test('Should not remove control from input group when input group is provided and fields does not contain control definition.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const formGroup = generateFormGroup(fields, undefined, inputGroup, false);
+
+      expect(formGroup.get('student')).toBeDefined();
+    });
+
+    test('Should use existing group when input group is provided but have already defined group.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const lastGroup = new UntypedFormGroup({
+      });
+
+      const formGroup = generateFormGroup(fields, lastGroup, inputGroup, false);
+
+      expect(formGroup).toBe(lastGroup);
+      containsField(formGroup, fields[0]);
+    });
+
+    test('Should use existing a new input group when last form group exists, but input group was changed.', () => {
+      const inputGroup = new UntypedFormGroup({
+        student: new UntypedFormControl(),
+      });
+
+      const lastGroup = new UntypedFormGroup({
+      });
+
+      const formGroup = generateFormGroup(fields, lastGroup, inputGroup, true);
+
+      expect(formGroup).toBe(inputGroup);
+      containsField(formGroup, fields[0]);
+    });
+  });
+});