@verisoft/ui-primeng 18.0.0

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 { 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 { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-multiselect',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FloatLabelModule,
+    MultiSelectModule,
+    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[] = [];
+  @Input() optionLabel?: string;
+  @Input() optionValue?: string;
+  @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()"
+    [ngControl]="ngControl"
+    [testId]="testId"
+  >
+    <p-inputNumber
+      class="w-100"
+      [formControl]="formControl"
+      [showButtons]="true"
+      [inputId]="inputId"
+      [mode]="mode"
+      [min]="min"
+      [max]="max"
+      [step]="step"
+      [currency]="currency"
+    />
+  </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,54 @@
+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 { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-number-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputNumberModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+  ],
+  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;
+}

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

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

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="pi pi-arrow-left"
+    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,60 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { PAGE_HEADER_COMPONENT_TOKEN, PageHeaderCore, UnsubscribeComponent } from '@verisoft/ui-core';
+import { takeUntil } from 'rxjs';
+import { ActionButtonGroupComponent } from '../action-button-group';
+import { ButtonComponent } from '../button';
+import { PageHeaderService } from './services/page-header.service';
+
+@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 UnsubscribeComponent
+  implements OnInit, PageHeaderCore
+{
+  @ContentChild(ActionButtonGroupComponent)
+  buttonGroup?: ActionButtonGroupComponent;
+  @Input() title!: string;
+  @Input() subtitle: string | undefined;
+  @Input() showBackButton = false;
+
+  constructor(
+    readonly router: Router,
+    readonly cdr: ChangeDetectorRef,
+    readonly headerService: PageHeaderService
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.headerService.pageHeader
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((x) => {
+        this.title = x.title;
+        this.subtitle = x.subtitle;
+        this.showBackButton = x.showBackButton ?? false;
+        this.cdr.detectChanges();
+      });
+  }
+
+  protected locationBack() {
+    history.back();
+  }
+}

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

@@ -0,0 +1,9 @@
+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/password/index.ts

@@ -0,0 +1 @@
+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()"
+    [ngControl]="ngControl"
+    [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-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();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, PASSWORD_COMPONENT_TOKEN, PasswordCore } from '@verisoft/ui-core';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { PasswordModule } from 'primeng/password';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-password',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    PasswordModule,
+    FloatLabelModule,
+    FormFieldComponent
+  ],
+  templateUrl: './password.component.html',
+  styleUrl: './password.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: PasswordComponent,
+    },
+    {
+      provide: PASSWORD_COMPONENT_TOKEN,
+      useExisting: PasswordComponent,
+    },
+  ],
+})
+export class PasswordComponent 
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, PasswordCore
+{
+  @Input() toggleMask = true;
+  
+  @Input() feedback = false;
+
+  override formDisplay: "flex" | "block" = "block";
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

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

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

@@ -0,0 +1,32 @@
+<div class="v-radiobutton">
+  <v-form-field
+    [label]="label"
+    [required]="required"
+    [tooltip]="tooltip"
+    [ngControl]="ngControl"
+    [testId]="testId"
+  >
+    <div class="d-flex align-items-center gap-3">
+      <div *ngFor="let item of items">
+        <p-radioButton
+          [inputId]="item.id"
+          [ngClass]="{
+                    'radio-error': ngControl?.invalid && ngControl?.dirty,
+                    }"
+          [name]="radioGroupName"
+          [value]="item.value"
+          [formControl]="formControl"
+        />
+        <label [for]="item.id" class="ps-2">
+          <span
+            [ngClass]="{
+              'text-error': ngControl?.invalid && ngControl?.dirty,
+              'text-primary': ngControl?.value === item.value
+            }"
+            >{{ item.value }}</span
+          >
+        </label>
+      </div>
+    </div>
+  </v-form-field>
+</div>

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

@@ -0,0 +1,6 @@
+.radio-error {
+  .p-radiobutton .p-radiobutton-box.p-highlight {
+    border-color: var(--error-color);
+    background: var(--error-color);
+  }
+}

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

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

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

@@ -0,0 +1,71 @@
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { BaseFormInputComponent } from '@verisoft/ui-core';
+import { FormFieldComponent } from '../form-field';
+import { RadioButtonComponent } from './radiobutton.component';
+
+const meta: Meta<RadioButtonComponent<any>> = {
+  component: RadioButtonComponent,
+  title: 'RadioButtonComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [
+        FormFieldComponent,
+        ReactiveFormsModule,
+        FormsModule,
+        BaseFormInputComponent,
+      ],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<RadioButtonComponent<any>>;
+const formGroup: FormGroup = new FormGroup({
+  radio: new FormControl(null),
+});
+export const Primary: Story = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      formGroup,
+    },
+    template: `
+    <form [formGroup]="formGroup">
+      <v-radiobutton
+      formControlName="radio"
+      [radioGroupName]="radioGroupName"
+      [items]="items"
+      [testId]="testId"
+      [label]="label"
+      [required]="required"
+      [tooltip]="tooltip"
+      />
+    </form>
+    `,
+  }),
+  args: {
+    radioGroupName: 'test',
+    items: [
+      { id: 'true', value: 'Yes' },
+      { id: 'false', value: 'No' },
+    ],
+    label: 'Save item?',
+    required: true,
+    tooltip: 'This is a tooltip lorem ipsum',
+    testId: 'radioButtonTestId',
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText('Save item?')).toBeTruthy();
+    expect(canvas.getByText('Yes')).toBeTruthy();
+    expect(canvas.getByText('No')).toBeTruthy();
+    expect(canvas.queryAllByText('This is a tooltip lorem ipsum')).toBeTruthy();
+    expect(canvas.findByTestId('radioButtonTestId')).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  RADIOBUTTON_COMPONENT_TOKEN,
+  RadiobuttonCore,
+  RadioButtonItem,
+} from '@verisoft/ui-core';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { FormFieldComponent } from '../form-field/form-field.component';
+
+@Component({
+  selector: 'v-radiobutton',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormFieldComponent,
+    RadioButtonModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './radiobutton.component.html',
+  styleUrl: './radiobutton.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: RadioButtonComponent,
+    },
+    {
+      provide: RADIOBUTTON_COMPONENT_TOKEN,
+      useExisting: RadioButtonComponent,
+    },
+  ],
+})
+export class RadioButtonComponent<T>
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, RadiobuttonCore<T>
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() radioGroupName = Math.random().toString();
+
+  @Input() items: RadioButtonItem<T>[] = [];
+}