@3ddv/software-division-components 1.4.2 → 1.4.7

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

@@ -1,43 +0,0 @@
-// Export all necessary dependencies from @tanstack/angular-table for table functionality
-export {
-  FlexRenderDirective,
-  // Core table creation and configuration
-  createAngularTable,
-  flexRenderComponent,
-  // Row models
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getGroupedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  // Additional utility types
-  type AccessorFn,
-  type Cell,
-  // Utility types for cell rendering
-  type CellContext,
-  type Column,
-  // Types
-  type ColumnDef,
-  type ColumnMeta,
-  type ColumnOrderState,
-  type ColumnPinningState,
-  type ColumnSizingState,
-  type ExpandedState,
-  type GroupingState,
-  type Header,
-  type HeaderContext,
-  type PaginationState,
-
-  // Additional utilities that might be needed
-  type Row,
-  type RowData,
-  type RowSelectionState,
-  type SortingState,
-  type Table,
-  // Additional commonly used types
-  type VisibilityState,
-} from '@tanstack/angular-table';
-
-// Export the main table component
-export * from './table.component';

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

@@ -1,364 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { Meta, StoryObj } from '@storybook/angular';
-import { flexRenderComponent } from '@tanstack/angular-table';
-import { ButtonComponent } from '../../../generic/button';
-import { TableComponent } from '../table.component';
-
-// Inline action column component for the story
-@Component({
-  selector: 'story-action-column',
-  imports: [ButtonComponent],
-  template: `
-    <sdc-button
-      [styleClass]="['size-sm']"
-      (click)="onActionClick.emit($event)"
-      class="px-3 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors">
-      {{ buttonText() }}
-    </sdc-button>
-  `,
-})
-class StoryActionColumnComponent {
-  public readonly buttonText = input<string>('Details');
-  public readonly onActionClick = output<MouseEvent>();
-}
-
-// Mock data types
-type Transaction = {
-  id: string;
-  accountNumber: string;
-  accountName: string;
-  date: string;
-  event: string;
-  premiumSpace: string;
-  section: string;
-  balance: string;
-  status: 'Completed' | 'Cancelled';
-};
-
-type Seat = {
-  section: string;
-  row: string;
-  seat: string;
-};
-
-const mockSeats: Seat[] = Array.from({ length: 20 }, (_, index) => ({
-  section: 'Section 101',
-  row: 'Row A',
-  seat: `${index + 1}`,
-}));
-
-const minimalTableColumns = [
-  {
-    accessorKey: 'section',
-    id: 'section',
-    header: 'Section',
-  },
-  {
-    accessorKey: 'row',
-    id: 'row',
-    header: 'Row',
-  },
-  {
-    accessorKey: 'seat',
-    id: 'seat',
-    header: 'Seat',
-  },
-];
-
-// Mock data
-const mockTransactions: Transaction[] = [
-  {
-    id: '1',
-    accountNumber: 'ACC001',
-    accountName: 'John Doe',
-    date: 'May 28, 2025',
-    event: 'Mariners vs. Astros / 26G0921',
-    premiumSpace: 'Premium Space A',
-    section: 'Section 101',
-    balance: '$ 1710',
-    status: 'Completed',
-  },
-  {
-    id: '2',
-    accountNumber: 'ACC002',
-    accountName: 'Jane Smith',
-    date: 'May 28, 2025',
-    event: 'Mariners vs. Astros / 26G0921',
-    premiumSpace: 'No',
-    section: 'Section 102',
-    balance: '$ 1710',
-    status: 'Cancelled',
-  },
-  {
-    id: '3',
-    accountNumber: 'ACC003',
-    accountName: 'Bob Johnson',
-    date: 'May 28, 2025',
-    event: 'Mariners vs. Astros / 26G0921',
-    premiumSpace: 'Premium Space B',
-    section: 'Section 103',
-    balance: '$ 1710',
-    status: 'Completed',
-  },
-  {
-    id: '4',
-    accountNumber: 'ACC004',
-    accountName: 'Alice Brown',
-    date: 'May 29, 2025',
-    event: 'Mariners vs. Rangers / 26G0922',
-    premiumSpace: 'Premium Space C',
-    section: 'Section 201',
-    balance: '$ 1850',
-    status: 'Completed',
-  },
-  {
-    id: '5',
-    accountNumber: 'ACC005',
-    accountName: 'Charlie Wilson',
-    date: 'May 29, 2025',
-    event: 'Mariners vs. Rangers / 26G0922',
-    premiumSpace: 'No',
-    section: 'Section 202',
-    balance: '$ 1850',
-    status: 'Cancelled',
-  },
-  {
-    id: '6',
-    accountNumber: 'ACC006',
-    accountName: 'Diana Davis',
-    date: 'May 30, 2025',
-    event: 'Mariners vs. Angels / 26G0923',
-    premiumSpace: 'Premium Space D',
-    section: 'Section 301',
-    balance: '$ 1950',
-    status: 'Completed',
-  },
-  {
-    id: '7',
-    accountNumber: 'ACC007',
-    accountName: 'Edward Miller',
-    date: 'May 30, 2025',
-    event: 'Mariners vs. Angels / 26G0923',
-    premiumSpace: 'Premium Space E',
-    section: 'Section 302',
-    balance: '$ 1950',
-    status: 'Completed',
-  },
-  {
-    id: '8',
-    accountNumber: 'ACC008',
-    accountName: 'Fiona Garcia',
-    date: 'May 31, 2025',
-    event: 'Mariners vs. Athletics / 26G0924',
-    premiumSpace: 'No',
-    section: 'Section 401',
-    balance: '$ 1650',
-    status: 'Cancelled',
-  },
-];
-
-// Column definitions
-const fullTableColumns = [
-  {
-    accessorKey: 'status',
-    id: 'status',
-    header: 'Status',
-    cell: (info: any) => {
-      const status = info.getValue();
-      const statusClass = status === 'Completed' ? 'text-green-600' : 'text-red-600';
-      return `<span class="capitalize ${statusClass}">${status}</span>`;
-    },
-  },
-  {
-    accessorKey: 'accountNumber',
-    id: 'accountNumber',
-    header: 'Account #',
-    cell: (info: any) => info.getValue(),
-  },
-  {
-    accessorKey: 'date',
-    id: 'date',
-    header: 'Date',
-    cell: (info: any) => info.getValue(),
-  },
-  {
-    accessorKey: 'event',
-    id: 'event',
-    header: 'Event',
-    cell: (info: any) => info.getValue(),
-  },
-  {
-    accessorKey: 'premiumSpace',
-    id: 'premiumSpace',
-    header: 'Premium Space',
-    cell: (info: any) => info.getValue(),
-  },
-  {
-    accessorKey: 'section',
-    id: 'section',
-    header: 'Section',
-    cell: (info: any) => info.getValue(),
-  },
-  {
-    accessorKey: 'balance',
-    id: 'balance',
-    header: 'Balance',
-    cell: (info: any) => info.getValue(),
-  },
-  // Action column
-  {
-    id: 'action',
-    header: '',
-    cell: (context: any) =>
-      flexRenderComponent(StoryActionColumnComponent, {
-        inputs: {
-          buttonText: 'Details',
-        },
-        outputs: {
-          onActionClick: (event: MouseEvent) => {
-            console.log('Action button clicked:', event);
-            alert(`Details button clicked: ${JSON.stringify(context.row.original, null, 2)}`);
-          },
-        },
-      }),
-  },
-];
-
-const meta: Meta<TableComponent<Transaction>> = {
-  title: 'Backoffice/Table',
-  component: TableComponent,
-  id: 'Table',
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: 'A comprehensive data table component with sorting, selection, pagination, and action columns.',
-      },
-    },
-  },
-  argTypes: {
-    data: {
-      control: 'object',
-      description: 'Array of transaction data to display in the table',
-    },
-    columns: {
-      control: 'object',
-      description: 'Column definitions for the table',
-    },
-    showSelection: {
-      control: 'boolean',
-      description: 'Show row selection checkboxes',
-    },
-    enableSort: {
-      control: 'object',
-      description: 'Enable sorting for specific columns or all columns',
-    },
-    pageSize: {
-      control: 'number',
-      description: 'Number of rows to display per page',
-    },
-    initialPageIndex: {
-      control: 'number',
-      description: 'Initial page index to start on (0-based)',
-    },
-    maxVisiblePages: {
-      control: 'number',
-      description: 'Maximum number of visible pagination pages',
-    },
-    showFirstLastButtons: {
-      control: 'boolean',
-      description: 'Show first/last pagination buttons',
-    },
-    theme: {
-      control: 'select',
-      options: ['theme-sdc'],
-      description: 'Theme class to apply to the table component',
-    },
-    styleClass: {
-      control: 'object',
-      description: 'Array of style classes to apply. Allowed values: full-table, minimal-table',
-    },
-    pinningHeaders: {
-      control: 'boolean',
-      description: 'Whether to pin/freeze table headers during vertical scrolling',
-    },
-    showPagination: {
-      control: 'boolean',
-      description: 'Whether to show pagination controls at the bottom of the table',
-    },
-  },
-};
-
-export default meta;
-
-// Single comprehensive story for full-table
-export const FullTable: StoryObj<TableComponent<Transaction>> = {
-  args: {
-    data: mockTransactions,
-    columns: fullTableColumns,
-    showSelection: true,
-    enableSort: ['accountNumber', 'date', 'status'],
-    pageSize: 3,
-    initialPageIndex: 1,
-    maxVisiblePages: 2,
-    showFirstLastButtons: true,
-    theme: 'theme-sdc',
-    styleClass: ['full-table'] as any, // Use full-table style
-    pinningHeaders: true, // Enable pinned headers for testing
-    showPagination: true, // Enable pagination for testing
-  },
-  render: args => ({
-    props: {
-      ...args,
-      // Export button callback
-      exportClick: (exportData: { selectedRows: any[]; allRows: any[] }) => {
-        console.log('Export button clicked!', exportData);
-
-        if (exportData.selectedRows.length > 0) {
-          alert(`Exporting selected transactions: ${JSON.stringify(exportData.selectedRows, null, 2)}`);
-          console.log('Selected rows to export:', exportData.selectedRows);
-        } else {
-          alert('No rows selected. Exporting all transactions.');
-          console.log('All rows to export:', exportData.allRows);
-        }
-      },
-      // Sorting callback
-      sortingChange: (sortingState: any) => {
-        console.log('Sorting changed:', sortingState);
-        alert(`Sorting changed! New state: ${JSON.stringify(sortingState)}`);
-      },
-      // Selection callback
-      selectionChange: (selectionState: any) => {
-        console.log('Selection changed:', selectionState);
-        console.log(
-          'Selected rows:',
-          Object.keys(selectionState).filter(key => selectionState[key])
-        );
-      },
-      // Pagination callback
-      paginationChange: (paginationState: any) => {
-        console.log('Pagination changed:', paginationState);
-        console.log(`Page: ${paginationState.pageIndex + 1}, Page Size: ${paginationState.pageSize}`);
-        console.log(`Total rows: ${paginationState.pageSize * paginationState.pageIndex + paginationState.pageSize}`);
-      },
-    },
-  }),
-};
-
-// Single comprehensive story for minimal-table
-export const MinimalTable: StoryObj<TableComponent<Seat>> = {
-  args: {
-    data: mockSeats,
-    columns: minimalTableColumns,
-    showSelection: false,
-    theme: 'theme-sdc',
-    styleClass: ['minimal-table'] as any, // Use minimal-table style
-    pinningHeaders: true, // Enable pinned headers for testing
-    showPagination: false, // Disable pagination to show all rows
-  },
-  render: args => ({
-    props: {
-      ...args,
-    },
-  }),
-};

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

@@ -1,172 +0,0 @@
-/* SDC Table full-table styles */
-.sdc-table.full-table {
-  /* Component-specific CSS variables using SDC theme variables */
-  --sdc-table-vertical-scroll: hidden;
-  --sdc-table-background: var(--color-pure-white);
-  --sdc-table-foreground: var(--color-neutral-600);
-  --sdc-table-radius: var(--radius-lg);
-  --sdc-table-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --sdc-table-border-top-color: var(--color-neutral-300);
-  --sdc-table-border-right-color: var(--color-neutral-300);
-  --sdc-table-border-bottom-color: var(--color-neutral-300);
-  --sdc-table-border-left-color: var(--color-neutral-300);
-  --sdc-table-border-top-width: var(--border-default);
-  --sdc-table-border-right-width: var(--border-default);
-  --sdc-table-border-bottom-width: var(--border-default);
-  --sdc-table-border-left-width: var(--border-default);
-  --sdc-table-padding: var(--space-3) var(--space-4);
-  --sdc-table-font-size: var(--text-sm);
-  --sdc-table-line-height: var(--leading-normal);
-  --sdc-table-font-weight: var(--font-semibold);
-  --sdc-table-header-background: var(--color-pure-white);
-  --sdc-table-header-foreground: var(--color-neutral-400);
-  --sdc-table-header-border-top-color: transparent;
-  --sdc-table-header-border-right-color: transparent;
-  --sdc-table-header-border-bottom-color: transparent;
-  --sdc-table-header-border-left-color: transparent;
-  --sdc-table-header-border-top-width: var(--border-0);
-  --sdc-table-header-border-right-width: var(--border-0);
-  --sdc-table-header-border-bottom-width: var(--border-0);
-  --sdc-table-header-border-left-width: var(--border-0);
-  --sdc-table-header-padding: var(--space-6) var(--space-4);
-  --sdc-table-header-font-size: var(--text-sm);
-  --sdc-table-header-font-weight: var(--font-semibold);
-  --sdc-table-row-hover: var(--color-neutral-50);
-}
-
-/* SDC Table minimal-table styles */
-.sdc-table.minimal-table {
-  /* Component-specific CSS variables using SDC theme variables */
-  --sdc-table-vertical-scroll: auto;
-  --sdc-table-background: var(--color-neutral-100);
-  --sdc-table-foreground: var(--color-secondary);
-  --sdc-table-radius: var(--radius-lg);
-  --sdc-table-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  --sdc-table-border-top-color: var(--color-neutral-300);
-  --sdc-table-border-right-color: var(--color-neutral-300);
-  --sdc-table-border-bottom-color: var(--color-neutral-300);
-  --sdc-table-border-left-color: var(--color-neutral-300);
-  --sdc-table-border-top-width: var(--border-default);
-  --sdc-table-border-right-width: var(--border-default);
-  --sdc-table-border-bottom-width: var(--border-default);
-  --sdc-table-border-left-width: var(--border-default);
-  --sdc-table-padding: var(--space-4) var(--space-5);
-  --sdc-table-font-size: var(--text-sm);
-  --sdc-table-line-height: var(--leading-relaxed);
-  --sdc-table-font-weight: var(--font-bold);
-  --sdc-table-header-background: var(--color-neutral-100);
-  --sdc-table-header-foreground: var(--color-neutral-800);
-  --sdc-table-header-border-top-color: transparent;
-  --sdc-table-header-border-right-color: transparent;
-  --sdc-table-header-border-bottom-color: var(--color-neutral-600);
-  --sdc-table-header-border-left-color: transparent;
-  --sdc-table-header-border-top-width: var(--border-0);
-  --sdc-table-header-border-right-width: var(--border-0);
-  --sdc-table-header-border-bottom-width: var(--border-2);
-  --sdc-table-header-border-left-width: var(--border-0);
-  --sdc-table-header-padding: var(--space-5) var(--space-5);
-  --sdc-table-header-font-size: var(--text-sm);
-  --sdc-table-header-font-weight: var(--font-bold);
-  --sdc-table-row-hover: var(--color-neutral-25);
-}
-
-/* Base component styles */
-.sdc-table {
-  width: 100%;
-  overflow: hidden;
-}
-
-/* Table container with fixed height and scroll */
-.table-container {
-  background: hsl(var(--sdc-table-background));
-  border-top: var(--sdc-table-border-top-width) solid hsl(var(--sdc-table-border-top-color));
-  border-right: var(--sdc-table-border-right-width) solid hsl(var(--sdc-table-border-right-color));
-  border-bottom: var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color));
-  border-left: var(--sdc-table-border-left-width) solid hsl(var(--sdc-table-border-left-color));
-  border-radius: var(--sdc-table-radius);
-  box-shadow: var(--sdc-table-shadow);
-  overflow-x: auto;
-  overflow-y: var(--sdc-table-vertical-scroll);
-}
-
-/* Enhanced scrolling behavior for pinned headers */
-.sdc-table.pinning-headers .table-container {
-  max-height: 70vh; /* Limit height to enable scrolling */
-  overflow-y: auto;
-}
-
-/* Table base styles */
-.sdc-table table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--sdc-table-font-size);
-  line-height: var(--sdc-table-line-height);
-}
-
-/* Header styles */
-.sdc-table-header {
-  background: hsl(var(--sdc-table-header-background));
-  z-index: 10;
-}
-
-/* Pinned headers - only apply sticky positioning when enabled */
-.sdc-table.pinning-headers .sdc-table-header {
-  position: sticky;
-  top: 0;
-}
-
-.sdc-table-header th {
-  padding: var(--sdc-table-header-padding);
-  font-weight: var(--sdc-table-header-font-weight);
-  color: hsl(var(--sdc-table-header-foreground));
-  text-align: left;
-  font-size: var(--sdc-table-header-font-size);
-  text-transform: capitalize;
-  letter-spacing: 0.05em;
-  border-bottom: var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color));
-}
-
-/* Body styles */
-.sdc-table-body {
-  background: hsl(var(--sdc-table-background));
-}
-
-.sdc-table-body tr {
-  border-bottom: var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color));
-  transition: background-color 0.15s ease-in-out;
-}
-
-.sdc-table-body tr:hover {
-  background: hsl(var(--sdc-table-row-hover));
-}
-
-.sdc-table.minimal-table .sdc-table-body tr {
-  border-bottom: none;
-}
-
-.sdc-table.minimal-table .sdc-table-header th {
-  border-bottom: var(--sdc-table-header-border-bottom-width) solid hsl(var(--sdc-table-header-border-bottom-color));
-}
-
-.sdc-table-body td {
-  padding: var(--sdc-table-padding);
-  color: hsl(var(--sdc-table-foreground));
-  font-weight: var(--sdc-table-font-weight);
-  white-space: nowrap;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .table-container {
-    height: auto;
-  }
-
-  .sdc-table-body td {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-xs);
-  }
-
-  .sdc-table-header th {
-    padding: var(--space-3) var(--space-3);
-  }
-}

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

@@ -1,53 +0,0 @@
-<div [class]="computedClass()">
-  <div class="table-container">
-    <!-- we defer the loading of the table, because tanstack manipulates the DOM with flexRender which can cause errors during SSR -->
-    @defer {
-      <table hlmTable>
-        <thead hlmTHead class="sdc-table-header">
-          @for (headerGroup of tableForPagination.getHeaderGroups(); track headerGroup.id) {
-            <tr hlmTr>
-              @for (header of headerGroup.headers; track header.id) {
-                <th hlmTh [attr.colSpan]="header.colSpan">
-                  @if (!header.isPlaceholder) {
-                    <ng-container
-                      *flexRender="header.column.columnDef.header; props: header.getContext(); let headerText">
-                      <div [innerHTML]="headerText"></div>
-                    </ng-container>
-                  }
-                </th>
-              }
-            </tr>
-          }
-        </thead>
-        <tbody hlmTBody class="sdc-table-body w-full">
-          @for (row of paginatedRows; track row.id) {
-            <tr hlmTr [attr.key]="row.id" [attr.data-state]="row.getIsSelected() && 'selected'">
-              @for (cell of row.getVisibleCells(); track $index) {
-                <td hlmTd>
-                  <ng-container *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let cell">
-                    <div [innerHTML]="cell"></div>
-                  </ng-container>
-                </td>
-              }
-            </tr>
-          } @empty {
-            <tr hlmTr>
-              <td hlmTd class="h-24 text-center" [attr.colspan]="_processColumns().length">No results.</td>
-            </tr>
-          }
-        </tbody>
-      </table>
-    }
-  </div>
-</div>
-
-<!-- Pagination Component -->
-@if (showPagination()) {
-  <sdc-pagination
-    [theme]="theme()"
-    [table]="tableForPagination"
-    [maxVisiblePages]="maxVisiblePages()"
-    [showFirstLastButtons]="showFirstLastButtons()"
-    [exportButtonText]="exportButtonText()"
-    (exportClick)="exportClick.emit($event)"></sdc-pagination>
-}