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

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

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

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

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

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

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

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