@verisoft/ui-primeng 20.1.0 → 20.1.2

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

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

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

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

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

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

@@ -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,39 +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',
-    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

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

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-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

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

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

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

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

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

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,127 +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) {
-          @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>