@verisoft/ui-primeng 18.0.0

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

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  StepperCore,
+  STEPPER_COMPONENT_TOKEN,
+  StepperItem,
+} from '@verisoft/ui-core';
+import { StepperModule } from 'primeng/stepper';
+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[];
+}

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,19 @@
+<div class="v-switch d-flex align-items-center">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [ngControl]="ngControl"
+    [testId]="testId"
+    [display]="formDisplay"
+  >
+    <p-inputSwitch
+      [formControl]="formControl"
+      [required]="isRequired()"
+      [title]="label"
+      [readonly]="readonly"
+      [inputId]="id"
+    />
+  </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 { 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 { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-switch',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputSwitchModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+  ],
+  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,3 @@
+export * from './tab-view.component';
+export * from './tab-view-item.component';
+export * from './tab-view.module';

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

@@ -0,0 +1,20 @@
+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() content?: string;
+}

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

@@ -0,0 +1,24 @@
+<div class="v-tab-view">
+  @if (useRouting) {
+  <p-tabMenu
+    *ngIf="useRouting"
+    [model]="items"
+    [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">
+      @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,50 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+} from '@angular/core';
+import { TabViewCore, TabViewItem } from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+import { TabViewItemComponent } from './tab-view-item.component';
+
+@Component({
+  selector: 'v-tab-view',
+  templateUrl: './tab-view.component.html',
+})
+export class TabViewComponent 
+  implements AfterContentInit, TabViewCore
+{
+  @ContentChildren(TabViewItemComponent)
+  children!: QueryList<TabViewItemComponent>;
+
+  @Input() items: TabViewItem[] = [];
+
+  @Input() useRouting = false;
+
+  @Input() activeIndex = 0;
+
+  @Output() activeIndexChange = new EventEmitter<number>();
+
+  mergedItems: TabViewItem[] = [];
+
+  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 TabViewItem);
+    }
+
+    if (index != -1) {
+      this.activeIndexChange.emit(index);
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+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 { TabViewItemComponent } from './tab-view-item.component';
+import { TabViewComponent } from './tab-view.component';
+
+@NgModule({
+  imports: [RouterOutlet, TabMenuModule, PrimeTabViewModule, NgTemplateOutlet],
+  declarations: [TabViewComponent, TabViewItemComponent],
+  exports: [TabViewComponent, TabViewItemComponent],
+  providers: [
+    { provide: TAB_VIEW_COMPONENT_TOKEN, useExisting: TabViewComponent },
+  ],
+})
+export class TabViewModule {}

package/src/lib/components/table/directives/table-store.directive.ts

@@ -0,0 +1,61 @@
+import { AfterViewInit, Directive, inject, Input, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { DatasourceType } from '@verisoft/core';
+import {
+  createGetPageTableAction,
+} from '@verisoft/store';
+import { UnsubscribeComponent } from '@verisoft/ui-core';
+import { TableComponent } from '../table.component';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-table[tableStore]',
+  exportAs: 'useTableStore',
+  standalone: true,
+})
+export class TableStoreDirective<T>
+  extends UnsubscribeComponent
+  implements OnInit, AfterViewInit
+{
+  store = inject(Store);
+  table = inject(TableComponent, { self: true });
+
+  @Input() autoBind = false;
+
+  @Input() ngrxFeatureKey?: string;
+
+  @Input({ required: true }) tableName!: string;
+
+  @Input() debounceTime = 0;
+  
+  @Input() defaultFilter!: Partial<any>;
+  
+  @Input() datasource?: DatasourceType<T>;
+
+  ngOnInit(): void {
+    if (!this.tableName) {
+      throw new Error('Property tableName must be defined.');
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.autoBind) {
+      this.submit(true);
+    }
+  }
+
+  submit(resetPagination: boolean) {
+    const filter = {
+      ...this.defaultFilter,
+    };
+    const sorters = this.table.sorters;
+    this.store.dispatch(
+      createGetPageTableAction(this.tableName)({
+        page: resetPagination ? 0 : this.table.currentPage,
+        size: this.table.pageSize,
+        filter: filter,
+        sort: sorters,
+      })
+    );
+  }
+}

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

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

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

@@ -0,0 +1,183 @@
+<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 })
+          "
+        >
+          <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 })
+          "
+        >
+          <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>
+</div>

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();
+  });
+});

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { DEFAULT_SEARCH_LIMIT } from '@verisoft/core';
+import { TableComponent } from './table.component';
+
+const meta: Meta<TableComponent<any>> = {
+  component: TableComponent,
+  title: 'TableComponent',
+};
+export default meta;
+type Story = StoryObj<TableComponent<any>>;
+
+export const Primary: Story = {
+  args: {
+    tableRepository: '',
+    total: 0,
+    loading: false,
+    scrollHeight: '100%',
+    scrollable: true,
+    pageSize: DEFAULT_SEARCH_LIMIT,
+    currentPage: 0,
+    showPaginator: true,
+    sortMultiple: false,
+    lazy: true,
+    multipleSelect: false,
+    autoIndex: false,
+    showPageSizePicker: true,
+    entityId: '',
+    columnDefinitions: [],
+  },
+};
+
+export const Heading: Story = {
+  args: {
+    tableRepository: '',
+    total: 0,
+    loading: false,
+    scrollHeight: '100%',
+    scrollable: true,
+    pageSize: DEFAULT_SEARCH_LIMIT,
+    currentPage: 0,
+    showPaginator: true,
+    sortMultiple: false,
+    lazy: true,
+    multipleSelect: false,
+    autoIndex: false,
+    showPageSizePicker: true,
+    entityId: '',
+    columnDefinitions: [],
+  },
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/verisoft-table works!/gi)).toBeTruthy();
+  },
+};