@verisoft/ui-primeng 18.6.0 → 18.7.0

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

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { SNACKBAR_COMPONENT_TOKEN, SnackbarCore } from '@verisoft/ui-core';
+import { RippleModule } from 'primeng/ripple';
+import { ToastModule } from 'primeng/toast';
+import { SnackbarService } from './services/snackbar.service';
+
+@Component({
+  selector: 'v-snackbar',
+  standalone: true,
+  imports: [CommonModule, ToastModule, RippleModule],
+  templateUrl: './snackbar.component.html',
+  styleUrl: './snackbar.component.scss',
+  providers: [
+    SnackbarService,
+    {
+      provide: SNACKBAR_COMPONENT_TOKEN,
+      useExisting: SnackbarComponent,
+    },
+  ],
+})
+export class SnackbarComponent 
+  implements SnackbarCore
+{
+  constructor(private snackbarService: SnackbarService) {}
+}

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

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

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

@@ -0,0 +1,43 @@
+<div class="v-stepper">
+  <p-stepper>
+    <p-stepperPanel
+      *ngFor="let item of items; let index = index"
+      [header]="item.header"
+    >
+      <ng-template
+        pTemplate="content"
+        let-nextCallback="nextCallback"
+        let-prevCallback="prevCallback"
+        let-index="index"
+      >
+        <ng-container *ngIf="item.template && item.template.elementRef">
+          <ng-template
+            *ngTemplateOutlet="
+              item.template;
+              context: { item: item, index: index }
+            "
+          />
+        </ng-container>
+        <div class="d-flex pt-4 justify-content-between">
+          <v-button
+            *ngIf="index > 0"
+            label="Back"
+            [icon]="icons.arrowLeft"
+            size="small"
+            [outlined]="true"
+            (click)="prevCallback.emit()"
+          />
+
+          <v-button
+            *ngIf="index < items.length - 1"
+            label="Next"
+            size="small"
+            [icon]="icons.arrowRight"
+            iconPos="right"
+            (click)="nextCallback.emit()"
+          />
+        </div>
+      </ng-template>
+    </p-stepperPanel>
+  </p-stepper>
+</div>

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

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

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

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  StepperCore,
+  STEPPER_COMPONENT_TOKEN,
+  StepperItem,
+  LayoutType,
+  LayoutTypeType,
+  FieldSizeType,
+  FieldSize
+} from '@verisoft/ui-core';
+import { StepperModule } from 'primeng/stepper';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+
+@Component({
+  selector: 'v-stepper',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, StepperModule],
+  templateUrl: './stepper.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
+  ],
+})
+export class StepperComponent 
+  implements StepperCore
+{
+  @Input() items!: StepperItem[];
+
+  icons = Icons;
+  @Input() prefix!: string;
+  @Input() label!: string;
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() layout: LayoutTypeType = LayoutType.horizontal;
+  @Input() icon!: string;
+  @Input() activeIndex = 0;
+  @Input() annotation!: string;
+  @Output() activeIndexChange = new EventEmitter<number>();
+}

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

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

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

@@ -0,0 +1,18 @@
+<div class="v-switch d-flex align-items-center">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [testId]="testId"
+    [display]="formDisplay"
+  >
+    <p-inputSwitch
+      [formControl]="formControl"
+      [required]="isRequired()"
+      [title]="label"
+      [readonly]="readonly"
+      [inputId]="id"
+    /><v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </v-form-field>
+</div>

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

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

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

@@ -0,0 +1,65 @@
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { SwitchComponent } from './switch.component';
+
+const meta: Meta<SwitchComponent> = {
+  component: SwitchComponent,
+  title: 'SwitchComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<SwitchComponent>;
+const formGroup = new FormGroup({
+  switch: new FormControl(null),
+  switchRequired: new FormControl(null, [Validators.requiredTrue]),
+});
+export const Primary: Story = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      formGroup: formGroup,
+    },
+    template: `
+    <form [formGroup]="formGroup">
+      <v-switch
+      [disabled]="disabled"
+      [readonly]="readonly"
+      formControlName="switch"
+      [required]="required"/>
+    </form>`,
+  }),
+  args: {
+    disabled: false,
+    readonly: false,
+  },
+};
+
+export const SwitchRequired: Story = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      formGroup: formGroup,
+    },
+    template: `
+    <form [formGroup]="formGroup">
+      <v-switch
+      [disabled]="disabled"
+      [readonly]="readonly"
+      formControlName="switchRequired"
+      [required]="required"/>
+    </form>`,
+  }),
+  args: {
+    disabled: false,
+    readonly: false,
+  },
+};

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

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, SWITCH_COMPONENT_TOKEN, SwitchCore } from '@verisoft/ui-core';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { v4 as uuidv4 } from 'uuid';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-switch',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputSwitchModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    ErrorComponent
+  ],
+  templateUrl: './switch.component.html',
+  styleUrl: './switch.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: forwardRef(() => SwitchComponent),
+      multi: true,
+    },
+    {
+      provide: SWITCH_COMPONENT_TOKEN,
+      useExisting: SwitchComponent,
+    },
+  ],
+})
+export class SwitchComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, SwitchCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  id = uuidv4();
+}

package/{lib/components/tab-view/index.d.ts → src/lib/components/tab-view/index.ts}

@@ -1,3 +1,3 @@
-export * from './tab-view.component';
-export * from './tab-view-item.component';
-export * from './tab-view.module';
+export * from './tab-view.component';
+export * from './tab-view-item.component';
+export * from './tab-view.module';

package/src/lib/components/tab-view/tab-menu.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TabViewItemCore } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+
+@Pipe({
+  name: 'tabMenu',
+  pure: true,
+  standalone: true,
+})
+export class TabMenuPipe implements PipeTransform {
+  transform(value: TabViewItemCore[] | undefined): MenuItem[] | undefined {
+    if (!value) {
+      return undefined;
+    }
+
+    return value.map((x) => ({
+      label: x.title,
+      icon: x.icon,
+      disabled: x.disabled,
+      routerLink: x.url,
+    }));
+  }
+}

package/src/lib/components/tab-view/tab-view-item.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'v-tab-view-item',
+  template: `<ng-template #contentTemplate>
+    <ng-content></ng-content>
+  </ng-template>`,
+})
+export class TabViewItemComponent {
+  @ViewChild('contentTemplate', { static: true })
+  contentTemplate!: TemplateRef<any>;
+
+  @Input() title!: string;
+
+  @Input() url?: string;
+
+  @Input() icon?: string;
+
+  @Input() disabled?: boolean;
+
+  @Input() content?: string;
+}

package/src/lib/components/tab-view/tab-view.component.html

@@ -0,0 +1,23 @@
+<div class="v-tab-view">
+  @if (useRouting) {
+  <p-tabMenu
+    [model]="mergedItems | tabMenu"
+    [activeItem]="items[activeIndex]"
+    (activeItemChange)="activeItemChanged($event)"
+  >
+  </p-tabMenu>
+  <router-outlet></router-outlet>
+  } @else {
+  <p-tabView (activeIndexChange)="activeItemChanged($event)">
+    @for (item of mergedItems; track item; let index = $index) {
+    <p-tabPanel [selected]="activeIndex === index" [header]="item.title" [disabled]="item.disabled === true">
+      @if (item.contentTemplate){
+      <ng-container *ngTemplateOutlet="item.contentTemplate"></ng-container>
+      } @else if (item.content) {
+      {{ item.content }}
+      }
+    </p-tabPanel>
+    }
+  </p-tabView>
+  }
+</div>

package/src/lib/components/tab-view/tab-view.component.ts

@@ -0,0 +1,55 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+} from '@angular/core';
+import { TabViewCore, TabViewItemCore } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { TabViewModule } from 'primeng/tabview';
+import { TabMenuPipe } from './tab-menu.pipe';
+import { TabViewItemComponent } from './tab-view-item.component';
+
+@Component({
+  selector: 'v-tab-view',
+  templateUrl: './tab-view.component.html',
+  standalone: true,
+  imports: [TabMenuModule, TabMenuPipe, TabViewModule],
+})
+export class TabViewComponent 
+  implements AfterContentInit, TabViewCore
+{
+  @ContentChildren(TabViewItemComponent)
+  children!: QueryList<TabViewItemComponent>;
+
+  @Input() items: TabViewItemCore[] = [];
+
+  @Input() useRouting = false;
+
+  @Input() activeIndex = 0;
+
+  @Output() activeIndexChange = new EventEmitter<number>();
+
+  mergedItems: TabViewItemCore[] = [];
+
+  ngAfterContentInit(): void {
+    this.mergedItems = [...this.items, ...this.children.toArray()];
+  }
+
+  protected activeItemChanged(item: MenuItem | number): void {
+    let index: number;
+    if (typeof item === 'number') {
+      index = item;
+    } else {
+      index = this.items.indexOf(item as TabViewItemCore);
+    }
+
+    if (index != -1) {
+      this.activeIndexChange.emit(index);
+    }
+  }
+}

package/src/lib/components/tab-view/tab-view.module.ts

@@ -0,0 +1,19 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TAB_VIEW_COMPONENT_TOKEN } from '@verisoft/ui-core';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { TabViewModule as PrimeTabViewModule } from 'primeng/tabview';
+import { TabMenuPipe } from './tab-menu.pipe';
+import { TabViewItemComponent } from './tab-view-item.component';
+import { TabViewComponent } from './tab-view.component';
+
+@NgModule({
+  imports: [RouterOutlet, TabMenuModule, PrimeTabViewModule, NgTemplateOutlet, TabViewComponent,  TabMenuPipe],
+  declarations: [TabViewItemComponent],
+  exports: [TabViewComponent, TabViewItemComponent],
+  providers: [
+    { provide: TAB_VIEW_COMPONENT_TOKEN, useExisting: TabViewComponent },
+  ],
+})
+export class TabViewModule {}

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

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

package/src/lib/components/table/table-filter.pipe.ts

@@ -0,0 +1,59 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FilterMetadata } from 'primeng/api';
+
+type PrimeNgFilterDefinition = {
+  [s: string]: FilterMetadata | FilterMetadata[];
+};
+
+@Pipe({
+  name: 'primengFilter',
+  standalone: true,
+})
+export class TableFilterPipe<T> implements PipeTransform {
+  transform(value: Partial<T>): PrimeNgFilterDefinition | undefined {
+    if (value == undefined) {
+      return undefined;
+    }
+
+    return Object.entries(value)
+      .filter((x) => x[0] != undefined)
+      .reduce((currentFilter: PrimeNgFilterDefinition, [key, value]) => {
+        const filterValue = this.convertToFilterMetadata(value);
+        if (filterValue) {
+          if (key === 'searchField') {
+            key = 'global';
+          }
+          
+          currentFilter[key] = filterValue;
+        }
+
+        return currentFilter;
+      }, {});
+  }
+
+  private convertToFilterMetadata(
+    value: unknown
+  ): FilterMetadata | FilterMetadata[] | undefined {
+    if (value == undefined) {
+      return undefined;
+    }
+
+    if (typeof value == 'string') {
+      return {
+        matchMode: 'contains',
+        value: value,
+      };
+    }
+
+    if (Array.isArray(value)) {
+      return value.map((x) =>
+        this.convertToFilterMetadata(x)
+      ) as FilterMetadata[];
+    }
+
+    return {
+      matchMode: 'equals',
+      value: value,
+    };
+  }
+}

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

@@ -0,0 +1,123 @@
+<div class="v-table">
+  <p-table
+    #table
+    class="v-table"
+    [value]="tableRows"
+    [filters]="filter | primengFilter"
+    [paginator]="showPaginator"
+    [rows]="pageSize"
+    [totalRecords]="total"
+    [loading]="loading"
+    [lazy]="lazy"
+    dataKey="id"
+    [scrollable]="scrollable"
+    [sortMode]="sortMultiple ? 'multiple' : 'single'"
+    [scrollHeight]="'flex'"
+    [selectionMode]="selectionMode"
+    [selection]="tableSelection"
+    [rowsPerPageOptions]="[10, 25, 50, 100]"
+    [expandedRowKeys]="expandedRows"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+    [customSort]="lazy"
+    [multiSortMeta]="sortMeta"
+    [resizableColumns]="true"
+    columnResizeMode="expand"
+    [globalFilterFields]="globalFilterFields"
+    (onPage)="pageChanged($event)"
+    (onSort)="sortChanged($event)"
+    (selectionChange)="selectionChanged($event)"
+    (onLazyLoad)="fireLazyLoad($event)"
+  >
+    <ng-template pTemplate="header">
+      <tr>
+        @if (selectionMode === 'multiple') {
+        <th>
+          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+        </th>
+        } @for (column of tableColumns; track column; let index = $index) {
+        <th
+          *ngIf="column.sortable"
+          pResizableColumn
+          [pSortableColumn]="'row.' + column.id"
+          [style.width]="column.width"
+        >
+          {{ column.headerGetter(column.id, index) }}
+          <p-sortIcon [field]="'row.' + column.id"></p-sortIcon>
+        </th>
+        <th
+          *ngIf="!column.sortable"
+          pResizableColumn
+          [class.v-auto-cell]="column.template"
+          [style.width]="column.width"
+        >
+          {{ column.headerGetter(column.id, index) }}
+        </th>
+        } @if (rowDetailTemplate){
+        <th></th>
+        }
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-row let-expanded="expanded">
+      <tr
+        [pSelectableRow]="row"
+        [pSelectableRowDisabled]="selectionMode !== 'single'"
+        (dblclick)="
+          router.navigate(['./' + row.row[entityKey ?? 'id']], {
+            relativeTo: route
+          })
+        "
+      >
+        @if (selectionMode === 'multiple'){
+        <td>
+          <p-tableCheckbox [value]="row"></p-tableCheckbox>
+        </td>
+        }
+        <td
+          *ngFor="let cd of tableColumns; let index = index"
+          [class]="cd.columnClass!"
+          [class.v-auto-cell]="cd.template"
+        >
+          <ng-container *ngIf="cd.template">
+            <ng-container
+              *ngTemplateOutlet="cd.template; context: { $implicit: row.row }"
+            ></ng-container>
+          </ng-container>
+          <span
+            *ngIf="!row.template"
+            [queryParams]="cd.queryParams ? cd.queryParams : undefined"
+            [routerLink]="cd.routerLink ? cd.routerLink(row.row) : undefined"
+            [innerHTML]="cd.valueGetter(row.row, index)"
+          ></span>
+        </td>
+        @if (rowDetailTemplate){
+        <td>
+          <p-button
+            type="button"
+            pRipple
+            severity="primary"
+            [pRowToggler]="row"
+            [text]="true"
+            [rounded]="true"
+            [plain]="true"
+            [icon]="expanded ? icons.chevronDown : icons.chevronRight"
+          />
+        </td>
+        }
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="rowexpansion" let-row>
+      <tr>
+        <td [attr.colspan]="tableColumns.length + 1">
+          <ng-container
+            class="w-100"
+            *ngTemplateOutlet="
+              expansionTemplate.template;
+              context: { $implicit: row.row }
+            "
+          ></ng-container>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+</div>

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

@@ -0,0 +1,11 @@
+.v-auto-cell { 
+    width: 1%;
+    white-space: nowrap;
+}
+
+.v-table {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}

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

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