@3ddv/software-division-components 1.1.0 → 1.4.0

package/projects/software-division-components/src/backoffice/table/table.component.ts

@@ -0,0 +1,347 @@
+import { Component, computed, effect, input, OnDestroy, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronDown, lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import { ThemeClass } from '@shared/types';
+import {
+  ColumnDef,
+  createAngularTable,
+  flexRenderComponent,
+  FlexRenderDirective,
+  getCoreRowModel,
+  getPaginationRowModel,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+} from '@tanstack/angular-table';
+import { PaginationComponent } from './_components/pagination/pagination.component';
+import { SelectionTableHeadComponent } from './_components/selection-table-head/selection-table-head.component';
+import { SelectionTableRowComponent } from './_components/selection-table-row/selection-table-row.component';
+import { SortTableHeadButtonComponent } from './_components/sort-header-button/sort-header-button.component';
+import { HlmTableImports } from './ui/ui-table-helm/src';
+
+export type TableStyleClasses = ReturnType<(typeof TableComponent.prototype)['styleClass']>;
+@Component({
+  selector: 'sdc-table',
+  imports: [FormsModule, FlexRenderDirective, PaginationComponent, ...HlmTableImports],
+  providers: [provideIcons({ lucideChevronDown, lucideChevronLeft, lucideChevronRight })],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.css',
+})
+export class TableComponent<T extends Record<string, any>> implements OnDestroy {
+  private readonly allowedVariants = ['full-table', 'minimal-table'] as const;
+
+  /**
+   * The data to display in the table.
+   */
+  public readonly data = input<T[]>([]);
+
+  /**
+   * The columns to display in the table.
+   */
+  public readonly columns = input<ColumnDef<T>[]>([]);
+
+  /**
+   * Whether to show the selection column.
+   */
+  public readonly showSelection = input<boolean>(false);
+
+  /**
+   * Whether to enable sorting for the table.
+   */
+  public readonly enableSort = input<boolean | string[]>(false);
+
+  /**
+   * The maximum number of pages to display in the pagination.
+   */
+  public readonly maxVisiblePages = input<number>(3);
+
+  /**
+   * The page size for the table pagination.
+   */
+  public readonly pageSize = input<number>(10);
+
+  /**
+   * The initial page index for the table pagination.
+   */
+  public readonly initialPageIndex = input<number>(0);
+
+  /**
+   * Whether to show the first and last buttons in the pagination.
+   */
+  public readonly showFirstLastButtons = input<boolean>(true);
+
+  /**
+   * The current theme applied to the component.
+   */
+  public readonly theme = input<ThemeClass>('theme-sdc');
+
+  /**
+   * Predefined styles to apply to the component.
+   * Can be a single class or multiple classes from different categories.
+   */
+  public readonly styleClass = input<(typeof this.allowedVariants)[number][]>([this.allowedVariants[0]]);
+
+  // Computed signal that validates and filters the styleClass input
+  private readonly _validatedStyleClass = computed(() => {
+    const value = this.styleClass();
+
+    if (!Array.isArray(value)) {
+      console.warn('TableComponent: styleClass must be an array, defaulting to empty array');
+      return [];
+    }
+
+    const validValues = value.filter(style => this.allowedVariants.includes(style));
+    const invalidValues = value.filter(style => !this.allowedVariants.includes(style));
+
+    if (invalidValues.length > 0) {
+      throw new Error(
+        `TableComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${this.allowedVariants.join(', ')}`
+      );
+    }
+
+    return validValues;
+  });
+
+  /**
+   * Additional CSS classes to apply to the component.
+   */
+  public readonly className = input<string>('');
+
+  /**
+   * The text to display in the export button.
+   */
+  public readonly exportButtonText = input<string>('Export');
+
+  /**
+   * Event emitted when the export button is clicked.
+   * Includes selected rows and all rows for export functionality.
+   */
+  public readonly exportClick = output<{ selectedRows: T[]; allRows: T[] }>();
+
+  /**
+   * Event emitted when the sorting state changes.
+   */
+  public readonly sortingChange = output<SortingState>();
+
+  /**
+   * Event emitted when the selection state changes.
+   */
+  public readonly selectionChange = output<RowSelectionState>();
+
+  /**
+   * Whether to pin/freeze the table headers so they remain visible during vertical scrolling.
+   * When enabled, headers will stay at the top of the viewport while scrolling through table data.
+   */
+  public readonly pinningHeaders = input<boolean>(false);
+
+  /**
+   * Whether to show the pagination controls at the bottom of the table.
+   * When disabled, all rows will be displayed without pagination.
+   */
+  public readonly showPagination = input<boolean>(true);
+
+  /**
+   * Event emitted when the pagination state changes.
+   */
+  public readonly paginationChange = output<PaginationState>();
+
+  /**
+   * Computed class string that combines theme and user classes.
+   */
+  protected readonly computedClass = computed(() => {
+    const themeClass = this.theme();
+    const styleClass = this._validatedStyleClass();
+    const className = this.className();
+    const pinningHeadersClass = this.pinningHeaders() ? 'pinning-headers' : '';
+    return ['sdc-table', themeClass, ...styleClass, pinningHeadersClass, className].filter(Boolean).join(' ');
+  });
+
+  protected _handleSortClick(columnId: string) {
+    const currentSort = this._sorting();
+    const currentColumnSort = currentSort.find(sort => sort.id === columnId);
+
+    let newSort: SortingState = [];
+
+    if (!currentColumnSort) {
+      // First click: sort asc
+      newSort = [{ id: columnId, desc: false }];
+    } else if (!currentColumnSort.desc) {
+      // Second click: sort desc
+      newSort = [{ id: columnId, desc: true }];
+    } else {
+      // Third click: remove sort
+      newSort = [];
+    }
+
+    this._sorting.set(newSort);
+    this.sortingChange.emit(newSort);
+  }
+
+  protected _getSortDirection(columnId: string): 'asc' | 'desc' | false {
+    const currentSort = this._sorting();
+    const columnSort = currentSort.find(sort => sort.id === columnId);
+
+    if (!columnSort) {
+      return false;
+    }
+
+    return columnSort.desc ? 'desc' : 'asc';
+  }
+
+  protected _isColumnSorted(columnId: string): boolean {
+    const currentSort = this._sorting();
+    return currentSort.some(sort => sort.id === columnId);
+  }
+
+  protected _isSortEnabled(columnId: string): boolean {
+    const sortConfig = this.enableSort();
+
+    if (typeof sortConfig === 'boolean') {
+      return sortConfig;
+    }
+
+    if (Array.isArray(sortConfig)) {
+      return sortConfig.includes(columnId);
+    }
+
+    return false;
+  }
+
+  protected _createSortableHeader(column: ColumnDef<T>, columnId: string) {
+    return flexRenderComponent(SortTableHeadButtonComponent, {
+      inputs: {
+        columnName: columnId,
+        isSorted: this._isColumnSorted(columnId),
+        sortDirection: this._getSortDirection(columnId),
+        enableSorting: this._isSortEnabled(columnId),
+      },
+      outputs: {
+        sortClick: () => this._handleSortClick(columnId),
+      },
+    });
+  }
+
+  protected _processColumns(): ColumnDef<T>[] {
+    const baseColumns = this.columns() || [];
+    const processedColumns: ColumnDef<T>[] = [];
+
+    // Add selection column if enabled
+    if (this.showSelection()) {
+      processedColumns.push({
+        accessorKey: 'select',
+        id: 'select',
+        header: () => flexRenderComponent(SelectionTableHeadComponent),
+        cell: () => flexRenderComponent(SelectionTableRowComponent),
+        enableSorting: false,
+        enableHiding: false,
+      });
+    }
+
+    // Process each column
+    baseColumns.forEach(column => {
+      const processedColumn = { ...column };
+
+      // If sorting is enabled for this column, wrap the header with sort functionality
+      if (this._isSortEnabled(column.id || '')) {
+        processedColumn.header = context => this._createSortableHeader(column, context.column.id);
+      }
+
+      // Ensure sorting is disabled for client-side (we only support server-side sorting)
+      processedColumn.enableSorting = false;
+
+      processedColumns.push(processedColumn);
+    });
+
+    return processedColumns;
+  }
+
+  private readonly _sorting = signal<SortingState>([]);
+  private readonly _rowSelection = signal<RowSelectionState>({});
+  private readonly _pagination = signal<PaginationState>({
+    pageSize: this.pageSize(),
+    pageIndex: this.initialPageIndex(),
+  });
+
+  // Effect to sync input changes to the pagination signal
+  // Only runs when pagination is enabled
+  private readonly _paginationEffect = effect(() => {
+    // Only update pagination when it's enabled
+    if (!this.showPagination()) {
+      return;
+    }
+
+    const newPageSize = this.pageSize();
+    const newPageIndex = this.initialPageIndex();
+
+    this._pagination.update(current => ({
+      ...current,
+      pageSize: newPageSize,
+      pageIndex: newPageIndex,
+    }));
+  });
+
+  public ngOnDestroy(): void {
+    // Cleans up the pagination effect to prevent memory leaks.
+    if (this._paginationEffect) {
+      this._paginationEffect.destroy();
+    }
+  }
+
+  private readonly _table = createAngularTable<T>(() => ({
+    data: this.data(),
+    columns: this._processColumns(),
+    state: {
+      sorting: this._sorting(),
+      rowSelection: this._rowSelection(),
+      // Only include pagination state when pagination is enabled
+      ...(this.showPagination() && { pagination: this._pagination() }),
+    },
+    onSortingChange: updater => {
+      updater instanceof Function ? this._sorting.update(updater) : this._sorting.set(updater);
+      this.sortingChange.emit(this._sorting());
+    },
+    onRowSelectionChange: updater => {
+      updater instanceof Function ? this._rowSelection.update(updater) : this._rowSelection.set(updater);
+      this.selectionChange.emit(this._rowSelection());
+    },
+    // Only include pagination change handler when pagination is enabled
+    ...(this.showPagination() && {
+      onPaginationChange: updater => {
+        updater instanceof Function ? this._pagination.update(updater) : this._pagination.set(updater);
+        this.paginationChange.emit(this._pagination());
+      },
+    }),
+    getCoreRowModel: getCoreRowModel(),
+    // Only include pagination row model when pagination is enabled
+    ...(this.showPagination() && { getPaginationRowModel: getPaginationRowModel() }),
+    enableRowSelection: this.showSelection(),
+    initialState: {
+      // Only include pagination initial state when pagination is enabled
+      ...(this.showPagination() && { pagination: this._pagination() }),
+    },
+  }));
+
+  // Public getters for template access
+  public get headerGroups() {
+    return this._table.getHeaderGroups();
+  }
+
+  public get rows() {
+    return this._table.getRowModel().rows;
+  }
+
+  public get paginatedRows() {
+    if (this.showPagination()) {
+      return this._table.getPaginationRowModel().rows;
+    } else {
+      // When pagination is disabled, return all rows from the core row model
+      return this._table.getRowModel().rows;
+    }
+  }
+
+  // Public getter for pagination component
+  public get tableForPagination() {
+    return this._table as any;
+  }
+}

package/projects/software-division-components/src/backoffice/table/ui/ui-icon-helm/src/index.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { HlmIcon } from './lib/hlm-icon';
+
+export * from './lib/hlm-icon';
+export * from './lib/hlm-icon.token';
+
+@NgModule({
+	imports: [HlmIcon],
+	exports: [HlmIcon],
+})
+export class HlmIconModule {}

package/projects/software-division-components/src/backoffice/table/ui/ui-icon-helm/src/lib/hlm-icon.token.ts

@@ -0,0 +1,20 @@
+import { InjectionToken, ValueProvider, inject } from '@angular/core';
+import type { IconSize } from './hlm-icon';
+
+export interface HlmIconConfig {
+	size: IconSize;
+}
+
+const defaultConfig: HlmIconConfig = {
+	size: 'base',
+};
+
+const HlmIconConfigToken = new InjectionToken<HlmIconConfig>('HlmIconConfig');
+
+export function provideHlmIconConfig(config: Partial<HlmIconConfig>): ValueProvider {
+	return { provide: HlmIconConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmIconConfig(): HlmIconConfig {
+	return inject(HlmIconConfigToken, { optional: true }) ?? defaultConfig;
+}

package/projects/software-division-components/src/backoffice/table/ui/ui-icon-helm/src/lib/hlm-icon.ts

@@ -0,0 +1,35 @@
+import { Directive, computed, input } from '@angular/core';
+import { injectHlmIconConfig } from './hlm-icon.token';
+
+export type IconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'none' | (Record<never, never> & string);
+
+@Directive({
+	selector: 'ng-icon[hlm]',
+	host: {
+		'[style.--ng-icon__size]': '_computedSize()',
+	},
+})
+export class HlmIcon {
+	private readonly _config = injectHlmIconConfig();
+	public readonly size = input<IconSize>(this._config.size);
+
+	protected readonly _computedSize = computed(() => {
+		const size = this.size();
+
+		switch (size) {
+			case 'xs':
+				return '12px';
+			case 'sm':
+				return '16px';
+			case 'base':
+				return '24px';
+			case 'lg':
+				return '32px';
+			case 'xl':
+				return '48px';
+			default: {
+				return size;
+			}
+		}
+	});
+}

package/projects/software-division-components/src/backoffice/table/ui/ui-table-helm/src/index.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+
+import { HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr } from './lib/hlm-table';
+
+export * from './lib/hlm-table';
+
+export const HlmTableImports = [HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr] as const;
+
+@NgModule({
+	imports: [...HlmTableImports],
+	exports: [...HlmTableImports],
+})
+export class HlmTableModule {}

package/projects/software-division-components/src/backoffice/table/ui/ui-table-helm/src/lib/hlm-table.ts

@@ -0,0 +1,220 @@
+// src/app/directives/hlm-table-directives.ts
+import { computed, Directive, inject, InjectionToken, input, ValueProvider } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+// Configuration Interface and InjectionToken
+export const HlmTableConfigToken = new InjectionToken<HlmTableVariant>('HlmTableConfig');
+export interface HlmTableVariant {
+	table: string;
+	thead: string;
+	tbody: string;
+	tfoot: string;
+	tr: string;
+	th: string;
+	td: string;
+	caption: string;
+}
+
+export const HlmTableVariantDefault: HlmTableVariant = {
+	table: 'w-full caption-bottom text-sm',
+	thead: '[&_tr]:border-b',
+	tbody: '[&_tr:last-child]:border-0',
+	tfoot: 'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+	tr: 'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+	th: 'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+	td: 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+	caption: 'text-muted-foreground mt-4 text-sm',
+};
+
+export function provideHlmTableConfig(config: Partial<HlmTableVariant>): ValueProvider {
+	return {
+		provide: HlmTableConfigToken,
+		useValue: { ...HlmTableVariantDefault, ...config },
+	};
+}
+
+export function injectHlmTableConfig(): HlmTableVariant {
+	return inject(HlmTableConfigToken, { optional: true }) ?? HlmTableVariantDefault;
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ * It resolves and provides base classes for its child table elements.
+ * If a table has the `hlmTable` attribute, it will be styled with the provided variant.
+ * The other table elements will check if a parent table has the `hlmTable` attribute and will be styled accordingly.
+ */
+@Directive({
+	selector: 'table[hlmTable]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTable {
+	/** Input to configure the variant of the table, this input has the highest priority. */
+	public readonly userVariant = input<Partial<HlmTableVariant> | string>({}, { alias: 'hlmTable' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	/** Global or default configuration provided by injectHlmTableConfig() */
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+
+	// Protected variant that resolves user input to a full HlmTableVariant
+	protected readonly _variant = computed<HlmTableVariant>(() => {
+		const globalOrDefaultConfig = this._globalOrDefaultConfig;
+		const localInputConfig = this.userVariant();
+
+		// Priority 1: Local input object
+		if (typeof localInputConfig === 'object' && localInputConfig !== null && Object.keys(localInputConfig).length > 0) {
+			// Merge local input with the baseline provided by injectHlmTableConfig()
+			// This ensures that properties not in localInputConfig still fall back to global/default values.
+			return { ...globalOrDefaultConfig, ...localInputConfig };
+		}
+		// If localInputConfig is not a non-empty object (e.g., it's undefined, an empty object, or a string),
+		// then the globalOrDefaultConfig (which is already the result of injected OR default) is used.
+		return globalOrDefaultConfig;
+	});
+
+	// Computed class for the host <table> element
+	protected readonly _computedClass = computed(() => hlm(this._variant().table, this.userClass()));
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'thead[hlmTHead]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTHead {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.thead.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'tbody[hlmTBody]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTBody {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tbody.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'tfoot[hlmTFoot]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTFoot {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tfoot.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'tr[hlmTr]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTr {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tr.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'th[hlmTh]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTh {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.th.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'td[hlmTd]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTd {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.td.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'caption[hlmCaption]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCaption {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.caption.trim() : '', this.userClass()),
+	);
+}