@verisoft/ui-primeng 18.0.0 → 18.3.1

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

@@ -22,7 +22,7 @@
           <v-button
             *ngIf="index > 0"
             label="Back"
-            icon="pi pi-arrow-left"
+            [icon]="icons.arrowLeft"
             size="small"
             [outlined]="true"
             (click)="prevCallback.emit()"
@@ -32,7 +32,7 @@
             *ngIf="index < items.length - 1"
             label="Next"
             size="small"
-            icon="pi pi-arrow-right"
+            [icon]="icons.arrowRight"
             iconPos="right"
             (click)="nextCallback.emit()"
           />

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

@@ -1,11 +1,16 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+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({
@@ -22,4 +27,14 @@ 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

@@ -4,7 +4,6 @@
     [label]="label"
     [tooltip]="tooltip"
     [required]="isRequired()"
-    [ngControl]="ngControl"
     [testId]="testId"
     [display]="formDisplay"
   >
@@ -14,6 +13,6 @@
       [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.ts

@@ -14,6 +14,7 @@ import {
 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({
@@ -24,6 +25,7 @@ import { FormFieldComponent } from '../form-field';
     InputSwitchModule,
     ReactiveFormsModule,
     FormFieldComponent,
+    ErrorComponent
   ],
   templateUrl: './switch.component.html',
   styleUrl: './switch.component.scss',

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

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TabViewItemCore } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+
+@Pipe({
+  name: 'tabMenu',
+  pure: 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

@@ -16,5 +16,7 @@ export class TabViewItemComponent {
 
   @Input() icon?: string;
 
+  @Input() disabled?: boolean;
+
   @Input() content?: string;
 }

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

@@ -1,8 +1,7 @@
 <div class="v-tab-view">
   @if (useRouting) {
   <p-tabMenu
-    *ngIf="useRouting"
-    [model]="items"
+    [model]="mergedItems | tabMenu"
     [activeItem]="items[activeIndex]"
     (activeItemChange)="activeItemChanged($event)"
   >
@@ -11,7 +10,7 @@
   } @else {
   <p-tabView (activeIndexChange)="activeItemChanged($event)">
     @for (item of mergedItems; track item; let index = $index) {
-    <p-tabPanel [selected]="activeIndex === index" [header]="item.title">
+    <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) {

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

@@ -7,7 +7,7 @@ import {
   Output,
   QueryList,
 } from '@angular/core';
-import { TabViewCore, TabViewItem } from '@verisoft/ui-core';
+import { TabViewCore, TabViewItemCore } from '@verisoft/ui-core';
 import { MenuItem } from 'primeng/api';
 import { TabViewItemComponent } from './tab-view-item.component';
 
@@ -21,7 +21,7 @@ export class TabViewComponent
   @ContentChildren(TabViewItemComponent)
   children!: QueryList<TabViewItemComponent>;
 
-  @Input() items: TabViewItem[] = [];
+  @Input() items: TabViewItemCore[] = [];
 
   @Input() useRouting = false;
 
@@ -29,7 +29,7 @@ export class TabViewComponent
 
   @Output() activeIndexChange = new EventEmitter<number>();
 
-  mergedItems: TabViewItem[] = [];
+  mergedItems: TabViewItemCore[] = [];
 
   ngAfterContentInit(): void {
     this.mergedItems = [...this.items, ...this.children.toArray()];
@@ -40,7 +40,7 @@ export class TabViewComponent
     if (typeof item === 'number') {
       index = item;
     } else {
-      index = this.items.indexOf(item as TabViewItem);
+      index = this.items.indexOf(item as TabViewItemCore);
     }
 
     if (index != -1) {

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

@@ -4,12 +4,13 @@ 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],
-  declarations: [TabViewComponent, TabViewItemComponent],
+  declarations: [TabViewComponent, TabViewItemComponent, TabMenuPipe],
   exports: [TabViewComponent, TabViewItemComponent],
   providers: [
     { provide: TAB_VIEW_COMPONENT_TOKEN, useExisting: TabViewComponent },

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

@@ -1,2 +1 @@
 export * from './table.component';
-export * from './directives/table-store.directive';

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

@@ -1,183 +1,123 @@
-<div class="verisoft-table">
-  <ng-container *ngIf="(screenSizeService.isMobileBlock | async) === false">
-    <p-table
-      [value]="tableRows"
-      [paginator]="showPaginator"
-      [rows]="pageSize"
-      [totalRecords]="total"
-      [loading]="loading"
-      [lazy]="lazy"
-      dataKey="row.id"
-      [scrollable]="scrollable"
-      [sortMode]="sortMultiple ? 'multiple' : 'single'"
-      [scrollHeight]="scrollHeight"
-      [selectionMode]="selectionMode"
-      [(selection)]="selection"
-      [rowsPerPageOptions]="[10, 25, 50, 100]"
-      [expandedRowKeys]="expandedRows"
-      [showCurrentPageReport]="true"
-      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-      metaKeySelection="true"
-      [customSort]="true"
-      [multiSortMeta]="sortMeta"
-      (onPage)="pageChanged($event)"
-      (onSort)="sortChanged($event)"
-      (selectionChange)="selectionChanged($event)"
-    >
-      <ng-template pTemplate="header">
-        <tr>
-          <th style="width: 4rem">
-            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-          </th>
-          <ng-container *ngFor="let column of tableColumns; let index = index">
-            <th
-              *ngIf="column.sortable"
-              [pSortableColumn]="tableColumns[index].configuration.id"
-              style="min-width: 12.5rem"
-            >
-              {{ column.headerGetter(column.headerName, index) }}
-              <p-sortIcon
-                [field]="column.headerGetter(column.headerName, index)"
-              ></p-sortIcon>
-            </th>
-            <th *ngIf="!column.sortable" style="min-width: 12.5rem">
-              {{ column.headerGetter(column.headerName, index) }}
-            </th>
-          </ng-container>
-          <th></th>
-        </tr>
-      </ng-template>
-      <ng-template pTemplate="body" let-row let-expanded="expanded">
-        <tr
-          [pSelectableRow]="row"
-          (dblclick)="
-            router.navigate(['./' + row.row[entityId]], { relativeTo: route })
-          "
+<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"
         >
-          <td>
-            <p-tableCheckbox
-              (click)="toggleSelection(row.row)"
-              [value]="row"
-            ></p-tableCheckbox>
-          </td>
-          <td *ngFor="let cd of tableColumns; let index = index">
-            <div [class]="row.columnClass!">
-              <ng-container *ngIf="cd.template">
-                <span *ngTemplateOutlet="cd.template; context: row"></span>
-              </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>
-              <div class="verisoft-table-action-buttons">
-                <ng-container *ngIf="actionButtonGroup">
-                  <ng-content></ng-content>
-                </ng-container>
-              </div>
-            </div>
-          </td>
-          <td>
-            <p-button
-              type="button"
-              pRipple
-              severity="primary"
-              [pRowToggler]="row"
-              [text]="true"
-              [rounded]="true"
-              [plain]="true"
-              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
-            />
-          </td>
-        </tr>
-      </ng-template>
-      <ng-template pTemplate="rowexpansion" let-row>
-        <span
-          class="w-100"
-          *ngTemplateOutlet="
-            expansionTemplate.template;
-            context: { $implicit: row.row }
-          "
-        ></span>
-      </ng-template>
-    </p-table>
-  </ng-container>
-  <ng-container *ngIf="screenSizeService.isMobileBlock | async">
-    <p-table
-      [value]="tableRows"
-      [paginator]="showPaginator"
-      [rows]="pageSize"
-      [totalRecords]="total"
-      [loading]="loading"
-      [lazy]="lazy"
-      [scrollable]="scrollable"
-      [sortMode]="sortMultiple ? 'multiple' : 'single'"
-      [scrollHeight]="scrollHeight"
-      [selectionMode]="selectionMode"
-      rowExpandMode="multiple"
-      [dataKey]="'row.id'"
-      [(selection)]="selection"
-      (selectionChange)="selectionChanged($event)"
-      [rowsPerPageOptions]="[10, 25, 50, 100]"
-      (onPage)="pageChanged($event)"
-      [showCurrentPageReport]="true"
-      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-      metaKeySelection="true"
-      [customSort]="true"
-      (onSort)="sortChanged($event)"
-    >
-      <ng-template pTemplate="body" let-row>
-        <tr
-          class="d-block"
-          [pSelectableRow]="row"
-          (dblclick)="
-            router.navigate(['./' + row.row[entityId]], { relativeTo: route })
-          "
+          {{ 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"
         >
-          <td class="px-3 align-content-start">
-            <p-tableCheckbox
-              (click)="toggleSelection(row)"
-              [value]="row"
-            ></p-tableCheckbox>
-          </td>
-          <td
-            *ngFor="let group of keyGroup; let index = index"
-            class="px-4 w-100"
-          >
-            <div
-              class="d-block col-4 flex-grow-1 flex-shrink-1 justify-content-start align-content-start"
-            >
-              <ng-container *ngFor="let cd of group">
-                <div class="py-2">
-                  <span
-                    class="text-default table-mobile-header"
-                    [innerHTML]="
-                      '<b>' + cd.headerGetter(cd.headerName, index) + '</b>'
-                    "
-                  ></span>
-                </div>
-                <div [class]="row.columnClass!">
-                  <ng-container *ngIf="cd.template">
-                    <span *ngTemplateOutlet="cd.template; context: row"></span>
-                  </ng-container>
-                  <span
-                    *ngIf="!row.template"
-                    class="table-mobile-body"
-                    [queryParams]="cd.queryParams ? cd.queryParams : undefined"
-                    [routerLink]="
-                      cd.routerLink ? cd.routerLink(row.row) : undefined
-                    "
-                    [innerHTML]="cd.valueGetter(row.row, index)"
-                  ></span>
-                </div>
-              </ng-container>
-            </div>
-          </td>
-        </tr>
-      </ng-template>
-    </p-table>
-  </ng-container>
+          <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%;
+}