@verisoft/ui-govcz 20.1.0 → 20.1.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@verisoft/ui-govcz",
-  "version": "20.1.0",
+  "version": "20.1.1",
   "peerDependencies": {
-    "@verisoft/security-core": "~20.1.0",
-    "@verisoft/core": "~20.1.0",
-    "@verisoft/ui-core": "~20.1.0",
+    "@verisoft/security-core": "~20.1.1",
+    "@verisoft/core": "~20.1.1",
+    "@verisoft/ui-core": "~20.1.1",
     "@angular/core": "~20.2.0",
     "@angular/common": "~20.2.0",
     "@angular/forms": "~20.2.0",

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

@@ -0,0 +1,25 @@
+<div
+  class="v-action-button-group align-items-center justify-content-center justify-content-md-end"
+>
+  <div class="v-action-button-group__actions d-flex gap-2">
+    @for (action of visibleActions; track action) {
+    <v-action-button
+      [disabled]="action.disabled"
+      [icon]="action.icon"
+      [id]="action.id"
+      [outlined]="action.outlined"
+      [raised]="action.raised"
+      [toolTip]="action.toolTip || action.label"
+      [severity]="action.severity"
+      [size]="action.size"
+      (click)="fireClick(action, $event)"
+    ></v-action-button>
+    } @if (actions.length > visibleActions.length) {
+    <v-dropdown-button
+      [label]="label"
+      [icon]="menuIcon"
+      [items]="menuItems"
+    />
+    }
+  </div>
+</div>

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

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

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

@@ -0,0 +1,111 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  IconPositionType,
+  MenuItem,
+  queryListChanged,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import {
+  combineLatestWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../../icons';
+import { DropdownButtonComponent } from '../../dropdown-button';
+import { ActionButtonComponent } from './components/action-button/action-button.component';
+
+@Component({
+  selector: 'v-action-button-group',
+  imports: [ActionButtonComponent, DropdownButtonComponent],
+  templateUrl: './action-button-group.component.html',
+  styleUrl: './action-button-group.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+      useExisting: ActionButtonGroupComponent,
+    },
+  ]
+})
+export class ActionButtonGroupComponent
+  extends UnsubscribeComponent
+  implements AfterContentInit, ActionButtonGroupCore {
+  @ContentChildren(ActionButtonComponent)
+  actions!: QueryList<ActionButtonComponent>;
+
+  @Input() maxItems = 3;
+
+  @Input() maxItemsMobile = 0;
+
+  @Input() items: ActionButton[] = [];
+
+  @Input() menuIconPos: IconPositionType = 'right';
+
+  @Input() menuIcon = Icons.action;
+
+  @Input() label?: string;
+
+  @Input() icon?: string;
+
+  icons = Icons;
+  allItems: ActionButton[] = [];
+  visibleActions: ActionButton[] = [];
+  menuItems: MenuItem[] = [];
+
+  constructor(
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    readonly screenSizeService: ScreenSizeService
+  ) {
+    super();
+  }
+
+  ngAfterContentInit(): void {
+    this.subscribeItemChange();
+  }
+
+  fireClick(item: ActionButton, event: MouseEvent) {
+    event.stopPropagation();
+    item.click.emit();
+  }
+
+  private subscribeItemChange(): void {
+    const screenResize$ = this.screenSizeService.isMobileBlock;
+
+    const actions$ = queryListChanged(this.actions);
+
+    screenResize$
+      .pipe(takeUntil(this.destroyed$), combineLatestWith(actions$))
+      .subscribe(([isMobile, actions]) => {
+        this.computeItems(actions, isMobile);
+      });
+  }
+
+  private computeItems(actions: ActionButton[], isMobile: boolean) {
+    const allItems = [...(this.items ?? []), ...actions];
+    const maxItems = isMobile ? this.maxItemsMobile : this.maxItems;
+    this.visibleActions = allItems.slice(0, maxItems);
+    this.menuItems = allItems.slice(maxItems).map(this.convertToMenuItem);
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private convertToMenuItem(item: ActionButton): MenuItem {
+    return {
+      label: item.label,
+      icon: item.icon,
+      command: () => {
+        item.click.emit();
+      },
+    };
+  }
+}

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

@@ -0,0 +1,10 @@
+<v-button
+  [label]="label"
+  [disabled]="disabled"
+  [icon]="icon"
+  [outlined]="outlined"
+  tooltipPosition="bottom"
+  [size]="size"
+  [severity]="severity"
+  (click)="handleClick($event)"
+/>

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

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

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/action-button-group/index.ts

@@ -0,0 +1,2 @@
+export * from './action-button-group.component';
+export * from './components/action-button/action-button.component';

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/src/lib/components/shared-components/dynamic-component/index.ts

@@ -0,0 +1,2 @@
+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();
+  });
+});