@verisoft/ui-primeng 18.7.0 → 18.8.0

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

@@ -1,26 +0,0 @@
-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/src/lib/components/stepper/stepper.component.html

@@ -1,43 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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/src/lib/components/switch/switch.component.html

@@ -1,18 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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/src/lib/components/tab-view/tab-menu.pipe.ts

@@ -1,23 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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/src/lib/components/table/table-filter.pipe.ts

@@ -1,59 +0,0 @@
-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

@@ -1,123 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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();
-  });
-});