@verisoft/ui-primeng 18.0.0

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

@@ -0,0 +1,48 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { GenericFieldComponent } from '../generic-field';
+import {
+  generateFormGroup,
+  GenericFieldDefinition,
+  getColumnClass,
+} from './generic-form.model';
+
+@Component({
+  selector: 'v-generic-form',
+  standalone: true,
+  imports: [GenericFieldComponent, ReactiveFormsModule],
+  templateUrl: './generic-form.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GenericFormComponent implements OnChanges {
+  @Input() formGroup?: UntypedFormGroup;
+
+  @Input() fields?: GenericFieldDefinition[];
+
+  @Input() columns?: number;
+
+  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/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]);
+    });
+  });
+});

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

@@ -0,0 +1,76 @@
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  ValidatorFn,
+} from '@angular/forms';
+import { FieldSizeType } from '@verisoft/ui-core';
+import { GenericFieldTypeType } from '../generic-field';
+
+export interface GenericFieldDefinition {
+  validator?: ValidatorFn[];
+  type?: GenericFieldTypeType;
+  label?: string;
+  floatLabel?: boolean;
+  name: string;
+  optionLabel?: string;
+  optionValue?: string;
+  options?: unknown[];
+  value?: unknown;
+  testId?: string;
+  size?: FieldSizeType;
+}
+
+export function generateFormGroup(
+  fields: GenericFieldDefinition[] | undefined,
+  lastGroupValue: UntypedFormGroup | undefined,
+  inputGroup: UntypedFormGroup | undefined,
+  inputGroupChanged = false
+): UntypedFormGroup {
+  const formGroup =
+    (inputGroupChanged
+      ? inputGroup ?? lastGroupValue
+      : lastGroupValue ?? inputGroup) ?? new UntypedFormGroup({});
+
+  fields?.forEach((field) => {
+    const control = formGroup.get(field.name);
+    if (!control) {
+      formGroup.addControl(
+        field.name,
+        new UntypedFormControl(field.value, field.validator)
+      );
+    } else {
+      control.setValidators(field.validator ?? null);
+    }
+  });
+  if (!inputGroupChanged) {
+    for (const field in formGroup.controls) {
+      const control = fields?.find((x) => x.name == field);
+      if (!control) {
+        formGroup.removeControl(field);
+      }
+    }
+  }
+
+  return formGroup;
+}
+
+export function getColumnClass(value?: number): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  switch (value) {
+    case 1:
+      return 'col-12';
+    case 2:
+      return 'col-12 col-md-6';
+    case 3:
+      return 'col-12 col-md-4';
+    case 4:
+      return 'col-12 col-md-3';
+    case 6:
+      return 'col-12 col-md-2';
+  }
+  
+  return 'col-12 col-md-1';
+}

package/src/lib/components/generic-form/index.ts

@@ -0,0 +1,2 @@
+export * from './generic-form.component';
+export * from './generic-form.model';

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

@@ -0,0 +1,85 @@
+<div
+  class="v-header d-flex w-100 text-align-end"
+  [ngStyle]="{ position: exampleHeader ? 'relative' : 'fixed' }"
+>
+  <ng-container *ngIf="screenSizeService.isMobileBlock | async">
+    <div class="burger-menu">
+      <v-button
+        [text]="true"
+        [icon]="menuVisible ? 'pi pi-times' : 'pi pi-bars'"
+        (click)="toggleMenu()"
+      />
+      <div class="logo mt-3" [routerLink]="[logoRouterLink]">
+        <img [src]="logoUrl" alt=""/>
+      </div>
+    </div>
+  </ng-container>
+  <div class="v-header-title col-auto">
+    <p class="text-primary text-nowrap d-none d-md-block ps-3 m-0 w-100">
+      {{ title }}
+    </p>
+    <div class="col-8 col-md-auto ps-3 m-0 w-100">
+      <ng-content select="[module]"></ng-content>
+    </div>
+  </div>
+  <ng-container *ngIf="(screenSizeService.isMobileBlock | async) === false">
+    <div class="w-100 text-start justify-content-start align-content-center">
+      <ng-content select="[breadcrumbs]"></ng-content>
+    </div>
+    <div class="col-auto d-flex align-items-center justify-content-end p-4">
+      <div class="d-flex aling-items-center">
+        <p-avatar
+          image="assets/images/_global/jara.png"
+          styleClass="me-2"
+          size="large"
+          shape="circle"
+        />
+        <div class="card align-content-center pe-3">
+          <p
+            class="text-primary m-0 header-username"
+            [innerHTML]="userName"
+          ></p>
+          <p
+            class="text-default m-0 header-userrole"
+            [innerHTML]="userRole"
+          ></p>
+        </div>
+      </div>
+      <div class="d-flex gap-4 align-items-center">
+        <ng-content select="[useractions]"/>
+      </div>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="screenSizeService.isMobileBlock | async">
+    <div class="user-info-container d-flex align-items-center">
+      <div class="d-flex">
+        <div class="card pe-3 align-content-center">
+          <p-avatar
+            image="assets/images/_global/jara.png"
+            styleClass="mr-2"
+            size="large"
+            shape="circle"
+          ></p-avatar>
+        </div>
+        <div class="card align-content-center pe-3 d-flex">
+          <div class="user-info">
+            <p
+              class="text-default m-0 header-username"
+              [innerHTML]="userName"
+            ></p>
+            <p
+              class="text-default m-0 header-userrole"
+              [innerHTML]="userRole"
+            ></p>
+          </div>
+          <div class="user-actions">
+            <ng-content select="[useractions]"></ng-content>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex gap-4 align-items-center justify-content-center">
+        <ng-content select="[dbcontext]" />
+      </div>
+    </div>
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { HeaderComponent } from './header.component';
+
+const meta: Meta<HeaderComponent> = {
+  component: HeaderComponent,
+  title: 'HeaderComponent',
+};
+export default meta;
+type Story = StoryObj<HeaderComponent>;
+
+export const Primary: Story = {
+  args: {
+    title: 'verisoft',
+    userName: 'Elon Musk',
+    userRole: 'Mars Owner',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('verisoft')).toBeTruthy();
+    expect(canvas.findByText('Elon Musk')).toBeTruthy();
+    expect(canvas.findByText('Mars Owner')).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,64 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  HEADER_COMPONENT_TOKEN,
+  HeaderCore,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { ScreenSizeService } from '../../services/screen-size.service';
+import { ButtonComponent } from '../button';
+import { HeaderProviderService } from './services/header-provider.service';
+
+@Component({
+  selector: 'v-header',
+  standalone: true,
+  imports: [CommonModule, AvatarModule, ButtonComponent, RouterModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: HEADER_COMPONENT_TOKEN, useExisting: HeaderComponent },
+  ],
+})
+export class HeaderComponent
+  extends UnsubscribeComponent
+  implements OnInit, HeaderCore
+{
+  constructor(
+    readonly providerService: HeaderProviderService,
+    readonly screenSizeService: ScreenSizeService,
+    readonly cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  @Input() title!: string;
+  @Input() logoUrl!: string;
+  @Input() userName!: string;
+  @Input() userRole!: any | any[] | undefined;
+  @Input() menuRef!: HTMLDivElement;
+  @Input() exampleHeader = false;
+
+  protected menuVisible = false;
+  protected logoRouterLink!: string;
+
+  ngOnInit(): void {
+    this.providerService.init();
+  }
+
+  toggleMenu() {
+    if (this.menuRef) {
+      this.menuVisible = !this.menuVisible;
+      this.menuRef.classList.toggle('menu-visible');
+      this.cdr.detectChanges();
+    }
+  }
+}

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

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

package/src/lib/components/header/services/header-provider.service.ts

@@ -0,0 +1,15 @@
+import { Inject, Injectable } from '@angular/core';
+import { SETTINGS_MENU } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeaderProviderService {
+  constructor(@Inject(SETTINGS_MENU) private settingsMenu: MenuItem[]) {}
+  menu: MenuItem[] = [];
+
+  init(): void {
+    this.menu = this.settingsMenu;
+  }
+}

package/src/lib/components/input-group/index.ts

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

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

@@ -0,0 +1,32 @@
+<div class="v-input-group w-100">
+  <v-form-field
+    [label]="label"
+    [required]="required"
+    [tooltip]="tooltip"
+    [ngControl]="ngControl"
+  >
+    <p-inputGroup>
+      <ng-container *ngFor="let item of items">
+        <p-inputGroupAddon *ngIf="item.position === 'left'">
+          <ng-container *ngIf="item.icon">
+            <i [class]="item.icon"></i>
+          </ng-container>
+          <ng-container *ngIf="item.text">
+            {{ item.text }}
+          </ng-container>
+        </p-inputGroupAddon>
+      </ng-container>
+      <input pInputText [formControl]="formControl" class="w-100" />
+      <ng-container *ngFor="let item of items">
+        <p-inputGroupAddon *ngIf="item.position === 'right'">
+          <ng-container *ngIf="item.icon">
+            <i [class]="item.icon"></i>
+          </ng-container>
+          <ng-container *ngIf="item.text">
+            {{ item.text }}
+          </ng-container>
+        </p-inputGroupAddon>
+      </ng-container>
+    </p-inputGroup>
+  </v-form-field>
+</div>

package/src/lib/components/input-group/input-group.component.spec.ts

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

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

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  INPUT_GROUP_COMPONENT_TOKEN,
+  InputGroupCore,
+  InputGroupItem,
+} from '@verisoft/ui-core';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { InputTextModule } from 'primeng/inputtext';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-input-group',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputGroupAddonModule,
+    InputGroupModule,
+    InputTextModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+  ],
+  templateUrl: './input-group.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: forwardRef(() => InputGroupComponent),
+    },
+    {
+      provide: INPUT_GROUP_COMPONENT_TOKEN,
+      useExisting: InputGroupComponent,
+    },
+  ],
+})
+export class InputGroupComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, InputGroupCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() items!: InputGroupItem[];
+}

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

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

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

@@ -0,0 +1,5 @@
+<div class="v-loader d-flex justify-content-center">
+  <div>
+    <p-progressSpinner class="p-progress-spinner-circle"></p-progressSpinner>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LOADER_COMPONENT_TOKEN, LoaderCore } from '@verisoft/ui-core';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
+@Component({
+  selector: 'v-loader',
+  standalone: true,
+  imports: [CommonModule, ProgressSpinnerModule],
+  templateUrl: './loader.component.html',
+  styleUrl: './loader.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: LOADER_COMPONENT_TOKEN, useExisting: LoaderComponent },
+  ],
+})
+export class LoaderComponent implements LoaderCore {}

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

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

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

@@ -0,0 +1,69 @@
+<div class="v-multiple-select">
+  <ng-container *ngIf="label && !floatLabel">
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [ngControl]="ngControl"
+      [testId]="testId"
+      [display]="formDisplay"
+    >
+      <p-multiSelect
+        [baseZIndex]="9999"
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [title]="label"
+        display="chip"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ? placeholder : label"
+        [virtualScrollItemSize]="25"
+        [lazy]="true"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [showClear]="formControl && clearable && !readonly"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (changeEvent)="selectionChange($event)"
+        (lazyLoadEvent)="onLazyLoad($any($event))"
+      ></p-multiSelect>
+    </v-form-field>
+  </ng-container>
+  <ng-container *ngIf="floatLabel">
+    <p-floatLabel>
+      <p-multiSelect
+        [baseZIndex]="9999"
+        class="w-100"
+        appendTo="body"
+        [formControl]="formControl"
+        [title]="label"
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [loading]="loading"
+        [placeholder]="placeholder ? placeholder : label"
+        [virtualScrollItemSize]="25"
+        [lazy]="true"
+        [tooltip]="tooltip"
+        [required]="isRequired()"
+        [inputId]="inputId"
+        [showClear]="formControl && clearable && !readonly"
+        [virtualScroll]="lazy"
+        [virtualScrollItemSize]="virtualOptionSize"
+        [virtualScrollOptions]="virtualScrollOptions"
+        (showEvent)="onDropdownShow()"
+        (clearEvent)="onDropdownClear()"
+        (changeEvent)="selectionChange($event)"
+        (lazyLoadEvent)="onLazyLoad($any($event))"
+      ></p-multiSelect>
+      <label [for]="inputId">{{ floatLabel }}</label>
+    </p-floatLabel>
+  </ng-container>
+</div>