@verisoft/ui-primeng 20.0.0 → 20.1.1

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

@@ -0,0 +1,70 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { MessageService } from 'primeng/api';
+import { ToastModule } from 'primeng/toast';
+import { ButtonComponent } from '../button/button.component';
+import { SnackbarService } from './services/snackbar.service';
+import { SnackbarComponent } from './snackbar.component';
+
+const meta: Meta<SnackbarComponent> = {
+  component: SnackbarComponent,
+  title: 'SnackbarComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonComponent, BrowserAnimationsModule, ToastModule],
+      providers: [
+        MessageService,
+        SnackbarService,
+        {
+          provide: ActivatedRoute,
+          useValue: {},
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<SnackbarComponent>;
+const messageService = new MessageService();
+const snackbarService = new SnackbarService(messageService);
+
+export const Primary: Story = {
+  render: () => {
+    return {
+      props: {
+        showSuccess: () => snackbarService.showSuccess('Snackbar works!'),
+        showInfo: () => snackbarService.showInfo('Snackbar works!'),
+        showWarn: () => snackbarService.showWarn('Snackbar works!'),
+        showError: () => snackbarService.showError('Snackbar works!'),
+      },
+      template: `
+      <v-snackbar class="mt-2" />
+        <div class="d-flex gap-3 mt-2">
+          <v-button
+            label="Show Success"
+            severity="success"
+            (click)='showSuccess()'
+          ></v-button>
+          <v-button
+            label="Show Info"
+            severity="info"
+            (click)='showInfo()'
+          ></v-button>
+          <v-button
+            label="Show Warn"
+            severity="warn"
+            (click)='showWarn()'
+          ></v-button>
+          <v-button
+            label="Show Error"
+            severity="danger"
+            (click)='showError()'
+          ></v-button>
+        </div>
+      `,
+    };
+  },
+  args: {},
+};

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

@@ -0,0 +1,25 @@
+
+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',
+    imports: [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/src/lib/components/stepper/index.ts

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

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

@@ -0,0 +1,35 @@
+<div class="v-stepper">
+  <p-stepper>
+    <p-step-list>
+      @for(item of items; track item; let idx = $index) {
+        <p-step [value]="idx">{{ item.header }}</p-step>
+      }
+    </p-step-list>
+    <p-step-panels>
+      @for(item of items; track item; let idx = $index) {
+        <p-step-panel [value]="idx">
+          <ng-template pTemplate="content" let-nextCallback="nextCallback" let-prevCallback="prevCallback"
+            let-index="index">
+            @if (item.template && item.template.elementRef) {
+            <ng-template *ngTemplateOutlet="
+              item.template;
+              context: { item: item, index: index }
+            " />
+            }
+            <div class="d-flex pt-4 justify-content-between">
+              @if (index > 0) {
+                <v-button label="Back" [icon]="icons.arrowLeft" size="small" [outlined]="true"
+                  (click)="prevCallback.emit()" />
+              }
+
+              @if (index < items.length - 1) {
+                <v-button label="Next" size="small" [icon]="icons.arrowRight"
+                  iconPos="right" (click)="nextCallback.emit()" />
+              }
+            </div>
+          </ng-template>
+        </p-step-panel>
+      }
+    </p-step-panels>
+  </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,39 @@
+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',
+    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/src/lib/components/switch/index.ts

@@ -0,0 +1 @@
+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-toggle-switch
+      [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,52 @@
+
+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 { ToggleSwitch } from 'primeng/toggleswitch';
+import { v4 as uuidv4 } from 'uuid';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+    selector: 'v-switch',
+    imports: [
+    ToggleSwitch,
+    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/src/lib/components/tab-view/index.ts

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

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,41 @@
+<div class="v-tab-view">
+  @if (useRouting) {
+  <p-tabs [value]="activeIndex">
+    <p-tablist>
+      @for(tab of mergedItems; track tab.url; let index = $index){
+      <p-tab [value]="index" [routerLink]="tab.url" (valueChange)="activeItemChanged(index)">
+        @if (tab.icon) {
+        <i [class]="tab.icon"></i>
+        }
+        <span>{{ tab.title }}</span>
+      </p-tab>
+      }
+    </p-tablist>
+  </p-tabs>
+  <router-outlet></router-outlet>
+  } @else {
+  <p-tabs [value]="activeIndex">
+    <p-tablist>
+      @for (tab of mergedItems; track tab; let index = $index) {
+      <p-tab [value]="index" (valueChange)="activeItemChanged(index)">
+        @if (tab.icon) {
+        <i [class]="tab.icon"></i>
+        }
+        <span>{{ tab.title }}</span>
+      </p-tab>
+      }
+    </p-tablist>
+    <p-tabpanels>
+      @for (tab of mergedItems; track tab; let index = $index) {
+      <p-tabpanel [value]="index">
+        @if (tab.contentTemplate){
+        <ng-container *ngTemplateOutlet="tab.contentTemplate"></ng-container>
+        } @else if (tab.content) {
+        {{ tab.content }}
+        }
+      </p-tabpanel>
+      }
+    </p-tabpanels>
+  </p-tabs>
+  }
+</div>

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

@@ -0,0 +1,55 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+} from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { TAB_VIEW_COMPONENT_TOKEN, TabViewCore, TabViewItemCore } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+import { TabsModule } from 'primeng/tabs';
+import { TabViewItemComponent } from './tab-view-item.component';
+@Component({
+  selector: 'v-tab-view',
+  templateUrl: './tab-view.component.html',
+  imports: [RouterOutlet, RouterLink, TabsModule, NgTemplateOutlet],
+  providers: [
+    { provide: TAB_VIEW_COMPONENT_TOKEN, useExisting: TabViewComponent }],
+
+})
+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/table/index.ts

@@ -0,0 +1 @@
+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,127 @@
+<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) {
+          @if (column.sortable) {
+            <th
+              pResizableColumn
+              [pSortableColumn]="'row.' + column.id"
+              [style.width]="column.width"
+              >
+              {{ column.headerGetter(column.id, index) }}
+              <p-sortIcon [field]="'row.' + column.id"></p-sortIcon>
+            </th>
+          }
+          @if (!column.sortable) {
+            <th
+              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>
+        }
+        @for (cd of tableColumns; track cd; let index = $index) {
+          <td
+            [class]="cd.columnClass!"
+            [class.v-auto-cell]="cd.template"
+            >
+            @if (cd.template) {
+              <ng-container
+                *ngTemplateOutlet="cd.template; context: { $implicit: row.row }"
+              ></ng-container>
+            }
+            @if (!row.template) {
+              <span
+                [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>