@verisoft/ui-primeng 20.0.0 → 20.1.0

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

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  HEADER_COMPONENT_TOKEN,
+  HeaderCore,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { AvatarModule } from 'primeng/avatar';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+import { HeaderProviderService } from './services/header-provider.service';
+
+@Component({
+    selector: 'v-header',
+    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;
+
+  icons = Icons;
+  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 '@verisoft/ui-core';
+
+@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/icon/icon.component.html

@@ -0,0 +1,2 @@
+<i [class]="primeIconClasses"></i>
+

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

@@ -0,0 +1,51 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+
+  .pi {
+    line-height: 1;
+  }
+
+  &.v-primeng-icon--small .pi {
+    font-size: 0.75rem;
+  }
+
+  &.v-primeng-icon--medium .pi {
+    font-size: 1rem;
+  }
+
+  &.v-primeng-icon--large .pi {
+    font-size: 1.5rem;
+  }
+
+  &.v-primeng-icon--xl .pi {
+    font-size: 2rem;
+  }
+
+  &.v-primeng-icon--primary .pi {
+    color: var(--primary-color);
+  }
+
+  &.v-primeng-icon--secondary .pi {
+    color: var(--secondary-color);
+  }
+
+  &.v-primeng-icon--success .pi {
+    color: var(--success-color);
+  }
+
+  &.v-primeng-icon--danger .pi {
+    color: var(--error-color);
+  }
+
+  &.v-primeng-icon--warning .pi {
+    color: var(--details-color);
+  }
+
+  &.v-primeng-icon--info .pi,
+  &.v-primeng-icon--help .pi,
+  &.v-primeng-icon--contrast .pi {
+    color: var(--secondary-color);
+  }
+}
+

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

@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ControlSeverity, ControlSeverityType, IconsComponent } from '@verisoft/ui-core';
+
+@Component({
+  selector: 'v-icon',
+  imports: [CommonModule],
+  templateUrl: './icon.component.html',
+  styleUrl: './icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses',
+  },
+})
+export class IconComponent extends IconsComponent {
+  get primeIconClasses(): string {
+    return ['pi', `pi-${this.name()}`].join(' ');
+  }
+
+  get hostClasses(): string {
+    const classes = ['v-primeng-icon'];
+    const sizeClass = this.primeSizeClass;
+    const colorClass = this.primeColorClass;
+    const customClass = this.class() ?? '';
+
+    if (sizeClass) {
+      classes.push(sizeClass);
+    }
+
+    if (colorClass) {
+      classes.push(colorClass);
+    }
+
+    if (customClass) {
+      classes.push(customClass);
+    }
+
+    return classes.join(' ');
+  }
+
+  private get primeSizeClass(): string {
+    switch (this.size()) {
+      case 'small':
+        return 'v-primeng-icon--small';
+      case 'medium':
+        return 'v-primeng-icon--medium';
+      case 'large':
+        return 'v-primeng-icon--large';
+      case 'xl':
+        return 'v-primeng-icon--xl';
+      default:
+        return '';
+    }
+  }
+
+  private get primeColorClass(): string {
+    const color = this.mapSeverityToPrimeClass(this.severity());
+    return color ? `v-primeng-icon--${color}` : '';
+  }
+
+  private mapSeverityToPrimeClass(severity: ControlSeverityType | undefined): string | undefined {
+    if (!severity) {
+      return undefined;
+    }
+
+    switch (severity) {
+      case ControlSeverity.success:
+        return 'success';
+      case ControlSeverity.danger:
+        return 'danger';
+      case ControlSeverity.warning:
+        return 'warning';
+      case ControlSeverity.info:
+        return 'info';
+      case ControlSeverity.secondary:
+        return 'secondary';
+      case ControlSeverity.help:
+      case ControlSeverity.primary:
+      case ControlSeverity.contrast:
+        return 'primary';
+      default:
+        return severity;
+    }
+  }
+}
+

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

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

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,34 @@
+<div class="v-input-group w-100">
+  <v-form-field
+    [label]="label"
+    [required]="required"
+    [tooltip]="tooltip"  >
+    <p-inputGroup>
+      @for (item of items; track item) {
+        @if (item.position === 'left') {
+          <p-inputGroupAddon>
+            @if (item.icon) {
+              <i [class]="item.icon"></i>
+            }
+            @if (item.text) {
+              {{ item.text }}
+            }
+          </p-inputGroupAddon>
+        }
+      }
+      <input pInputText [formControl]="formControl" class="w-100" />
+      @for (item of items; track item) {
+        @if (item.position === 'right') {
+          <p-inputGroupAddon>
+            @if (item.icon) {
+              <i [class]="item.icon"></i>
+            }
+            @if (item.text) {
+              {{ item.text }}
+            }
+          </p-inputGroupAddon>
+        }
+      }
+    </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,58 @@
+
+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',
+    imports: [
+    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,16 @@
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LOADER_COMPONENT_TOKEN, LoaderCore } from '@verisoft/ui-core';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
+@Component({
+    selector: 'v-loader',
+    imports: [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,67 @@
+<div class="v-multiple-select">
+  @if (label && !floatLabel) {
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [testId]="testId"
+      [display]="formDisplay"
+      >
+      <p-multiSelect
+        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>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  }
+  @if (floatLabel) {
+    <p-floatLabel>
+      <p-multiSelect
+        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>
+  }
+</div>

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

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

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

@@ -0,0 +1,120 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  FilterEvent,
+  LazyLoadEvent,
+} from '@verisoft/core';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  MULTISELECT_COMPONENT_TOKEN,
+  MultiselectCore,
+  FieldSize,
+  FieldSizeType,
+} from '@verisoft/ui-core';
+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({
+    selector: 'v-multiselect',
+    imports: [
+    ReactiveFormsModule,
+    FloatLabelModule,
+    MultiSelectModule,
+    ErrorComponent,
+    FormFieldComponent
+],
+    templateUrl: './multiselect.component.html',
+    styleUrl: './multiselect.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: forwardRef(() => MultiselectComponent),
+            multi: true,
+        },
+        {
+            provide: MULTISELECT_COMPONENT_TOKEN,
+            useExisting: MultiselectComponent,
+        },
+    ]
+})
+export class MultiselectComponent<T>
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, MultiselectCore<T>, OnChanges
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() options: T[] | undefined = [];
+  @Input() optionLabel: string | undefined;
+  @Input() optionValue: string | undefined;
+  @Input() dropdownIcon?: string;
+  @Input() floatLabel?: string;
+  @Input() editable = true;
+  @Input() loading = false;
+  @Input() lazy = false;
+  @Input() filter = true;
+  @Input() size: FieldSizeType = FieldSize.medium;
+
+  @Output() changed = new EventEmitter<any>();
+  @Output() showed = new EventEmitter<any>();
+  @Output() cleared = new EventEmitter<any>();
+  @Output() lazyLoad = new EventEmitter<LazyLoadEvent>();
+  @Output() filtered = new EventEmitter<FilterEvent>();
+
+  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;
+    }
+  }
+
+  onLazyLoad(event: ScrollerLazyLoadEvent): void {
+    this.lazyLoad.emit({
+      offset: event.first,
+      limit: event.last - event.first,
+    });
+  }
+
+  selectionChange(event: any): void {
+    this.cleared.emit(event);
+  }
+
+  onDropdownShow(): void {
+    this.showed.emit();
+  }
+
+  onDropdownClear(): void {
+    this.cleared.emit();
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+<div class="v-number-input">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [testId]="testId"
+  >
+    <p-inputNumber
+      class="w-100"
+      [formControl]="formControl"
+      [showButtons]="true"
+      [inputId]="inputId"
+      [mode]="mode"
+      [min]="min"
+      [max]="max"
+      [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.spec.ts

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