@verisoft/ui-primeng 18.0.0

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

@@ -0,0 +1,96 @@
+<div class="v-dropdown">
+  <ng-container *ngIf="label && !floatLabel">
+    <v-form-field
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [ngControl]="ngControl"
+      [testId]="testId"
+      [display]="formDisplay"
+    >
+      <p-dropdown
+        [baseZIndex]="9999"
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [filter]="filter"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ?? ''"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [editable]="editable"
+        [dataKey]="optionValue"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (onFilter)="filterChange($event)"
+      >
+      </p-dropdown>
+    </v-form-field>
+  </ng-container>
+  <ng-container *ngIf="!label && !floatLabel">
+    <p-dropdown
+      [baseZIndex]="9999"
+      class="w-100"
+      appendTo="body"
+      [formControl]="formControl"
+      [filter]="filter"
+      [title]="label"
+      [options]="options"
+      [optionLabel]="optionLabel"
+      [optionValue]="optionValue"
+      [loading]="loading"
+      [placeholder]="placeholder ? placeholder : label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [showClear]="formControl && clearable && !readonly"
+      [editable]="editable"
+      [dataKey]="optionValue"
+      [virtualScroll]="lazy"
+      [virtualScrollItemSize]="virtualOptionSize"
+      [virtualScrollOptions]="virtualScrollOptions"
+      (showEvent)="onDropdownShow()"
+      (clearEvent)="onDropdownClear()"
+      (onFilter)="filterChange($event)"
+    >
+    </p-dropdown>
+  </ng-container>
+  <ng-container *ngIf="floatLabel && !label">
+    <p-floatLabel>
+      <p-dropdown
+        [baseZIndex]="9999"
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ? placeholder : label"
+        [filter]="filter"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [editable]="editable"
+        [dataKey]="optionValue"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (onFilter)="filterChange($event)"
+        (lazyLoad)="onLazyLoad($any($event))"
+      >
+      </p-dropdown>
+      <label [for]="inputId">{{ floatLabel }}</label>
+    </p-floatLabel>
+  </ng-container>
+</div>

package/src/lib/components/dropdown/dropdown.component.scss

@@ -0,0 +1,16 @@
+.v-dropdown {
+  justify-content: center;
+  width: 100%;
+}
+
+.p-dropdown-items-wrapper,
+.p-scroller-viewport,
+.p-scroller {
+  min-width: 8rem !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.p-dropdown {
+  width: 100%;
+}

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

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

package/src/lib/components/dropdown/dropdown.component.stories.ts

@@ -0,0 +1,90 @@
+import { UntypedFormControl, Validators } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { faker } from '@faker-js/faker';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { DropdownComponent } from './dropdown.component';
+
+const meta: Meta<DropdownComponent<any>> = {
+  component: DropdownComponent,
+  title: 'DropdownComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<DropdownComponent<any>>;
+const options = Array(5)
+  .fill(0)
+  .map((x, i) => {
+    return {
+      id: i,
+      name: faker.airline.airline().name,
+    };
+  });
+export const Primary: Story = {
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    options: options,
+    optionLabel: 'name',
+    optionValue: 'id',
+  },
+  argTypes: {
+    optionLabel: {
+      description:
+        'String value that sets matching `T[property]` as a label value, where `property = optionLabel`',
+    },
+    optionValue: {
+      description:
+        'String value that sets matching `T[property]` as a binding value, where `property = optionValue`',
+    },
+    options: { description: 'Array of `T`' },
+  },
+};
+
+export const DropdownWithFormControl: Story = {
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    options: options,
+    optionLabel: 'name',
+    optionValue: 'id',
+    label: 'Airline names',
+    placeholder: 'Select an option',
+    clearable: true,
+    formControl: new UntypedFormControl(undefined, Validators.required),
+  },
+  argTypes: {
+    formControl: {
+      control: false,
+      description: 'Form control with `Validators.required` set',
+    },
+    clearable: {
+      description: 'Defines if the `DropdownComponent` is clearable',
+    },
+    label: {
+      description:
+        'Represents the `label` of the `DropdownComponent`. Label is also being used as `placeholder` if the placeholder is not set',
+    },
+    optionLabel: {
+      description:
+        'String value that sets matching `T[property]` as a label value, where `property = optionLabel`',
+    },
+    optionValue: {
+      description:
+        'String value that sets matching `T[property]` as a binding value, where `property = optionValue`',
+    },
+    placeholder: { description: 'Placeholder for the `DropdownComponent`' },
+    options: { description: 'Array of `T`' },
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByTitle('Airline names')).toBeTruthy();
+    expect(canvas.findByPlaceholderText('Select an option')).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,139 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+  ViewEncapsulation,
+  OnInit,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { FilterEvent, LazyLoadEvent } from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  DROPDOWN_COMPONENT_TOKEN,
+  DropdownCore
+} from '@verisoft/ui-core';
+import { ScrollerOptions } from 'primeng/api';
+import {
+  DropdownFilterEvent,
+  DropdownModule,
+} from 'primeng/dropdown';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { MessageModule } from 'primeng/message';
+import { ScrollerLazyLoadEvent } from 'primeng/scroller';
+import { TooltipModule } from 'primeng/tooltip';
+import { Subject } from 'rxjs';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-dropdown',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    DropdownModule,
+    TooltipModule,
+    FormFieldComponent,
+    MessageModule,
+    FloatLabelModule,
+  ],
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: forwardRef(() => DropdownComponent),
+      multi: true,
+    },
+    {
+      provide: DROPDOWN_COMPONENT_TOKEN,
+      useExisting: DropdownComponent,
+    },
+  ],
+})
+export class DropdownComponent<T>
+  extends BaseFormInputComponent
+  implements
+    ControlValueAccessor,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    DropdownCore<T>
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() options?: T[] = [];
+  @Input() optionLabel?: string;
+  @Input() optionValue?: string;
+  @Input() dropdownIcon?: string;
+  @Input() floatLabel?: string;
+  @Input() editable = false;
+  @Input() loading = false;
+  @Input() lazy = false;
+  @Input() filter = true;
+
+  @Output() showed = new EventEmitter<any>();
+  @Output() cleared = new EventEmitter<any>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  private destroy$ = new Subject<void>();
+
+  virtualScrollOptions!: ScrollerOptions | undefined;
+  virtualOptionSize = 37.5;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['lazy'] || changes['loading']) {
+      this.virtualScrollOptions = this.lazy
+        ? {
+            showLoader: this.loading,
+            lazy: true,
+            onLazyLoad: this.onLazyLoad.bind(this),
+          }
+        : undefined;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  onLazyLoad(event: ScrollerLazyLoadEvent): void {
+    this.lazyLoad.emit({
+      offset: event.first,
+      limit: event.last - event.first,
+    });
+  }
+
+  filterChange(event: DropdownFilterEvent): void {
+    this.filtered.emit({
+      filter: event.filter,
+    });
+  }
+
+  onDropdownShow(): void {
+    this.showed.emit();
+  }
+
+  onDropdownClear(): void {
+    this.cleared.emit();
+  }
+}

package/src/lib/components/dropdown/index.ts

@@ -0,0 +1 @@
+export * from './dropdown.component';

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

@@ -0,0 +1,90 @@
+import {
+  Injectable,
+  ViewContainerRef,
+  Type,
+  ComponentFactoryResolver,
+  Injector,
+  ComponentRef,
+  ComponentFactory,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicComponentFactoryService {
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
+
+  async createDynamicComponent<TComponent>(
+    componentType: Type<TComponent>,
+    viewContainerRef: ViewContainerRef,
+    inputs: Partial<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 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);
+      }
+
+      const onInitComponent = instance as unknown as OnInit;
+      if (onInitComponent.ngOnInit) {
+        onInitComponent.ngOnInit();
+      }
+    }
+  }
+
+  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];
+        });
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Injector,
+  Input,
+  OnChanges,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/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!: Partial<TComponent>;
+
+  @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
+  container!: ViewContainerRef;
+
+  private factoryServices = inject(DynamicComponentFactoryService);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private injector = inject(Injector);
+
+  ngOnChanges(): void {
+    this.crateComponent();
+  }
+
+  ngAfterViewInit(): void {
+    this.crateComponent();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private crateComponent() {
+    if (this.container) {
+      this.factoryServices.createDynamicComponent(
+        this.componentType,
+        this.container,
+        this.data,
+        this.injector
+      );
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Directive, Input } from '@angular/core';
+import { GenericFieldType, GenericFieldTypeType } from '../../generic-field';
+import { GenericFieldDefinition } from '../../generic-form';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-filter-field',
+  standalone: true,
+})
+export class FilterFieldDirective implements GenericFieldDefinition {
+  
+    @Input({ required: true }) name!: string;
+
+    @Input() type?: GenericFieldTypeType | undefined = GenericFieldType.text;
+
+    @Input() label?: string | undefined;
+
+    @Input() optionLabel!: string;
+
+    @Input() optionValue?: string | undefined;
+
+    @Input() options?: unknown[] | undefined;
+
+    @Input() value?: unknown;
+}

package/src/lib/components/filter/directives/table-filter.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, inject, Input } from '@angular/core';
+import { UnsubscribeComponent } from '@verisoft/ui-core';
+import { TableComponent } from '../../table/table.component';
+import { FilterComponent } from '../filter.component';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-filter[tableFilter]',
+  exportAs: 'tableFilter',
+  standalone: true,
+})
+export class TableFilterDirective<T> extends UnsubscribeComponent {
+  @Input({ required: true }) for!: TableComponent<T>;
+
+  @Input() ignoreQueryParamsFor?: string[];
+
+  @Input() useRouter = false;
+
+  protected removeIds: string[] = [];
+
+  filterComponent = inject(FilterComponent, { self: true });
+}

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

@@ -0,0 +1,67 @@
+<div class="v-filter w-100 p-3 bg-primary">
+  @if (formGroup$ | async; as formGroup){
+  <form [formGroup]="formGroup" class="d-flex align-items-center">
+    @if (title) {
+    <div class="v-filter_title pe-4">
+      <h2 class="text-white m-0">{{ title }}</h2>
+    </div>
+    }
+    <div class="v-filter__fulltext flex-grow-1 pe-4">
+      @if (showFulltext){
+      <v-textfield
+        class="d-none d-lg-block"
+        placeholder="Search"
+        size="large"
+        formControlName="searchField"
+        type="search"
+        [clearable]="true"
+      >
+      </v-textfield>
+      }
+    </div>
+    @if (simpleFormFieldDefinitions$ | async; as declaration){
+       @if (showFilters)
+    {
+    <div class="v-filter_filters d-none d-sm-block">
+      <v-generic-form
+        [fields]="declaration"
+        [formGroup]="formGroup"
+      ></v-generic-form>
+    </div>
+  }
+    <div class="v-filter_action-buttons d-flex">
+      @if (declaration.length) {
+      <i
+        class="mx-2 pi pi-filter text-white"
+        pBadge
+        [value]="$any(filledFiltersCount$ | async)"
+        (click)="openFilter()"
+      ></i>
+      } @if (!autoBind) {
+      <v-button
+        useShortCut
+        [shortCutFn]="submitValue.bind(this)"
+        shortCutKey="Enter"
+        class="text-white mx-2"
+        [outlined]="true"
+        size="small"
+        label="Apply"
+        (click)="submitValue()"
+      ></v-button>
+      <v-button
+        useShortCut
+        [shortCutFn]="clear.bind(this)"
+        shortCutKey="Escape"
+        class="text-white"
+        [outlined]="true"
+        size="small"
+        label="Clear"
+        (click)="clear()"
+      ></v-button>
+      } 
+    </div>
+    }
+    <ng-content select="v-action-button-group"></ng-content>
+  </form>
+  }
+</div>

package/src/lib/components/filter/filter.component.spec.ts

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

package/src/lib/components/filter/filter.component.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FilterComponent } from './filter.component';
+
+const meta: Meta<FilterComponent<any>> = {
+  component: FilterComponent,
+  title: 'VerisoftTableFilterComponent',
+};
+export default meta;
+type Story = StoryObj<FilterComponent<any>>;
+
+export const Primary: Story = {
+  args: {
+    filterDefinitions: [],
+    debounceTime: 0,
+  },
+};
+
+export const Heading: Story = {
+  args: {
+    filterDefinitions: [],
+    debounceTime: 0,
+  },
+};