@eduboxpro/studio 0.1.16 → 0.1.18

package/fesm2022/eduboxpro-studio.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, Renderer2, Directive } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, TemplateRef, ContentChild, Input, Directive, contentChildren, Renderer2 } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as LucideIcons from 'lucide-angular';
@@ -5029,6 +5029,452 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Switch component
  */
 
+/**
+ * Directive for declarative column definition
+ *
+ * @example
+ * <studio-table-column
+ *   key="name"
+ *   label="Name"
+ *   [sortable]="true">
+ *   <ng-template let-row>{{ row.name }}</ng-template>
+ * </studio-table-column>
+ */
+class TableColumnDirective {
+    key;
+    label;
+    field;
+    width;
+    minWidth;
+    maxWidth;
+    sortable;
+    sortFn;
+    filterable;
+    align;
+    fixed;
+    hideOnMobile;
+    priority;
+    cellClass;
+    headerClass;
+    formatter;
+    resizable;
+    template;
+    /**
+     * Convert directive inputs to TableColumn config
+     */
+    toColumnConfig() {
+        return {
+            key: this.key,
+            label: this.label,
+            field: this.field,
+            width: this.width,
+            minWidth: this.minWidth,
+            maxWidth: this.maxWidth,
+            sortable: this.sortable,
+            sortFn: this.sortFn,
+            filterable: this.filterable,
+            align: this.align,
+            fixed: this.fixed,
+            hideOnMobile: this.hideOnMobile,
+            priority: this.priority,
+            cellTemplate: this.template,
+            cellClass: this.cellClass,
+            headerClass: this.headerClass,
+            formatter: this.formatter,
+            resizable: this.resizable
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: TableColumnDirective, isStandalone: true, selector: "studio-table-column", inputs: { key: "key", label: "label", field: "field", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", sortable: "sortable", sortFn: "sortFn", filterable: "filterable", align: "align", fixed: "fixed", hideOnMobile: "hideOnMobile", priority: "priority", cellClass: "cellClass", headerClass: "headerClass", formatter: "formatter", resizable: "resizable" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'studio-table-column',
+                    standalone: true
+                }]
+        }], propDecorators: { key: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], field: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sortFn: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], fixed: [{
+                type: Input
+            }], hideOnMobile: [{
+                type: Input
+            }], priority: [{
+                type: Input
+            }], cellClass: [{
+                type: Input
+            }], headerClass: [{
+                type: Input
+            }], formatter: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
+/**
+ * Enterprise-grade Table component with full feature set
+ *
+ * @example
+ * <studio-table
+ *   [data]="users"
+ *   [columns]="columns"
+ *   selectionMode="multiple"
+ *   [(selected)]="selectedUsers">
+ * </studio-table>
+ */
+class TableComponent {
+    configService = inject(StudioConfigService);
+    tableDefaults = computed(() => this.configService.config().components?.table, ...(ngDevMode ? [{ debugName: "tableDefaults" }] : []));
+    // Config inputs with defaults
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    densityInput = input(undefined, ...(ngDevMode ? [{ debugName: "densityInput", alias: 'density' }] : [{ alias: 'density' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.tableDefaults()?.variant), 'default');
+    density = withConfigDefault(this.densityInput, computed(() => this.tableDefaults()?.density), 'comfortable');
+    // Data inputs
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    rowKey = input('id', ...(ngDevMode ? [{ debugName: "rowKey" }] : []));
+    // Column directives (declarative mode)
+    columnDirectives = contentChildren(TableColumnDirective, ...(ngDevMode ? [{ debugName: "columnDirectives" }] : []));
+    // Features
+    selectionMode = input('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    sortable = input(true, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
+    sortMode = input('client', ...(ngDevMode ? [{ debugName: "sortMode" }] : []));
+    hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
+    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : []));
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    // Row expansion
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+    expandedRowTemplate = contentChild('expandedRow', ...(ngDevMode ? [{ debugName: "expandedRowTemplate" }] : []));
+    expandMultiple = input(false, ...(ngDevMode ? [{ debugName: "expandMultiple" }] : []));
+    // Loading & Empty states
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loadingRows = input(5, ...(ngDevMode ? [{ debugName: "loadingRows" }] : []));
+    emptyState = input({
+        icon: 'inbox',
+        title: 'No data',
+        message: 'No data available to display'
+    }, ...(ngDevMode ? [{ debugName: "emptyState" }] : []));
+    // Row actions
+    rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    // Responsive
+    responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
+    mobileBreakpoint = input(768, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
+    // State models
+    selected = model([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    sort = model(null, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    expanded = model(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    // Outputs
+    sortChange = output();
+    selectionChange = output();
+    rowClick = output();
+    rowDblClick = output();
+    // Internal state
+    currentSort = signal(null, ...(ngDevMode ? [{ debugName: "currentSort" }] : []));
+    selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
+    // Computed columns (merge programmatic + declarative)
+    finalColumns = computed(() => {
+        const programmatic = this.columns();
+        const declarative = this.columnDirectives().map(dir => dir.toColumnConfig());
+        return declarative.length > 0 ? declarative : programmatic;
+    }, ...(ngDevMode ? [{ debugName: "finalColumns" }] : []));
+    // Computed data (sorted, filtered)
+    processedData = computed(() => {
+        let result = [...this.data()];
+        // Apply sorting (client-side only)
+        if (this.sortMode() === 'client' && this.currentSort()) {
+            result = this.applySorting(result);
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "processedData" }] : []));
+    // Selection helpers
+    allSelected = computed(() => {
+        const data = this.processedData();
+        const selected = this.selectedRows();
+        return data.length > 0 && data.every(row => selected.has(this.getRowKey(row)));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    someSelected = computed(() => {
+        const data = this.processedData();
+        const selected = this.selectedRows();
+        return data.some(row => selected.has(this.getRowKey(row))) && !this.allSelected();
+    }, ...(ngDevMode ? [{ debugName: "someSelected" }] : []));
+    hostClasses = computed(() => classNames('studio-table', `studio-table--${this.variant()}`, `studio-table--${this.density()}`, this.hoverable() && 'studio-table--hoverable', this.stickyHeader() && 'studio-table--sticky-header', this.loading() && 'studio-table--loading', this.responsive() && 'studio-table--responsive'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        // Sync model signals
+        effect(() => {
+            const sortVal = this.sort();
+            if (sortVal)
+                this.currentSort.set(sortVal);
+        });
+        effect(() => {
+            const current = this.currentSort();
+            if (current)
+                this.sort.set(current);
+        });
+        effect(() => {
+            const selected = this.selected();
+            const keys = new Set(selected.map(row => this.getRowKey(row)));
+            this.selectedRows.set(keys);
+        });
+        effect(() => {
+            const expanded = this.expanded();
+            this.expandedRows.set(expanded);
+        });
+    }
+    // Public API
+    sortBy(column, direction) {
+        if (!column.sortable && !this.sortable())
+            return;
+        const currentSort = this.currentSort();
+        const prevDirection = currentSort?.column === column.key ? currentSort.direction : null;
+        // Toggle: asc -> desc -> null
+        let newDirection = direction || 'asc';
+        if (!direction) {
+            if (prevDirection === 'asc')
+                newDirection = 'desc';
+            else if (prevDirection === 'desc')
+                newDirection = null;
+        }
+        if (newDirection) {
+            this.currentSort.set({ column: column.key, direction: newDirection });
+            this.sortChange.emit({
+                column,
+                direction: newDirection,
+                previousDirection: prevDirection
+            });
+        }
+        else {
+            this.currentSort.set(null);
+        }
+    }
+    selectRow(row) {
+        if (this.selectionMode() === 'none')
+            return;
+        const rowKey = this.getRowKey(row);
+        const selected = new Set(this.selectedRows());
+        if (this.selectionMode() === 'single') {
+            selected.clear();
+            selected.add(rowKey);
+        }
+        else {
+            if (selected.has(rowKey)) {
+                selected.delete(rowKey);
+            }
+            else {
+                selected.add(rowKey);
+            }
+        }
+        this.selectedRows.set(selected);
+        this.updateSelectedModel();
+        this.selectionChange.emit({
+            selected: this.getSelectedRows(),
+            row,
+            isSelected: selected.has(rowKey)
+        });
+    }
+    selectAll(select) {
+        if (this.selectionMode() !== 'multiple')
+            return;
+        const selected = new Set();
+        if (select) {
+            this.processedData().forEach(row => {
+                selected.add(this.getRowKey(row));
+            });
+        }
+        this.selectedRows.set(selected);
+        this.updateSelectedModel();
+        this.selectionChange.emit({
+            selected: this.getSelectedRows(),
+            isSelected: select
+        });
+    }
+    toggleRowExpansion(row) {
+        if (!this.expandable())
+            return;
+        const rowKey = this.getRowKey(row);
+        const expanded = new Set(this.expandedRows());
+        if (!this.expandMultiple()) {
+            expanded.clear();
+        }
+        if (expanded.has(rowKey)) {
+            expanded.delete(rowKey);
+        }
+        else {
+            expanded.add(rowKey);
+        }
+        this.expandedRows.set(expanded);
+        this.expanded.set(expanded);
+    }
+    isRowExpanded(row) {
+        return this.expandedRows().has(this.getRowKey(row));
+    }
+    isRowSelected(row) {
+        return this.selectedRows().has(this.getRowKey(row));
+    }
+    getCellValue(row, column) {
+        if (column.field) {
+            if (typeof column.field === 'function') {
+                return column.field(row);
+            }
+            return row[column.field];
+        }
+        return row[column.key];
+    }
+    getHeaderClass(column) {
+        const classes = ['studio-table__th'];
+        if (column.headerClass)
+            classes.push(column.headerClass);
+        if (column.sortable)
+            classes.push('studio-table__th--sortable');
+        if (this.currentSort()?.column === column.key)
+            classes.push('studio-table__th--sorted');
+        const align = column.align || 'left';
+        classes.push(`studio-table__th--align-${align}`);
+        if (column.fixed)
+            classes.push(`studio-table__th--fixed-${column.fixed}`);
+        if (column.hideOnMobile)
+            classes.push('studio-table__th--hide-mobile');
+        return classes.join(' ');
+    }
+    getCellClass(row, column) {
+        if (typeof column.cellClass === 'function') {
+            return column.cellClass(row);
+        }
+        return column.cellClass || '';
+    }
+    getFullCellClass(row, column) {
+        const classes = ['studio-table__td'];
+        const customClass = this.getCellClass(row, column);
+        if (customClass)
+            classes.push(customClass);
+        const align = column.align || 'left';
+        classes.push(`studio-table__td--align-${align}`);
+        if (column.fixed)
+            classes.push(`studio-table__td--fixed-${column.fixed}`);
+        if (column.hideOnMobile)
+            classes.push('studio-table__td--hide-mobile');
+        return classes.join(' ');
+    }
+    getCellContext(row, column, index) {
+        const value = this.getCellValue(row, column);
+        return {
+            $implicit: value,
+            row,
+            column,
+            index
+        };
+    }
+    getHeaderContext(column) {
+        const currentSort = this.currentSort();
+        return {
+            column,
+            sorted: currentSort?.column === column.key,
+            direction: currentSort?.column === column.key ? currentSort.direction : null
+        };
+    }
+    getSortIcon(column) {
+        const currentSort = this.currentSort();
+        if (currentSort?.column !== column.key)
+            return 'arrow-up-down';
+        return currentSort.direction === 'asc' ? 'arrow-up' : 'arrow-down';
+    }
+    handleRowClick(row, event) {
+        if (event.target.closest('.studio-table__actions'))
+            return;
+        this.rowClick.emit(row);
+    }
+    handleRowDblClick(row) {
+        this.rowDblClick.emit(row);
+    }
+    executeRowAction(action, row, event) {
+        event.stopPropagation();
+        if (action.disabled && action.disabled(row))
+            return;
+        action.handler(row);
+    }
+    isActionVisible(action, row) {
+        return !action.visible || action.visible(row);
+    }
+    isActionDisabled(action, row) {
+        return action.disabled ? action.disabled(row) : false;
+    }
+    // Public helpers for template
+    getRowKey(row) {
+        const keyFn = this.rowKey();
+        if (typeof keyFn === 'function') {
+            return keyFn(row);
+        }
+        return row[keyFn];
+    }
+    getSelectedRows() {
+        const selected = this.selectedRows();
+        return this.processedData().filter(row => selected.has(this.getRowKey(row)));
+    }
+    updateSelectedModel() {
+        this.selected.set(this.getSelectedRows());
+    }
+    applySorting(data) {
+        const sortConfig = this.currentSort();
+        if (!sortConfig)
+            return data;
+        const column = this.finalColumns().find(col => col.key === sortConfig.column);
+        if (!column)
+            return data;
+        return [...data].sort((a, b) => {
+            if (column.sortFn) {
+                return column.sortFn(a, b, sortConfig.direction);
+            }
+            const aVal = this.getCellValue(a, column);
+            const bVal = this.getCellValue(b, column);
+            if (aVal === bVal)
+                return 0;
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            const comparison = aVal < bVal ? -1 : 1;
+            return sortConfig.direction === 'asc' ? comparison : -comparison;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TableComponent, isStandalone: true, selector: "studio-table", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, densityInput: { classPropertyName: "densityInput", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expandMultiple: { classPropertyName: "expandMultiple", publicName: "expandMultiple", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", sort: "sortChange", expanded: "expandedChange", sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", rowDblClick: "rowDblClick" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "columnDirectives", predicate: TableColumnDirective, isSignal: true }, { propertyName: "expandedRowTemplate", first: true, predicate: ["expandedRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"studio-table__wrapper\">\n  <!-- Loading Overlay -->\n  @if (loading()) {\n    <div class=\"studio-table__loading-overlay\">\n      <studio-icon name=\"loader-2\" [size]=\"32\" class=\"studio-table__spinner\" />\n    </div>\n  }\n\n  <!-- Table Container -->\n  <div class=\"studio-table__container\">\n    <table class=\"studio-table__table\">\n      <!-- Header -->\n      @if (showHeader()) {\n        <thead class=\"studio-table__thead\">\n          <tr class=\"studio-table__header-row\">\n            <!-- Selection Column -->\n            @if (selectionMode() === 'multiple') {\n              <th class=\"studio-table__th studio-table__th--selection\">\n                <studio-checkbox\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  (changed)=\"selectAll($event)\"\n                />\n              </th>\n            }\n\n            <!-- Expansion Column -->\n            @if (expandable()) {\n              <th class=\"studio-table__th studio-table__th--expand\"></th>\n            }\n\n            <!-- Data Columns -->\n            @for (column of finalColumns(); track column.key) {\n              <th\n                [class]=\"getHeaderClass(column)\"\n                [style.width]=\"column.width\"\n                [style.min-width]=\"column.minWidth\"\n                [style.max-width]=\"column.maxWidth\"\n                (click)=\"column.sortable && sortBy(column)\">\n\n                <div class=\"studio-table__header-content\">\n                  @if (column.headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: getHeaderContext(column)\" />\n                  } @else {\n                    <span>{{ column.label }}</span>\n                    @if (column.sortable && sortable()) {\n                      <studio-icon\n                        [name]=\"getSortIcon(column)\"\n                        [size]=\"16\"\n                        class=\"studio-table__sort-icon\"\n                      />\n                    }\n                  }\n                </div>\n              </th>\n            }\n\n            <!-- Actions Column -->\n            @if (rowActions().length > 0) {\n              <th class=\"studio-table__th studio-table__th--actions\">Actions</th>\n            }\n          </tr>\n        </thead>\n      }\n\n      <!-- Body -->\n      <tbody class=\"studio-table__tbody\">\n        <!-- Loading Skeleton -->\n        @if (loading()) {\n          @for (i of [].constructor(loadingRows()); track i) {\n            <tr class=\"studio-table__row studio-table__row--loading\">\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--checkbox\"></div>\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n              @for (column of finalColumns(); track column.key) {\n                <td class=\"studio-table__td\" [class.studio-table__th--hide-mobile]=\"column.hideOnMobile\">\n                  <div class=\"studio-table__skeleton\"></div>\n                </td>\n              }\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n            </tr>\n          }\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && processedData().length === 0) {\n          <tr class=\"studio-table__row studio-table__row--empty\">\n            <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n              <div class=\"studio-table__empty\">\n                <studio-icon [name]=\"emptyState().icon || 'inbox'\" [size]=\"48\" class=\"studio-table__empty-icon\" />\n                <h3 class=\"studio-table__empty-title\">{{ emptyState().title }}</h3>\n                <p class=\"studio-table__empty-message\">{{ emptyState().message }}</p>\n                @if (emptyState().action) {\n                  <studio-button\n                    size=\"sm\"\n                    (clicked)=\"emptyState().action!.handler()\">\n                    {{ emptyState().action!.label }}\n                  </studio-button>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!loading()) {\n          @for (row of processedData(); track getRowKey(row); let rowIndex = $index) {\n            <!-- Main Row -->\n            <tr\n              class=\"studio-table__row\"\n              [class.studio-table__row--selected]=\"isRowSelected(row)\"\n              [class.studio-table__row--expanded]=\"isRowExpanded(row)\"\n              [class.studio-table__row--clickable]=\"selectionMode() === 'single'\"\n              (click)=\"selectionMode() === 'single' && selectRow(row); handleRowClick(row, $event)\"\n              (dblclick)=\"handleRowDblClick(row)\">\n\n              <!-- Selection Cell -->\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td studio-table__td--selection\">\n                  <studio-checkbox\n                    [value]=\"isRowSelected(row)\"\n                    (changed)=\"selectRow(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Expansion Cell -->\n              @if (expandable()) {\n                <td class=\"studio-table__td studio-table__td--expand\">\n                  <studio-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    iconPosition=\"only\"\n                    [icon]=\"isRowExpanded(row) ? 'chevron-down' : 'chevron-right'\"\n                    (clicked)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Data Cells -->\n              @for (column of finalColumns(); track column.key) {\n                <td\n                  [class]=\"getFullCellClass(row, column)\"\n                  [attr.data-label]=\"column.label\">\n\n                  @if (column.cellTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: getCellContext(row, column, rowIndex)\" />\n                  } @else {\n                    <span>{{ column.formatter ? column.formatter(getCellValue(row, column), row) : getCellValue(row, column) }}</span>\n                  }\n                </td>\n              }\n\n              <!-- Actions Cell -->\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td studio-table__td--actions\">\n                  <div class=\"studio-table__actions\">\n                    @for (action of rowActions(); track action.label) {\n                      @if (isActionVisible(action, row)) {\n                        @if (action.divider) {\n                          <div class=\"studio-table__action-divider\"></div>\n                        }\n                        <studio-button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          [icon]=\"action.icon\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [color]=\"action.variant === 'danger' ? 'error' : 'primary'\"\n                          (clicked)=\"executeRowAction(action, row, $event)\">\n                          {{ action.label }}\n                        </studio-button>\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Expanded Row -->\n            @if (expandable() && isRowExpanded(row) && expandedRowTemplate()) {\n              <tr class=\"studio-table__row studio-table__row--expansion\">\n                <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n                  <div class=\"studio-table__expansion-content\">\n                    <ng-container *ngTemplateOutlet=\"expandedRowTemplate(); context: { $implicit: row, index: rowIndex }\" />\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--studio-font-family);position:relative}.studio-table__wrapper{position:relative;width:100%;overflow:hidden}.studio-table__container{width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.studio-table__container::-webkit-scrollbar{height:8px}.studio-table__container::-webkit-scrollbar-track{background:var(--studio-bg-secondary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.studio-table__table{width:100%;border-collapse:separate;border-spacing:0;background:var(--studio-bg-primary)}.studio-table__thead{background:var(--studio-bg-secondary)}.studio-table__header-row{border-bottom:1px solid var(--studio-border-primary)}.studio-table__th{padding:.75rem 1rem;text-align:left;font-weight:var(--studio-font-weight-semibold);font-size:var(--studio-font-size-sm);color:var(--studio-text-primary);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative}.studio-table__th--sortable{cursor:pointer;transition:background-color var(--studio-transition-fast)}.studio-table__th--sortable:hover{background:var(--studio-bg-tertiary)}.studio-table__th--sorted{color:var(--studio-primary)}.studio-table__th--selection,.studio-table__th--expand{width:48px;padding:.75rem .5rem}.studio-table__th--actions{width:auto;min-width:100px}.studio-table__th--align-center{text-align:center}.studio-table__th--align-right{text-align:right}.studio-table__th--fixed-left{position:sticky;left:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:2px 0 4px #0000000d}.studio-table__th--fixed-right{position:sticky;right:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:-2px 0 4px #0000000d}.studio-table__header-content{display:flex;align-items:center;gap:.5rem}.studio-table__sort-icon{flex-shrink:0;color:var(--studio-text-tertiary);transition:color var(--studio-transition-fast)}.studio-table__th--sorted .studio-table__sort-icon{color:var(--studio-primary)}.studio-table__row{border-bottom:1px solid var(--studio-border-primary);transition:background-color var(--studio-transition-fast)}.studio-table__row--clickable{cursor:pointer}.studio-table__row--selected{background:var(--studio-primary-bg)}.studio-table__row--expansion{background:var(--studio-bg-secondary)}.studio-table__row--loading{pointer-events:none}.studio-table__td{padding:.75rem 1rem;font-size:var(--studio-font-size-base);color:var(--studio-text-primary);vertical-align:middle}.studio-table__td--selection,.studio-table__td--expand{width:48px;padding:.75rem .5rem}.studio-table__td--actions{width:auto}.studio-table__td--align-center{text-align:center}.studio-table__td--align-right{text-align:right}.studio-table__td--fixed-left{position:sticky;left:0;z-index:1;background:var(--studio-bg-primary);box-shadow:2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-left{background:var(--studio-primary-bg)}.studio-table__td--fixed-right{position:sticky;right:0;z-index:1;background:var(--studio-bg-primary);box-shadow:-2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-right{background:var(--studio-primary-bg)}:host(.studio-table--compact) .studio-table__th,:host(.studio-table--compact) .studio-table__td{padding:.5rem .75rem}:host(.studio-table--compact) .studio-table__th{font-size:.813rem}:host(.studio-table--compact) .studio-table__td{font-size:.875rem}:host(.studio-table--spacious) .studio-table__th,:host(.studio-table--spacious) .studio-table__td{padding:1rem 1.5rem}:host(.studio-table--spacious) .studio-table__th{font-size:var(--studio-font-size-base)}:host(.studio-table--spacious) .studio-table__td{font-size:var(--studio-font-size-lg)}:host(.studio-table--striped) .studio-table__row:nth-child(2n){background:var(--studio-bg-secondary)}:host(.studio-table--bordered) .studio-table__table{border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md)}:host(.studio-table--bordered) .studio-table__th,:host(.studio-table--bordered) .studio-table__td{border-right:1px solid var(--studio-border-primary)}:host(.studio-table--bordered) .studio-table__th:last-child,:host(.studio-table--bordered) .studio-table__td:last-child{border-right:none}:host(.studio-table--minimal) .studio-table__thead{background:transparent}:host(.studio-table--minimal) .studio-table__header-row{border-bottom:2px solid var(--studio-border-primary)}:host(.studio-table--minimal) .studio-table__row{border-bottom-style:dashed}:host(.studio-table--hoverable) .studio-table__row:not(.studio-table__row--empty):not(.studio-table__row--loading):not(.studio-table__row--expansion):hover{background:var(--studio-bg-secondary)}:host(.studio-table--hoverable) .studio-table__row--selected:hover{background:var(--studio-primary-bg);filter:brightness(.98)}:host(.studio-table--sticky-header) .studio-table__thead{position:sticky;top:0;z-index:3;box-shadow:0 2px 4px #0000000d}.studio-table__actions{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}.studio-table__action-divider{width:1px;height:1.5rem;background:var(--studio-border-primary);margin:0 .25rem}.studio-table__expansion-content{padding:1rem;background:var(--studio-bg-tertiary);border-radius:var(--studio-radius-sm)}.studio-table__loading-overlay{position:absolute;inset:0;background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:10}.studio-table__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-table__skeleton{height:1rem;background:linear-gradient(90deg,var(--studio-bg-secondary) 0%,var(--studio-bg-tertiary) 50%,var(--studio-bg-secondary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--studio-radius-sm)}.studio-table__skeleton--checkbox{width:1.25rem;height:1.25rem}.studio-table__skeleton--icon{width:2rem;height:1rem}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.studio-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.studio-table__empty-icon{color:var(--studio-text-tertiary);margin-bottom:1rem}.studio-table__empty-title{margin:0 0 .5rem;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-table__empty-message{margin:0 0 1.5rem;font-size:var(--studio-font-size-base);color:var(--studio-text-secondary)}@media (max-width: 768px){:host(.studio-table--responsive) .studio-table__container{overflow-x:visible}:host(.studio-table--responsive) .studio-table__table{display:block}:host(.studio-table--responsive) .studio-table__thead{display:none}:host(.studio-table--responsive) .studio-table__tbody{display:block}:host(.studio-table--responsive) .studio-table__row{display:block;margin-bottom:1rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-sm);overflow:hidden}:host(.studio-table--responsive) .studio-table__row--empty,:host(.studio-table--responsive) .studio-table__row--loading{display:table-row}:host(.studio-table--responsive) .studio-table__row--expansion{margin-top:-1rem;border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host(.studio-table--responsive) .studio-table__td{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--studio-border-primary)}:host(.studio-table--responsive) .studio-table__td:last-child{border-bottom:none}:host(.studio-table--responsive) .studio-table__td:before{content:attr(data-label);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);min-width:100px;flex-shrink:0}:host(.studio-table--responsive) .studio-table__td--selection,:host(.studio-table--responsive) .studio-table__td--expand{display:flex;justify-content:center;padding:.5rem 1rem}:host(.studio-table--responsive) .studio-table__td--selection:before,:host(.studio-table--responsive) .studio-table__td--expand:before{display:none}:host(.studio-table--responsive) .studio-table__td--actions{display:block;padding:.75rem 1rem}:host(.studio-table--responsive) .studio-table__td--actions:before{display:block;margin-bottom:.5rem}:host(.studio-table--responsive) .studio-table__td--actions .studio-table__actions{justify-content:flex-start}:host(.studio-table--responsive) .studio-table__td--hide-mobile{display:none!important}:host(.studio-table--responsive) .studio-table__expansion-content{padding:.75rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }, { kind: "component", type: CheckboxComponent, selector: "studio-checkbox", inputs: ["size", "color", "variant", "radius", "label", "labelPosition", "description", "hint", "required", "error", "errorMessage", "disabled", "readonly", "indeterminate", "name", "tabIndex", "value"], outputs: ["changed"] }, { kind: "component", type: ButtonComponent, selector: "studio-button", inputs: ["variant", "size", "color", "radius", "shadow", "compact", "disabled", "loading", "loadingText", "fullWidth", "type", "icon", "iconPosition", "href", "target", "badge", "badgeColor", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-table', standalone: true, imports: [CommonModule, IconComponent, CheckboxComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<div class=\"studio-table__wrapper\">\n  <!-- Loading Overlay -->\n  @if (loading()) {\n    <div class=\"studio-table__loading-overlay\">\n      <studio-icon name=\"loader-2\" [size]=\"32\" class=\"studio-table__spinner\" />\n    </div>\n  }\n\n  <!-- Table Container -->\n  <div class=\"studio-table__container\">\n    <table class=\"studio-table__table\">\n      <!-- Header -->\n      @if (showHeader()) {\n        <thead class=\"studio-table__thead\">\n          <tr class=\"studio-table__header-row\">\n            <!-- Selection Column -->\n            @if (selectionMode() === 'multiple') {\n              <th class=\"studio-table__th studio-table__th--selection\">\n                <studio-checkbox\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  (changed)=\"selectAll($event)\"\n                />\n              </th>\n            }\n\n            <!-- Expansion Column -->\n            @if (expandable()) {\n              <th class=\"studio-table__th studio-table__th--expand\"></th>\n            }\n\n            <!-- Data Columns -->\n            @for (column of finalColumns(); track column.key) {\n              <th\n                [class]=\"getHeaderClass(column)\"\n                [style.width]=\"column.width\"\n                [style.min-width]=\"column.minWidth\"\n                [style.max-width]=\"column.maxWidth\"\n                (click)=\"column.sortable && sortBy(column)\">\n\n                <div class=\"studio-table__header-content\">\n                  @if (column.headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: getHeaderContext(column)\" />\n                  } @else {\n                    <span>{{ column.label }}</span>\n                    @if (column.sortable && sortable()) {\n                      <studio-icon\n                        [name]=\"getSortIcon(column)\"\n                        [size]=\"16\"\n                        class=\"studio-table__sort-icon\"\n                      />\n                    }\n                  }\n                </div>\n              </th>\n            }\n\n            <!-- Actions Column -->\n            @if (rowActions().length > 0) {\n              <th class=\"studio-table__th studio-table__th--actions\">Actions</th>\n            }\n          </tr>\n        </thead>\n      }\n\n      <!-- Body -->\n      <tbody class=\"studio-table__tbody\">\n        <!-- Loading Skeleton -->\n        @if (loading()) {\n          @for (i of [].constructor(loadingRows()); track i) {\n            <tr class=\"studio-table__row studio-table__row--loading\">\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--checkbox\"></div>\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n              @for (column of finalColumns(); track column.key) {\n                <td class=\"studio-table__td\" [class.studio-table__th--hide-mobile]=\"column.hideOnMobile\">\n                  <div class=\"studio-table__skeleton\"></div>\n                </td>\n              }\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td\">\n                  <div class=\"studio-table__skeleton studio-table__skeleton--icon\"></div>\n                </td>\n              }\n            </tr>\n          }\n        }\n\n        <!-- Empty State -->\n        @if (!loading() && processedData().length === 0) {\n          <tr class=\"studio-table__row studio-table__row--empty\">\n            <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n              <div class=\"studio-table__empty\">\n                <studio-icon [name]=\"emptyState().icon || 'inbox'\" [size]=\"48\" class=\"studio-table__empty-icon\" />\n                <h3 class=\"studio-table__empty-title\">{{ emptyState().title }}</h3>\n                <p class=\"studio-table__empty-message\">{{ emptyState().message }}</p>\n                @if (emptyState().action) {\n                  <studio-button\n                    size=\"sm\"\n                    (clicked)=\"emptyState().action!.handler()\">\n                    {{ emptyState().action!.label }}\n                  </studio-button>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n\n        <!-- Data Rows -->\n        @if (!loading()) {\n          @for (row of processedData(); track getRowKey(row); let rowIndex = $index) {\n            <!-- Main Row -->\n            <tr\n              class=\"studio-table__row\"\n              [class.studio-table__row--selected]=\"isRowSelected(row)\"\n              [class.studio-table__row--expanded]=\"isRowExpanded(row)\"\n              [class.studio-table__row--clickable]=\"selectionMode() === 'single'\"\n              (click)=\"selectionMode() === 'single' && selectRow(row); handleRowClick(row, $event)\"\n              (dblclick)=\"handleRowDblClick(row)\">\n\n              <!-- Selection Cell -->\n              @if (selectionMode() === 'multiple') {\n                <td class=\"studio-table__td studio-table__td--selection\">\n                  <studio-checkbox\n                    [value]=\"isRowSelected(row)\"\n                    (changed)=\"selectRow(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Expansion Cell -->\n              @if (expandable()) {\n                <td class=\"studio-table__td studio-table__td--expand\">\n                  <studio-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    iconPosition=\"only\"\n                    [icon]=\"isRowExpanded(row) ? 'chevron-down' : 'chevron-right'\"\n                    (clicked)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n                  />\n                </td>\n              }\n\n              <!-- Data Cells -->\n              @for (column of finalColumns(); track column.key) {\n                <td\n                  [class]=\"getFullCellClass(row, column)\"\n                  [attr.data-label]=\"column.label\">\n\n                  @if (column.cellTemplate) {\n                    <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: getCellContext(row, column, rowIndex)\" />\n                  } @else {\n                    <span>{{ column.formatter ? column.formatter(getCellValue(row, column), row) : getCellValue(row, column) }}</span>\n                  }\n                </td>\n              }\n\n              <!-- Actions Cell -->\n              @if (rowActions().length > 0) {\n                <td class=\"studio-table__td studio-table__td--actions\">\n                  <div class=\"studio-table__actions\">\n                    @for (action of rowActions(); track action.label) {\n                      @if (isActionVisible(action, row)) {\n                        @if (action.divider) {\n                          <div class=\"studio-table__action-divider\"></div>\n                        }\n                        <studio-button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          [icon]=\"action.icon\"\n                          [disabled]=\"isActionDisabled(action, row)\"\n                          [color]=\"action.variant === 'danger' ? 'error' : 'primary'\"\n                          (clicked)=\"executeRowAction(action, row, $event)\">\n                          {{ action.label }}\n                        </studio-button>\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Expanded Row -->\n            @if (expandable() && isRowExpanded(row) && expandedRowTemplate()) {\n              <tr class=\"studio-table__row studio-table__row--expansion\">\n                <td [attr.colspan]=\"finalColumns().length + (selectionMode() === 'multiple' ? 1 : 0) + (expandable() ? 1 : 0) + (rowActions().length > 0 ? 1 : 0)\" class=\"studio-table__td\">\n                  <div class=\"studio-table__expansion-content\">\n                    <ng-container *ngTemplateOutlet=\"expandedRowTemplate(); context: { $implicit: row, index: rowIndex }\" />\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--studio-font-family);position:relative}.studio-table__wrapper{position:relative;width:100%;overflow:hidden}.studio-table__container{width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.studio-table__container::-webkit-scrollbar{height:8px}.studio-table__container::-webkit-scrollbar-track{background:var(--studio-bg-secondary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb{background:var(--studio-border-primary);border-radius:var(--studio-radius-sm)}.studio-table__container::-webkit-scrollbar-thumb:hover{background:var(--studio-text-tertiary)}.studio-table__table{width:100%;border-collapse:separate;border-spacing:0;background:var(--studio-bg-primary)}.studio-table__thead{background:var(--studio-bg-secondary)}.studio-table__header-row{border-bottom:1px solid var(--studio-border-primary)}.studio-table__th{padding:.75rem 1rem;text-align:left;font-weight:var(--studio-font-weight-semibold);font-size:var(--studio-font-size-sm);color:var(--studio-text-primary);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative}.studio-table__th--sortable{cursor:pointer;transition:background-color var(--studio-transition-fast)}.studio-table__th--sortable:hover{background:var(--studio-bg-tertiary)}.studio-table__th--sorted{color:var(--studio-primary)}.studio-table__th--selection,.studio-table__th--expand{width:48px;padding:.75rem .5rem}.studio-table__th--actions{width:auto;min-width:100px}.studio-table__th--align-center{text-align:center}.studio-table__th--align-right{text-align:right}.studio-table__th--fixed-left{position:sticky;left:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:2px 0 4px #0000000d}.studio-table__th--fixed-right{position:sticky;right:0;z-index:2;background:var(--studio-bg-secondary);box-shadow:-2px 0 4px #0000000d}.studio-table__header-content{display:flex;align-items:center;gap:.5rem}.studio-table__sort-icon{flex-shrink:0;color:var(--studio-text-tertiary);transition:color var(--studio-transition-fast)}.studio-table__th--sorted .studio-table__sort-icon{color:var(--studio-primary)}.studio-table__row{border-bottom:1px solid var(--studio-border-primary);transition:background-color var(--studio-transition-fast)}.studio-table__row--clickable{cursor:pointer}.studio-table__row--selected{background:var(--studio-primary-bg)}.studio-table__row--expansion{background:var(--studio-bg-secondary)}.studio-table__row--loading{pointer-events:none}.studio-table__td{padding:.75rem 1rem;font-size:var(--studio-font-size-base);color:var(--studio-text-primary);vertical-align:middle}.studio-table__td--selection,.studio-table__td--expand{width:48px;padding:.75rem .5rem}.studio-table__td--actions{width:auto}.studio-table__td--align-center{text-align:center}.studio-table__td--align-right{text-align:right}.studio-table__td--fixed-left{position:sticky;left:0;z-index:1;background:var(--studio-bg-primary);box-shadow:2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-left{background:var(--studio-primary-bg)}.studio-table__td--fixed-right{position:sticky;right:0;z-index:1;background:var(--studio-bg-primary);box-shadow:-2px 0 4px #0000000d}.studio-table__row--selected .studio-table__td--fixed-right{background:var(--studio-primary-bg)}:host(.studio-table--compact) .studio-table__th,:host(.studio-table--compact) .studio-table__td{padding:.5rem .75rem}:host(.studio-table--compact) .studio-table__th{font-size:.813rem}:host(.studio-table--compact) .studio-table__td{font-size:.875rem}:host(.studio-table--spacious) .studio-table__th,:host(.studio-table--spacious) .studio-table__td{padding:1rem 1.5rem}:host(.studio-table--spacious) .studio-table__th{font-size:var(--studio-font-size-base)}:host(.studio-table--spacious) .studio-table__td{font-size:var(--studio-font-size-lg)}:host(.studio-table--striped) .studio-table__row:nth-child(2n){background:var(--studio-bg-secondary)}:host(.studio-table--bordered) .studio-table__table{border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md)}:host(.studio-table--bordered) .studio-table__th,:host(.studio-table--bordered) .studio-table__td{border-right:1px solid var(--studio-border-primary)}:host(.studio-table--bordered) .studio-table__th:last-child,:host(.studio-table--bordered) .studio-table__td:last-child{border-right:none}:host(.studio-table--minimal) .studio-table__thead{background:transparent}:host(.studio-table--minimal) .studio-table__header-row{border-bottom:2px solid var(--studio-border-primary)}:host(.studio-table--minimal) .studio-table__row{border-bottom-style:dashed}:host(.studio-table--hoverable) .studio-table__row:not(.studio-table__row--empty):not(.studio-table__row--loading):not(.studio-table__row--expansion):hover{background:var(--studio-bg-secondary)}:host(.studio-table--hoverable) .studio-table__row--selected:hover{background:var(--studio-primary-bg);filter:brightness(.98)}:host(.studio-table--sticky-header) .studio-table__thead{position:sticky;top:0;z-index:3;box-shadow:0 2px 4px #0000000d}.studio-table__actions{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}.studio-table__action-divider{width:1px;height:1.5rem;background:var(--studio-border-primary);margin:0 .25rem}.studio-table__expansion-content{padding:1rem;background:var(--studio-bg-tertiary);border-radius:var(--studio-radius-sm)}.studio-table__loading-overlay{position:absolute;inset:0;background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:10}.studio-table__spinner{animation:spin 1s linear infinite;color:var(--studio-primary)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-table__skeleton{height:1rem;background:linear-gradient(90deg,var(--studio-bg-secondary) 0%,var(--studio-bg-tertiary) 50%,var(--studio-bg-secondary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--studio-radius-sm)}.studio-table__skeleton--checkbox{width:1.25rem;height:1.25rem}.studio-table__skeleton--icon{width:2rem;height:1rem}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.studio-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.studio-table__empty-icon{color:var(--studio-text-tertiary);margin-bottom:1rem}.studio-table__empty-title{margin:0 0 .5rem;font-size:var(--studio-font-size-lg);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-table__empty-message{margin:0 0 1.5rem;font-size:var(--studio-font-size-base);color:var(--studio-text-secondary)}@media (max-width: 768px){:host(.studio-table--responsive) .studio-table__container{overflow-x:visible}:host(.studio-table--responsive) .studio-table__table{display:block}:host(.studio-table--responsive) .studio-table__thead{display:none}:host(.studio-table--responsive) .studio-table__tbody{display:block}:host(.studio-table--responsive) .studio-table__row{display:block;margin-bottom:1rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-sm);overflow:hidden}:host(.studio-table--responsive) .studio-table__row--empty,:host(.studio-table--responsive) .studio-table__row--loading{display:table-row}:host(.studio-table--responsive) .studio-table__row--expansion{margin-top:-1rem;border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host(.studio-table--responsive) .studio-table__td{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--studio-border-primary)}:host(.studio-table--responsive) .studio-table__td:last-child{border-bottom:none}:host(.studio-table--responsive) .studio-table__td:before{content:attr(data-label);font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);min-width:100px;flex-shrink:0}:host(.studio-table--responsive) .studio-table__td--selection,:host(.studio-table--responsive) .studio-table__td--expand{display:flex;justify-content:center;padding:.5rem 1rem}:host(.studio-table--responsive) .studio-table__td--selection:before,:host(.studio-table--responsive) .studio-table__td--expand:before{display:none}:host(.studio-table--responsive) .studio-table__td--actions{display:block;padding:.75rem 1rem}:host(.studio-table--responsive) .studio-table__td--actions:before{display:block;margin-bottom:.5rem}:host(.studio-table--responsive) .studio-table__td--actions .studio-table__actions{justify-content:flex-start}:host(.studio-table--responsive) .studio-table__td--hide-mobile{display:none!important}:host(.studio-table--responsive) .studio-table__expansion-content{padding:.75rem 1rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], densityInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], columnDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableColumnDirective), { isSignal: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expandedRowTemplate: [{ type: i0.ContentChild, args: ['expandedRow', { isSignal: true }] }], expandMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandMultiple", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], emptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyState", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }] } });
+
+/**
+ * Table component types and interfaces
+ * Enterprise-grade type-safe table with full feature set
+ */
+
 class TabsComponent {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
     activeTab = signal('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
@@ -6425,5 +6871,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map