@verisoft/ui-primeng 18.7.0 → 18.8.0

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

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

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

@@ -1,289 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ContentChildren,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  Output,
-  QueryList,
-  SimpleChanges,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import {
-  DEFAULT_SEARCH_LIMIT,
-  LazyLoadEvent,
-  Sort,
-  SortDirection,
-  SortDirectionType,
-} from '@verisoft/core';
-import {
-  ColumnDefinition,
-  ColumnModel,
-  ColumnProvider,
-  RowModel,
-  TABLE_COLUMN_PROVIDER,
-  TABLE_COMPONENT_TOKEN,
-  TableCore,
-  TableSelectionModeType,
-} from '@verisoft/ui-core';
-import { SortMeta } from 'primeng/api';
-import { ButtonModule } from 'primeng/button';
-import { RippleModule } from 'primeng/ripple';
-import { Table, TableLazyLoadEvent, TableModule, TablePageEvent } from 'primeng/table';
-import { Icons } from '../../icons';
-import { TableFilterPipe } from './table-filter.pipe';
-import { convertToFilter } from './table.models';
-
-@Component({
-  selector: 'v-table',
-  standalone: true,
-  imports: [
-    CommonModule,
-    TableModule,
-    RouterModule,
-    ButtonModule,
-    RippleModule,
-    TableFilterPipe,
-  ],
-  providers: [
-    {
-      provide: TABLE_COMPONENT_TOKEN,
-      useExisting: TableComponent,
-    },
-  ],
-  templateUrl: './table.component.html',
-  styleUrl: './table.component.scss',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TableComponent<T>
-  implements AfterViewInit, OnChanges, TableCore<T>
-{
-  @ContentChildren(TABLE_COLUMN_PROVIDER) viewColumns!: QueryList<
-    ColumnProvider<T>
-  >;
-
-  @ViewChild('table') table: Table | undefined;
-
-  @ContentChild('rowDetail', { static: false })
-  rowDetailTemplate!: TemplateRef<any>;
-
-  sorters!: Sort[];
-
-  @Input()
-  data!: T[];
-
-  @Input()
-  total = 0;
-
-  @Input() filter: Partial<T> | undefined;
-
-  @Input()
-  loading!: boolean;
-
-  @Input()
-  scrollable = true;
-
-  @Input()
-  pageSize = DEFAULT_SEARCH_LIMIT;
-
-  @Input()
-  currentPage!: number;
-
-  @Input()
-  showPaginator = true;
-
-  @Input()
-  sortMultiple = false;
-
-  @Input()
-  lazy = false;
-
-  @Input()
-  selectionMode: TableSelectionModeType | undefined;
-
-  @Input()
-  showPageSizePicker = true;
-
-  @Input()
-  entityKey: string | undefined;
-
-  @Input()
-  maximumColumnLength = 0;
-
-  @Input()
-  disableCustomClicks = false;
-
-  @Input()
-  set columns(value: ColumnDefinition<T>[]) {
-    this._columns = value;
-    this.tableColumns = (value ?? []).map((x) => new ColumnModel(x));
-  }
-
-  get columns(): ColumnDefinition<T>[] {
-    return this._columns;
-  }
-
-  @Input() selection: T[] = [];
-
-  @Output()
-  pageSizeChange = new EventEmitter<number>();
-
-  @Output()
-  selectionChange = new EventEmitter<T[]>();
-
-  @Output()
-  pageChange = new EventEmitter<TablePageEvent>();
-
-  @Output()
-  sortChange = new EventEmitter<Sort[]>();
-
-  @Output()
-  lazyLoad = new EventEmitter<LazyLoadEvent>();
-
-  sorted!: boolean;
-
-  cdRef = inject(ChangeDetectorRef);
-
-  tableColumns: ColumnModel<T>[] = [];
-
-  tableRows: RowModel<T>[] = [];
-
-  tableSelection: RowModel<T>[] | RowModel<T> | undefined;
-
-  expandedRows = {};
-
-  expansionTemplate!: { template: TemplateRef<any> };
-
-  sortMeta: SortMeta[] | undefined;
-
-  sortSignleColumn: SortMeta | undefined;
-
-  globalFilterFields: string[] | undefined;
-
-  router = inject(Router);
-
-  route = inject(ActivatedRoute);
-
-  icons = Icons;
-
-  private _columns!: ColumnDefinition<T>[];
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['data']) {
-      this.updateRowModels();
-    }
-
-    if (changes['selection'] || changes['data']) {
-      this.tableSelection = this.selection
-        ? this.tableRows.filter((x) => this.selection.includes(x.row))
-        : undefined;
-    }
-
-    if (changes['filter'] && !changes['filter'].isFirstChange()) {
-        this.globalFilterFields = this.columns.filter(x => x.id).map(x => 'row.' + x.id);
-        setTimeout(() => {
-          this.table?._filter();
-        }, 0);
-    }
-  }
-
-  ngAfterViewInit(): void {
-    if (this.viewColumns?.length) {
-      const templateColumnModel = this.viewColumns
-        .toArray()
-        .map((provider) => new ColumnModel(provider.getDefinition()));
-      this.tableColumns = [...this.tableColumns, ...templateColumnModel];
-    }
-
-    this.expansionTemplate = {
-      template: this.rowDetailTemplate,
-    };
-    this.cdRef.detectChanges();
-  }
-
-  updateRowModels(): void {
-    this.tableRows = (this.data ?? []).map(
-      (x) => new RowModel(x, false, false)
-    );
-  }
-
-  pageChanged(page: TablePageEvent) {
-    this.pageChange.emit(page);
-  }
-
-  pageSizeChanged(pageSize: number) {
-    this.pageSizeChange.emit(pageSize);
-    this.pageSize = pageSize;
-  }
-
-  sortChanged(event: SortMeta | { multisortmeta: SortMeta[] }) {
-    let eventEmiterArg: Sort[];
-    if ((<SortMeta>event).field) {
-      const singleEvent = <SortMeta>event;
-      eventEmiterArg = this.getSorts([singleEvent]) as Sort[];
-      this.sortMeta = undefined;
-      this.sortSignleColumn = singleEvent;
-    } else {
-      const multiEvent = <{ multisortmeta: SortMeta[] }>event;
-      eventEmiterArg = this.getSorts(multiEvent.multisortmeta) as Sort[];
-      this.sortMeta = multiEvent.multisortmeta;
-      this.sortSignleColumn = undefined;
-    }
-
-    this.sortChange.emit(eventEmiterArg);
-  }
-
-  selectionChanged(event: RowModel<T>[] | RowModel<T>) {
-    this.tableSelection = event;
-    if (this.selectionMode) {
-      const eventArgArray = Array.isArray(event) ? event : [event];
-      const selection = event ? eventArgArray.map((x) => x.row) : [];
-      this.selectionChange.emit(selection);
-    }
-  }
-
-  fireLazyLoad(event: TableLazyLoadEvent) {
-    if (this.lazy) {
-      const sort = this.sortSignleColumn
-        ? this.getSorts([this.sortSignleColumn])
-        : this.sortMeta
-        ? this.getSorts(this.sortMeta)
-        : undefined;
-      const lazyLoadEvent: LazyLoadEvent = {
-        sort,
-        offset: event.first ?? 0,
-        limit: event.rows ?? this.pageSize,
-        filter: convertToFilter(event.filters),
-      };
-
-      this.lazyLoad.emit(lazyLoadEvent);
-    }
-  }
-
-  private removePrefix(input: string, prefix: string): string {
-    return input.startsWith(prefix) ? input.slice(prefix.length) : input;
-  }
-
-  private convertToSortDirection(value: number): SortDirectionType {
-    return value === 1 ? SortDirection.asc : SortDirection.desc;
-  }
-
-  private getSorts(value: SortMeta[] | undefined) {
-    return value
-      ? value.map((x: SortMeta) => ({
-          field: this.removePrefix(x.field, 'row.'),
-          direction: this.convertToSortDirection(x.order),
-        }))
-      : undefined;
-  }
-}

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

@@ -1,26 +0,0 @@
-import { FilterMetadata } from 'primeng/api';
-
-export function convertToFilter<T>(
-  value:
-    | {
-        [s: string]: FilterMetadata | FilterMetadata[] | undefined;
-      }
-    | Partial<T>
-    | undefined
-): Partial<T> | undefined {
-  if (value == undefined) {
-    return undefined;
-  }
-
-  const filter: { [key: string]: unknown } = {};
-  Object.keys(value).map((key) => {
-    const filterValue = (value as { [s: string]: unknown })[key];
-    if (filterValue != undefined && typeof filterValue === 'object') {
-      filter[key] = (filterValue as FilterMetadata).value;
-    } else {
-      filter[key] = filterValue;
-    }
-  });
-
-  return filter as Partial<T>;
-}

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

@@ -1,40 +0,0 @@
-<div class="v-textarea">
-  <ng-container *ngIf="!floatLabel">
-    <v-form-field
-      [label]="label"
-      [tooltip]="tooltip"
-      [required]="isRequired()"
-      [display]="formDisplay"
-    >
-      <textarea
-        class="flex-grow-1"
-        pInputTextarea
-        [rows]="rows"
-        [cols]="cols"
-        [formControl]="formControl"
-        [placeholder]="placeholder"
-        [required]="isRequired()"
-        [readOnly]="readonly"
-        [autoResize]="autoResize"
-      ></textarea>
-    </v-form-field>
-    <v-validation-message [ngControl]="ngControl"></v-validation-message>
-  </ng-container>
-  <ng-container *ngIf="floatLabel">
-    <p-floatLabel>
-      <textarea
-        class="flex-grow-1"
-        pInputTextarea
-        [rows]="rows"
-        [cols]="cols"
-        [id]="inputId"
-        [formControl]="formControl"
-        [placeholder]="placeholder"
-        [required]="isRequired()"
-        [readOnly]="readonly"
-        [autoResize]="autoResize"
-      ></textarea>
-      <label [for]="inputId">{{ floatLabel }}</label>
-    </p-floatLabel>
-  </ng-container>
-</div>

package/src/lib/components/textarea/textarea.component.scss

@@ -1,5 +0,0 @@
-.v-textarea {
-  textarea {
-    line-height: 1.75rem !important;
-  }
-}

package/src/lib/components/textarea/textarea.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TextareaComponent } from './textarea.component';
-
-describe('TextareaComponent', () => {
-  let component: TextareaComponent;
-  let fixture: ComponentFixture<TextareaComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TextareaComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TextareaComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,98 +0,0 @@
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { TextareaComponent } from './textarea.component';
-
-const meta: Meta<TextareaComponent> = {
-  component: TextareaComponent,
-  title: 'TextareaComponent',
-  decorators: [
-    moduleMetadata({
-      imports: [ReactiveFormsModule],
-    }),
-  ],
-};
-export default meta;
-type Story = StoryObj<TextareaComponent>;
-const formGroup = new FormGroup({
-  textarea: new FormControl(''),
-});
-
-export const Primary: Story = {
-  render: (args: any) => ({
-    props: {
-      ...args,
-      formGroup,
-    },
-    template: `
-    <form [formGroup]="formGroup">
-      <v-textarea
-        formControlName="textarea"
-        [label]="label"
-        [rows]="rows"
-        [cols]="cols"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [required]="required"
-        [tooltip]="tooltip"
-        [placeholder]="placeholder"
-        [testId]="testId"
-        [formDisplay]="formDisplay"
-        [autoResize]="autoResize"
-      ></v-textarea>
-    </form>
-    `,
-  }),
-  args: {
-    label: 'Description',
-    rows: 5,
-    cols: 30,
-    formDisplay: 'block',
-    autoResize: false,
-    required: false,
-    disabled: false,
-    readonly: false,
-    placeholder:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    testId: 'testId',
-    tooltip: 'This is a tooltip lorem ipsum',
-  },
-  argTypes: {
-    formDisplay: {
-      options: ['block', 'flex'],
-      control: { type: 'radio' },
-      description:
-        'Defines if the **TextareaComponent** is in `flex` or `block` display mode',
-    },
-    label: {
-      description:
-        'Label shown on the (top)left side of the **TextareaComponent** input',
-    },
-    rows: {
-      description: 'Number of `rows` of the **TextareaComponent** input',
-    },
-    cols: {
-      description: 'Number of `columns` of the **TextareaComponent** input',
-    },
-    tooltip: { description: 'Tooltip text of the **TextareaComponent**' },
-    required: {
-      description: 'Defines if the **TextareaComponent** is `required`',
-    },
-    autoResize: {
-      description:
-        'Defines if the **TextareaComponent** should be auto-resized',
-    },
-    disabled: {
-      description: 'Defines if the **TextareaComponent** is `disabled`',
-    },
-    readonly: {
-      description: 'Defines if the **TextareaComponent** is `readonly`',
-    },
-    testId: { description: 'Test ID of the **TextareaComponent**' },
-    placeholder: {
-      description: 'Placeholder text for the **TextareaComponent**',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};

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

@@ -1,64 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  Optional,
-  Self,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  NgControl,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import { BaseFormInputComponent, BaseInputControls, TEXTAREA_COMPONENT_TOKEN, TextareaCore } from '@verisoft/ui-core';
-import { FloatLabelModule } from 'primeng/floatlabel';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-import { ErrorComponent } from '../errors';
-import { FormFieldComponent } from '../form-field/form-field.component';
-
-@Component({
-  selector: 'v-textarea',
-  standalone: true,
-  imports: [
-    CommonModule,
-    InputTextareaModule,
-    ReactiveFormsModule,
-    FormFieldComponent,
-    FloatLabelModule,
-    ErrorComponent
-  ],
-  templateUrl: './textarea.component.html',
-  styleUrl: './textarea.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: BaseInputControls,
-      useExisting: TextareaComponent,
-    },
-    {
-      provide: TEXTAREA_COMPONENT_TOKEN,
-      useExisting: TextareaComponent,
-    },
-  ],
-})
-export class TextareaComponent
-  extends BaseFormInputComponent
-  implements ControlValueAccessor, TextareaCore
-{
-  @Input()
-  rows = 5;
-
-  @Input()
-  cols = 30;
-
-  @Input()
-  autoResize = false;
-
-  @Input()
-  floatLabel: string | undefined;
-
-  constructor(@Optional() @Self() ngControl: NgControl) {
-    super(ngControl);
-  }
-}

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

@@ -1,83 +0,0 @@
-<div class="v-text-field">
-  <ng-container *ngIf="!floatLabel && label; else floatLabelInput">
-    <v-form-field
-      class="w-100"
-      [label]="label"
-      [tooltip]="tooltip"
-      [required]="isRequired()"
-      [testId]="testId"
-      [display]="formDisplay"
-    >
-      <span
-        class="w-100 flex-grow-1"
-        [ngClass]="{ 'p-input-icon-right': type === 'search' }"
-      >
-        <input
-          pInputText
-          [id]="inputId"
-          [formControl]="formControl"
-          [type]="type === 'search' ? 'text' : type"
-          class="w-100 flex-grow-1 v-text-field"
-          [required]="isRequired()"
-          [readOnly]="readonly"
-          [title]="label"
-          [placeholder]="placeholder ? placeholder : ''"
-          [ngClass]="{
-            'p-inputtext-sm': size === 'small',
-            'p-inputtext-lg': size === 'large'
-          }"
-        />
-        <ng-container *ngIf="type === 'search'">
-          <i
-            class="pi ms-2 v-text-field__icon"
-            [ngStyle]="{
-              cursor: ngControl && ngControl.value ? 'pointer' : 'default'
-            }"
-            [ngClass]="{
-              'pi-search': ngControl && !ngControl.value,
-              'pi-times': ngControl && ngControl.value,
-            }"
-            (click)="ngControl && ngControl.value ? ngControl.reset() : null"
-          ></i>
-        </ng-container>
-      </span>
-    </v-form-field>
-    <v-validation-message [ngControl]="ngControl"></v-validation-message>
-  </ng-container>
-  <ng-template #floatLabelInput>
-    <span
-      class="w-100 flex-grow-1"
-      [ngClass]="{ 'p-input-icon-right': type === 'search' }"
-    >
-      <p-floatLabel>
-        <input
-          pInputText
-          type="text"
-          [id]="inputId"
-          class="w-100 flex-grow-1"
-          [required]="isRequired()"
-          [formControl]="formControl"
-          [placeholder]="placeholder ? placeholder : ''"
-          [ngClass]="{
-            'p-inputtext-sm': size === 'small',
-            'p-inputtext-lg': size === 'large'
-          }"
-        />
-        <label [for]="inputId" class="v-text-field__label">{{ label }}</label>
-      </p-floatLabel>
-      <ng-container *ngIf="type === 'search'">
-        <i
-          class="pi ms-2 v-text-field__icon"
-          [ngStyle]="{
-            cursor: ngControl && ngControl.value ? 'pointer' : 'default'
-          }"
-          [ngClass]="{
-            'pi-search': ngControl && !ngControl.value,
-            'pi-times': ngControl && ngControl.value,
-          }"
-          (click)="ngControl && ngControl.value ? ngControl.reset() : null"
-        ></i>
-      </ng-container>
-    </span>
-  </ng-template>
-</div>