@tacdaed/fragments 1.0.0-beta.4 → 1.0.0-beta.5

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

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

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

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

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

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

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

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

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

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