@verisoft/ui-primeng 18.0.0 → 18.3.0

package/src/lib/components/button/directives/shortcut.directive.ts

@@ -1,37 +0,0 @@
-import { Directive, HostListener, Input } from "@angular/core";
-
-@Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: 'v-button[useShortCut]',
-    exportAs: 'useShortCut',
-    standalone: true,
-  })
-  export class ButtonShortCutDirective
-  {
-     @Input() shortCutFn?: () => void;
-     @Input() shortCutKey!: string;
-
-     private keyMap: { [key: string]: boolean } = {};
-
-     @HostListener('document:keydown', ['$event'])
-     onKeyDown(event: KeyboardEvent) {
-       this.keyMap[event.key.toLowerCase()] = true;
-       this.checkShortcut();
-     }
-   
-     @HostListener('document:keyup', ['$event'])
-     onKeyUp(event: KeyboardEvent) {
-       this.keyMap[event.key.toLowerCase()] = false;
-     }
-
-     private checkShortcut() {
-       if (this.shortCutKey && this.shortCutFn) {
-         const keys = this.shortCutKey.toLowerCase().split('+');
-         const isShortcutPressed = keys.every((key) => this.keyMap[key]);   
-         if (isShortcutPressed) {
-           this.shortCutFn?.();
-           keys.forEach((key) => (this.keyMap[key] = false));
-         }
-       }
-     }
-}

package/src/lib/components/confirm-dialog/services/confirm-dialog.service.ts

@@ -1,14 +0,0 @@
-import { EventEmitter, Injectable, Output } from '@angular/core';
-import { DialogData } from '@verisoft/ui-core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DialogService {
-  @Output() showEvent: EventEmitter<DialogData> =
-    new EventEmitter<DialogData>();
-
-  showDialog(data: DialogData): void {
-    this.showEvent.emit(data);
-  }
-}

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

@@ -1,90 +0,0 @@
-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/filter/directives/filter-field.directive.ts

@@ -1,25 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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.model.ts

@@ -1,18 +0,0 @@
-import { FormGroup } from "@angular/forms";
-
-export function getFilledControlCount(formGroup: FormGroup){
-    let count = 0;
-    Object.keys(formGroup.controls).forEach((key) => {
-      const control = formGroup.get(key);
-      if (control?.value) {
-        if (typeof control.value === 'boolean') {
-          count++;
-        }
-        if (typeof control.value === 'string' && control.value.trim() !== '') {
-          count++;
-        }
-      }
-    });
-
-    return count;
-}

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

@@ -1,54 +0,0 @@
-@if (!type || type === fieldTypes.text) {
-<v-textfield
-  [label]="label"
-  [floatLabel]="floatLabel === true"
-  [size]="size"
-  [formControl]="formControl"
-></v-textfield>
-} @if (type === fieldTypes.dropdown) {
-<v-dropdown
-  [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)"
->
-</v-dropdown>
-} @else if (type === fieldTypes.multiselect) {
-<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)"
->
-</v-multiselect>
-} @else if (type === fieldTypes.checkbox) {
-<v-tristatecheckbox
-  [label]="label"
-  [testId]="testId"
-  [formControl]="formControl"
-></v-tristatecheckbox>
-} @else if (type === fieldTypes.calendar) {
-<v-calendar
-  [label]="!floatLabel ? label : ''"
-  [floatLabel]="floatLabel ? label : ''"
-  [testId]="testId"
-  [formControl]="formControl"
-  icon="pi pi-calendar"
-></v-calendar>
-}

package/src/lib/components/generic-field/generic-field.model.ts

@@ -1,9 +0,0 @@
-export enum GenericFieldType {
-  'dropdown' = 'dropdown',
-  'checkbox' = 'checkbox',
-  'calendar' = 'calendar',
-  'multiselect' = 'multiselect',
-  'text' = 'text',
-}
-
-export type GenericFieldTypeType = keyof typeof GenericFieldType;

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

@@ -1,33 +0,0 @@
-@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 }}">
-    <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>
-  } @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/page-header/services/page-header.service.ts

@@ -1,9 +0,0 @@
-import { EventEmitter, Injectable, Output } from '@angular/core';
-import { PageHeader } from '@verisoft/ui-core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PageHeaderService {
-  @Output() pageHeader = new EventEmitter<PageHeader>();
-}

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

@@ -1,61 +0,0 @@
-import { AfterViewInit, Directive, inject, Input, OnInit } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { DatasourceType } from '@verisoft/core';
-import {
-  createGetPageTableAction,
-} from '@verisoft/store';
-import { UnsubscribeComponent } from '@verisoft/ui-core';
-import { TableComponent } from '../table.component';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'v-table[tableStore]',
-  exportAs: 'useTableStore',
-  standalone: true,
-})
-export class TableStoreDirective<T>
-  extends UnsubscribeComponent
-  implements OnInit, AfterViewInit
-{
-  store = inject(Store);
-  table = inject(TableComponent, { self: true });
-
-  @Input() autoBind = false;
-
-  @Input() ngrxFeatureKey?: string;
-
-  @Input({ required: true }) tableName!: string;
-
-  @Input() debounceTime = 0;
-  
-  @Input() defaultFilter!: Partial<any>;
-  
-  @Input() datasource?: DatasourceType<T>;
-
-  ngOnInit(): void {
-    if (!this.tableName) {
-      throw new Error('Property tableName must be defined.');
-    }
-  }
-
-  ngAfterViewInit(): void {
-    if (this.autoBind) {
-      this.submit(true);
-    }
-  }
-
-  submit(resetPagination: boolean) {
-    const filter = {
-      ...this.defaultFilter,
-    };
-    const sorters = this.table.sorters;
-    this.store.dispatch(
-      createGetPageTableAction(this.tableName)({
-        page: resetPagination ? 0 : this.table.currentPage,
-        size: this.table.pageSize,
-        filter: filter,
-        sort: sorters,
-      })
-    );
-  }
-}

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

@@ -1,205 +0,0 @@
-<div class="v-table-filter w-100 p-3 bg-primary">
-  <form
-    [formGroup]="formGroup"
-    class="d-flex align-items-center justify-content-end gap-4"
-  >
-    <div class="col-2">
-      <h2 class="text-white m-0" [innerText]="title"></h2>
-    </div>
-    <div
-      *ngIf="(screenSizeService.isMobileBlock | async) === false"
-      class="w-50 align-items-center"
-    >
-      <v-textfield
-        *ngIf="!hideSearch"
-        class="w-100 d-none d-lg-block"
-        placeholder="Search"
-        size="large"
-        formControlName="searchField"
-        type="search"
-        [clearable]="true"
-      >
-      </v-textfield>
-    </div>
-    <div class="d-flex w-100 align-items-center justify-content-end">
-      <ng-container *ngIf="(screenSizeService.isMobileBlock | async) === false">
-        <div class="extended-filters d-flex align-items-center gap-3">
-          <i
-            *ngIf="!hideSearch"
-            class="pi pi-search text-white d-block d-lg-none"
-            (click)="openSearch()"
-          ></i>
-          <i
-            class="pi pi-filter text-white"
-            pBadge
-            [value]="activeFilters"
-            (click)="openFilter()"
-          ></i>
-        </div>
-        <div
-          *ngFor="let filter of filterDefinitions; let index = index"
-          class="filters gap-3"
-        >
-          <div
-            *ngIf="!filter.filterType || filter.filterType === 'dropdown'"
-            class="d-none d-sm-block"
-          >
-            <v-dropdown
-              useDatasource
-              [formControlName]="filter.optionLabel"
-              [floatLabel]="filter.label"
-              [optionLabel]="filter.optionLabel"
-              [testId]="filter.optionLabel + index"
-              [optionValue]="filter.optionValue ?? filter.optionLabel"
-              [entityName]="filter.url ?? service.entityName"
-              [datasourceService]="service"
-            >
-            </v-dropdown>
-          </div>
-          <div
-            *ngIf="filter.filterType === 'multiselect'"
-            class="d-none d-sm-block"
-          >
-            <v-multiselect
-              useDatasource
-              [formControlName]="filter.optionLabel"
-              [floatLabel]="filter.label"
-              [optionLabel]="filter.optionLabel"
-              [testId]="filter.optionLabel + index"
-              [optionValue]="filter.optionValue ?? filter.optionLabel"
-              [entityName]="filter.url ?? service.entityName"
-              [datasourceService]="service"
-            >
-            </v-multiselect>
-          </div>
-          <div
-            *ngIf="filter.filterType === 'checkbox'"
-            class="d-none d-sm-block"
-          >
-            <v-tristatecheckbox
-              [formControlName]="filter.optionLabel"
-              [label]="filter.label"
-            ></v-tristatecheckbox>
-          </div>
-          <div
-            *ngIf="filter.filterType === 'calendar'"
-            class="d-none d-sm-block"
-          >
-            <v-calendar
-              [formControlName]="filter.optionLabel"
-              [floatLabel]="filter.label"
-              icon="pi pi-calendar"
-            ></v-calendar>
-          </div>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="screenSizeService.isMobileBlock | async">
-        <div class="extended-filters d-flex gap-2">
-          <i
-            *ngIf="!hideSearch"
-            class="pi pi-search text-white"
-            (click)="openSearch()"
-          ></i>
-          <div class="d-none"></div>
-          <i
-            class="pi pi-filter text-white"
-            pBadge
-            [value]="activeFilters"
-            (click)="openFilter()"
-          ></i>
-        </div>
-      </ng-container>
-    </div>
-    <div class="verisoft-filter-action-buttons d-flex align-items-center gap-3">
-      <ng-container
-        *ngIf="
-          (screenSizeService.isMobileBlock | async) === false &&
-          filterDefinitions.length > 0
-        "
-      >
-        <div class="d-flex gap-2">
-          <v-button
-            useShortCut
-            [shortCutFn]="submit.bind(this)"
-            shortCutKey="Enter"
-            class="text-white"
-            [outlined]="true"
-            size="small"
-            label="Apply"
-            (click)="submit()"
-          ></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-container>
-      <ng-container *ngIf="buttonGroup">
-        <ng-content></ng-content>
-      </ng-container>
-    </div>
-    <div class="d-none">
-      <div class="w-100 p-4" #filter>
-        <div *ngFor="let filter of filterDefinitions; let index = index">
-          <div *ngIf="!filter.filterType || filter.filterType === 'dropdown'">
-            <v-dropdown
-              useDatasource
-              class="mb-4"
-              [formControlName]="filter.optionLabel"
-              [floatLabel]="filter.label"
-              [optionLabel]="filter.optionLabel"
-              [testId]="filter.optionLabel + index"
-              [optionValue]="filter.optionValue ?? filter.optionLabel"
-              [entityName]="filter.url ?? ''"
-              [datasourceService]="service"
-            >
-            </v-dropdown>
-          </div>
-          <div *ngIf="filter.filterType && filter.filterType === 'checkbox'">
-            <v-tristatecheckbox
-              [formControlName]="filter.optionLabel"
-              [label]="filter.label"
-            ></v-tristatecheckbox>
-          </div>
-          <div *ngIf="filter.filterType === 'calendar'" class="w-100">
-            <v-calendar
-              [formControlName]="filter.optionLabel"
-              [floatLabel]="filter.label"
-            ></v-calendar>
-          </div>
-          <div *ngIf="filter.filterType === 'multiselect'">
-            <v-multiselect
-              useDatasource
-              [formControlName]="filter.optionLabel"
-              [floatLabel]="filter.label"
-              [optionLabel]="filter.optionLabel"
-              [testId]="filter.optionLabel + index"
-              [optionValue]="filter.optionValue ?? filter.optionLabel"
-              [entityName]="filter.url ?? service.entityName"
-              [datasourceService]="service"
-            >
-            </v-multiselect>
-          </div>
-          <br />
-        </div>
-      </div>
-      <div class="w-100 py-2" #searchField>
-        <v-textfield
-          class="w-100"
-          placeholder="Search"
-          size="large"
-          formControlName="searchField"
-          type="search"
-          [clearable]="true"
-        >
-        </v-textfield>
-      </div>
-    </div>
-  </form>
-</div>

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

@@ -1,21 +0,0 @@
-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/table-filter/filter.component.stories.ts

@@ -1,23 +0,0 @@
-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,
-  },
-};

package/src/lib/services/screen-size.service.ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ScreenSizeService {
-  isMobileBlock = new BehaviorSubject<boolean>(false);
-  prevState = false;
-
-  constructor() {
-    this.checkScreenSize();
-    window.addEventListener('resize', async () => {
-      await this.checkScreenSize();
-    });
-  }
-
-  async checkScreenSize() {
-    const isMobile = window.matchMedia('(max-width: 768px)').matches;
-    if (isMobile !== this.prevState) {
-      this.prevState = isMobile;
-      this.isMobileBlock.next(isMobile);
-    }
-  }
-}