@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-data-table.mjs

@@ -0,0 +1,631 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { FuiButtonDirective } from '@raintonic/formaui/components/button';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
+import { FuiFormFieldComponent } from '@raintonic/formaui/components/form-field';
+import { FuiMenuComponent, FuiMenuTriggerDirective } from '@raintonic/formaui/components/menu';
+import { FuiSelectComponent, FuiOptionComponent } from '@raintonic/formaui/components/select';
+import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiBadgeComponent } from '@raintonic/formaui/components/badge';
+
+/**
+ * Filter operator types
+ */
+var FilterOperator;
+(function (FilterOperator) {
+    // String operators
+    FilterOperator["CONTAINS"] = "CONTAINS";
+    FilterOperator["START_WITH"] = "START_WITH";
+    FilterOperator["END_WITH"] = "END_WITH";
+    FilterOperator["EQUAL"] = "EQUAL";
+    FilterOperator["NOT_EQUAL"] = "NOT_EQUAL";
+    // Number and Date operators
+    FilterOperator["GREATER"] = "GREATER";
+    FilterOperator["GREATER_EQUAL"] = "GREATER_EQUAL";
+    FilterOperator["LOWER"] = "LOWER";
+    FilterOperator["LOWER_EQUAL"] = "LOWER_EQUAL";
+    FilterOperator["BETWEEN"] = "BETWEEN";
+    // Boolean operators
+    FilterOperator["IS_TRUE"] = "IS_TRUE";
+    FilterOperator["IS_FALSE"] = "IS_FALSE";
+})(FilterOperator || (FilterOperator = {}));
+/**
+ * @component FuiAdvancedDataTableComponent
+ * @selector fui-advanced-data-table
+ * @description A feature-rich data table with configurable columns, sticky headers/columns,
+ * row selection via checkboxes, sorting, column filtering, row highlighting, and badge-based label rendering.
+ *
+ * @input config - (required) Table configuration including headers, sticky settings, and row selectability.
+ * @input data - Array of row data objects. Default [].
+ * @input enableRowHighlight - Whether clicking a row toggles highlight. Default false.
+ * @input tableAriaLabel - Accessible label for the table element. Default 'Data table'.
+ * @input emptyMessage - Message shown when data is empty. Default 'Nessun dato disponibile'.
+ * @input sort - Current sort state: { field, direction } or null.
+ * @input filters - Array of active column filters.
+ * @output sortChange - Emits when the user changes sort direction on a column.
+ * @output filtersChange - Emits when filters are applied or cleared.
+ * @output rowDblClick - Emits the row data object on double-click.
+ *
+ * @example
+ * <fui-advanced-data-table
+ *   [config]="tableConfig"
+ *   [data]="rows"
+ *   [sort]="currentSort"
+ *   (sortChange)="onSort($event)"
+ *   (filtersChange)="onFilter($event)"
+ *   (rowDblClick)="onRowOpen($event)">
+ * </fui-advanced-data-table>
+ */
+class FuiAdvancedDataTableComponent {
+    /**
+     * Table configuration
+     */
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * Data to display in the table
+     */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Track-by function for row rendering performance.
+     * Defaults to tracking by index.
+     */
+    trackBy = input((index) => index, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Enable click-to-highlight feature for rows
+     */
+    enableRowHighlight = input(false, ...(ngDevMode ? [{ debugName: "enableRowHighlight" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible label for the table
+     */
+    tableAriaLabel = input('Data table', ...(ngDevMode ? [{ debugName: "tableAriaLabel" }] : /* istanbul ignore next */ []));
+    _liveAnnouncer;
+    /**
+     * Message shown when the data array is empty. Pass empty string to hide.
+     */
+    emptyMessage = input('Nessun dato disponibile', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Current sort configuration
+     */
+    sort = input(null, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /**
+     * Event emitted when sort changes
+     */
+    sortChange = output();
+    /**
+     * Current filters
+     */
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    /**
+     * Event emitted when filters change
+     */
+    filtersChange = output();
+    /**
+     * Row dblClick event
+     */
+    rowDblClick = output();
+    /**
+     * Internal state for selected row indices
+     */
+    selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal state for highlighted row indices
+     */
+    highlightedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "highlightedRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Temporary filter state while editing filter menu
+     */
+    tempFilterOperator = null;
+    tempFilterValue = '';
+    tempFilterValue2 = '';
+    /**
+     * Whether all rows are selected
+     */
+    allRowsSelected = computed(() => {
+        const dataLength = this.data().length;
+        return dataLength > 0 && this.selectedRows().size === dataLength;
+    }, ...(ngDevMode ? [{ debugName: "allRowsSelected" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether some (but not all) rows are selected
+     */
+    someRowsSelected = computed(() => {
+        const selected = this.selectedRows().size;
+        return selected > 0 && selected < this.data().length;
+    }, ...(ngDevMode ? [{ debugName: "someRowsSelected" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed headers with sticky information
+     */
+    processedHeaders = computed(() => {
+        const headers = this.config().headers;
+        const processed = headers.map((header) => ({
+            ...header,
+            isStartSticky: false,
+            isEndSticky: false,
+            isLastStartSticky: false,
+            isFirstEndSticky: false,
+            startStickyPosition: 0,
+            endStickyPosition: 0,
+        }));
+        // Process start sticky columns (consecutive from start)
+        let startStickyLeft = 0;
+        let lastStartStickyIndex = -1;
+        for (let i = 0; i < processed.length; i++) {
+            if (headers[i].stickyColumnStart) {
+                processed[i].isStartSticky = true;
+                processed[i].startStickyPosition = startStickyLeft;
+                startStickyLeft += 150; // Default column width, will be adjusted by CSS
+                lastStartStickyIndex = i;
+            }
+            else {
+                // Stop once we find a non-sticky-start column
+                break;
+            }
+        }
+        // Mark the last sticky-start column for border
+        if (lastStartStickyIndex >= 0) {
+            processed[lastStartStickyIndex].isLastStartSticky = true;
+        }
+        // Process end sticky columns (consecutive from end)
+        // First, find the start index of consecutive stickyColumnEnd columns from the end
+        let endStickyStartIndex = processed.length;
+        for (let i = processed.length - 1; i >= 0; i--) {
+            if (headers[i].stickyColumnEnd) {
+                endStickyStartIndex = i;
+            }
+            else {
+                // Stop once we find a non-sticky-end column
+                break;
+            }
+        }
+        // Now calculate positions for sticky end columns (right position accumulates from rightmost)
+        let endStickyRight = 0;
+        for (let i = processed.length - 1; i >= endStickyStartIndex; i--) {
+            processed[i].isEndSticky = true;
+            processed[i].endStickyPosition = endStickyRight;
+            endStickyRight += 150; // Default column width, will be adjusted by CSS
+        }
+        // Mark the first sticky-end column for border
+        if (endStickyStartIndex < processed.length) {
+            processed[endStickyStartIndex].isFirstEndSticky = true;
+        }
+        return processed;
+    }, ...(ngDevMode ? [{ debugName: "processedHeaders" }] : /* istanbul ignore next */ []));
+    /**
+     * Get header classes
+     */
+    getHeaderClasses(header) {
+        const classes = ['fui-advanced-data-table__header-cell'];
+        if (header.isStartSticky) {
+            classes.push('fui-advanced-data-table__header-cell--sticky-start');
+        }
+        if (header.isLastStartSticky) {
+            classes.push('fui-advanced-data-table__header-cell--sticky-start-edge');
+        }
+        if (header.isEndSticky) {
+            classes.push('fui-advanced-data-table__header-cell--sticky-end');
+        }
+        if (header.isFirstEndSticky) {
+            classes.push('fui-advanced-data-table__header-cell--sticky-end-edge');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Get cell classes
+     */
+    getCellClasses(header) {
+        const classes = ['fui-advanced-data-table__cell'];
+        if (header.isStartSticky) {
+            classes.push('fui-advanced-data-table__cell--sticky-start');
+        }
+        if (header.isLastStartSticky) {
+            classes.push('fui-advanced-data-table__cell--sticky-start-edge');
+        }
+        if (header.isEndSticky) {
+            classes.push('fui-advanced-data-table__cell--sticky-end');
+        }
+        if (header.isFirstEndSticky) {
+            classes.push('fui-advanced-data-table__cell--sticky-end-edge');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Get header styles for sticky positioning
+     */
+    getHeaderStyles(header) {
+        const styles = {};
+        if (header.isStartSticky) {
+            styles['left'] = `${header.startStickyPosition}px`;
+        }
+        if (header.isEndSticky) {
+            styles['right'] = `${header.endStickyPosition}px`;
+        }
+        return styles;
+    }
+    /**
+     * Get cell styles for sticky positioning
+     */
+    getCellStyles(header) {
+        return this.getHeaderStyles(header);
+    }
+    /**
+     * Extract value from nested object using dot notation
+     */
+    getCellValue(row, columnPath) {
+        if (!row || !columnPath)
+            return '';
+        const keys = columnPath.split('.');
+        let value = row;
+        for (const key of keys) {
+            if (value === null || value === undefined) {
+                return '';
+            }
+            value = value[key];
+        }
+        return value ?? '';
+    }
+    /**
+     * Format cell value based on type
+     */
+    formatCellValue(value, type) {
+        if (value === null || value === undefined || value === '') {
+            return '';
+        }
+        switch (type.toLowerCase()) {
+            case 'string':
+                return String(value);
+            case 'number':
+                return typeof value === 'number' ? value.toLocaleString() : String(value);
+            case 'boolean':
+                return value ? 'Yes' : 'No';
+            case 'date':
+                if (value instanceof Date) {
+                    return value.toLocaleDateString();
+                }
+                return new Date(value).toLocaleDateString();
+            default:
+                return String(value);
+        }
+    }
+    /**
+     * Toggle all rows selection
+     */
+    toggleAllRows() {
+        const currentlyAllSelected = this.allRowsSelected();
+        if (currentlyAllSelected) {
+            this.selectedRows.set(new Set());
+        }
+        else {
+            const allIndices = new Set(this.data().map((_, index) => index));
+            this.selectedRows.set(allIndices);
+        }
+    }
+    /**
+     * Toggle single row selection
+     */
+    toggleRow(index) {
+        const selected = new Set(this.selectedRows());
+        if (selected.has(index)) {
+            selected.delete(index);
+        }
+        else {
+            selected.add(index);
+        }
+        this.selectedRows.set(selected);
+    }
+    /**
+     * Check if a row is selected
+     */
+    isRowSelected(index) {
+        return this.selectedRows().has(index);
+    }
+    /**
+     * Toggle row highlight (only if enableRowHighlight is true)
+     */
+    toggleRowHighlight(index) {
+        if (!this.enableRowHighlight()) {
+            return;
+        }
+        const highlighted = new Set(this.highlightedRows());
+        if (highlighted.has(index)) {
+            highlighted.delete(index);
+        }
+        else {
+            highlighted.add(index);
+        }
+        this.highlightedRows.set(highlighted);
+    }
+    /**
+     * Check if a row is highlighted
+     */
+    isRowHighlighted(index) {
+        return this.highlightedRows().has(index);
+    }
+    /**
+     * Get ARIA sort value for a column header
+     */
+    getAriaSortValue(field) {
+        const currentSort = this.sort();
+        // Only return aria-sort for sortable columns that have sort config
+        const header = this.config().headers.find((h) => h.field === field);
+        if (!header?.hasSort)
+            return null;
+        if (currentSort?.field !== field)
+            return 'none';
+        return currentSort.direction === 'ASC' ? 'ascending' : 'descending';
+    }
+    /**
+     * Handle sort button click
+     * Cycles through: ASC → DESC → null (no sort)
+     */
+    onSortClick(field) {
+        const currentSort = this.sort();
+        if (currentSort?.field !== field) {
+            // No sort or different field: set to ASC
+            this.sortChange.emit({ field, direction: 'ASC' });
+            this._announce(`Sorted ascending`);
+        }
+        else if (currentSort.direction === 'ASC') {
+            // Currently ASC: change to DESC
+            this.sortChange.emit({ field, direction: 'DESC' });
+            this._announce(`Sorted descending`);
+        }
+        else {
+            // Currently DESC: remove sort
+            this.sortChange.emit(null);
+            this._announce(`Sort removed`);
+        }
+    }
+    /**
+     * Get sort icon classes for a header
+     */
+    getSortIconClasses(field) {
+        const currentSort = this.sort();
+        const classes = ['fui-advanced-data-table__sort-icon'];
+        if (currentSort?.field === field) {
+            if (currentSort.direction === 'ASC') {
+                classes.push('fui-advanced-data-table__sort-icon--asc');
+            }
+            else {
+                classes.push('fui-advanced-data-table__sort-icon--desc');
+            }
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Get available filter operators for a column type
+     */
+    getFilterOperators(type) {
+        const normalizedType = type.toLowerCase();
+        switch (normalizedType) {
+            case 'string':
+                return [
+                    { value: FilterOperator.CONTAINS, label: 'Contiene', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.START_WITH, label: 'Inizia con', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.END_WITH, label: 'Finisce con', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.EQUAL, label: 'Uguale', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.NOT_EQUAL, label: 'Diverso', requiresInput: true, requiresSecondInput: false },
+                ];
+            case 'number':
+                return [
+                    { value: FilterOperator.GREATER, label: 'Maggiore di', requiresInput: true, requiresSecondInput: false },
+                    {
+                        value: FilterOperator.GREATER_EQUAL,
+                        label: 'Maggiore o uguale',
+                        requiresInput: true,
+                        requiresSecondInput: false,
+                    },
+                    { value: FilterOperator.LOWER, label: 'Minore di', requiresInput: true, requiresSecondInput: false },
+                    {
+                        value: FilterOperator.LOWER_EQUAL,
+                        label: 'Minore o uguale',
+                        requiresInput: true,
+                        requiresSecondInput: false,
+                    },
+                    { value: FilterOperator.BETWEEN, label: 'Compreso tra', requiresInput: true, requiresSecondInput: true },
+                    { value: FilterOperator.EQUAL, label: 'Uguale', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.NOT_EQUAL, label: 'Diverso', requiresInput: true, requiresSecondInput: false },
+                ];
+            case 'date':
+                return [
+                    { value: FilterOperator.EQUAL, label: 'Uguale', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.NOT_EQUAL, label: 'Diverso', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.GREATER, label: 'Dopo', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.GREATER_EQUAL, label: 'Dal', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.LOWER, label: 'Prima', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.LOWER_EQUAL, label: 'Fino al', requiresInput: true, requiresSecondInput: false },
+                    { value: FilterOperator.BETWEEN, label: 'Compreso tra', requiresInput: true, requiresSecondInput: true },
+                ];
+            case 'boolean':
+                return [
+                    { value: FilterOperator.IS_TRUE, label: 'Vero', requiresInput: false, requiresSecondInput: false },
+                    { value: FilterOperator.IS_FALSE, label: 'Falso', requiresInput: false, requiresSecondInput: false },
+                ];
+            case 'label':
+                return [{ value: FilterOperator.EQUAL, label: 'Uguale', requiresInput: true, requiresSecondInput: false }];
+            default:
+                return [];
+        }
+    }
+    getLabelConfig(value, labels) {
+        return labels.find((l) => l.value === String(value)) ?? null;
+    }
+    /**
+     * Initialize filter form for a field
+     * Called when menu is opened
+     */
+    initFilterForm(field, type) {
+        if (type === 'label') {
+            const existingFilter = this.filters().find((f) => f.field === field);
+            this.tempFilterOperator = FilterOperator.EQUAL;
+            this.tempFilterValue = existingFilter ? String(existingFilter.value || '') : '';
+            this.tempFilterValue2 = '';
+            return;
+        }
+        // Check if there's an existing filter for this field
+        const existingFilter = this.filters().find((f) => f.field === field);
+        if (existingFilter) {
+            this.tempFilterOperator = existingFilter.operator;
+            if (Array.isArray(existingFilter.value)) {
+                this.tempFilterValue = String(existingFilter.value[0] || '');
+                this.tempFilterValue2 = String(existingFilter.value[1] || '');
+            }
+            else {
+                this.tempFilterValue = String(existingFilter.value || '');
+                this.tempFilterValue2 = '';
+            }
+        }
+        else {
+            // Set default operator for the type
+            const operators = this.getFilterOperators(type);
+            this.tempFilterOperator = operators[0]?.value || null;
+            this.tempFilterValue = '';
+            this.tempFilterValue2 = '';
+        }
+    }
+    /**
+     * Reset filter form
+     */
+    resetFilterForm() {
+        this.tempFilterOperator = null;
+        this.tempFilterValue = '';
+        this.tempFilterValue2 = '';
+    }
+    /**
+     * Apply filter for a field
+     */
+    applyFilter(field, type, menu) {
+        const operator = this.tempFilterOperator;
+        if (!operator)
+            return;
+        const operatorConfig = this.getFilterOperators(type).find((op) => op.value === operator);
+        if (!operatorConfig)
+            return;
+        let value;
+        // For boolean operators, no input is needed
+        if (!operatorConfig.requiresInput) {
+            value = operator === FilterOperator.IS_TRUE;
+        }
+        // For BETWEEN operator, use array with two values
+        else if (operatorConfig.requiresSecondInput) {
+            const val1 = this.parseValueByType(this.tempFilterValue, type);
+            const val2 = this.parseValueByType(this.tempFilterValue2, type);
+            value = [val1, val2];
+        }
+        // For single value operators
+        else {
+            value = this.parseValueByType(this.tempFilterValue, type);
+        }
+        // Update filters array
+        const currentFilters = this.filters().filter((f) => f.field !== field);
+        const newFilter = { field, operator, value };
+        this.filtersChange.emit([...currentFilters, newFilter]);
+        this.resetFilterForm();
+        this._announce(`Filter applied`);
+        menu?.close();
+    }
+    /**
+     * Clear filter for a field
+     */
+    clearFilter(field, menu) {
+        const currentFilters = this.filters().filter((f) => f.field !== field);
+        this.filtersChange.emit(currentFilters);
+        this.resetFilterForm();
+        this._announce(`Filter cleared`);
+        menu?.close();
+    }
+    /**
+     * Parse value by column type
+     */
+    parseValueByType(value, type) {
+        const normalizedType = type.toLowerCase();
+        switch (normalizedType) {
+            case 'number':
+                return Number(value);
+            case 'date':
+                return new Date(value);
+            case 'label':
+                return value;
+            default:
+                return value;
+        }
+    }
+    /**
+     * Announce a message to screen readers via live region
+     */
+    _announce(message) {
+        if (this._liveAnnouncer?.nativeElement) {
+            this._liveAnnouncer.nativeElement.textContent = message;
+        }
+    }
+    /**
+     * Check if a field has an active filter
+     */
+    hasActiveFilter(field) {
+        return this.filters().some((f) => f.field === field);
+    }
+    /**
+     * Get filter icon classes
+     */
+    getFilterIconClasses(field) {
+        const classes = ['fui-advanced-data-table__filter-icon'];
+        if (this.hasActiveFilter(field)) {
+            classes.push('fui-advanced-data-table__filter-icon--active');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Check if current operator requires second input
+     */
+    requiresSecondInput(type) {
+        const operator = this.tempFilterOperator;
+        if (!operator)
+            return false;
+        const operatorConfig = this.getFilterOperators(type).find((op) => op.value === operator);
+        return operatorConfig?.requiresSecondInput ?? false;
+    }
+    /**
+     * Check if current operator requires any input
+     */
+    requiresInput(type) {
+        const operator = this.tempFilterOperator;
+        if (!operator)
+            return false;
+        const operatorConfig = this.getFilterOperators(type).find((op) => op.value === operator);
+        return operatorConfig?.requiresInput ?? false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAdvancedDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAdvancedDataTableComponent, isStandalone: true, selector: "fui-advanced-data-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, enableRowHighlight: { classPropertyName: "enableRowHighlight", publicName: "enableRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, tableAriaLabel: { classPropertyName: "tableAriaLabel", publicName: "tableAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filtersChange: "filtersChange", rowDblClick: "rowDblClick" }, host: { classAttribute: "fui-advanced-data-table" }, viewQueries: [{ propertyName: "_liveAnnouncer", first: true, predicate: ["liveAnnouncer"], descendants: true }], ngImport: i0, template: "<div class=\"fui-advanced-data-table__wrapper\">\r\n  <!-- Live region for sort/filter announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #liveAnnouncer></div>\r\n  <table\r\n    class=\"fui-advanced-data-table__table\"\r\n    role=\"grid\"\r\n    [attr.aria-label]=\"tableAriaLabel()\"\r\n    [attr.aria-rowcount]=\"data().length\"\r\n  >\r\n    <!-- Table Header -->\r\n    <thead\r\n      class=\"fui-advanced-data-table__header\"\r\n      [class.fui-advanced-data-table__header--sticky]=\"config().headerSticky\"\r\n    >\r\n      <tr class=\"fui-advanced-data-table__header-row\">\r\n        <!-- Selection Checkbox Column -->\r\n        @if (config().areRowsSelectable) {\r\n          <th\r\n            scope=\"col\"\r\n            class=\"fui-advanced-data-table__header-cell fui-advanced-data-table__header-cell--checkbox\"\r\n            [class.fui-advanced-data-table__header-cell--sticky-start]=\"\r\n              processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n            \"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"fui-advanced-data-table__checkbox\"\r\n              [checked]=\"allRowsSelected()\"\r\n              [indeterminate]=\"someRowsSelected()\"\r\n              (change)=\"toggleAllRows()\"\r\n              aria-label=\"Select all rows\"\r\n            />\r\n          </th>\r\n        }\r\n\r\n        <!-- Data Columns -->\r\n        @for (header of processedHeaders(); track header.field) {\r\n          <th\r\n            scope=\"col\"\r\n            [class]=\"getHeaderClasses(header)\"\r\n            [ngStyle]=\"getHeaderStyles(header)\"\r\n            [attr.aria-sort]=\"getAriaSortValue(header.field)\"\r\n          >\r\n            <div class=\"fui-advanced-data-table__header-content\">\r\n              <span class=\"fui-advanced-data-table__header-label\">{{ header.label }}</span>\r\n\r\n              @if (header.hasSort) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fui-advanced-data-table__sort-button\"\r\n                  (click)=\"onSortClick(header.field)\"\r\n                  [attr.aria-label]=\"'Sort by ' + header.label\"\r\n                  fuiTooltip=\"Ordina\"\r\n                  fuiTooltipSize=\"sm\"\r\n                  fuiTooltipPosition=\"bottom\"\r\n                >\r\n                  <svg\r\n                    [class]=\"getSortIconClasses(header.field)\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    viewBox=\"0 0 16 16\"\r\n                    fill=\"currentColor\"\r\n                  >\r\n                    <path d=\"M8 3L12 7H4L8 3Z\" />\r\n                    <path d=\"M8 13L4 9H12L8 13Z\" />\r\n                  </svg>\r\n                </button>\r\n              }\r\n\r\n              @if (header.hasFilter) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fui-advanced-data-table__filter-button\"\r\n                  fuiMenuTrigger\r\n                  [menuTriggerFor]=\"filterMenu\"\r\n                  [menuTriggerData]=\"{ field: header.field, type: header.type }\"\r\n                  [attr.aria-label]=\"'Filter ' + header.label\"\r\n                  fuiTooltip=\"Filtra\"\r\n                  fuiTooltipSize=\"sm\"\r\n                  fuiTooltipPosition=\"bottom\"\r\n                >\r\n                  <svg\r\n                    [class]=\"getFilterIconClasses(header.field)\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    viewBox=\"0 0 16 16\"\r\n                    fill=\"currentColor\"\r\n                  >\r\n                    <path d=\"M2 2L6 8V13L10 15V8L14 2H2Z\" />\r\n                  </svg>\r\n                </button>\r\n\r\n                <fui-menu\r\n                  #filterMenu\r\n                  position=\"bottom-end\"\r\n                  size=\"md\"\r\n                  (openChange)=\"$event && initFilterForm(header.field, header.type)\"\r\n                  [closeOnClickOutside]=\"true\"\r\n                >\r\n                  <div class=\"fui-advanced-data-table__filter-menu-content\" (click)=\"$event.stopPropagation()\">\r\n                    <div class=\"fui-text-xs\">{{ header.label }}</div>\r\n                    @if (header.type !== 'label') {\r\n                      <!-- Operator Selection -->\r\n                      <fui-form-field [hideSubscript]=\"true\">\r\n                        <fui-select [(ngModel)]=\"tempFilterOperator\" placeholder=\"Seleziona operatore\">\r\n                          @for (operator of getFilterOperators(header.type); track operator.value) {\r\n                            <fui-option [value]=\"operator.value\">\r\n                              {{ operator.label }}\r\n                            </fui-option>\r\n                          }\r\n                        </fui-select>\r\n                      </fui-form-field>\r\n\r\n                      <!-- Value Input(s) -->\r\n                      @if (requiresInput(header.type)) {\r\n                        <fui-form-field [hideSubscript]=\"true\">\r\n                          <input\r\n                            fuiInput\r\n                            [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n                            [(ngModel)]=\"tempFilterValue\"\r\n                            placeholder=\"Inserisci valore\"\r\n                          />\r\n                        </fui-form-field>\r\n\r\n                        @if (requiresSecondInput(header.type)) {\r\n                          <fui-form-field [hideSubscript]=\"true\">\r\n                            <input\r\n                              fuiInput\r\n                              [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n                              [(ngModel)]=\"tempFilterValue2\"\r\n                              placeholder=\"Inserisci valore finale\"\r\n                            />\r\n                          </fui-form-field>\r\n                        }\r\n                      }\r\n                    } @else {\r\n                      <!-- Label filter: select dropdown -->\r\n                      <fui-form-field [hideSubscript]=\"true\">\r\n                        <fui-select [(ngModel)]=\"tempFilterValue\" placeholder=\"Seleziona valore\">\r\n                          @for (labelOpt of header.labels ?? []; track labelOpt.value) {\r\n                            <fui-option [value]=\"labelOpt.value\">\r\n                              {{ labelOpt.label }}\r\n                            </fui-option>\r\n                          }\r\n                        </fui-select>\r\n                      </fui-form-field>\r\n                    }\r\n\r\n                    <!-- Actions -->\r\n                    <div class=\"fui-advanced-data-table__filter-actions\">\r\n                      <button\r\n                        fuiButton\r\n                        variant=\"primary\"\r\n                        size=\"sm\"\r\n                        (click)=\"applyFilter(header.field, header.type, filterMenu)\"\r\n                      >\r\n                        Applica\r\n                      </button>\r\n                      <button fuiButton variant=\"outline\" size=\"sm\" (click)=\"clearFilter(header.field, filterMenu)\">\r\n                        Pulisci\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </fui-menu>\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- Table Body -->\r\n    <tbody class=\"fui-advanced-data-table__body\">\r\n      @if (data().length === 0 && emptyMessage()) {\r\n        <tr class=\"fui-advanced-data-table__row fui-advanced-data-table__row--empty\">\r\n          <td\r\n            class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--empty\"\r\n            [attr.colspan]=\"processedHeaders().length + (config().areRowsSelectable ? 1 : 0)\"\r\n          >\r\n            <div class=\"fui-advanced-data-table__empty-state\">\r\n              <fui-icon\r\n                name=\"magnifying-glass\"\r\n                class=\"fui-advanced-data-table__empty-state-icon\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n              {{ emptyMessage() }}\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      } @else {\r\n        @for (row of data(); track trackBy()($index, row)) {\r\n          <tr\r\n            (dblclick)=\"rowDblClick.emit(row)\"\r\n            class=\"fui-advanced-data-table__row\"\r\n            [class.fui-advanced-data-table__row--selected]=\"isRowSelected($index)\"\r\n            [class.fui-advanced-data-table__row--highlighted]=\"isRowHighlighted($index)\"\r\n            [class.fui-advanced-data-table__row--clickable]=\"enableRowHighlight()\"\r\n            [attr.aria-selected]=\"config().areRowsSelectable ? isRowSelected($index) : null\"\r\n            [attr.aria-rowindex]=\"$index + 2\"\r\n            (click)=\"toggleRowHighlight($index)\"\r\n          >\r\n            <!-- Selection Checkbox -->\r\n            @if (config().areRowsSelectable) {\r\n              <td\r\n                class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--checkbox\"\r\n                [class.fui-advanced-data-table__cell--sticky-start]=\"\r\n                  processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n                \"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"fui-advanced-data-table__checkbox\"\r\n                  [checked]=\"isRowSelected($index)\"\r\n                  (change)=\"toggleRow($index)\"\r\n                  [attr.aria-label]=\"'Select row ' + ($index + 1)\"\r\n                />\r\n              </td>\r\n            }\r\n\r\n            <!-- Data Cells -->\r\n            @for (header of processedHeaders(); track header.field) {\r\n              <td [class]=\"getCellClasses(header)\" [ngStyle]=\"getCellStyles(header)\">\r\n                @if (header.type === 'boolean') {\r\n                  @if (getCellValue(row, header.field)) {\r\n                    <fui-icon name=\"check-circle\" class=\"fui-advanced-data-table__bool-icon--true\"></fui-icon>\r\n                  } @else {\r\n                    <fui-icon name=\"x-circle\" class=\"fui-advanced-data-table__bool-icon--false\"></fui-icon>\r\n                  }\r\n                } @else if (header.type === 'label') {\r\n                  @let labelConfig = getLabelConfig(getCellValue(row, header.field), header.labels ?? []);\r\n                  @if (labelConfig) {\r\n                    <fui-badge\r\n                      [label]=\"labelConfig.label\"\r\n                      [customColor]=\"labelConfig.color\"\r\n                      [icon]=\"labelConfig.icon ?? null\"\r\n                      size=\"sm\"\r\n                    />\r\n                  } @else {\r\n                    <fui-badge [label]=\"'' + getCellValue(row, header.field)\" variant=\"info\" size=\"sm\" />\r\n                  }\r\n                } @else {\r\n                  {{ formatCellValue(getCellValue(row, header.field), header.type) }}\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-advanced-data-table{--fui-table-font-size: var(--fui-font-size-sm, .875rem);--fui-table-header-bg: var(--fui-surface-01);--fui-table-row-bg: var(--fui-surface-00);--fui-table-row-hover-bg: var(--fui-surface-02);--fui-table-row-height: 3rem;--fui-table-cell-padding-y: .5rem;--fui-table-cell-padding-x: 1rem;--fui-table-border-color: var(--fui-border-color);display:block;width:100%;position:relative}.fui-advanced-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative}.fui-advanced-data-table__wrapper::-webkit-scrollbar{height:8px}.fui-advanced-data-table__wrapper::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-advanced-data-table__table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fui-font-family-sans);font-size:var(--fui-table-font-size);color:var(--fui-text-primary);background-color:var(--fui-table-row-bg)}.fui-advanced-data-table__header{background-color:var(--fui-table-header-bg);border-bottom:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__header--sticky{position:sticky;top:0;z-index:10}.fui-advanced-data-table__header-row{height:var(--fui-table-row-height)}.fui-advanced-data-table__header-row .formaui-advanced-data-table__header-cell:last-child{border-right:none}.fui-advanced-data-table__header-cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);text-align:left;font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-secondary);background-color:var(--fui-table-header-bg);border-right:1px solid var(--fui-border-color);border-bottom:1px solid var(--fui-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-shadow:0 1.19px 3.57px #1018281a}.fui-advanced-data-table__header-cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__header-cell--sticky-start{position:sticky;z-index:11;background-color:var(--fui-surface-01)}.fui-advanced-data-table__header-cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__header-cell--sticky-end{position:sticky;z-index:11;background-color:var(--fui-surface-01)}.fui-advanced-data-table__header-cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__header-content{display:flex;align-items:center;gap:.25rem}.fui-advanced-data-table__header-label{flex:1;overflow:hidden;text-overflow:ellipsis}.fui-advanced-data-table__sort-button,.fui-advanced-data-table__filter-button{display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border:none;background:transparent;color:var(--fui-text-secondary);cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__sort-button:hover,.fui-advanced-data-table__filter-button:hover{color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-advanced-data-table__sort-button:focus-visible,.fui-advanced-data-table__filter-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-advanced-data-table__sort-icon,.fui-advanced-data-table__filter-icon{width:16px;height:16px}.fui-advanced-data-table__sort-icon{opacity:.6;transition:opacity var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__sort-icon path{transition:opacity var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__sort-icon--asc{opacity:1;color:var(--fui-primary)}.fui-advanced-data-table__sort-icon--asc path:first-child{opacity:1}.fui-advanced-data-table__sort-icon--asc path:last-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc{opacity:1;color:var(--fui-primary)}.fui-advanced-data-table__sort-icon--desc path:first-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc path:last-child{opacity:1}.fui-advanced-data-table__filter-icon{opacity:.6;transition:all var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__filter-icon--active{opacity:1;color:var(--fui-primary)}.fui-advanced-data-table__filter-menu-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;min-width:280px}.fui-advanced-data-table__filter-select{width:100%}.fui-advanced-data-table__filter-actions{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.25rem}.fui-advanced-data-table__body{background-color:var(--fui-surface-00)}.fui-advanced-data-table__row{height:var(--fui-table-row-height);background-color:var(--fui-table-row-bg);border-bottom:1px solid var(--fui-table-border-color);transition:background-color var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__row:hover{background-color:var(--fui-table-row-hover-bg)}.fui-advanced-data-table__row--clickable{cursor:pointer}.fui-advanced-data-table__row--selected{background-color:var(--fui-primary-10)}.fui-advanced-data-table__row--selected:hover,.fui-advanced-data-table__row--highlighted,.fui-advanced-data-table__row--highlighted:hover{background-color:var(--fui-primary-20)}.fui-advanced-data-table__row--empty{height:auto}.fui-advanced-data-table__row--empty:hover{background-color:transparent}.fui-advanced-data-table__row .formaui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table__cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;position:relative;border-bottom:1px solid var(--fui-table-border-color);border-right:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__cell--empty{padding:2.5rem 1rem;text-align:center;color:var(--fui-text-secondary);white-space:normal;border-bottom:none}.fui-advanced-data-table__cell--sticky-start{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__cell--sticky-end{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fui-primary)}.fui-advanced-data-table__checkbox:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-advanced-data-table__empty-state{padding:2.5rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-md, 1rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fui-advanced-data-table__empty-state-icon{font-size:var(--fui-font-size-09);color:var(--fui-text-secondary);opacity:.5}.fui-advanced-data-table__bool-icon--true{color:var(--fui-success)}.fui-advanced-data-table__bool-icon--false{color:var(--fui-danger)}@media(max-width:768px){.fui-advanced-data-table__table{font-size:var(--fui-font-size-xs, .75rem)}.fui-advanced-data-table__header-cell,.fui-advanced-data-table__cell{padding:.25rem .5rem;max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["readOnly", "appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabledInput"], outputs: ["valueChange"] }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }, { kind: "component", type: FuiMenuComponent, selector: "fui-menu", inputs: ["position", "size", "closeOnClickOutside", "closeOnEscape", "disabled", "attachToBody"], outputs: ["openChange", "itemSelected"] }, { kind: "directive", type: FuiMenuTriggerDirective, selector: "[fuiMenuTrigger]", inputs: ["menuTriggerFor", "menuTriggerData"] }, { kind: "component", type: FuiSelectComponent, selector: "fui-select", inputs: ["placeholder", "disabled", "readonly", "multiple", "errorStateMatcher", "compareWith"], outputs: ["valueChange", "selectionChange", "openedChange"] }, { kind: "component", type: FuiOptionComponent, selector: "fui-option", inputs: ["value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: FuiTooltipDirective, selector: "[fuiTooltip]", inputs: ["fuiTooltip", "fuiTooltipPosition", "fuiTooltipSize", "fuiTooltipTrigger", "fuiTooltipShowDelay", "fuiTooltipHideDelay", "fuiTooltipDisabled", "fuiTooltipMaxWidth", "fuiTooltipOffset", "fuiTooltipArrow", "fuiTooltipShow"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiBadgeComponent, selector: "fui-badge", inputs: ["label", "icon", "customColor", "size", "variant", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAdvancedDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-advanced-data-table', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        FuiFormFieldComponent,
+                        FuiInputDirective,
+                        FuiButtonDirective,
+                        FuiMenuComponent,
+                        FuiMenuTriggerDirective,
+                        FuiSelectComponent,
+                        FuiOptionComponent,
+                        FuiTooltipDirective,
+                        FuiIconComponent,
+                        FuiBadgeComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-advanced-data-table',
+                    }, template: "<div class=\"fui-advanced-data-table__wrapper\">\r\n  <!-- Live region for sort/filter announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #liveAnnouncer></div>\r\n  <table\r\n    class=\"fui-advanced-data-table__table\"\r\n    role=\"grid\"\r\n    [attr.aria-label]=\"tableAriaLabel()\"\r\n    [attr.aria-rowcount]=\"data().length\"\r\n  >\r\n    <!-- Table Header -->\r\n    <thead\r\n      class=\"fui-advanced-data-table__header\"\r\n      [class.fui-advanced-data-table__header--sticky]=\"config().headerSticky\"\r\n    >\r\n      <tr class=\"fui-advanced-data-table__header-row\">\r\n        <!-- Selection Checkbox Column -->\r\n        @if (config().areRowsSelectable) {\r\n          <th\r\n            scope=\"col\"\r\n            class=\"fui-advanced-data-table__header-cell fui-advanced-data-table__header-cell--checkbox\"\r\n            [class.fui-advanced-data-table__header-cell--sticky-start]=\"\r\n              processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n            \"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"fui-advanced-data-table__checkbox\"\r\n              [checked]=\"allRowsSelected()\"\r\n              [indeterminate]=\"someRowsSelected()\"\r\n              (change)=\"toggleAllRows()\"\r\n              aria-label=\"Select all rows\"\r\n            />\r\n          </th>\r\n        }\r\n\r\n        <!-- Data Columns -->\r\n        @for (header of processedHeaders(); track header.field) {\r\n          <th\r\n            scope=\"col\"\r\n            [class]=\"getHeaderClasses(header)\"\r\n            [ngStyle]=\"getHeaderStyles(header)\"\r\n            [attr.aria-sort]=\"getAriaSortValue(header.field)\"\r\n          >\r\n            <div class=\"fui-advanced-data-table__header-content\">\r\n              <span class=\"fui-advanced-data-table__header-label\">{{ header.label }}</span>\r\n\r\n              @if (header.hasSort) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fui-advanced-data-table__sort-button\"\r\n                  (click)=\"onSortClick(header.field)\"\r\n                  [attr.aria-label]=\"'Sort by ' + header.label\"\r\n                  fuiTooltip=\"Ordina\"\r\n                  fuiTooltipSize=\"sm\"\r\n                  fuiTooltipPosition=\"bottom\"\r\n                >\r\n                  <svg\r\n                    [class]=\"getSortIconClasses(header.field)\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    viewBox=\"0 0 16 16\"\r\n                    fill=\"currentColor\"\r\n                  >\r\n                    <path d=\"M8 3L12 7H4L8 3Z\" />\r\n                    <path d=\"M8 13L4 9H12L8 13Z\" />\r\n                  </svg>\r\n                </button>\r\n              }\r\n\r\n              @if (header.hasFilter) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fui-advanced-data-table__filter-button\"\r\n                  fuiMenuTrigger\r\n                  [menuTriggerFor]=\"filterMenu\"\r\n                  [menuTriggerData]=\"{ field: header.field, type: header.type }\"\r\n                  [attr.aria-label]=\"'Filter ' + header.label\"\r\n                  fuiTooltip=\"Filtra\"\r\n                  fuiTooltipSize=\"sm\"\r\n                  fuiTooltipPosition=\"bottom\"\r\n                >\r\n                  <svg\r\n                    [class]=\"getFilterIconClasses(header.field)\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    viewBox=\"0 0 16 16\"\r\n                    fill=\"currentColor\"\r\n                  >\r\n                    <path d=\"M2 2L6 8V13L10 15V8L14 2H2Z\" />\r\n                  </svg>\r\n                </button>\r\n\r\n                <fui-menu\r\n                  #filterMenu\r\n                  position=\"bottom-end\"\r\n                  size=\"md\"\r\n                  (openChange)=\"$event && initFilterForm(header.field, header.type)\"\r\n                  [closeOnClickOutside]=\"true\"\r\n                >\r\n                  <div class=\"fui-advanced-data-table__filter-menu-content\" (click)=\"$event.stopPropagation()\">\r\n                    <div class=\"fui-text-xs\">{{ header.label }}</div>\r\n                    @if (header.type !== 'label') {\r\n                      <!-- Operator Selection -->\r\n                      <fui-form-field [hideSubscript]=\"true\">\r\n                        <fui-select [(ngModel)]=\"tempFilterOperator\" placeholder=\"Seleziona operatore\">\r\n                          @for (operator of getFilterOperators(header.type); track operator.value) {\r\n                            <fui-option [value]=\"operator.value\">\r\n                              {{ operator.label }}\r\n                            </fui-option>\r\n                          }\r\n                        </fui-select>\r\n                      </fui-form-field>\r\n\r\n                      <!-- Value Input(s) -->\r\n                      @if (requiresInput(header.type)) {\r\n                        <fui-form-field [hideSubscript]=\"true\">\r\n                          <input\r\n                            fuiInput\r\n                            [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n                            [(ngModel)]=\"tempFilterValue\"\r\n                            placeholder=\"Inserisci valore\"\r\n                          />\r\n                        </fui-form-field>\r\n\r\n                        @if (requiresSecondInput(header.type)) {\r\n                          <fui-form-field [hideSubscript]=\"true\">\r\n                            <input\r\n                              fuiInput\r\n                              [type]=\"header.type === 'number' ? 'number' : header.type === 'date' ? 'date' : 'text'\"\r\n                              [(ngModel)]=\"tempFilterValue2\"\r\n                              placeholder=\"Inserisci valore finale\"\r\n                            />\r\n                          </fui-form-field>\r\n                        }\r\n                      }\r\n                    } @else {\r\n                      <!-- Label filter: select dropdown -->\r\n                      <fui-form-field [hideSubscript]=\"true\">\r\n                        <fui-select [(ngModel)]=\"tempFilterValue\" placeholder=\"Seleziona valore\">\r\n                          @for (labelOpt of header.labels ?? []; track labelOpt.value) {\r\n                            <fui-option [value]=\"labelOpt.value\">\r\n                              {{ labelOpt.label }}\r\n                            </fui-option>\r\n                          }\r\n                        </fui-select>\r\n                      </fui-form-field>\r\n                    }\r\n\r\n                    <!-- Actions -->\r\n                    <div class=\"fui-advanced-data-table__filter-actions\">\r\n                      <button\r\n                        fuiButton\r\n                        variant=\"primary\"\r\n                        size=\"sm\"\r\n                        (click)=\"applyFilter(header.field, header.type, filterMenu)\"\r\n                      >\r\n                        Applica\r\n                      </button>\r\n                      <button fuiButton variant=\"outline\" size=\"sm\" (click)=\"clearFilter(header.field, filterMenu)\">\r\n                        Pulisci\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </fui-menu>\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- Table Body -->\r\n    <tbody class=\"fui-advanced-data-table__body\">\r\n      @if (data().length === 0 && emptyMessage()) {\r\n        <tr class=\"fui-advanced-data-table__row fui-advanced-data-table__row--empty\">\r\n          <td\r\n            class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--empty\"\r\n            [attr.colspan]=\"processedHeaders().length + (config().areRowsSelectable ? 1 : 0)\"\r\n          >\r\n            <div class=\"fui-advanced-data-table__empty-state\">\r\n              <fui-icon\r\n                name=\"magnifying-glass\"\r\n                class=\"fui-advanced-data-table__empty-state-icon\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n              {{ emptyMessage() }}\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      } @else {\r\n        @for (row of data(); track trackBy()($index, row)) {\r\n          <tr\r\n            (dblclick)=\"rowDblClick.emit(row)\"\r\n            class=\"fui-advanced-data-table__row\"\r\n            [class.fui-advanced-data-table__row--selected]=\"isRowSelected($index)\"\r\n            [class.fui-advanced-data-table__row--highlighted]=\"isRowHighlighted($index)\"\r\n            [class.fui-advanced-data-table__row--clickable]=\"enableRowHighlight()\"\r\n            [attr.aria-selected]=\"config().areRowsSelectable ? isRowSelected($index) : null\"\r\n            [attr.aria-rowindex]=\"$index + 2\"\r\n            (click)=\"toggleRowHighlight($index)\"\r\n          >\r\n            <!-- Selection Checkbox -->\r\n            @if (config().areRowsSelectable) {\r\n              <td\r\n                class=\"fui-advanced-data-table__cell fui-advanced-data-table__cell--checkbox\"\r\n                [class.fui-advanced-data-table__cell--sticky-start]=\"\r\n                  processedHeaders()[0] && processedHeaders()[0].isStartSticky\r\n                \"\r\n              >\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"fui-advanced-data-table__checkbox\"\r\n                  [checked]=\"isRowSelected($index)\"\r\n                  (change)=\"toggleRow($index)\"\r\n                  [attr.aria-label]=\"'Select row ' + ($index + 1)\"\r\n                />\r\n              </td>\r\n            }\r\n\r\n            <!-- Data Cells -->\r\n            @for (header of processedHeaders(); track header.field) {\r\n              <td [class]=\"getCellClasses(header)\" [ngStyle]=\"getCellStyles(header)\">\r\n                @if (header.type === 'boolean') {\r\n                  @if (getCellValue(row, header.field)) {\r\n                    <fui-icon name=\"check-circle\" class=\"fui-advanced-data-table__bool-icon--true\"></fui-icon>\r\n                  } @else {\r\n                    <fui-icon name=\"x-circle\" class=\"fui-advanced-data-table__bool-icon--false\"></fui-icon>\r\n                  }\r\n                } @else if (header.type === 'label') {\r\n                  @let labelConfig = getLabelConfig(getCellValue(row, header.field), header.labels ?? []);\r\n                  @if (labelConfig) {\r\n                    <fui-badge\r\n                      [label]=\"labelConfig.label\"\r\n                      [customColor]=\"labelConfig.color\"\r\n                      [icon]=\"labelConfig.icon ?? null\"\r\n                      size=\"sm\"\r\n                    />\r\n                  } @else {\r\n                    <fui-badge [label]=\"'' + getCellValue(row, header.field)\" variant=\"info\" size=\"sm\" />\r\n                  }\r\n                } @else {\r\n                  {{ formatCellValue(getCellValue(row, header.field), header.type) }}\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-advanced-data-table{--fui-table-font-size: var(--fui-font-size-sm, .875rem);--fui-table-header-bg: var(--fui-surface-01);--fui-table-row-bg: var(--fui-surface-00);--fui-table-row-hover-bg: var(--fui-surface-02);--fui-table-row-height: 3rem;--fui-table-cell-padding-y: .5rem;--fui-table-cell-padding-x: 1rem;--fui-table-border-color: var(--fui-border-color);display:block;width:100%;position:relative}.fui-advanced-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative}.fui-advanced-data-table__wrapper::-webkit-scrollbar{height:8px}.fui-advanced-data-table__wrapper::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-advanced-data-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-advanced-data-table__table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--fui-font-family-sans);font-size:var(--fui-table-font-size);color:var(--fui-text-primary);background-color:var(--fui-table-row-bg)}.fui-advanced-data-table__header{background-color:var(--fui-table-header-bg);border-bottom:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__header--sticky{position:sticky;top:0;z-index:10}.fui-advanced-data-table__header-row{height:var(--fui-table-row-height)}.fui-advanced-data-table__header-row .formaui-advanced-data-table__header-cell:last-child{border-right:none}.fui-advanced-data-table__header-cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);text-align:left;font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-secondary);background-color:var(--fui-table-header-bg);border-right:1px solid var(--fui-border-color);border-bottom:1px solid var(--fui-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-shadow:0 1.19px 3.57px #1018281a}.fui-advanced-data-table__header-cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__header-cell--sticky-start{position:sticky;z-index:11;background-color:var(--fui-surface-01)}.fui-advanced-data-table__header-cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__header-cell--sticky-end{position:sticky;z-index:11;background-color:var(--fui-surface-01)}.fui-advanced-data-table__header-cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__header-content{display:flex;align-items:center;gap:.25rem}.fui-advanced-data-table__header-label{flex:1;overflow:hidden;text-overflow:ellipsis}.fui-advanced-data-table__sort-button,.fui-advanced-data-table__filter-button{display:inline-flex;align-items:center;justify-content:center;padding:.125rem;border:none;background:transparent;color:var(--fui-text-secondary);cursor:pointer;border-radius:var(--fui-border-radius-sm);transition:all var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__sort-button:hover,.fui-advanced-data-table__filter-button:hover{color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-advanced-data-table__sort-button:focus-visible,.fui-advanced-data-table__filter-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-advanced-data-table__sort-icon,.fui-advanced-data-table__filter-icon{width:16px;height:16px}.fui-advanced-data-table__sort-icon{opacity:.6;transition:opacity var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__sort-icon path{transition:opacity var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__sort-icon--asc{opacity:1;color:var(--fui-primary)}.fui-advanced-data-table__sort-icon--asc path:first-child{opacity:1}.fui-advanced-data-table__sort-icon--asc path:last-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc{opacity:1;color:var(--fui-primary)}.fui-advanced-data-table__sort-icon--desc path:first-child{opacity:.3}.fui-advanced-data-table__sort-icon--desc path:last-child{opacity:1}.fui-advanced-data-table__filter-icon{opacity:.6;transition:all var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__filter-icon--active{opacity:1;color:var(--fui-primary)}.fui-advanced-data-table__filter-menu-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;min-width:280px}.fui-advanced-data-table__filter-select{width:100%}.fui-advanced-data-table__filter-actions{display:flex;gap:.25rem;justify-content:flex-end;margin-top:.25rem}.fui-advanced-data-table__body{background-color:var(--fui-surface-00)}.fui-advanced-data-table__row{height:var(--fui-table-row-height);background-color:var(--fui-table-row-bg);border-bottom:1px solid var(--fui-table-border-color);transition:background-color var(--fui-duration-fast-01, .1s) var(--fui-ease-standard) 0ms}.fui-advanced-data-table__row:hover{background-color:var(--fui-table-row-hover-bg)}.fui-advanced-data-table__row--clickable{cursor:pointer}.fui-advanced-data-table__row--selected{background-color:var(--fui-primary-10)}.fui-advanced-data-table__row--selected:hover,.fui-advanced-data-table__row--highlighted,.fui-advanced-data-table__row--highlighted:hover{background-color:var(--fui-primary-20)}.fui-advanced-data-table__row--empty{height:auto}.fui-advanced-data-table__row--empty:hover{background-color:transparent}.fui-advanced-data-table__row .formaui-advanced-data-table__cell:last-child{border-right:none}.fui-advanced-data-table__cell{padding:var(--fui-table-cell-padding-y) var(--fui-table-cell-padding-x);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;position:relative;border-bottom:1px solid var(--fui-table-border-color);border-right:1px solid var(--fui-table-border-color)}.fui-advanced-data-table__cell--checkbox{width:48px;min-width:48px;max-width:48px;padding:.5rem;text-align:center}.fui-advanced-data-table__cell--empty{padding:2.5rem 1rem;text-align:center;color:var(--fui-text-secondary);white-space:normal;border-bottom:none}.fui-advanced-data-table__cell--sticky-start{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-start-edge:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to right,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__cell--sticky-end{position:sticky;z-index:9;background-color:inherit}.fui-advanced-data-table__cell--sticky-end-edge:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(to left,var(--fui-border-color),transparent);pointer-events:none}.fui-advanced-data-table__checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--fui-primary)}.fui-advanced-data-table__checkbox:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-advanced-data-table__empty-state{padding:2.5rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-md, 1rem);display:flex;flex-direction:column;align-items:center;gap:.75rem}.fui-advanced-data-table__empty-state-icon{font-size:var(--fui-font-size-09);color:var(--fui-text-secondary);opacity:.5}.fui-advanced-data-table__bool-icon--true{color:var(--fui-success)}.fui-advanced-data-table__bool-icon--false{color:var(--fui-danger)}@media(max-width:768px){.fui-advanced-data-table__table{font-size:var(--fui-font-size-xs, .75rem)}.fui-advanced-data-table__header-cell,.fui-advanced-data-table__cell{padding:.25rem .5rem;max-width:200px}}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], enableRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowHighlight", required: false }] }], tableAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAriaLabel", required: false }] }], _liveAnnouncer: [{
+                type: ViewChild,
+                args: ['liveAnnouncer']
+            }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilterOperator, FuiAdvancedDataTableComponent };
+//# sourceMappingURL=raintonic-formaui-components-data-table.mjs.map