@tacdaed/fragments 1.0.0-beta.0 → 1.0.0-beta.2

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

@@ -0,0 +1,117 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TableComponent } from './table.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { EnumDirectionSortTable } from './table.enum';
+import { IPaginationOutput } from '../pagination/pagination.interface';
+import { IConfigTable } from './table.interface';
+
+type RowItem = { id: number; name: string };
+
+describe('TableComponent', () => {
+  let fixture: ComponentFixture<TableComponent<RowItem>>;
+  let component: TableComponent<RowItem>;
+
+  const data: RowItem[] = [
+    { id: 1, name: 'Alice' },
+    { id: 2, name: 'Bob' }
+  ];
+
+  const baseConfig: IConfigTable<RowItem> = {
+    tTitleBar: { title: 'Users' },
+    tCaption: { srOnly: 'Users table' },
+    tSort: {
+      defaultDirection: EnumDirectionSortTable.asc,
+      defaultFieldOrder: 'name'
+    },
+    tHead: {
+      columns: [
+        { columnId: 'name', fieldLabel: 'Name', fieldOrder: 'name' }
+      ]
+    },
+    tBody: {
+      uniqueField: 'id',
+      columns: [
+        {
+          cells: {
+            fieldArrayPosition: ['name']
+          }
+        }
+      ],
+      data: [...data]
+    },
+    tPagination: {
+      page: 1,
+      pageSize: 2,
+      order: 'name',
+      direction: EnumDirectionSortTable.asc,
+      totalItems: data.length,
+      fullData: [...data],
+      hasScrollTop: false
+    }
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TableComponent, RouterTestingModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TableComponent<RowItem>);
+    component = fixture.componentInstance;
+    component.configTable = structuredClone(baseConfig);
+  });
+
+  it('renders rows from data', () => {
+    fixture.detectChanges();
+
+    const rows = fixture.debugElement.queryAll(By.css('tbody tr'));
+    expect(rows.length).toBe(2);
+  });
+
+  it('applies row size classes', () => {
+    component.rowSize = 'small';
+
+    fixture.detectChanges();
+
+    const table = fixture.debugElement.query(By.css('table')).nativeElement as HTMLTableElement;
+    expect(table.classList).toContain('frg-table--row-small');
+  });
+
+  it('updates pagination when page changes', () => {
+    fixture.detectChanges();
+
+    const event: IPaginationOutput<RowItem> = {
+      page: 2,
+      pagedData: [{ id: 3, name: 'Carol' }]
+    };
+
+    component.updateCurrentPage(event);
+
+    expect(component.configTable.tPagination.page).toBe(2);
+    expect(component.configTable.tBody.data).toEqual([{ id: 3, name: 'Carol' }]);
+  });
+
+  it('toggles sorting direction on orderBy', () => {
+    fixture.detectChanges();
+
+    component.orderBy('name');
+
+    expect(component.configTable.tPagination.order).toBe('name');
+    expect(component.configTable.tPagination.direction).toBe(EnumDirectionSortTable.desc);
+    expect(component.configTable.tPagination.fullData?.length).toBe(2);
+  });
+
+  it('emits row click events when configured', () => {
+    const clickSpy = jasmine.createSpy('clickEvent');
+    component.configTable.tBody.rowClick = {
+      id: 'row-click',
+      behaviourAction: { clickEvent: clickSpy }
+    };
+
+    fixture.detectChanges();
+
+    component.handleRowClick(new MouseEvent('click'), data[0]);
+
+    expect(clickSpy).toHaveBeenCalledWith(data[0]);
+  });
+});

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

@@ -0,0 +1,215 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  inject,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { FragmentsTooltipDirective } from '../../directives/tooltip/tooltip.directive';
+import { SafeHtmlPipe } from '../../pipes/safe-html.pipe';
+import { TBaseSize, TBaseStyle } from '../../types/base.types';
+import { generateId } from '../../utils/common.utils';
+import { IPaginationOutput } from '../pagination/pagination.interface';
+import { SmallPaginationComponent } from '../pagination/small-pagination/small-pagination.component';
+import { TitleBarComponent } from '../title-bar/title-bar.component';
+import { ButtonComponent } from '../button/button.component';
+import { EnumDirectionSortTable } from './table.enum';
+import { sortTable } from './table.function';
+import {
+  IConfigTable,
+  ITBodyCell,
+  ITPagination,
+} from './table.interface';
+import {
+  DynamicPipe,
+  FieldArrayPositionPipe,
+  TypeOfArrayPipe,
+} from './table.pipe';
+
+@Component({
+  selector: 'frg-table',
+  imports: [
+    CommonModule,
+    RouterLink,
+    TitleBarComponent,
+    SmallPaginationComponent,
+    FieldArrayPositionPipe,
+    TypeOfArrayPipe,
+    SafeHtmlPipe,
+    DynamicPipe,
+    FragmentsTooltipDirective,
+    ButtonComponent,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss']
+})
+export class TableComponent<T> implements OnInit {
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  /**
+   * Configuration of the table
+   *
+   * @see IConfigTable
+   */
+  @Input() configTable: IConfigTable<T> = {} as IConfigTable<T>;
+  /**
+   * Style type of the table
+   */
+  @Input() styleType: TBaseStyle = 'tertiary';
+  /**
+   * Size of table rows
+   */
+  @Input() rowSize: TBaseSize = 'medium';
+
+  /**
+   * Event emitted to reload the table data
+   *
+   * @see ITPagination
+   */
+  @Output() reloadTableEvent = new EventEmitter<{
+    pagination: ITPagination<T>;
+    reload?: boolean;
+  }>();
+  /**
+   * Reference to the table header element
+   */
+  @ViewChild('tableHead', { read: ElementRef })
+    tableHead!: ElementRef<HTMLElement>;
+
+  /**
+   * Enum for sorting direction
+   * @see EnumDirectionSortTable
+   */
+  EnumDirectionSortTable: typeof EnumDirectionSortTable =
+    EnumDirectionSortTable;
+
+  /**
+   * ID of the first table row
+   */
+  idFirstTr = '';
+  /**
+   * Count of sorting actions performed
+   */
+  countSorting = 0;
+  /**
+   * Cached full data of the table
+   */
+  fullDataCached: T[] = [];
+
+  ngOnInit(): void {
+    this.idFirstTr = generateId('firstTr');
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Update the current page of the table
+   * @param event Pagination output event
+   * @see IPaginationOutput
+   */
+  updateCurrentPage(event: IPaginationOutput<T>): void {
+    this.configTable.tPagination.page = event.page;
+    this.configTable.tBody.data = event.pagedData;
+
+    if (this.configTable.tPagination.hasScrollTop && this.tableHead) {
+      const element = this.tableHead.nativeElement;
+      const elementRect = element.getBoundingClientRect();
+      const offsetTop = elementRect.top + window.scrollY;
+      const elementHeight = elementRect.height;
+      const centerScrollPosition =
+        offsetTop - window.innerHeight / 2 + elementHeight / 2;
+
+      window.scrollTo({ top: centerScrollPosition, behavior: 'smooth' });
+    }
+
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Order the table by the specified field
+   * @param fieldOrder Field or fields to order by
+   */
+  orderBy(fieldOrder: string | string[]): void {
+    if (this.configTable.tPagination.order !== fieldOrder) {
+      this.countSorting = 0;
+      this.configTable.tPagination.direction = EnumDirectionSortTable.asc;
+    }
+
+    this.countSorting = this.countSorting + 1;
+
+    if (this.countSorting < 3) {
+      this.configTable.tPagination.order = fieldOrder;
+      this.configTable.tPagination.direction =
+        this.configTable.tPagination.direction === EnumDirectionSortTable.asc
+          ? EnumDirectionSortTable.desc
+          : EnumDirectionSortTable.asc;
+    } else if (
+      this.configTable.tPagination.order ===
+      this.configTable.tSort?.defaultFieldOrder
+    ) {
+      this.countSorting = 0;
+      this.configTable.tPagination.order = fieldOrder;
+      this.configTable.tPagination.direction =
+        this.configTable.tPagination.direction === EnumDirectionSortTable.asc
+          ? EnumDirectionSortTable.desc
+          : EnumDirectionSortTable.asc;
+    } else {
+      this.countSorting = 0;
+      this.configTable.tPagination.order =
+        this.configTable.tSort?.defaultFieldOrder;
+      this.configTable.tPagination.direction =
+        this.configTable.tSort?.defaultDirection;
+    }
+
+    const { fullData, direction } = this.configTable.tPagination;
+    const sortedList = sortTable<T>(
+      fullData ?? [],
+      direction ?? EnumDirectionSortTable.asc,
+      this.configTable.tPagination.order ?? fieldOrder
+    );
+    this.configTable.tPagination.totalItems = sortedList.length;
+    this.configTable.tPagination.fullData = [...sortedList];
+
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Handle the click event on a table row
+   * @param _event Click event
+   * @param item Data item associated with the clicked row
+   */
+  handleRowClick(_event: Event, item: T): void {
+    if (
+      this.configTable.tBody.rowClick &&
+      this.configTable.tBody.rowClick.behaviourAction &&
+      this.configTable.tBody.rowClick.behaviourAction.clickEvent
+    )
+      this.configTable.tBody.rowClick?.behaviourAction.clickEvent(item);
+  }
+
+  /**
+   * Handle the click event on a cell icon
+   * @param event Mouse event
+   * @param cell Table body cell configuration
+   * @param item Data item associated with the cell
+   * @see ITBodyCell
+   */
+  handleIconClick(cell: ITBodyCell, item: T): void {
+    if (cell?.icon?.action.behaviourAction) {
+      if (
+        cell.icon.action.behaviourAction.clickEvent &&
+        cell.icon.action.disabled &&
+        !cell.icon.action.disabled(item)
+      ) {
+        cell.icon.action.behaviourAction.clickEvent(item);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+export enum EnumDirectionSortTable {
+  asc,
+  desc,
+}

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

@@ -0,0 +1,47 @@
+import { EnumDirectionSortTable } from './table.enum';
+
+export function sortTable<T>(
+  fullData: T[],
+  direction: EnumDirectionSortTable,
+  fieldOrder: string | string[]
+): T[] {
+  const orderFields = Array.isArray(fieldOrder)
+    ? fieldOrder.join('.')
+    : fieldOrder;
+
+  return fullData.sort((a: T, b: T) => {
+    const aValue = getField(a, orderFields);
+    const bValue = getField(b, orderFields);
+    return direction === EnumDirectionSortTable.asc
+      ? compareValues(aValue, bValue)
+      : compareValues(bValue, aValue);
+  });
+}
+
+function getField(obj: unknown, path: string): unknown {
+  return path
+    .split('.')
+    .reduce((value, field) => (value as Record<string, unknown>)?.[field], obj);
+}
+
+function compareValues(a: unknown, b: unknown): number {
+  if (a === b) return 0;
+  if (a === undefined || a === null) return -1;
+  if (b === undefined || b === null) return 1;
+
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === 'string' && typeof b === 'string') {
+    const dateA = Date.parse(a);
+    const dateB = Date.parse(b);
+    if (!isNaN(dateA) && !isNaN(dateB)) return dateA - dateB;
+
+    const numA = parseFloat(a);
+    const numB = parseFloat(b);
+    if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+
+    return a.localeCompare(b);
+  }
+
+  return -1;
+}

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

@@ -0,0 +1,143 @@
+import { FormControl } from '@angular/forms';
+import { TooltipPosition } from '../../directives/tooltip/tooltip.type';
+import {
+  ArrayOneOrMore,
+  GenericFunction,
+  TBehaviourAction,
+} from '../../types/common.types';
+import { EnumDirectionSortTable } from './table.enum';
+import { TIconPosition, TInputType } from './table.type';
+
+export interface IConfigTable<T> {
+  tTitleBar?: ITTitleBar;
+  tCaption: ITCaption;
+  tSort?: ITSort;
+  tHead: ITHead;
+  tBody: ITBody<T>;
+  tPagination: ITPagination<T>;
+}
+
+export interface ITTitleBar {
+  title: string;
+}
+
+export interface ITTitleBarFilter {
+  id: string;
+  label: string;
+  placeholder: string;
+  type?: TInputType;
+  control: FormControl;
+}
+
+export interface ITTitleBarSearch {
+  id: string;
+  label: string;
+  placeholder: string;
+  type?: TInputType;
+  control: FormControl<string | null>;
+}
+
+export interface ITCaption {
+  srOnly: string;
+}
+
+export interface ITSort {
+  defaultDirection: EnumDirectionSortTable;
+  defaultFieldOrder: string | string[];
+}
+
+export interface ITPagination<T> {
+  page?: number;
+  pageSize?: number;
+  order?: string | string[];
+  direction?: EnumDirectionSortTable;
+  totalItems?: number;
+  fullData?: T[];
+  hasScrollTop?: boolean;
+  showPagination?: boolean;
+  hasElipsisPages?: boolean;
+}
+
+export interface ITHead {
+  columns: ITHeadColumn[];
+  action?: ITHeadAction;
+}
+
+export interface ITHeadColumn {
+  columnId: string;
+  fieldOrder?: string;
+  fieldLabel: string;
+  customClasses?: string | string[];
+}
+
+export interface ITHeadAction {
+  label: string;
+  customClass?: string;
+}
+
+export interface ITBody<T> {
+  uniqueField: string;
+  rowClick?: IActionElement;
+  action?: ITBodyAction;
+  columns: ITBodyColumn[];
+  data?: T[];
+}
+
+export interface IActionElement extends IBaseAction {
+  iconClass?: GenericFunction<string>;
+}
+
+export interface ILinkAction {
+  link: string;
+  customParamsLink?: any;
+}
+
+export interface IEventAction {
+  clickEvent: GenericFunction<any>;
+}
+
+export interface ITBodyAction {
+  customClasses?: string;
+  buttons: IActionElement[];
+}
+
+export interface ITBodyColumn {
+  cells: ITBodyCell[] | ITBodyCell;
+  customClass?: string;
+}
+
+export interface ITBodyCell {
+  fieldArrayPosition?: ArrayOneOrMore<string | Array<string>>;
+  icon?: ITBodyCellIcon;
+  fieldPipe?: IFieldPipe;
+  customClass?: GenericFunction<string>;
+}
+
+export interface ITBodyCellIcon {
+  iconClass: string;
+  position?: TIconPosition;
+  action: IBaseAction;
+}
+
+export interface IBaseAction {
+  id: string;
+  title?: string;
+  tooltip?: ITooltipElement;
+  ariaLabel?: string;
+  behaviourAction: TBehaviourAction<ILinkAction, IEventAction>;
+  disabled?: GenericFunction<boolean>;
+  visible?: GenericFunction<boolean>;
+}
+
+export interface IFieldPipe {
+  type: any;
+  args?: any[];
+}
+
+export interface ITooltipElement {
+  apply: boolean;
+  text?: GenericFunction<string>;
+  textContent?: GenericFunction<string>;
+  position?: TooltipPosition;
+  gap?: number;
+}

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

@@ -0,0 +1,62 @@
+import { inject, Injector, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'fieldArrayPosition',
+  standalone: true,
+})
+export class FieldArrayPositionPipe implements PipeTransform {
+  transform(value: any, args: any[] | any): any {
+    const ret = getNestedPropertyValueByPosition(value, args);
+    return ret;
+  }
+}
+
+function getNestedPropertyValueByPosition(array: any, positionArray: any): any {
+  if (typeof positionArray === 'object') {
+    const appo = positionArray[0];
+    const rest = positionArray.slice(1);
+    if (!array) return undefined;
+    if (rest.length == 0 && Object.prototype.hasOwnProperty.call(array, appo)) {
+      return array[appo];
+    }
+    if (rest.length == 0 && array instanceof Array) {
+      return array.map((s) => {
+        return s[appo];
+      });
+    }
+    return getNestedPropertyValueByPosition(array[appo], rest);
+  } else {
+    return array[positionArray];
+  }
+}
+
+@Pipe({
+  name: 'typeOfArray',
+  standalone: true,
+})
+export class TypeOfArrayPipe implements PipeTransform {
+  transform(value: any): any {
+    return Array.isArray(value);
+  }
+}
+
+@Pipe({
+  name: 'dynamicPipe',
+  standalone: true,
+})
+export class DynamicPipe implements PipeTransform {
+  private readonly injector = inject(Injector);
+
+  transform(value: any, pipeToken: any, pipeArgs?: any[]): any {
+    if (!pipeToken) {
+      return value;
+    } else {
+      const pipe = this.injector.get<PipeTransform>(pipeToken); // ✅ cast type
+      if (pipeArgs) {
+        return pipe.transform(value, ...pipeArgs);
+      } else {
+        return pipe.transform(value);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+export type TIconPosition = 'left' | 'right';
+export type TInputType =
+  | 'text'
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'number'
+  | 'image'
+  | 'url'
+  | 'week';

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

@@ -0,0 +1,88 @@
+<div
+  class="frg-tabs"
+  [class.is-animated]="animated"
+  [attr.data-style]="styleType"
+  [attr.data-size]="size"
+  [attr.data-align]="align">
+  <div class="frg-tabs__list" role="tablist">
+    @for (item of viewItems; track item?.id; let i = $index) {
+      <button
+        type="button"
+        #tabBtn
+        role="tab"
+        class="frg-tabs__tab"
+        [class.is-active]="isActive(item?.id)"
+        [class.is-disabled]="item?.disabled"
+        [attr.data-style]="item?.style || styleType"
+        [attr.data-size]="item?.size || size"
+        [attr.id]="tabId(item!.id!)"
+        [attr.aria-controls]="panelId(item!.id!)"
+        [attr.aria-selected]="isActive(item?.id)"
+        [attr.aria-disabled]="item?.disabled || null"
+        [attr.tabindex]="isActive(item?.id) ? 0 : -1"
+        [disabled]="item?.disabled"
+        (click)="onTabClick(i, $event)"
+        (keydown)="onTabKeydown($event, i)">
+        <span class="frg-tabs__tab-inner">
+          @if (item?.iconTemplate || iconTemplate || item?.icon) {
+            <span class="frg-tabs__icon" aria-hidden="true">
+              @if (item?.iconTemplate) {
+                <ng-container
+                  [ngTemplateOutlet]="item?.iconTemplate"
+                  [ngTemplateOutletContext]="buildContext(item!, i)">
+                </ng-container>
+              } @else if (iconTemplate) {
+                <ng-container
+                  [ngTemplateOutlet]="iconTemplate"
+                  [ngTemplateOutletContext]="buildContext(item!, i)">
+                </ng-container>
+              } @else {
+                <span class="frg-tabs__icon-shape">{{ item?.icon }}</span>
+              }
+            </span>
+          }
+
+          <span class="frg-tabs__label">
+            @if (item?.labelTemplate || labelTemplate) {
+              <ng-container
+                [ngTemplateOutlet]="item?.labelTemplate || labelTemplate"
+                [ngTemplateOutletContext]="buildContext(item!, i)">
+              </ng-container>
+            } @else {
+              <span class="frg-tabs__label-text">{{ item?.label }}</span>
+              @if (item?.description) {
+                <small class="frg-tabs__label-desc">{{ item?.description }}</small>
+              }
+            }
+          </span>
+        </span>
+        <span class="frg-tabs__underline" aria-hidden="true"></span>
+      </button>
+    }
+  </div>
+
+  <div class="frg-tabs__panels">
+    @for (item of viewItems; track item?.id; let i = $index) {
+      <section
+        class="frg-tabs__panel"
+        #panelBody
+        role="tabpanel"
+        [class.is-active]="isActive(item?.id)"
+        [attr.id]="panelId(item!.id!)"
+        [attr.aria-labelledby]="tabId(item!.id!)"
+        [hidden]="!isActive(item?.id)"
+        [attr.tabindex]="isActive(item?.id) ? 0 : -1">
+        @if (item?.contentTemplate || contentTemplate) {
+          <ng-container
+            [ngTemplateOutlet]="item?.contentTemplate || contentTemplate"
+            [ngTemplateOutletContext]="buildContext(item!, i)">
+          </ng-container>
+        } @else if (item?.content) {
+          {{ item?.content }}
+        } @else if (item?.data; as payload) {
+          {{ payload }}
+        }
+      </section>
+    }
+  </div>
+</div>