@3ddv/software-division-components 1.5.0 → 2.0.0

package/dist/fesm2022/3ddv-software-division-components-backoffice-table.mjs

@@ -0,0 +1,658 @@
+import * as i0 from '@angular/core';
+import { input, output, Component, ChangeDetectionStrategy, signal, InjectionToken, inject, computed, Directive, NgModule, effect } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronRight, lucideChevronLeft, lucideArrowDown, lucideArrowUp, lucideArrowUpDown, lucideChevronDown } from '@ng-icons/lucide';
+import { injectFlexRenderContext, flexRenderComponent, createAngularTable, getPaginationRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
+export { flexRenderComponent } from '@tanstack/angular-table';
+import { ButtonComponent } from '@3ddv/software-division-components/generic/button';
+import * as i1 from '@3ddv/software-division-components/generic/icon';
+import { HlmIconModule } from '@3ddv/software-division-components/generic/icon';
+import { hlm } from '@spartan-ng/brain/core';
+
+class PaginationComponent {
+    table = input.required(...(ngDevMode ? [{ debugName: "table" }] : []));
+    maxVisiblePages = input(7, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : []));
+    showFirstLastButtons = input(false, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : []));
+    theme = input.required(...(ngDevMode ? [{ debugName: "theme" }] : []));
+    exportButtonText = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonText" }] : []));
+    exportClick = output();
+    getVisiblePageNumbers() {
+        const currentPage = this.table().getState().pagination.pageIndex;
+        const totalPages = this.table().getPageCount();
+        const maxVisible = this.maxVisiblePages();
+        if (totalPages <= maxVisible) {
+            // If total pages is less than or equal to maxVisible, show all pages
+            return Array.from({ length: totalPages }, (_, i) => i);
+        }
+        // Calculate the sliding window of pages to show
+        const pages = [];
+        // Calculate the center position for the window
+        const centerPosition = Math.floor(maxVisible / 2);
+        // Calculate the start page of the window
+        let startPage = Math.max(0, currentPage - centerPosition);
+        // Adjust start page if we're near the end
+        if (startPage + maxVisible > totalPages) {
+            startPage = Math.max(0, totalPages - maxVisible);
+        }
+        // Generate the page numbers for the window
+        for (let i = 0; i < maxVisible; i++) {
+            pages.push(startPage + i);
+        }
+        return pages;
+    }
+    onExportClick() {
+        const tableState = this.table().getState();
+        const selectedRows = tableState.rowSelection;
+        const allRows = this.table()
+            .getRowModel()
+            .rows.map(row => row.original);
+        // Get the actual selected row data
+        const selectedRowData = Object.keys(selectedRows)
+            .filter(key => selectedRows[key])
+            .map(rowId => {
+            const row = this.table()
+                .getRowModel()
+                .rows.find(r => r.id === rowId);
+            return row ? row.original : null;
+        })
+            .filter(Boolean);
+        this.exportClick.emit({
+            selectedRows: selectedRowData,
+            allRows: allRows,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PaginationComponent, isStandalone: true, selector: "sdc-pagination", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, exportButtonText: { classPropertyName: "exportButtonText", publicName: "exportButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportClick: "exportClick" }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<div class=\"pagination\" [class]=\"theme()\">\n  <!-- Pagination Controls -->\n  <div class=\"pagination-controls\">\n    <!-- First Page Button (conditional) -->\n    @if (showFirstLastButtons()) {\n      <button\n        class=\"pagination-button first-page\"\n        [disabled]=\"!table().getCanPreviousPage()\"\n        (click)=\"table().setPageIndex(0)\">\n        1\n      </button>\n    }\n\n    @if (table().getRowCount() > 0) {\n      <!-- Previous Page Button -->\n      <button class=\"pagination-button\" [disabled]=\"!table().getCanPreviousPage()\" (click)=\"table().previousPage()\">\n        <ng-icon hlm name=\"lucideChevronLeft\" size=\"base\" />\n      </button>\n\n      <!-- Page Numbers -->\n      @for (pageIndex of getVisiblePageNumbers(); track pageIndex) {\n        <button\n          class=\"pagination-button\"\n          [class.active]=\"pageIndex === table().getState().pagination.pageIndex\"\n          (click)=\"table().setPageIndex(pageIndex)\">\n          {{ pageIndex + 1 }}\n        </button>\n      }\n\n      <!-- Next Page Button -->\n      <button class=\"pagination-button\" [disabled]=\"!table().getCanNextPage()\" (click)=\"table().nextPage()\">\n        <ng-icon hlm name=\"lucideChevronRight\" size=\"base\" />\n      </button>\n\n      <!-- Last Page Button (conditional) -->\n      @if (showFirstLastButtons()) {\n        <button\n          class=\"pagination-button last-page\"\n          [disabled]=\"!table().getCanNextPage()\"\n          (click)=\"table().setPageIndex(table().getPageCount() - 1)\">\n          {{ table().getPageCount() }}\n        </button>\n      }\n    } @else {\n      <div class=\"no-data-container\">\n        <div class=\"no-data-text\">No Data</div>\n      </div>\n    }\n  </div>\n\n  <!-- Added Export button to match the design -->\n  <div class=\"export-button\">\n    <sdc-button (click)=\"onExportClick()\">{{ exportButtonText() }}</sdc-button>\n  </div>\n</div>\n", styles: [".pagination{--sdc-pagination-padding: var(--space-6) 0;--sdc-pagination-background: var(--color-neutral-100);--sdc-pagination-button-text-size: var(--text-sm);--sdc-pagination-button-text-weight: var(--font-bold);--sdc-pagination-button-background: var(--color-pure-white);--sdc-pagination-button-foreground: var(--color-neutral-700);--sdc-pagination-button-hover-background: var(--color-primary);--sdc-pagination-button-hover-foreground: var(--color-pure-white);--sdc-pagination-button-active-background: var(--color-primary);--sdc-pagination-button-active-foreground: var(--color-pure-white);--sdc-pagination-button-disabled-background: var(--color-neutral-200);--sdc-pagination-button-disabled-foreground: var(--color-neutral-500);--sdc-pagination-button-gap: var(--space-2);--sdc-pagination-button-width: var(--space-8);--sdc-pagination-button-height: var(--space-8);--sdc-pagination-button-border-radius: var(--radius-full);display:flex;justify-content:center;align-items:center;position:relative;background:hsl(var(--sdc-pagination-background));padding:var(--sdc-pagination-padding)}.pagination-controls{display:flex;align-items:center;gap:var(--sdc-pagination-button-gap)}.pagination-button{width:var(--sdc-pagination-button-width);height:var(--sdc-pagination-button-height);background:hsl(var(--sdc-pagination-button-background));border-radius:var(--sdc-pagination-button-border-radius);font-size:var(--sdc-pagination-button-text-size);font-weight:var(--sdc-pagination-button-text-weight);transition:all .15s ease-in-out;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.pagination-button.first-page{margin-right:var(--space-8)}.pagination-button.last-page{margin-left:var(--space-8)}.pagination-button:not(.active){background:hsl(var(--sdc-pagination-button-background));color:hsl(var(--sdc-pagination-button-foreground));border-color:none}.pagination-button:not(.active):hover:not(:disabled){background:hsl(var(--sdc-pagination-button-hover-background));color:hsl(var(--sdc-pagination-button-hover-foreground))}.pagination-button.active{background:hsl(var(--sdc-pagination-button-active-background));color:hsl(var(--sdc-pagination-button-active-foreground));border-color:none}.pagination-button:disabled{background:hsl(var(--sdc-pagination-button-disabled-background));color:hsl(var(--sdc-pagination-button-disabled-foreground));cursor:not-allowed;opacity:.5}.pagination-nav-button{background:hsl(var(--sdc-pagination-button-background));color:hsl(var(--color-neutral-500));border:none}.pagination-nav-button:hover:not(:disabled){background:hsl(var(--sdc-pagination-button-hover-background))}.no-data-container{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--space-4)}.no-data-text{color:hsl(var(--color-neutral-500));font-size:var(--text-sm)}.export-button{position:absolute;right:var(--space-6)}@media(max-width:768px){.pagination-container{flex-direction:column;gap:var(--space-4)}}\n"], dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: HlmIconModule }, { kind: "directive", type: i1.HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "component", type: ButtonComponent, selector: "sdc-button", inputs: ["theme", "styleClass", "className", "variant", "size", "type", "disabled", "ripple", "debounce"], outputs: ["onClick", "onFocus", "onBlur", "isDebounced"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sdc-pagination', imports: [NgIcon, HlmIconModule, ButtonComponent], providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })], template: "<div class=\"pagination\" [class]=\"theme()\">\n  <!-- Pagination Controls -->\n  <div class=\"pagination-controls\">\n    <!-- First Page Button (conditional) -->\n    @if (showFirstLastButtons()) {\n      <button\n        class=\"pagination-button first-page\"\n        [disabled]=\"!table().getCanPreviousPage()\"\n        (click)=\"table().setPageIndex(0)\">\n        1\n      </button>\n    }\n\n    @if (table().getRowCount() > 0) {\n      <!-- Previous Page Button -->\n      <button class=\"pagination-button\" [disabled]=\"!table().getCanPreviousPage()\" (click)=\"table().previousPage()\">\n        <ng-icon hlm name=\"lucideChevronLeft\" size=\"base\" />\n      </button>\n\n      <!-- Page Numbers -->\n      @for (pageIndex of getVisiblePageNumbers(); track pageIndex) {\n        <button\n          class=\"pagination-button\"\n          [class.active]=\"pageIndex === table().getState().pagination.pageIndex\"\n          (click)=\"table().setPageIndex(pageIndex)\">\n          {{ pageIndex + 1 }}\n        </button>\n      }\n\n      <!-- Next Page Button -->\n      <button class=\"pagination-button\" [disabled]=\"!table().getCanNextPage()\" (click)=\"table().nextPage()\">\n        <ng-icon hlm name=\"lucideChevronRight\" size=\"base\" />\n      </button>\n\n      <!-- Last Page Button (conditional) -->\n      @if (showFirstLastButtons()) {\n        <button\n          class=\"pagination-button last-page\"\n          [disabled]=\"!table().getCanNextPage()\"\n          (click)=\"table().setPageIndex(table().getPageCount() - 1)\">\n          {{ table().getPageCount() }}\n        </button>\n      }\n    } @else {\n      <div class=\"no-data-container\">\n        <div class=\"no-data-text\">No Data</div>\n      </div>\n    }\n  </div>\n\n  <!-- Added Export button to match the design -->\n  <div class=\"export-button\">\n    <sdc-button (click)=\"onExportClick()\">{{ exportButtonText() }}</sdc-button>\n  </div>\n</div>\n", styles: [".pagination{--sdc-pagination-padding: var(--space-6) 0;--sdc-pagination-background: var(--color-neutral-100);--sdc-pagination-button-text-size: var(--text-sm);--sdc-pagination-button-text-weight: var(--font-bold);--sdc-pagination-button-background: var(--color-pure-white);--sdc-pagination-button-foreground: var(--color-neutral-700);--sdc-pagination-button-hover-background: var(--color-primary);--sdc-pagination-button-hover-foreground: var(--color-pure-white);--sdc-pagination-button-active-background: var(--color-primary);--sdc-pagination-button-active-foreground: var(--color-pure-white);--sdc-pagination-button-disabled-background: var(--color-neutral-200);--sdc-pagination-button-disabled-foreground: var(--color-neutral-500);--sdc-pagination-button-gap: var(--space-2);--sdc-pagination-button-width: var(--space-8);--sdc-pagination-button-height: var(--space-8);--sdc-pagination-button-border-radius: var(--radius-full);display:flex;justify-content:center;align-items:center;position:relative;background:hsl(var(--sdc-pagination-background));padding:var(--sdc-pagination-padding)}.pagination-controls{display:flex;align-items:center;gap:var(--sdc-pagination-button-gap)}.pagination-button{width:var(--sdc-pagination-button-width);height:var(--sdc-pagination-button-height);background:hsl(var(--sdc-pagination-button-background));border-radius:var(--sdc-pagination-button-border-radius);font-size:var(--sdc-pagination-button-text-size);font-weight:var(--sdc-pagination-button-text-weight);transition:all .15s ease-in-out;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.pagination-button.first-page{margin-right:var(--space-8)}.pagination-button.last-page{margin-left:var(--space-8)}.pagination-button:not(.active){background:hsl(var(--sdc-pagination-button-background));color:hsl(var(--sdc-pagination-button-foreground));border-color:none}.pagination-button:not(.active):hover:not(:disabled){background:hsl(var(--sdc-pagination-button-hover-background));color:hsl(var(--sdc-pagination-button-hover-foreground))}.pagination-button.active{background:hsl(var(--sdc-pagination-button-active-background));color:hsl(var(--sdc-pagination-button-active-foreground));border-color:none}.pagination-button:disabled{background:hsl(var(--sdc-pagination-button-disabled-background));color:hsl(var(--sdc-pagination-button-disabled-foreground));cursor:not-allowed;opacity:.5}.pagination-nav-button{background:hsl(var(--sdc-pagination-button-background));color:hsl(var(--color-neutral-500));border:none}.pagination-nav-button:hover:not(:disabled){background:hsl(var(--sdc-pagination-button-hover-background))}.no-data-container{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--space-4)}.no-data-text{color:hsl(var(--color-neutral-500));font-size:var(--text-sm)}.export-button{position:absolute;right:var(--space-6)}@media(max-width:768px){.pagination-container{flex-direction:column;gap:var(--space-4)}}\n"] }]
+        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], exportButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonText", required: false }] }], exportClick: [{ type: i0.Output, args: ["exportClick"] }] } });
+
+class SelectionTableHeadComponent {
+    context = injectFlexRenderContext();
+    getIsAllVisibleRowsSelected() {
+        const visibleRows = this.context.table.getRowModel().rows;
+        return visibleRows.length > 0 && visibleRows.every(row => row.getIsSelected());
+    }
+    getIsSomeVisibleRowsSelected() {
+        const visibleRows = this.context.table.getRowModel().rows;
+        const selectedCount = visibleRows.filter(row => row.getIsSelected()).length;
+        return selectedCount > 0 && selectedCount < visibleRows.length;
+    }
+    toggleAllVisibleRowsSelected() {
+        const visibleRows = this.context.table.getRowModel().rows;
+        const allSelected = this.getIsAllVisibleRowsSelected();
+        visibleRows.forEach(row => {
+            if (allSelected) {
+                row.toggleSelected(false);
+            }
+            else {
+                row.toggleSelected(true);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectionTableHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: SelectionTableHeadComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<input\n  class=\"block px-1 selection-header\"\n  type=\"checkbox\"\n  [checked]=\"getIsAllVisibleRowsSelected()\"\n  [indeterminate]=\"getIsSomeVisibleRowsSelected()\"\n  (change)=\"toggleAllVisibleRowsSelected()\" />\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectionTableHeadComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  class=\"block px-1 selection-header\"\n  type=\"checkbox\"\n  [checked]=\"getIsAllVisibleRowsSelected()\"\n  [indeterminate]=\"getIsSomeVisibleRowsSelected()\"\n  (change)=\"toggleAllVisibleRowsSelected()\" />\n" }]
+        }] });
+
+class SelectionTableRowComponent {
+    context = injectFlexRenderContext();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectionTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: SelectionTableRowComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<input\n  class=\"block px-1\"\n  type=\"checkbox\"\n  [checked]=\"context.row.getIsSelected()\"\n  (change)=\"context.row.getToggleSelectedHandler()($event)\" />\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectionTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  class=\"block px-1\"\n  type=\"checkbox\"\n  [checked]=\"context.row.getIsSelected()\"\n  (change)=\"context.row.getToggleSelectedHandler()($event)\" />\n" }]
+        }] });
+
+class SortTableHeadButtonComponent {
+    isSorted = input(false, ...(ngDevMode ? [{ debugName: "isSorted" }] : []));
+    columnName = input.required(...(ngDevMode ? [{ debugName: "columnName" }] : []));
+    sortDirection = input.required(...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+    enableSorting = input(false, ...(ngDevMode ? [{ debugName: "enableSorting" }] : []));
+    sortClick = output();
+    isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
+    onSortClick() {
+        if (this.enableSorting()) {
+            this.sortClick.emit();
+        }
+    }
+    onMouseEnter() {
+        if (this.enableSorting()) {
+            this.isHovered.set(true);
+        }
+    }
+    onMouseLeave() {
+        if (this.enableSorting()) {
+            this.isHovered.set(false);
+        }
+    }
+    iconName() {
+        // Show active sort arrow when sorted
+        if (this.isSorted()) {
+            return this.sortDirection() === 'asc' ? 'lucideArrowDown' : 'lucideArrowUp';
+        }
+        if (this.isHovered()) {
+            return 'lucideArrowUpDown';
+        }
+        // No icon when not sorted and not hovering
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SortTableHeadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SortTableHeadButtonComponent, isStandalone: true, selector: "sdc-table-head-sort-button", inputs: { isSorted: { classPropertyName: "isSorted", publicName: "isSorted", isSignal: true, isRequired: false, transformFunction: null }, columnName: { classPropertyName: "columnName", publicName: "columnName", isSignal: true, isRequired: true, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: true, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick" }, providers: [provideIcons({ lucideArrowUpDown, lucideArrowUp, lucideArrowDown })], ngImport: i0, template: "<button class=\"sort-button\" (click)=\"onSortClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <span class=\"capitalize\">\n    {{ columnName() }}\n  </span>\n  <span class=\"sort-icon\">\n    <!-- Sort Icon -->\n    @if (enableSorting() && iconName()) {\n      <ng-icon hlm size=\"sm\" [name]=\"iconName()\" aria-hidden=\"true\" />\n    }\n  </span>\n</button>\n", styles: [".sort-button{display:flex;flex-direction:row;flex-wrap:nowrap;text-transform:capitalize;cursor:pointer}.sort-icon{display:inline-block;margin-left:.25rem;width:1rem;height:1rem}\n"], dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: HlmIconModule }, { kind: "directive", type: i1.HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SortTableHeadButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sdc-table-head-sort-button', imports: [NgIcon, ButtonComponent, HlmIconModule], providers: [provideIcons({ lucideArrowUpDown, lucideArrowUp, lucideArrowDown })], template: "<button class=\"sort-button\" (click)=\"onSortClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <span class=\"capitalize\">\n    {{ columnName() }}\n  </span>\n  <span class=\"sort-icon\">\n    <!-- Sort Icon -->\n    @if (enableSorting() && iconName()) {\n      <ng-icon hlm size=\"sm\" [name]=\"iconName()\" aria-hidden=\"true\" />\n    }\n  </span>\n</button>\n", styles: [".sort-button{display:flex;flex-direction:row;flex-wrap:nowrap;text-transform:capitalize;cursor:pointer}.sort-icon{display:inline-block;margin-left:.25rem;width:1rem;height:1rem}\n"] }]
+        }], propDecorators: { isSorted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSorted", required: false }] }], columnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnName", required: true }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: true }] }], enableSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSorting", required: false }] }], sortClick: [{ type: i0.Output, args: ["sortClick"] }] } });
+
+// src/app/directives/hlm-table-directives.ts
+// Configuration Interface and InjectionToken
+const HlmTableConfigToken = new InjectionToken('HlmTableConfig');
+const HlmTableVariantDefault = {
+    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',
+};
+function provideHlmTableConfig(config) {
+    return {
+        provide: HlmTableConfigToken,
+        useValue: { ...HlmTableVariantDefault, ...config },
+    };
+}
+function injectHlmTableConfig() {
+    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.
+ */
+class HlmTable {
+    /** Input to configure the variant of the table, this input has the highest priority. */
+    userVariant = input({}, { ...(ngDevMode ? { debugName: "userVariant" } : {}), alias: 'hlmTable' });
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Global or default configuration provided by injectHlmTableConfig() */
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    // Protected variant that resolves user input to a full HlmTableVariant
+    _variant = computed(() => {
+        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;
+    }, ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    // Computed class for the host <table> element
+    _computedClass = computed(() => hlm(this._variant().table, this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTable, isStandalone: true, selector: "table[hlmTable]", inputs: { userVariant: { classPropertyName: "userVariant", publicName: "hlmTable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[hlmTable]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "hlmTable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTableDirective context.
+ */
+class HlmTHead {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.thead.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTHead, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTHead, isStandalone: true, selector: "thead[hlmTHead]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTHead, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thead[hlmTHead]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTableDirective context.
+ */
+class HlmTBody {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tbody.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTBody, isStandalone: true, selector: "tbody[hlmTBody]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbody[hlmTBody]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTableDirective context.
+ */
+class HlmTFoot {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tfoot.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTFoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTFoot, isStandalone: true, selector: "tfoot[hlmTFoot]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTFoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tfoot[hlmTFoot]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTableDirective context.
+ */
+class HlmTr {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tr.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTr, isStandalone: true, selector: "tr[hlmTr]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTr, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[hlmTr]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTableDirective context.
+ */
+class HlmTh {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.th.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTh, isStandalone: true, selector: "th[hlmTh]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTh, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[hlmTh]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTableDirective context.
+ */
+class HlmTd {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.td.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmTd, isStandalone: true, selector: "td[hlmTd]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[hlmTd]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTableDirective context.
+ */
+class HlmCaption {
+    _globalOrDefaultConfig = injectHlmTableConfig();
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    _computedClass = computed(() => hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.caption.trim() : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: HlmCaption, isStandalone: true, selector: "caption[hlmCaption]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmCaption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'caption[hlmCaption]',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const HlmTableImports = [HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr];
+class HlmTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: HlmTableModule, imports: [HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr], exports: [HlmCaption, HlmTable, HlmTBody, HlmTd, HlmTFoot, HlmTh, HlmTHead, HlmTr] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTableModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HlmTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmTableImports],
+                    exports: [...HlmTableImports],
+                }]
+        }] });
+
+class TableComponent {
+    allowedVariants = ['full-table', 'minimal-table'];
+    /**
+     * The data to display in the table.
+     */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * The columns to display in the table.
+     */
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /**
+     * Whether to show the selection column.
+     */
+    showSelection = input(false, ...(ngDevMode ? [{ debugName: "showSelection" }] : []));
+    /**
+     * Whether to enable sorting for the table.
+     */
+    enableSort = input(false, ...(ngDevMode ? [{ debugName: "enableSort" }] : []));
+    /**
+     * The maximum number of pages to display in the pagination.
+     */
+    maxVisiblePages = input(3, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : []));
+    /**
+     * The page size for the table pagination.
+     */
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /**
+     * The initial page index for the table pagination.
+     */
+    initialPageIndex = input(0, ...(ngDevMode ? [{ debugName: "initialPageIndex" }] : []));
+    /**
+     * Whether to show the first and last buttons in the pagination.
+     */
+    showFirstLastButtons = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : []));
+    /**
+     * The current theme applied to the component.
+     */
+    theme = input('theme-sdc', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    /**
+     * Predefined styles to apply to the component.
+     * Can be a single class or multiple classes from different categories.
+     */
+    styleClass = input([this.allowedVariants[0]], ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    // Computed signal that validates and filters the styleClass input
+    _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;
+    }, ...(ngDevMode ? [{ debugName: "_validatedStyleClass" }] : []));
+    /**
+     * Additional CSS classes to apply to the component.
+     */
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    /**
+     * The text to display in the export button.
+     */
+    exportButtonText = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonText" }] : []));
+    /**
+     * Event emitted when the export button is clicked.
+     * Includes selected rows and all rows for export functionality.
+     */
+    exportClick = output();
+    /**
+     * Event emitted when the sorting state changes.
+     */
+    sortingChange = output();
+    /**
+     * Event emitted when the selection state changes.
+     */
+    selectionChange = output();
+    /**
+     * 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.
+     */
+    pinningHeaders = input(false, ...(ngDevMode ? [{ debugName: "pinningHeaders" }] : []));
+    /**
+     * Whether to show the pagination controls at the bottom of the table.
+     * When disabled, all rows will be displayed without pagination.
+     */
+    showPagination = input(true, ...(ngDevMode ? [{ debugName: "showPagination" }] : []));
+    /**
+     * Event emitted when the pagination state changes.
+     */
+    paginationChange = output();
+    /**
+     * Computed class string that combines theme and user classes.
+     */
+    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(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    _handleSortClick(columnId) {
+        const currentSort = this._sorting();
+        const currentColumnSort = currentSort.find(sort => sort.id === columnId);
+        let newSort = [];
+        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);
+    }
+    _getSortDirection(columnId) {
+        const currentSort = this._sorting();
+        const columnSort = currentSort.find(sort => sort.id === columnId);
+        if (!columnSort) {
+            return false;
+        }
+        return columnSort.desc ? 'desc' : 'asc';
+    }
+    _isColumnSorted(columnId) {
+        const currentSort = this._sorting();
+        return currentSort.some(sort => sort.id === columnId);
+    }
+    _isSortEnabled(columnId) {
+        const sortConfig = this.enableSort();
+        if (typeof sortConfig === 'boolean') {
+            return sortConfig;
+        }
+        if (Array.isArray(sortConfig)) {
+            return sortConfig.includes(columnId);
+        }
+        return false;
+    }
+    _createSortableHeader(column, columnId) {
+        return flexRenderComponent(SortTableHeadButtonComponent, {
+            inputs: {
+                columnName: columnId,
+                isSorted: this._isColumnSorted(columnId),
+                sortDirection: this._getSortDirection(columnId),
+                enableSorting: this._isSortEnabled(columnId),
+            },
+            outputs: {
+                sortClick: () => this._handleSortClick(columnId),
+            },
+        });
+    }
+    _processColumns() {
+        const baseColumns = this.columns() || [];
+        const processedColumns = [];
+        // 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;
+    }
+    _sorting = signal([], ...(ngDevMode ? [{ debugName: "_sorting" }] : []));
+    _rowSelection = signal({}, ...(ngDevMode ? [{ debugName: "_rowSelection" }] : []));
+    _pagination = signal({
+        pageSize: this.pageSize(),
+        pageIndex: this.initialPageIndex(),
+    }, ...(ngDevMode ? [{ debugName: "_pagination" }] : []));
+    // Effect to sync input changes to the pagination signal
+    // Only runs when pagination is enabled
+    _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,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "_paginationEffect" }] : []));
+    ngOnDestroy() {
+        // Cleans up the pagination effect to prevent memory leaks.
+        if (this._paginationEffect) {
+            this._paginationEffect.destroy();
+        }
+    }
+    _table = createAngularTable(() => ({
+        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
+    get headerGroups() {
+        return this._table.getHeaderGroups();
+    }
+    get rows() {
+        return this._table.getRowModel().rows;
+    }
+    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
+    get tableForPagination() {
+        return this._table;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableComponent, isStandalone: true, selector: "sdc-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, initialPageIndex: { classPropertyName: "initialPageIndex", publicName: "initialPageIndex", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, exportButtonText: { classPropertyName: "exportButtonText", publicName: "exportButtonText", isSignal: true, isRequired: false, transformFunction: null }, pinningHeaders: { classPropertyName: "pinningHeaders", publicName: "pinningHeaders", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportClick: "exportClick", sortingChange: "sortingChange", selectionChange: "selectionChange", paginationChange: "paginationChange" }, providers: [provideIcons({ lucideChevronDown, lucideChevronLeft, lucideChevronRight })], ngImport: i0, template: "<div [class]=\"computedClass()\">\n  <div class=\"table-container\">\n    <!-- we defer the loading of the table, because tanstack manipulates the DOM with flexRender which can cause errors during SSR -->\n    @defer {\n      <table hlmTable>\n        <thead hlmTHead class=\"sdc-table-header\">\n          @for (headerGroup of tableForPagination.getHeaderGroups(); track headerGroup.id) {\n            <tr hlmTr>\n              @for (header of headerGroup.headers; track header.id) {\n                <th hlmTh [attr.colSpan]=\"header.colSpan\">\n                  @if (!header.isPlaceholder) {\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerText\">\n                      <div [innerHTML]=\"headerText\"></div>\n                    </ng-container>\n                  }\n                </th>\n              }\n            </tr>\n          }\n        </thead>\n        <tbody hlmTBody class=\"sdc-table-body w-full\">\n          @for (row of paginatedRows; track row.id) {\n            <tr hlmTr [attr.key]=\"row.id\" [attr.data-state]=\"row.getIsSelected() && 'selected'\">\n              @for (cell of row.getVisibleCells(); track $index) {\n                <td hlmTd>\n                  <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cell\">\n                    <div [innerHTML]=\"cell\"></div>\n                  </ng-container>\n                </td>\n              }\n            </tr>\n          } @empty {\n            <tr hlmTr>\n              <td hlmTd class=\"h-24 text-center\" [attr.colspan]=\"_processColumns().length\">No results.</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  </div>\n</div>\n\n<!-- Pagination Component -->\n@if (showPagination()) {\n  <sdc-pagination\n    [theme]=\"theme()\"\n    [table]=\"tableForPagination\"\n    [maxVisiblePages]=\"maxVisiblePages()\"\n    [showFirstLastButtons]=\"showFirstLastButtons()\"\n    [exportButtonText]=\"exportButtonText()\"\n    (exportClick)=\"exportClick.emit($event)\"></sdc-pagination>\n}\n", styles: [".sdc-table.full-table{--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, .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{--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, .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)}.sdc-table{width:100%;overflow:hidden}.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)}.sdc-table.pinning-headers .table-container{max-height:70vh;overflow-y:auto}.sdc-table table{width:100%;border-collapse:collapse;font-size:var(--sdc-table-font-size);line-height:var(--sdc-table-line-height)}.sdc-table-header{background:hsl(var(--sdc-table-header-background));z-index:10}.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:.05em;border-bottom:var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color))}.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 .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}@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)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: PaginationComponent, selector: "sdc-pagination", inputs: ["table", "maxVisiblePages", "showFirstLastButtons", "theme", "exportButtonText"], outputs: ["exportClick"] }], deferBlockDependencies: [() => [FlexRenderDirective, HlmTable, HlmTBody, HlmTd, HlmTh, HlmTHead, HlmTr]] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sdc-table', imports: [FormsModule, FlexRenderDirective, PaginationComponent, ...HlmTableImports], providers: [provideIcons({ lucideChevronDown, lucideChevronLeft, lucideChevronRight })], template: "<div [class]=\"computedClass()\">\n  <div class=\"table-container\">\n    <!-- we defer the loading of the table, because tanstack manipulates the DOM with flexRender which can cause errors during SSR -->\n    @defer {\n      <table hlmTable>\n        <thead hlmTHead class=\"sdc-table-header\">\n          @for (headerGroup of tableForPagination.getHeaderGroups(); track headerGroup.id) {\n            <tr hlmTr>\n              @for (header of headerGroup.headers; track header.id) {\n                <th hlmTh [attr.colSpan]=\"header.colSpan\">\n                  @if (!header.isPlaceholder) {\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let headerText\">\n                      <div [innerHTML]=\"headerText\"></div>\n                    </ng-container>\n                  }\n                </th>\n              }\n            </tr>\n          }\n        </thead>\n        <tbody hlmTBody class=\"sdc-table-body w-full\">\n          @for (row of paginatedRows; track row.id) {\n            <tr hlmTr [attr.key]=\"row.id\" [attr.data-state]=\"row.getIsSelected() && 'selected'\">\n              @for (cell of row.getVisibleCells(); track $index) {\n                <td hlmTd>\n                  <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let cell\">\n                    <div [innerHTML]=\"cell\"></div>\n                  </ng-container>\n                </td>\n              }\n            </tr>\n          } @empty {\n            <tr hlmTr>\n              <td hlmTd class=\"h-24 text-center\" [attr.colspan]=\"_processColumns().length\">No results.</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  </div>\n</div>\n\n<!-- Pagination Component -->\n@if (showPagination()) {\n  <sdc-pagination\n    [theme]=\"theme()\"\n    [table]=\"tableForPagination\"\n    [maxVisiblePages]=\"maxVisiblePages()\"\n    [showFirstLastButtons]=\"showFirstLastButtons()\"\n    [exportButtonText]=\"exportButtonText()\"\n    (exportClick)=\"exportClick.emit($event)\"></sdc-pagination>\n}\n", styles: [".sdc-table.full-table{--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, .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{--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, .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)}.sdc-table{width:100%;overflow:hidden}.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)}.sdc-table.pinning-headers .table-container{max-height:70vh;overflow-y:auto}.sdc-table table{width:100%;border-collapse:collapse;font-size:var(--sdc-table-font-size);line-height:var(--sdc-table-line-height)}.sdc-table-header{background:hsl(var(--sdc-table-header-background));z-index:10}.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:.05em;border-bottom:var(--sdc-table-border-bottom-width) solid hsl(var(--sdc-table-border-bottom-color))}.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 .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}@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)}}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], enableSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSort", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], initialPageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialPageIndex", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], exportButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonText", required: false }] }], exportClick: [{ type: i0.Output, args: ["exportClick"] }], sortingChange: [{ type: i0.Output, args: ["sortingChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pinningHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinningHeaders", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }] } });
+
+// Export the main table component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TableComponent };
+//# sourceMappingURL=3ddv-software-division-components-backoffice-table.mjs.map