@acorex/platform 21.0.0-next.5 → 21.0.0-next.8

package/fesm2022/acorex-platform-layout-components.mjs

@@ -2918,7 +2918,7 @@ class AXPSpreadsheetComponent {
             return result;
         }, ...(ngDevMode ? [{ debugName: "rowsWithIds" }] : []));
         /**
-         * Check if spreadsheet is empty
+         * Check if spreadsheet is completely empty (both columns and rows)
          */
         this.isEmpty = computed(() => {
             const columns = this.columns();
@@ -2926,15 +2926,15 @@ class AXPSpreadsheetComponent {
             return (!columns || columns.length === 0) && (!rows || rows.length === 0);
         }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
         /**
-         * Check if only columns are empty
+         * Check if columns are empty (regardless of rows)
+         * When columns are empty, we should show a message about missing columns, not rows
          */
         this.isColumnsEmpty = computed(() => {
             const columns = this.columns();
-            const rows = this.currentRows();
-            return (!columns || columns.length === 0) && (rows && rows.length > 0);
+            return !columns || columns.length === 0;
         }, ...(ngDevMode ? [{ debugName: "isColumnsEmpty" }] : []));
         /**
-         * Check if only rows are empty
+         * Check if only rows are empty (columns exist but no rows)
          */
         this.isRowsEmpty = computed(() => {
             const columns = this.columns();
@@ -3346,7 +3346,7 @@ class AXPSpreadsheetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, classAttribute: "axp-spreadsheet" }, ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n    @if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n        <div class=\"__empty-icon\">\n            <i class=\"fa-light fa-table\"></i>\n        </div>\n        <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</div>\n    </div>\n    } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Empty State Row -->\n            <tbody class=\"__tbody\">\n                <tr class=\"__row __row--empty\">\n                    <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n                        <div class=\"__empty-state-inline\">\n                            <div class=\"__empty-icon\">\n                                <i class=\"fa-light fa-list\"></i>\n                            </div>\n                            <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate |\n                                async }}</div>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    } @else if (isColumnsEmpty()) {\n    <!-- Empty State: Only columns are empty - Show rows -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                    </th>\n                    <!-- Empty State Column -->\n                    <th class=\"__column-header __column-header--empty\">\n                        <div class=\"__empty-state-inline\">\n                            <div class=\"__empty-icon\">\n                                <i class=\"fa-light fa-list\"></i>\n                            </div>\n                            <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate |\n                                async }}</div>\n                        </div>\n                    </th>\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\n                <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                    <!-- Row header (empty for now, or could show row number) -->\n                    <td class=\"__row-header\">\n                        @if (rowMode() === 'dynamic' && allowRemoveRows() && !readonly()) {\n                        <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                            <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n                                [attr.aria-label]=\"'Remove Row'\">\n                                <ax-icon icon=\"far fa-times\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </td>\n                    <!-- Empty cell -->\n                    <td class=\"__cell __cell--empty\"></td>\n                </tr>\n                }\n            </tbody>\n        </table>\n    </div>\n    } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\n                    <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                        <!-- Row header -->\n                        <td class=\"__row-header\">\n                            <div class=\"__header-content\">\n                                @if (rowTitlePath()) {\n                                <div class=\"__header-title\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            }\n                        </td>\n\n                        <!-- Spreadsheet cells -->\n                        @for (column of columns(); track column.name) {\n                        <td class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            } @else {\n                            <!-- View mode: Show widget in view mode or placeholder -->\n                            <div class=\"__cell-value\">\n                                @if (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</span>\n                                }\n                            </div>\n                            }\n                        </td>\n                        }\n                    </tr>\n                    }\n                </axp-widgets-container>\n            </tbody>\n        </table>\n    </div>\n    }\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, classAttribute: "axp-spreadsheet" }, ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n    @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n        <div class=\"__empty-icon\">\n            <i class=\"fa-light fa-table-columns\"></i>\n        </div>\n        <div class=\"__empty-title\">{{ '@general:state-message.empty-columns.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty-columns.description' | translate | async }}\n        </div>\n    </div>\n    } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n        <div class=\"__empty-icon\">\n            <i class=\"fa-light fa-table\"></i>\n        </div>\n        <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</div>\n    </div>\n    } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Empty State Row -->\n            <tbody class=\"__tbody\">\n                <tr class=\"__row __row--empty\">\n                    <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n                        <div class=\"__empty-state-inline\">\n                            <div class=\"__empty-icon\">\n                                <i class=\"fa-light fa-list\"></i>\n                            </div>\n                            <div class=\"__empty-title\">{{ '@general:state-message.empty-rows.title' | translate | async\n                                }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty-rows.description' |\n                                translate |\n                                async }}</div>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\n                    <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                        <!-- Row header -->\n                        <td class=\"__row-header\">\n                            <div class=\"__header-content\">\n                                @if (rowTitlePath()) {\n                                <div class=\"__header-title\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            }\n                        </td>\n\n                        <!-- Spreadsheet cells -->\n                        @for (column of columns(); track column.name) {\n                        <td class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            } @else {\n                            <!-- View mode: Show widget in view mode or placeholder -->\n                            <div class=\"__cell-value\">\n                                @if (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</span>\n                                }\n                            </div>\n                            }\n                        </td>\n                        }\n                    </tr>\n                    }\n                </axp-widgets-container>\n            </tbody>\n        </table>\n    </div>\n    }\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
             type: Component,
@@ -3359,7 +3359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXPWidgetCoreModule,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'axp-spreadsheet',
-                    }, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n    @if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n        <div class=\"__empty-icon\">\n            <i class=\"fa-light fa-table\"></i>\n        </div>\n        <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</div>\n    </div>\n    } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Empty State Row -->\n            <tbody class=\"__tbody\">\n                <tr class=\"__row __row--empty\">\n                    <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n                        <div class=\"__empty-state-inline\">\n                            <div class=\"__empty-icon\">\n                                <i class=\"fa-light fa-list\"></i>\n                            </div>\n                            <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate |\n                                async }}</div>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    } @else if (isColumnsEmpty()) {\n    <!-- Empty State: Only columns are empty - Show rows -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                    </th>\n                    <!-- Empty State Column -->\n                    <th class=\"__column-header __column-header--empty\">\n                        <div class=\"__empty-state-inline\">\n                            <div class=\"__empty-icon\">\n                                <i class=\"fa-light fa-list\"></i>\n                            </div>\n                            <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate |\n                                async }}</div>\n                        </div>\n                    </th>\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\n                <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                    <!-- Row header (empty for now, or could show row number) -->\n                    <td class=\"__row-header\">\n                        @if (rowMode() === 'dynamic' && allowRemoveRows() && !readonly()) {\n                        <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                            <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n                                [attr.aria-label]=\"'Remove Row'\">\n                                <ax-icon icon=\"far fa-times\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </td>\n                    <!-- Empty cell -->\n                    <td class=\"__cell __cell--empty\"></td>\n                </tr>\n                }\n            </tbody>\n        </table>\n    </div>\n    } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\n                    <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                        <!-- Row header -->\n                        <td class=\"__row-header\">\n                            <div class=\"__header-content\">\n                                @if (rowTitlePath()) {\n                                <div class=\"__header-title\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            }\n                        </td>\n\n                        <!-- Spreadsheet cells -->\n                        @for (column of columns(); track column.name) {\n                        <td class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            } @else {\n                            <!-- View mode: Show widget in view mode or placeholder -->\n                            <div class=\"__cell-value\">\n                                @if (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</span>\n                                }\n                            </div>\n                            }\n                        </td>\n                        }\n                    </tr>\n                    }\n                </axp-widgets-container>\n            </tbody>\n        </table>\n    </div>\n    }\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\n"] }]
+                    }, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n    @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n        <div class=\"__empty-icon\">\n            <i class=\"fa-light fa-table-columns\"></i>\n        </div>\n        <div class=\"__empty-title\">{{ '@general:state-message.empty-columns.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty-columns.description' | translate | async }}\n        </div>\n    </div>\n    } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n        <div class=\"__empty-icon\">\n            <i class=\"fa-light fa-table\"></i>\n        </div>\n        <div class=\"__empty-title\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</div>\n    </div>\n    } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Empty State Row -->\n            <tbody class=\"__tbody\">\n                <tr class=\"__row __row--empty\">\n                    <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n                        <div class=\"__empty-state-inline\">\n                            <div class=\"__empty-icon\">\n                                <i class=\"fa-light fa-list\"></i>\n                            </div>\n                            <div class=\"__empty-title\">{{ '@general:state-message.empty-rows.title' | translate | async\n                                }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty-rows.description' |\n                                translate |\n                                async }}</div>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n        <table class=\"__table\">\n            <!-- Header Row -->\n            <thead class=\"__thead\">\n                <tr class=\"__header-row\">\n                    <!-- Corner cell (title) -->\n                    <th class=\"__corner-cell\">\n                        @if (title()) {\n                        <div class=\"__corner-title\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\n                                <ax-icon icon=\"far fa-plus\"></ax-icon>\n                            </ax-button>\n                        </div>\n                        }\n                    </th>\n\n                    <!-- Column headers -->\n                    @for (column of columns(); track column.name) {\n                    <th class=\"__column-header\" [style.width]=\"column.width\">\n                        <div class=\"__header-content\">\n                            <div class=\"__header-title\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\n                    <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                        <!-- Row header -->\n                        <td class=\"__row-header\">\n                            <div class=\"__header-content\">\n                                @if (rowTitlePath()) {\n                                <div class=\"__header-title\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            }\n                        </td>\n\n                        <!-- Spreadsheet cells -->\n                        @for (column of columns(); track column.name) {\n                        <td class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\n                                    <ax-icon icon=\"far fa-times\"></ax-icon>\n                                </ax-button>\n                            </div>\n                            } @else {\n                            <!-- View mode: Show widget in view mode or placeholder -->\n                            <div class=\"__cell-value\">\n                                @if (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</span>\n                                }\n                            </div>\n                            }\n                        </td>\n                        }\n                    </tr>\n                    }\n                </axp-widgets-container>\n            </tbody>\n        </table>\n    </div>\n    }\n</div>\n<!--\n  #endregion\n-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media (max-width: 768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media (max-width: 768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowMode", required: false }] }], rowsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsInput", required: false }] }], rowsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsModel", required: false }] }, { type: i0.Output, args: ["rowsModelChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], emptyCellPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCellPlaceholder", required: false }] }], rowTitlePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTitlePath", required: false }] }], rowDescriptionPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDescriptionPath", required: false }] }], allowAddRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddRows", required: false }] }], allowRemoveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveRows", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowChange: [{ type: i0.Output, args: ["rowChange"] }], spreadsheetChange: [{ type: i0.Output, args: ["spreadsheetChange"] }], handleKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]