@verisoft/ui-primeng 18.0.0 → 18.3.1

package/src/lib/components/multiselect/multiselect.component.ts

@@ -32,6 +32,7 @@ import { ScrollerOptions } from 'primeng/api';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { ScrollerLazyLoadEvent } from 'primeng/scroller';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field';
 
 @Component({
@@ -42,6 +43,7 @@ import { FormFieldComponent } from '../form-field';
     ReactiveFormsModule,
     FloatLabelModule,
     MultiSelectModule,
+    ErrorComponent,
     FormFieldComponent,
   ],
   templateUrl: './multiselect.component.html',
@@ -67,9 +69,9 @@ export class MultiselectComponent<T>
     super(ngControl);
   }
 
-  @Input() options?: T[] = [];
-  @Input() optionLabel?: string;
-  @Input() optionValue?: string;
+  @Input() options: T[] | undefined = [];
+  @Input() optionLabel: string | undefined;
+  @Input() optionValue: string | undefined;
   @Input() dropdownIcon?: string;
   @Input() floatLabel?: string;
   @Input() editable = true;

package/src/lib/components/number-input/number-input.component.html

@@ -4,7 +4,6 @@
     [label]="label"
     [tooltip]="tooltip"
     [required]="isRequired()"
-    [ngControl]="ngControl"
     [testId]="testId"
   >
     <p-inputNumber
@@ -18,5 +17,6 @@
       [step]="step"
       [currency]="currency"
     />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </v-form-field>
 </div>

package/src/lib/components/number-input/number-input.component.ts

@@ -14,6 +14,7 @@ import {
 } from '@angular/forms';
 import { BaseFormInputComponent, BaseInputControls, NUMBER_INPUT_COMPONENT_TOKEN, NumberInputCore } from '@verisoft/ui-core';
 import { InputNumberModule } from 'primeng/inputnumber';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field';
 
 @Component({
@@ -24,6 +25,7 @@ import { FormFieldComponent } from '../form-field';
     InputNumberModule,
     ReactiveFormsModule,
     FormFieldComponent,
+    ErrorComponent,
   ],
   templateUrl: './number-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -51,4 +53,5 @@ export class NumberInputComponent
   @Input() min!: number;
   @Input() max!: number;
   @Input() step = 1;
+  @Input() errorMessage?: string = 'test';
 }

package/src/lib/components/page-header/index.ts

@@ -1,2 +1 @@
 export * from './page-header.component';
-export * from './services/page-header.service';

package/src/lib/components/page-header/page-header.component.html

@@ -4,7 +4,7 @@
   <v-button
     *ngIf="showBackButton"
     size="small"
-    icon="pi pi-arrow-left"
+    [icon]="icons.arrowLeft"
     label="Back"
     [outlined]="true"
     (click)="locationBack()"

package/src/lib/components/page-header/page-header.component.ts

@@ -1,18 +1,14 @@
 import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ContentChild,
-  Input,
   OnInit,
 } from '@angular/core';
-import { Router } from '@angular/router';
-import { PAGE_HEADER_COMPONENT_TOKEN, PageHeaderCore, UnsubscribeComponent } from '@verisoft/ui-core';
-import { takeUntil } from 'rxjs';
-import { ActionButtonGroupComponent } from '../action-button-group';
+import { PAGE_HEADER_COMPONENT_TOKEN, PageHeaderCore, PageHeaderCoreComponent } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
 import { ButtonComponent } from '../button';
-import { PageHeaderService } from './services/page-header.service';
+import { ActionButtonGroupComponent } from '../shared-components';
 
 @Component({
   selector: 'v-page-header',
@@ -26,35 +22,11 @@ import { PageHeaderService } from './services/page-header.service';
   ],
 })
 export class PageHeaderComponent
-  extends UnsubscribeComponent
+  extends PageHeaderCoreComponent
   implements OnInit, PageHeaderCore
 {
   @ContentChild(ActionButtonGroupComponent)
   buttonGroup?: ActionButtonGroupComponent;
-  @Input() title!: string;
-  @Input() subtitle: string | undefined;
-  @Input() showBackButton = false;
-
-  constructor(
-    readonly router: Router,
-    readonly cdr: ChangeDetectorRef,
-    readonly headerService: PageHeaderService
-  ) {
-    super();
-  }
-
-  ngOnInit(): void {
-    this.headerService.pageHeader
-      .pipe(takeUntil(this.destroyed$))
-      .subscribe((x) => {
-        this.title = x.title;
-        this.subtitle = x.subtitle;
-        this.showBackButton = x.showBackButton ?? false;
-        this.cdr.detectChanges();
-      });
-  }
-
-  protected locationBack() {
-    history.back();
-  }
+  
+  icons = Icons;
 }

package/src/lib/components/password/password.component.html

@@ -4,7 +4,6 @@
     [label]="label"
     [tooltip]="tooltip"
     [required]="isRequired()"
-    [ngControl]="ngControl"
     [testId]="testId"
     [display]="formDisplay"
   >
@@ -20,5 +19,6 @@
       [id]="inputId"
       [toggleMask]="toggleMask"
     />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
   </v-form-field>
 </div>

package/src/lib/components/password/password.component.ts

@@ -14,6 +14,7 @@ import {
 import { BaseFormInputComponent, BaseInputControls, PASSWORD_COMPONENT_TOKEN, PasswordCore } from '@verisoft/ui-core';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { PasswordModule } from 'primeng/password';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field';
 
 @Component({
@@ -24,7 +25,8 @@ import { FormFieldComponent } from '../form-field';
     ReactiveFormsModule,
     PasswordModule,
     FloatLabelModule,
-    FormFieldComponent
+    FormFieldComponent,
+    ErrorComponent
   ],
   templateUrl: './password.component.html',
   styleUrl: './password.component.scss',

package/src/lib/components/radiobutton/radiobutton.component.html

@@ -3,7 +3,6 @@
     [label]="label"
     [required]="required"
     [tooltip]="tooltip"
-    [ngControl]="ngControl"
     [testId]="testId"
   >
     <div class="d-flex align-items-center gap-3">
@@ -27,6 +26,7 @@
           >
         </label>
       </div>
+      <v-validation-message [ngControl]="ngControl"></v-validation-message>
     </div>
   </v-form-field>
 </div>

package/src/lib/components/radiobutton/radiobutton.component.ts

@@ -20,6 +20,7 @@ import {
   RadioButtonItem,
 } from '@verisoft/ui-core';
 import { RadioButtonModule } from 'primeng/radiobutton';
+import { ErrorComponent } from '../errors';
 import { FormFieldComponent } from '../form-field/form-field.component';
 
 @Component({
@@ -30,6 +31,7 @@ import { FormFieldComponent } from '../form-field/form-field.component';
     FormFieldComponent,
     RadioButtonModule,
     ReactiveFormsModule,
+    ErrorComponent
   ],
   templateUrl: './radiobutton.component.html',
   styleUrl: './radiobutton.component.scss',

package/src/lib/components/section/section.component.html

@@ -12,8 +12,7 @@
       <ng-content select="[actions]"></ng-content>
       <v-button
         size="small"
-        icon="pi {{ icon }}"
-        [text]="true"
+        [icon]="icon"
         (click)="toggle()"
       />
     </div>

package/src/lib/components/section/section.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { SECTION_COMPONENT_TOKEN, SectionCore } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
 import { ButtonComponent } from '../button';
 
 @Component({
@@ -21,10 +22,11 @@ export class SectionComponent
   @Input() showContent = true;
   @Input() backgroundColor!: string;
 
-  protected icon = 'pi-angle-down';
+  icons = Icons;
+  protected icon = Icons.chevronDown;
 
   protected toggle(): void {
     this.showContent = !this.showContent;
-    this.icon = this.showContent ? 'pi-angle-down' : 'pi-angle-up';
+    this.icon = this.showContent ? Icons.chevronDown : Icons.chevronUp;
   }
 }

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

@@ -9,16 +9,14 @@
       [id]="action.id"
       [outlined]="action.outlined"
       [raised]="action.raised"
-      [text]="action.text"
       [toolTip]="action.toolTip || action.label"
       [severity]="action.severity"
       [size]="action.size"
-      (clickEvent)="action.clickEvent.emit()"
+      (click)="fireClick(action, $event)"
     ></v-action-button>
     } @if (actions.length > visibleActions.length) {
     <v-button
       (click)="menu.toggle($event)"
-      [text]="true"
       [label]="label"
       [iconPos]="menuIconPos"
       [icon]="menuIcon"
@@ -26,4 +24,4 @@
     }
   </div>
 </div>
-<p-menu #menu [model]="menuItems" [popup]="true" />
+<p-menu #menu [model]="menuItems" [popup]="true" appendTo="body" />

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

@@ -12,13 +12,18 @@ import {
   ActionButton,
   ActionButtonGroupCore,
   IconPositionType,
+  queryListChanged,
+  ScreenSizeService,
   UnsubscribeComponent,
 } from '@verisoft/ui-core';
 import { MenuItem } from 'primeng/api';
 import { MenuModule } from 'primeng/menu';
-import { combineLatestWith, map, startWith, takeUntil } from 'rxjs';
-import { ScreenSizeService } from '../../services/screen-size.service';
-import { ButtonComponent } from '../button';
+import {
+  combineLatestWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../../icons';
+import { ButtonComponent } from '../../button';
 import { ActionButtonComponent } from './components/action-button/action-button.component';
 
 @Component({
@@ -50,16 +55,19 @@ export class ActionButtonGroupComponent
 
   @Input() menuIconPos: IconPositionType = 'right';
 
-  @Input() menuIcon = 'pi pi-ellipsis-v';
+  @Input() menuIcon = Icons.action;
 
   @Input() label?: string;
 
+  @Input() icon?: string;
+
+  icons = Icons;
   allItems: ActionButton[] = [];
   visibleActions: ActionButton[] = [];
   menuItems: MenuItem[] = [];
 
   constructor(
-    private readonly cd: ChangeDetectorRef,
+    private readonly changeDetectorRef: ChangeDetectorRef,
     readonly screenSizeService: ScreenSizeService
   ) {
     super();
@@ -69,13 +77,15 @@ export class ActionButtonGroupComponent
     this.subscribeItemChange();
   }
 
+  fireClick(item: ActionButton, event: MouseEvent) {
+    event.stopPropagation();
+    item.click.emit();
+  }
+
   private subscribeItemChange(): void {
     const screenResize$ = this.screenSizeService.isMobileBlock;
 
-    const actions$ = this.actions.changes.pipe(
-      startWith({}),
-      map(() => this.actions.toArray())
-    );
+    const actions$ = queryListChanged(this.actions);
 
     screenResize$
       .pipe(takeUntil(this.destroyed$), combineLatestWith(actions$))
@@ -89,7 +99,7 @@ export class ActionButtonGroupComponent
     const maxItems = isMobile ? this.maxItemsMobile : this.maxItems;
     this.visibleActions = allItems.slice(0, maxItems);
     this.menuItems = allItems.slice(maxItems).map(this.convertToMenuItem);
-    this.cd.detectChanges();
+    this.changeDetectorRef.detectChanges();
   }
 
   private convertToMenuItem(item: ActionButton): MenuItem {
@@ -97,7 +107,7 @@ export class ActionButtonGroupComponent
       label: item.label,
       icon: item.icon,
       command: () => {
-        item.clickEvent.emit();
+        item.click.emit();
       },
     };
   }

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

@@ -6,7 +6,6 @@
   [outlined]="outlined"
   tooltipPosition="bottom"
   [size]="size"
-  [text]="text"
   [severity]="severity"
-  (clickEvent)="handleClick()"
+  (click)="handleClick($event)"
 ></v-button>

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

@@ -0,0 +1,71 @@
+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 { TooltipModule } from 'primeng/tooltip';
+import { Observable, Subject } from 'rxjs';
+import { Icons } from '../../../../../icons';
+import { ButtonComponent } from '../../../../button';
+
+@Component({
+  selector: 'v-action-button',
+  standalone: true,
+  imports: [ButtonComponent, TooltipModule],
+  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/{dynamic-component → 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/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/feature-list/directives/feature-list-column.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, Input } from '@angular/core';
+import { GenericFieldType, GenericFieldTypeType, TableColumnDirective } from '@verisoft/ui-core';
+import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListColumnProvider } from '../feature-list-page.model';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-column',
+  standalone: true,
+  providers: [
+    {
+      provide: FEATURE_LIST_COLUMN_PROVIDER,
+      useExisting: FeatureListColumnDirective,
+      multi: true,
+    },
+  ],
+})
+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/directives/feature-list-filter-field.directive.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { FilterFieldDirective } from '../../filter';
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-filter-field',
+  standalone: true,
+})
+export class FeatureListFilterFieldDirective extends FilterFieldDirective {}

package/src/lib/components/shared-components/feature-list/feature-list-filter.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { GenericFieldDefinition, GenericFieldType } from "@verisoft/ui-core";
+import { FeatureListColumnDefinition } from "./feature-list-page.model";
+
+@Pipe({
+    name: 'featureListColumn',
+    standalone: true,
+})
+export class FeatureListFilterPipe<T> implements PipeTransform {
+    transform(value: FeatureListColumnDefinition<T>[] | undefined): GenericFieldDefinition[] | undefined {
+        if (!value){
+            return undefined;
+        }
+
+        return value.filter(x => x.filter).map((x, index) => ({
+            name: x.id,
+            label: typeof x.headerName === 'function'? x.headerName(x.id, index) : x.headerName ?? '',
+            type: x.type as GenericFieldType,
+        }));
+    }
+}