@verisoft/ui-primeng 18.6.0 → 18.7.0

package/{lib/components/input-group/index.d.ts → src/lib/components/input-group/index.ts}

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

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

@@ -0,0 +1,30 @@
+<div class="v-input-group w-100">
+  <v-form-field
+    [label]="label"
+    [required]="required"
+    [tooltip]="tooltip"  >
+    <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/{lib/components/loader/index.d.ts → src/lib/components/loader/index.ts}

@@ -1 +1 @@
-export * from './loader.component';
+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/{lib/components/multiselect/index.d.ts → src/lib/components/multiselect/index.ts}

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

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

@@ -0,0 +1,70 @@
+<div class="v-multiple-select">
+  <ng-container *ngIf="label && !floatLabel">
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [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>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </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>

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,122 @@
+import { CommonModule } from '@angular/common';
+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',
+  standalone: true,
+  imports: [
+    CommonModule,
+    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/{lib/components/number-input/index.d.ts → src/lib/components/number-input/index.ts}

@@ -1 +1 @@
-export * from './number-input.component';
+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();
+  });
+});

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

@@ -0,0 +1,57 @@
+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, NUMBER_INPUT_COMPONENT_TOKEN, NumberInputCore } from '@verisoft/ui-core';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-number-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputNumberModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    ErrorComponent,
+  ],
+  templateUrl: './number-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: forwardRef(() => NumberInputComponent),
+    },
+    {
+      provide: NUMBER_INPUT_COMPONENT_TOKEN,
+      useExisting: NumberInputComponent,
+    },
+  ],
+})
+export class NumberInputComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, NumberInputCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() mode!: string;
+  @Input() currency!: string;
+  @Input() min!: number;
+  @Input() max!: number;
+  @Input() step = 1;
+  @Input() errorMessage?: string = 'test';
+}

package/{lib/components/page-header/index.d.ts → src/lib/components/page-header/index.ts}

@@ -1 +1 @@
-export * from './page-header.component';
+export * from './page-header.component';

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

@@ -0,0 +1,31 @@
+<div
+  class="v-page-header d-block d-md-flex px-3 w-100 gap-0 gap-md-4 align-items-center text-center text-md-start"
+>
+  <v-button
+    *ngIf="showBackButton"
+    size="small"
+    [icon]="icons.arrowLeft"
+    label="Back"
+    [outlined]="true"
+    (click)="locationBack()"
+  ></v-button>
+  <div
+    class="align-items-center justify-content-center justify-content-md-start gap-2 w-100 d-flex"
+  >
+    <h1 class="text-primary m-0" [innerText]="title"></h1>
+    <div
+      *ngIf="subtitle"
+      class="d-flex gap-2 align-items-center text-center text-md-start"
+    >
+      <h1 class="text-default m-0" [innerText]="'-'"></h1>
+      <h1 class="text-default" [innerText]="subtitle"></h1>
+    </div>
+  </div>
+  <div
+    class="align-content-center page-header-action-buttons justify-content-center w-100"
+  >
+    <div *ngIf="buttonGroup">
+      <ng-content [select]="buttonGroup"></ng-content>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  OnInit,
+} from '@angular/core';
+import { PAGE_HEADER_COMPONENT_TOKEN, PageHeaderCore, PageHeaderCoreComponent } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+import { ActionButtonGroupComponent } from '../shared-components';
+
+@Component({
+  selector: 'v-page-header',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  templateUrl: './page-header.component.html',
+  styleUrl: './page-header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: PAGE_HEADER_COMPONENT_TOKEN, useExisting: PageHeaderComponent },
+  ],
+})
+export class PageHeaderComponent
+  extends PageHeaderCoreComponent
+  implements OnInit, PageHeaderCore
+{
+  @ContentChild(ActionButtonGroupComponent)
+  buttonGroup?: ActionButtonGroupComponent;
+  
+  icons = Icons;
+}

package/{lib/components/password/index.d.ts → src/lib/components/password/index.ts}

@@ -1 +1 @@
-export * from './password.component';
+export * from './password.component';

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

@@ -0,0 +1,24 @@
+<div class="v-password d-flex align-items-center">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [testId]="testId"
+    [display]="formDisplay"
+  >
+    <p-password
+      [style]="{'width':'100%'}"
+      [inputStyle]="{'width':'100%'}" 
+      [formControl]="formControl"
+      [placeholder]="placeholder"
+      [showClear]="clearable"
+      [feedback]="feedback"
+      [required]="isRequired()"
+      [label]="label"
+      [id]="inputId"
+      [toggleMask]="toggleMask"
+    />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </v-form-field>
+</div>

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

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