@acorex/platform 20.7.13 → 20.7.15

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

@@ -10,12 +10,12 @@ import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore, AXPColumnWidthService, AXPDataGenerator, AXPIconLogoConfig, AXPComponentLogoConfig, AXPImageUrlLogoConfig } from '@acorex/platform/core';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPIconLogoConfig, AXPComponentLogoConfig, AXPImageUrlLogoConfig, AXPDataGenerator } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, linkedSignal, untracked, HostListener, ViewChildren, DestroyRef, Input, EventEmitter, Output } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, linkedSignal, untracked, HostListener, ViewChildren, Input, DestroyRef, EventEmitter, Output } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
@@ -34,7 +34,7 @@ import { AXSwitchModule } from '@acorex/components/switch';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { cloneDeep, sortBy, isNil, isEmpty, isEqual, get, set, merge, unionBy, isArray, capitalize } from 'lodash-es';
+import { cloneDeep, isNil, isEmpty, isEqual, merge, get, set, unionBy, sortBy, isArray, capitalize } from 'lodash-es';
 import * as i2$5 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXTextBoxModule } from '@acorex/components/text-box';
@@ -44,7 +44,6 @@ import * as i1$4 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
 import * as i6$1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetsCatalog, AXPWidgetRegistryService, AXPWidgetGroupEnum } from '@acorex/platform/layout/widget-core';
-import { AXPSessionService } from '@acorex/platform/auth';
 import * as i4$1 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
@@ -62,13 +61,13 @@ import * as i1$6 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
 import * as i3$1 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
+import * as i2$6 from '@acorex/components/image';
+import { AXImageModule } from '@acorex/components/image';
+import { AXPlatform } from '@acorex/core/platform';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXToastService } from '@acorex/components/toast';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import { AXPLayoutBuilderService, AXPLayoutRendererComponent } from '@acorex/platform/layout/builder';
-import * as i2$6 from '@acorex/components/image';
-import { AXImageModule } from '@acorex/components/image';
-import { AXPlatform } from '@acorex/core/platform';
 import * as i2$7 from '@acorex/components/accordion';
 import { AXAccordionModule } from '@acorex/components/accordion';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
@@ -1230,7 +1229,7 @@ class AXPColumnItemListComponent {
         </div>
       </div>
     </ax-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
             type: Component,
@@ -1468,274 +1467,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n  #region ----   Compare View Table Layout   ----\n-->\n<div class=\"axp-compare-view\">\n  <div class=\"__table-container\">\n    <table class=\"__table\">\n      <thead class=\"__thead\">\n        <tr class=\"__header-row\">\n          <th class=\"__field-header\">\n            <ax-check-box\n              [value]=\"showOnlyChanges()\"\n              (valueChange)=\"toggleShowOnlyChanges()\"\n              class=\"__show-changes-toggle\"\n            >\n              <ax-label>\n                {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n              </ax-label>\n            </ax-check-box>\n          </th>\n          @for (obj of remainingObjects(); track obj.id) {\n            <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n              <div class=\"__object-title\" [title]=\"obj.description\">\n                <span>{{ obj.title | translate | async }}</span>\n                @if (remainingObjects().length > 2) {\n                  <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n                    <i class=\"fa-light fa-times\"></i>\n                  </span>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"__tbody\">\n        @for (field of filteredFields(); track field.path; let i = $index) {\n          <tr\n            class=\"__row\"\n            [class.__row--odd]=\"i % 2 === 1\"\n            [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n            [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n          >\n            <td class=\"__field-cell\">\n              <div class=\"__field-content\">\n                <div class=\"__field-title\">\n                  {{ field.title | translate | async }}\n                </div>\n                @if (field.description) {\n                  <div class=\"__field-description\">{{ field.description }}</div>\n                }\n              </div>\n            </td>\n            @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n              <td\n                class=\"__object-cell\"\n                [attr.data-id]=\"obj.id\"\n                [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n              >\n                @if (obj.context[field.path] !== undefined) {\n                  <div class=\"__object-content\">\n                    <axp-widgets-container [context]=\"obj.context\">\n                      <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n                    </axp-widgets-container>\n                  </div>\n                } @else {\n                  <div class=\"__object-placeholder\">---</div>\n                }\n                @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n                  <div class=\"__change-indicator\">\n                    <i class=\"fa-light fa-arrow-right\"></i>\n                  </div>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n<!--\n  #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 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));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{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-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),.05)}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),.05)}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;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));position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
         }], propDecorators: { inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
-class AXPComponentSlot {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlot, decorators: [{
-            type: Directive
-        }] });
-
-class AXPComponentSlotRegistryService {
-    constructor() {
-        this.registry = new Map();
-    }
-    register(slotName, config) {
-        let configs = this.registry.get(slotName) || [];
-        // Check if the component is already registered in this slot
-        const isDuplicate = configs.some(existingConfig => existingConfig.name === config.name);
-        if (!isDuplicate) {
-            configs = [...configs, config]; // Add the new configuration
-            this.registry.set(slotName, configs);
-        }
-    }
-    get(slotName) {
-        return this.registry.get(slotName) || [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotRegistryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class AXPComponentSlotPlaceholderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPComponentSlotPlaceholderComponent, isStandalone: true, selector: "axp-component-slot-placeholder", ngImport: i0, template: `<div>
-    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotPlaceholderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-component-slot-placeholder',
-                    template: `<div>
-    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
-  </div>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXSkeletonModule],
-                    standalone: true,
-                }]
-        }] });
-
-class AXPComponentSlotDirective {
-    constructor() {
-        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-        this.host = input(...(ngDevMode ? [undefined, { debugName: "host" }] : []));
-        this.context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : []));
-        this.elementRef = inject(ElementRef);
-        this.registryService = inject(AXPComponentSlotRegistryService);
-        this.injector = inject(Injector);
-        this.evaluator = inject(AXPExpressionEvaluatorService);
-        this.sessionService = inject(AXPSessionService);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.contextStore = inject(AXPContextStore);
-        this.isEmpty = computed(() => this._viewCount() === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
-        // Create a signal to store the count of children
-        this._viewCount = signal(0, ...(ngDevMode ? [{ debugName: "_viewCount" }] : []));
-        // Track component references for updates
-        this.componentRefs = [];
-        // Track placeholder references for replacement
-        this.placeholderRefs = new Map();
-        // Watch for context changes and update component instances
-        effect(() => {
-            const currentContext = this.context();
-            const currentHost = this.host();
-            // Update all component references with new context and host
-            this.componentRefs.forEach(componentRef => {
-                if (componentRef.instance) {
-                    Object.assign(componentRef.instance, {
-                        host: currentHost,
-                        context: currentContext,
-                    });
-                }
-            });
-        });
-    }
-    async ngOnInit() {
-        await this.loadComponents();
-        // Update the signal after loading
-        this._viewCount.set(this.viewContainerRef.length);
-    }
-    async loadComponents() {
-        this.viewContainerRef.clear();
-        // Clear previous component references
-        this.componentRefs = [];
-        this.placeholderRefs.clear();
-        const configs = sortBy(this.registryService.get(this.name()), (c) => c.priority ?? 0);
-        if (!configs) {
-            console.error(`No component found for slot ${this.name()}`);
-            return;
-        }
-        // Evaluate conditions and check features in parallel for performance
-        const results = await Promise.all(configs.map(async (c) => {
-            // Check condition if provided
-            const conditionPassed = c.condition ? await this.evaluateCondition(c.condition) : true;
-            // Check features if provided
-            const featuresPassed = c.features && c.features.length > 0
-                ? this.sessionService.isFeatureEnabled(...c.features)
-                : true;
-            return {
-                config: c,
-                visible: conditionPassed && featuresPassed,
-            };
-        }));
-        // Filter visible components while preserving priority order
-        const slots = results.filter((r) => r.visible).map((r) => r.config);
-        // Create skeleton placeholders immediately in priority order
-        slots.forEach((config, index) => {
-            const placeholderRef = this.viewContainerRef.createComponent(AXPComponentSlotPlaceholderComponent);
-            this.placeholderRefs.set(index, placeholderRef);
-        });
-        // Load all components in parallel and replace placeholders as they become ready
-        const loadPromises = slots.map(async (config, index) => {
-            let component;
-            let options = {};
-            // load component
-            if (typeof config.loadComponent === 'function') {
-                await runInInjectionContext(this.injector, async () => {
-                    component = await config.loadComponent?.();
-                });
-            }
-            else if (config.component) {
-                component = config.component;
-            }
-            // load options
-            if (typeof config.options === 'function') {
-                await runInInjectionContext(this.injector, async () => {
-                    const fun = config.options;
-                    options = await fun();
-                });
-            }
-            else if (config.options) {
-                options = await this.evaluator.evaluate(config.options, {});
-            }
-            // Replace placeholder with actual component as soon as it's ready
-            if (!component) {
-                console.warn(`Component failed to load for slot ${this.name()} at index ${index}`);
-                // Remove placeholder if component failed to load
-                const placeholderRef = this.placeholderRefs.get(index);
-                if (placeholderRef) {
-                    placeholderRef.destroy();
-                    this.placeholderRefs.delete(index);
-                }
-                return;
-            }
-            // Get the placeholder reference at this index
-            const placeholderRef = this.placeholderRefs.get(index);
-            if (!placeholderRef) {
-                console.warn(`Placeholder not found for index ${index}`);
-                return;
-            }
-            // Get the index of the placeholder in the view container
-            const placeholderIndex = this.viewContainerRef.indexOf(placeholderRef.hostView);
-            // Remove the placeholder
-            placeholderRef.destroy();
-            this.placeholderRefs.delete(index);
-            // Create the actual component at the same position
-            const componentRef = this.viewContainerRef.createComponent(component, { index: placeholderIndex });
-            // Store the component reference for future updates
-            this.componentRefs.push(componentRef);
-            Object.assign(componentRef.instance, {
-                host: this.host(),
-                context: this.context(),
-                ...options,
-            });
-        });
-        // Wait for all components to finish loading (they render as they become ready)
-        await Promise.all(loadPromises);
-    }
-    async evaluateCondition(condition) {
-        if (typeof condition === 'string') {
-            const result = await this.evaluator.evaluate(condition, {});
-            return result;
-        }
-        return condition(this.contextStore.data());
-        //return condition(this.context());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: AXPComponentSlotDirective, isStandalone: false, selector: "axp-component-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, host: { classPropertyName: "host", publicName: "host", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["slot"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'axp-component-slot',
-                    standalone: false,
-                    exportAs: 'slot',
-                }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], host: [{ type: i0.Input, args: [{ isSignal: true, alias: "host", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
-
-class AXPComponentSlotModule {
-    static forRoot(configs) {
-        return {
-            ngModule: AXPComponentSlotModule,
-            providers: [
-                {
-                    provide: 'AXPComponentSlotModuleFactory',
-                    useFactory: (registry) => () => {
-                        if (configs) {
-                            for (const [key, value] of Object.entries(configs)) {
-                                value.forEach(v => {
-                                    registry.register(key, v);
-                                });
-                            }
-                        }
-                    },
-                    deps: [AXPComponentSlotRegistryService],
-                    multi: true
-                }
-            ]
-        };
-    }
-    static forChild(configs) {
-        return {
-            ngModule: AXPComponentSlotModule,
-            providers: [
-                {
-                    provide: 'AXPComponentSlotModuleFactory',
-                    useFactory: (registry) => () => {
-                        if (configs) {
-                            for (const [key, value] of Object.entries(configs)) {
-                                value.forEach(v => {
-                                    registry.register(key, v);
-                                });
-                            }
-                        }
-                    },
-                    deps: [AXPComponentSlotRegistryService],
-                    multi: true
-                }
-            ]
-        };
-    }
-    /**
-     * @ignore
-     */
-    constructor(instances) {
-        instances?.forEach(f => {
-            f();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotModule, deps: [{ token: 'AXPComponentSlotModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotModule, declarations: [AXPComponentSlotDirective], exports: [AXPComponentSlotDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPComponentSlotModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXPComponentSlotDirective],
-                    exports: [AXPComponentSlotDirective]
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['AXPComponentSlotModuleFactory']
-                }] }] });
-
 //#endregion
 class AXPDataSelectorComponent extends AXBasePageComponent {
     //#endregion
@@ -2687,7 +2418,7 @@ class AXPQueryFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--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))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "forceDisableActionSheetStyle", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$2.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.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.16", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--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))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$2.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.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.16", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -2703,7 +2434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--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))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix class=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--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))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
         }], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']
@@ -2877,6 +2608,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+class AXPLogoComponent {
+    constructor() {
+        this.platform = inject(AXPlatform);
+    }
+    ngOnInit() {
+        this.setLogoType();
+        this.platform.themeMode$.subscribe(() => {
+            this.setLogoTheme();
+        });
+    }
+    ngOnChanges() {
+        this.setLogoTheme();
+        this.setLogoType();
+    }
+    setLogoType() {
+        switch (true) {
+            case this.source instanceof AXPImageUrlLogoConfig:
+                this.logoType = 'url';
+                break;
+            case this.source instanceof AXPComponentLogoConfig:
+                this.logoType = 'component';
+                break;
+            case this.source instanceof AXPIconLogoConfig:
+                this.logoType = 'icon';
+                break;
+            default:
+                break;
+        }
+    }
+    setLogoTheme() {
+        if (this.source && this.source.dark && this.source.light) {
+            this.source = this.platform.isDark() ? this.source.dark : this.source.light;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { classAttribute: "ax-flex ax-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@switch (logoType) { \n  @case ('url') {\n    <ax-image [width]=\"source.width\" [height]=\"source.height\" [src]=\"source.url\"></ax-image>\n  } \n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n  } \n  @case ('icon') {\n    <i [class]=\"source.icon\" [style.color]=\"source.color\"></i>\n  } \n}\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, template: "@switch (logoType) { \n  @case ('url') {\n    <ax-image [width]=\"source.width\" [height]=\"source.height\" [src]=\"source.url\"></ax-image>\n  } \n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n  } \n  @case ('icon') {\n    <i [class]=\"source.icon\" [style.color]=\"source.color\"></i>\n  } \n}\n\n" }]
+        }], propDecorators: { source: [{
+                type: Input
+            }] } });
+
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Service Interface   ----
@@ -3440,1092 +3215,1048 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-menu-customizer' }, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: [".axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));flex-shrink:0}.axp-menu-customizer__toolbar-spacer{min-width:1rem;flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:0px;flex:1 1 0%;overflow:auto}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__tree ax-tree-view{flex:1 1 0%}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1));flex-shrink:0}.axp-menu-customizer__item-text{min-width:0px;flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-menu-customizer__item-group{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));letter-spacing:.025em}.axp-menu-customizer__item-group i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));min-width:0px}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{flex-shrink:0;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:inline-flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));-webkit-user-select:all;user-select:all;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:.6;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:1}\n"] }]
         }], propDecorators: { scopeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "scopeKey", required: true }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], allowAddItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddItems", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXTreeViewComponent), { isSignal: true }] }] } });
 
-//#region ----   Component Definition   ----
-class AXPSpreadsheetComponent {
+class AXPPropertyViewerComponent {
     //#endregion
-    //#region ----   Lifecycle Methods   ----
     constructor() {
-        //#endregion
-        //#region ----   Services & Dependencies   ----
-        this.translationService = inject(AXTranslationService);
-        //#endregion
-        //#region ----   Computed Properties for Translations   ----
-        /**
-         * Translated column titles
-         */
-        this.translatedColumnTitles = signal(new Map(), ...(ngDevMode ? [{ debugName: "translatedColumnTitles" }] : []));
-        //#endregion
         //#region ----   Inputs   ----
         /**
-         * Title for the spreadsheet (displayed in corner cell)
-         */
-        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        /**
-         * Column definitions
-         */
-        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
-        /**
-         * Row mode: 'fixed' or 'dynamic'
-         */
-        this.rowMode = input('fixed', ...(ngDevMode ? [{ debugName: "rowMode" }] : []));
-        /**
-         * Rows data (for fixed mode - input only)
-         * Each row must have a 'name' property for identification
-         */
-        this.rowsInput = input([], ...(ngDevMode ? [{ debugName: "rowsInput" }] : []));
-        /**
-         * Rows data (for dynamic mode - two-way binding)
-         */
-        this.rowsModel = model([], ...(ngDevMode ? [{ debugName: "rowsModel" }] : []));
-        /**
-         * Whether the spreadsheet is in readonly mode
-         */
-        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-        /**
-         * Placeholder text for empty cells (default: "–")
-         */
-        this.emptyCellPlaceholder = input('–', ...(ngDevMode ? [{ debugName: "emptyCellPlaceholder" }] : []));
-        /**
-         * Path to property in row object to display as row header title
-         * Example: 'name', 'title', 'user.name'
-         */
-        this.rowTitlePath = input(null, ...(ngDevMode ? [{ debugName: "rowTitlePath" }] : []));
-        /**
-         * Path to property in row object to display as row header description
-         * Example: 'description', 'details', 'user.description'
-         */
-        this.rowDescriptionPath = input(null, ...(ngDevMode ? [{ debugName: "rowDescriptionPath" }] : []));
-        /**
-         * Whether to allow adding rows (dynamic mode only, default: true)
+         * List of tabs that should be rendered inside the property viewer.
          */
-        this.allowAddRows = input(true, ...(ngDevMode ? [{ debugName: "allowAddRows" }] : []));
+        this.tabsInput = input([], ...(ngDevMode ? [{ debugName: "tabsInput" }] : []));
         /**
-         * Whether to allow removing rows (default: true for dynamic mode, false for fixed mode)
-         * Can be enabled for fixed mode if needed
+         * Determines rendering mode.
          */
-        this.allowRemoveRows = input(true, ...(ngDevMode ? [{ debugName: "allowRemoveRows" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
         //#endregion
         //#region ----   Outputs   ----
         /**
-         * Emitted when a single cell value changes
-         */
-        this.cellChange = output();
-        /**
-         * Emitted when rows are added or removed (dynamic mode only)
-         */
-        this.rowChange = output();
-        /**
-         * Emitted when the entire spreadsheet data changes
+         * Emits when property context changes.
          */
-        this.spreadsheetChange = output();
+        this.onChanged = new EventEmitter();
         //#endregion
-        //#region ----   Class Properties   ----
-        /**
-         * Currently editing cell: { rowId, columnName } | null
-         */
-        this.editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : []));
-        /**
-         * Original value when entering edit mode (for cancel functionality)
-         */
-        this.originalCellValue = signal(null, ...(ngDevMode ? [{ debugName: "originalCellValue" }] : []));
-        /**
-         * Internal rows state (for fixed mode)
-         */
-        this.internalRows = signal([], ...(ngDevMode ? [{ debugName: "internalRows" }] : []));
+        //#region ----   Signals   ----
+        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : []));
+        this.tabs = computed(() => {
+            const incomingTabs = this.tabsInput() ?? [];
+            return incomingTabs
+                .map((tab) => ({
+                ...tab,
+                groups: (tab.groups ?? [])
+                    .map((group) => ({
+                    ...group,
+                    isCollapsed: group.isCollapsed ?? false,
+                    props: (group.props ?? []).filter((prop) => prop.visible !== false),
+                }))
+                    .filter((group) => group.props.length > 0),
+            }))
+                .filter((tab) => tab.groups.length > 0);
+        }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.groups = computed(() => {
+            const preparedTabs = this.tabs();
+            if (!preparedTabs.length) {
+                return [];
+            }
+            const index = Math.min(this.currentTabIndex(), preparedTabs.length - 1);
+            if (index !== this.currentTabIndex()) {
+                this.currentTabIndex.set(index);
+            }
+            return preparedTabs[index].groups.map((group) => ({
+                ...group,
+                isCollapsed: this.groupCollapsedStates.get(group.name) ?? !!group.isCollapsed,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
         /**
-         * Row ID mapping: rowId -> row index (for tracking)
+         * Per-expression-path override for "use expression" vs "use value" when binding.enabled.
+         * Updated when user toggles the ax-switch; otherwise derived from isExpression(valueAtPath).
          */
-        this.rowIdMap = new Map();
-        /**
-         * Cache for widget nodes to prevent re-rendering
-         * Key: `${rowIndex}_${columnName}`, Value: AXPWidgetNode
-         */
-        this.widgetNodeCache = new Map();
-        /**
-         * Cache for cell values to detect actual changes
-         * Key: `${rowIndex}_${columnName}`, Value: any
-         */
-        this.cellValueCache = new Map();
+        this.expressionModeState = signal({}, ...(ngDevMode ? [{ debugName: "expressionModeState" }] : []));
         //#endregion
-        //#region ----   Computed Properties   ----
-        /**
-         * Get current rows based on mode
-         */
-        this.currentRows = computed(() => {
-            if (this.rowMode() === 'dynamic') {
-                return this.rowsModel();
-            }
-            else {
-                return this.internalRows();
-            }
-        }, ...(ngDevMode ? [{ debugName: "currentRows" }] : []));
-        /**
-         * Context for widgets-container (all rows as an object with rows array)
-         * This allows widgets to access their cell via path like: rows[index].column.path
-         */
-        this.spreadsheetContext = computed(() => {
-            return {
-                rows: this.currentRows(),
-            };
-        }, ...(ngDevMode ? [{ debugName: "spreadsheetContext" }] : []));
-        /**
-         * Get rows with IDs (ensure all rows have identifiers)
-         */
-        this.rowsWithIds = computed(() => {
-            const rows = this.currentRows();
-            const mode = this.rowMode();
-            const result = [];
-            rows.forEach((row, index) => {
-                let rowId;
-                if (mode === 'fixed') {
-                    // Fixed mode: use 'name' property
-                    rowId = row['name'] || `row_${index}`;
-                }
-                else {
-                    // Dynamic mode: generate ID if not exists
-                    if (!row['_id']) {
-                        row['_id'] = this.generateRowId();
-                    }
-                    rowId = row['_id'];
+        //#region ----   Properties   ----
+        this.groupCollapsedStates = new Map();
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.popupService = inject(AXPopupService);
+        effect(() => {
+            const availableTabs = this.tabs();
+            const availableGroups = availableTabs.flatMap((tab) => tab.groups);
+            availableGroups.forEach((group) => {
+                if (!this.groupCollapsedStates.has(group.name) && group.isCollapsed !== undefined) {
+                    this.groupCollapsedStates.set(group.name, !!group.isCollapsed);
                 }
-                // Update row ID map
-                this.rowIdMap.set(rowId, index);
-                result.push({ rowId, row });
             });
-            return result;
-        }, ...(ngDevMode ? [{ debugName: "rowsWithIds" }] : []));
-        /**
-         * Check if spreadsheet is completely empty (both columns and rows)
-         */
-        this.isEmpty = computed(() => {
-            const columns = this.columns();
-            const rows = this.currentRows();
-            return (!columns || columns.length === 0) && (!rows || rows.length === 0);
-        }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
-        /**
-         * 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();
-            return !columns || columns.length === 0;
-        }, ...(ngDevMode ? [{ debugName: "isColumnsEmpty" }] : []));
-        /**
-         * Check if only rows are empty (columns exist but no rows)
-         */
-        this.isRowsEmpty = computed(() => {
-            const columns = this.columns();
-            const rows = this.currentRows();
-            return (columns && columns.length > 0) && (!rows || rows.length === 0);
-        }, ...(ngDevMode ? [{ debugName: "isRowsEmpty" }] : []));
-        // Initialize rows from input (fixed mode)
-        this.internalRows.set(this.rowsInput());
-        // Watch for rowsInput changes and update internalRows (fixed mode only)
-        effect(() => {
-            const rowsInput = this.rowsInput();
-            const rowMode = this.rowMode();
-            // Only update internalRows in fixed mode
-            if (rowMode === 'fixed') {
-                this.internalRows.set(rowsInput);
+            if (!availableTabs.length) {
+                this.currentTabIndex.set(0);
+            }
+            else if (this.currentTabIndex() >= availableTabs.length) {
+                this.currentTabIndex.set(0);
             }
         });
     }
-    //#endregion
-    //#region ----   Cell Value Methods   ----
+    //#region ----   Public Methods   ----
     /**
-     * Get the value for a specific cell by row index
+     * Replaces the current context with the provided value and emits an init event.
      */
-    getCellValue(rowIndex, columnName) {
-        const rows = this.currentRows();
-        const row = rows[rowIndex];
-        if (!row) {
-            return null;
-        }
-        const column = this.columns().find((col) => col.name === columnName);
-        if (!column) {
-            return null;
-        }
-        return get(row, column.path, null);
+    initializeContext(value) {
+        untracked(() => {
+            this.context.set(cloneDeep(value ?? {}));
+            this.onChanged.emit({ values: this.context(), mode: 'init' });
+        });
     }
     /**
-     * Get row title from row object using rowTitlePath
+     * Merges the provided value into the current context and emits an update event.
      */
-    getRowTitle(row, path) {
-        if (!row || !path) {
-            return '';
-        }
-        return get(row, path, '') || '';
+    update(value) {
+        untracked(() => {
+            this.context.set(merge(cloneDeep(this.context()), value ?? {}));
+            this.onChanged.emit({ values: this.context(), mode: 'update' });
+        });
     }
+    //#endregion
+    //#region ----   Event Handlers   ----
     /**
-     * Get row description from row object using rowDescriptionPath
+     * Handles context changes produced by rendered widgets.
      */
-    getRowDescription(row, path) {
-        if (!row || !path) {
-            return '';
-        }
-        return get(row, path, '') || '';
+    handleContextChange(event) {
+        untracked(() => {
+            this.context.set(event.data);
+            this.onChanged.emit({ values: this.context(), mode: event.state === 'initiated' ? 'init' : 'update' });
+        });
     }
     /**
-     * Get row by ID
+     * Handles tab selection changes.
      */
-    getRowById(rowId) {
-        const rowsWithIds = this.rowsWithIds();
-        const found = rowsWithIds.find((item) => item.rowId === rowId);
-        return found ? found.row : null;
+    handleTabChange(event) {
+        const index = event.index;
+        if (this.currentTabIndex() !== index) {
+            this.currentTabIndex.set(index);
+        }
     }
     /**
-     * Check if a cell is currently being edited
+     * Stores collapsed state for a group.
      */
-    isCellEditing(rowId, columnName) {
-        const editing = this.editingCell();
-        return editing?.rowId === rowId && editing?.columnName === columnName;
+    handleCollapsedChange(groupName, isCollapsed) {
+        this.groupCollapsedStates.set(groupName, isCollapsed);
     }
     /**
-     * Check if a column is readonly
+     * Returns the config path used for the binding value (and expression) for a property with binding.enabled.
      */
-    isColumnReadonly(column) {
-        return this.readonly() || column.readonly === true;
+    getExpressionPath(prop) {
+        const basePath = prop.schema?.interface?.path ?? prop.name;
+        return prop.binding?.optionKey ? `${basePath}.${prop.binding.optionKey}` : basePath;
     }
     /**
-     * Get widget node for a cell with dynamic path based on row index
-     * Path format: rows[rowIndex].column.path
-     * Uses caching to prevent unnecessary re-renders
+     * True when the property is in "expression" mode: show only the expression editor button, not the widget.
+     * Uses expressionModeState when set; otherwise derives from isExpression(valueAtPath).
      */
-    getCellWidgetNode(column, rowIndex) {
-        const cacheKey = `${rowIndex}_${column.name}`;
-        const rows = this.currentRows();
-        const row = rows[rowIndex];
-        const currentValue = row ? get(row, column.path, null) : null;
-        const cachedValue = this.cellValueCache.get(cacheKey);
-        // Get or create widget node
-        let widgetNode = this.widgetNodeCache.get(cacheKey);
-        if (!widgetNode) {
-            // Create path: rows[index].column.path
-            const dynamicPath = `rows.${rowIndex}.${column.path}`;
-            // Create new widget node
-            widgetNode = {
-                ...column.widget,
-                path: dynamicPath,
-                defaultValue: currentValue !== null && currentValue !== undefined ? currentValue : column.widget.defaultValue,
-            };
-            // Cache the widget node
-            this.widgetNodeCache.set(cacheKey, widgetNode);
-            this.cellValueCache.set(cacheKey, currentValue);
-        }
-        else {
-            // Update path in case row index changed (shouldn't happen, but be safe)
-            widgetNode.path = `rows.${rowIndex}.${column.path}`;
-            // Only update defaultValue if value actually changed (to prevent re-renders)
-            if (cachedValue !== currentValue) {
-                widgetNode.defaultValue = currentValue !== null && currentValue !== undefined ? currentValue : column.widget.defaultValue;
-                this.cellValueCache.set(cacheKey, currentValue);
-            }
+    isExpressionMode(prop) {
+        this.expressionModeState(); // dependency for change detection
+        const path = this.getExpressionPath(prop);
+        const stored = this.expressionModeState()[path];
+        if (stored !== undefined) {
+            return stored;
         }
-        return widgetNode;
+        const v = get(this.context(), path);
+        return this.expressionEvaluator.isExpression(typeof v === 'string' ? v : '');
     }
-    //#endregion
-    //#region ----   Event Handlers   ----
     /**
-     * Handle cell click to start editing
+     * Returns the default value when switching from expression to value mode.
+     * Source of truth is prop.schema.defaultValue (widget.types): plain value, or function (context) => value.
+     * A minimal dataType fallback is used only when the schema provides no default.
      */
-    handleCellClick(rowId, columnName, event) {
-        if (this.readonly()) {
-            return;
+    getDefaultValueForProperty(prop) {
+        const def = prop.schema?.defaultValue;
+        if (typeof def === 'function') {
+            return def(this.context());
         }
-        // Don't open editor if clicking on toolbar or buttons
-        if (event) {
-            const target = event.target;
-            if (target.closest('.__cell-toolbar') || target.closest('ax-button')) {
-                return;
-            }
+        if (def !== undefined && def !== null) {
+            return def;
         }
-        const column = this.columns().find((col) => col.name === columnName);
-        if (!column || this.isColumnReadonly(column)) {
-            return;
+        const dataType = prop.schema?.dataType ?? 'string';
+        switch (dataType) {
+            case 'boolean':
+                return false;
+            case 'number':
+                return 0;
+            case 'object':
+                return {};
+            case 'array':
+                return [];
+            default:
+                return '';
         }
-        // Don't open if already editing this cell
-        const currentEditing = this.editingCell();
-        if (currentEditing?.rowId === rowId && currentEditing?.columnName === columnName) {
-            return;
-        }
-        // Store original value for cancel functionality
-        const row = this.getRowById(rowId);
-        if (row) {
-            const originalValue = get(row, column.path, null);
-            this.originalCellValue.set(originalValue);
-        }
-        this.editingCell.set({ rowId, columnName });
     }
     /**
-     * Handle cell value change from widget
-     * The widget sets the value at path like rows[index].column.path
+     * Updates the expression/value toggle state for a binding-enabled property.
+     * When switching to value: resets the value at path to a type-appropriate default so the
+     * widget renderer does not receive the expression string (e.g. checkbox gets false, not a string).
+     * When switching to expression: sets the value at path to '{{ }}' so the popup opens with
+     * a clean expression placeholder instead of the previous literal (e.g. true/false).
      */
-    handleCellValueChange(rowIndex, columnName, event) {
-        // Only process if context has changed (not just initiated)
-        if (event.state !== 'changed') {
-            return;
-        }
-        const rows = this.currentRows();
-        const row = rows[rowIndex];
-        if (!row) {
-            return;
+    setExpressionMode(prop, useExpression) {
+        const path = this.getExpressionPath(prop);
+        const currentVal = get(this.context(), path);
+        const currentIsExpression = this.expressionEvaluator.isExpression(typeof currentVal === 'string' ? currentVal : '');
+        this.expressionModeState.update((s) => ({ ...s, [path]: useExpression }));
+        if (!useExpression && currentIsExpression) {
+            const next = cloneDeep(this.context());
+            set(next, path, this.getDefaultValueForProperty(prop));
+            untracked(() => {
+                this.context.set(next);
+                this.onChanged.emit({ values: this.context(), mode: 'update' });
+            });
         }
-        const column = this.columns().find((col) => col.name === columnName);
-        if (!column) {
-            return;
+        else if (useExpression && !currentIsExpression) {
+            const next = cloneDeep(this.context());
+            set(next, path, '{{ }}');
+            untracked(() => {
+                this.context.set(next);
+                this.onChanged.emit({ values: this.context(), mode: 'update' });
+            });
         }
-        // Get the new value from the context (widget sets it at rows[index].column.path)
-        const dynamicPath = `rows.${rowIndex}.${column.path}`;
-        const newValue = get(event.data, dynamicPath);
-        // Update the row object directly
-        set(row, column.path, newValue);
-        // Update rows array
-        this.updateRows();
-        // Get rowId for events
-        const rowId = this.rowMode() === 'fixed' ? row['name'] : row['_id'];
-        // Emit events
-        this.cellChange.emit({
-            rowId: rowId || `row_${rowIndex}`,
-            columnName,
-            value: newValue,
-            row: { ...row },
-        });
-        this.spreadsheetChange.emit([...this.currentRows()]);
-        // Don't close edit mode automatically - let user finish editing
-        // Edit mode will close on blur or click outside
     }
     /**
-     * Handle spreadsheet context change from widgets-container
-     * This is called when any widget in the spreadsheet changes
+     * Opens the binding/expression code editor for a property with binding.enabled.
+     * Ensures the value passed to the popup is always a string to avoid code-editor crashes.
      */
-    handleSpreadsheetContextChange(event) {
-        if (event.state !== 'changed') {
-            return;
-        }
-        // Extract row index and column from the path (format: rows[index].column.path)
-        const path = event.path || '';
-        const pathMatch = path.match(/^rows\.(\d+)\.(.+)$/);
-        if (!pathMatch) {
-            return;
-        }
-        const rowIndex = parseInt(pathMatch[1], 10);
-        const columnPath = pathMatch[2];
-        // Find the column by path
-        const column = this.columns().find((col) => col.path === columnPath);
-        if (!column) {
-            return;
-        }
-        // Get the new value from event.data
-        const newValue = get(event.data, path);
-        // Update the row object (sync with context)
-        const rows = this.currentRows();
-        const row = rows[rowIndex];
-        if (row) {
-            // The context should already have the updated value, but sync row object to be sure
-            set(row, columnPath, newValue);
-            // Update cache (widget node will update defaultValue on next getCellWidgetNode call)
-            const cacheKey = `${rowIndex}_${column.name}`;
-            this.cellValueCache.set(cacheKey, newValue);
-            // Don't delete widget node cache - just update defaultValue on next access
-            // This prevents re-rendering while still reflecting the new value
-            this.updateRows();
-            // Get rowId for events
-            const rowId = this.rowMode() === 'fixed' ? row['name'] : row['_id'];
-            // Emit events
-            this.cellChange.emit({
-                rowId: rowId || `row_${rowIndex}`,
-                columnName: column.name,
-                value: newValue,
-                row: { ...row },
+    async openBindingEditor(prop) {
+        const expressionPath = this.getExpressionPath(prop);
+        const raw = get(this.context(), expressionPath);
+        const currentValue = typeof raw === 'string' ? raw : '';
+        const { AXPBindingExpressionEditorPopupComponent } = await import('./acorex-platform-layout-components-binding-expression-editor-popup.component-Cb6Lk4Ch.mjs');
+        const result = await this.popupService.open(AXPBindingExpressionEditorPopupComponent, {
+            title: '@general:widgets.triggers.edit-binding-expression',
+            size: 'lg',
+            data: { initialValue: signal(currentValue) },
+        });
+        if (result?.data?.value !== undefined) {
+            const next = cloneDeep(this.context());
+            set(next, expressionPath, result.data.value);
+            untracked(() => {
+                this.context.set(next);
+                this.onChanged.emit({ values: this.context(), mode: 'update' });
             });
-            this.spreadsheetChange.emit([...this.currentRows()]);
         }
     }
-    /**
-     * Handle blur event to stop editing (when user clicks away from cell)
-     */
-    handleCellBlur(rowId, columnName) {
-        // Small delay to allow click events to process first
-        setTimeout(() => {
-            const editing = this.editingCell();
-            if (editing?.rowId === rowId && editing?.columnName === columnName) {
-                // Don't close if clicking on the toolbar or buttons
-                const activeElement = document.activeElement;
-                const toolbarElement = activeElement?.closest('.__cell-toolbar');
-                const buttonElement = activeElement?.closest('ax-button');
-                // Only auto-commit if not clicking on toolbar or buttons
-                if (!toolbarElement && !buttonElement) {
-                    this.commitCellEdit();
-                }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n            <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                @if (prop.showLabel !== false) {\n                @if (translateTitle) {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                } @else {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                }\n                }\n                @if (prop.binding?.enabled) {\n                <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                    <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                        [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                        [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                        (selectedChange)=\"setExpressionMode(prop, $event)\">\n                        @if (isExpressionMode(prop)) {\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                        } @else {\n                        <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                        }\n                    </ax-button>\n                </div>\n                }\n            </div>\n            <!-- Property content: Open Editor button (expression mode) or widget renderer (value mode) -->\n            @if (prop.binding?.enabled && isExpressionMode(prop)) {\n            <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                [text]=\"'@general:widgets.triggers.open-editor' | translate | async\" (onClick)=\"openBindingEditor(prop)\"\n                [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                </ax-prefix>\n            </ax-button>\n            } @else if (prop.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n            </ng-container>\n            }\n        </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: false }\">\n                        </ng-container>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n        </ng-container>\n        }\n        }\n    </div>\n    }\n    <!-- #endregion -->\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$7.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$7.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXButtonGroupModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5$3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.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.16", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXAccordionModule,
+                        AXButtonModule,
+                        AXButtonGroupModule,
+                        AXDecoratorModule,
+                        AXTabsModule,
+                        AXPWidgetCoreModule,
+                        AXTranslationModule,
+                    ], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n            <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                @if (prop.showLabel !== false) {\n                @if (translateTitle) {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                } @else {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                }\n                }\n                @if (prop.binding?.enabled) {\n                <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                    <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                        [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                        [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                        (selectedChange)=\"setExpressionMode(prop, $event)\">\n                        @if (isExpressionMode(prop)) {\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                        } @else {\n                        <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                        }\n                    </ax-button>\n                </div>\n                }\n            </div>\n            <!-- Property content: Open Editor button (expression mode) or widget renderer (value mode) -->\n            @if (prop.binding?.enabled && isExpressionMode(prop)) {\n            <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                [text]=\"'@general:widgets.triggers.open-editor' | translate | async\" (onClick)=\"openBindingEditor(prop)\"\n                [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                </ax-prefix>\n            </ax-button>\n            } @else if (prop.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n            </ng-container>\n            }\n        </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: false }\">\n                        </ng-container>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n        </ng-container>\n        }\n        }\n    </div>\n    }\n    <!-- #endregion -->\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsInput", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChanged: [{
+                type: Output
+            }] } });
+
+class AXPPropertyViewerPopupComponent extends AXBasePageComponent {
+    //#endregion
+    constructor() {
+        super();
+        //#region ----   Inputs   ----
+        this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.propertyViewer = viewChild(AXPPropertyViewerComponent, ...(ngDevMode ? [{ debugName: "propertyViewer" }] : []));
+        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
+        this.currentMode = 'init';
+        effect(() => {
+            const viewer = this.propertyViewer();
+            if (!viewer) {
+                return;
             }
-        }, 150);
+            viewer.initializeContext(this.context() ?? {});
+        });
     }
-    /**
-     * Handle Escape key to cancel editing
-     */
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.editingCell()) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.cancelCellEdit();
-        }
+    //#region ----   Event Handlers   ----
+    handlePropertyChanged(event) {
+        this.currentValues.set(event.values ?? {});
+        this.currentMode = event.mode;
     }
-    /**
-     * Commit cell edit (save changes and close editing mode)
-     */
-    commitCellEdit() {
-        const editing = this.editingCell();
-        if (!editing) {
-            return;
-        }
-        // Changes are already saved via handleSpreadsheetContextChange
-        // Close the editor (same as escape, but keeps changes)
-        this.editingCell.set(null);
-        this.originalCellValue.set(null);
+    handleCloseClick() {
+        this.close();
     }
-    /**
-     * Cancel cell edit (discard changes and close editing mode - same as escape)
-     */
-    cancelCellEdit() {
-        const editing = this.editingCell();
-        if (!editing) {
-            return;
-        }
-        const row = this.getRowById(editing.rowId);
-        const column = this.columns().find((col) => col.name === editing.columnName);
-        const originalValue = this.originalCellValue();
-        if (row && column) {
-            // Restore original value in row
-            set(row, column.path, originalValue);
-            // Clear cache for this cell so widget re-renders with original value
-            const rowsWithIds = this.rowsWithIds();
-            const rowIndex = rowsWithIds.findIndex((item) => item.rowId === editing.rowId);
-            if (rowIndex !== -1) {
-                const cacheKey = `${rowIndex}_${editing.columnName}`;
-                this.cellValueCache.set(cacheKey, originalValue);
-                this.widgetNodeCache.delete(cacheKey);
-            }
-            this.updateRows();
-        }
-        // Close the editor (same as escape)
-        this.editingCell.set(null);
-        this.originalCellValue.set(null);
+    handleApplyClick() {
+        this.close({
+            values: this.currentValues(),
+            mode: this.currentMode,
+        });
     }
-    /**
-     * Handle click outside to stop editing
-     */
-    handleClickOutside(event) {
-        const target = event.target;
-        // Don't close if clicking inside a widget or its elements
-        if (target.closest('[axp-widget-renderer]') ||
-            target.closest('.ax-dropdown') ||
-            target.closest('.ax-popup') ||
-            target.closest('.__cell-editor')) {
-            return;
-        }
-        this.editingCell.set(null);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AXPPropertyViewerPopupComponent, isStandalone: true, selector: "axp-property-viewer-popup", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-property-viewer
+        [tabsInput]="tabs()"
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)"
+      ></axp-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          look="solid"
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()"
+        ></ax-button>
+        <ax-button
+          look="solid"
+          color="primary"
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-property-viewer-popup',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
+      <axp-property-viewer
+        [tabsInput]="tabs()"
+        [mode]="mode()"
+        (onChanged)="handlePropertyChanged($event)"
+      ></axp-property-viewer>
+    </div>
+
+    <ax-footer>
+      <ax-suffix>
+        <ax-button
+          look="solid"
+          [text]="'@general:actions.close.title' | translate | async"
+          (onClick)="handleCloseClick()"
+        ></ax-button>
+        <ax-button
+          look="solid"
+          color="primary"
+          [text]="'@general:actions.apply.title' | translate | async"
+          (onClick)="handleApplyClick()"
+        ></ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPPropertyViewerComponent],
+                }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], propertyViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }] } });
+
+var propertyViewerPopup_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPPropertyViewerPopupComponent: AXPPropertyViewerPopupComponent
+});
+
+class AXPPropertyViewerService {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.popupService = inject(AXPopupService);
     }
+    //#endregion
+    //#region ----   Public Methods   ----
     /**
-     * Handle add row (dynamic mode only)
+     * Open property viewer popup with predefined tabs and context.
      */
-    handleAddRow() {
-        if (this.rowMode() !== 'dynamic' || !this.allowAddRows() || this.readonly()) {
-            return;
-        }
-        const columns = this.columns();
-        const newRow = {
-            _id: this.generateRowId(),
-        };
-        // Initialize with default values from widgets
-        columns.forEach((column) => {
-            if (column.widget.defaultValue !== undefined && column.widget.defaultValue !== null) {
-                set(newRow, column.path, column.widget.defaultValue);
-            }
-        });
-        const currentRows = this.rowsModel();
-        const updatedRows = [...currentRows, newRow];
-        this.rowsModel.set(updatedRows);
-        this.rowChange.emit({
-            type: 'add',
-            rowId: newRow['_id'],
-            row: { ...newRow },
-            rows: updatedRows,
+    async open(config) {
+        const { AXPPropertyViewerPopupComponent } = await Promise.resolve().then(function () { return propertyViewerPopup_component; });
+        const result = await this.popupService.open(AXPPropertyViewerPopupComponent, {
+            title: config.title,
+            size: config.size || 'md',
+            data: {
+                tabs: signal(config.tabs),
+                mode: signal(config.mode || 'simple'),
+                context: signal(config.context ?? {}),
+            },
         });
-        this.spreadsheetChange.emit(updatedRows);
+        return result.data || null;
     }
-    /**
-     * Handle remove row (works for both fixed and dynamic modes)
-     */
-    handleRemoveRow(rowId, _event) {
-        if (!this.allowRemoveRows() || this.readonly()) {
-            return;
-        }
-        const currentRows = this.currentRows();
-        let rowIndex = -1;
-        let removedRow;
-        if (this.rowMode() === 'fixed') {
-            // Fixed mode: find by 'name' property
-            rowIndex = currentRows.findIndex((row) => row['name'] === rowId);
-        }
-        else {
-            // Dynamic mode: find by '_id' property
-            rowIndex = currentRows.findIndex((row) => row['_id'] === rowId);
-        }
-        if (rowIndex === -1) {
-            return;
-        }
-        removedRow = currentRows[rowIndex];
-        if (this.rowMode() === 'dynamic') {
-            // Dynamic mode: update rowsModel
-            const updatedRows = currentRows.filter((_, index) => index !== rowIndex);
-            this.rowsModel.set(updatedRows);
-            this.rowChange.emit({
-                type: 'remove',
-                rowId,
-                row: { ...removedRow },
-                rows: updatedRows,
-            });
-            this.spreadsheetChange.emit(updatedRows);
-        }
-        else {
-            // Fixed mode: update internalRows and emit events
-            const updatedRows = currentRows.filter((_, index) => index !== rowIndex);
-            this.internalRows.set(updatedRows);
-            this.rowChange.emit({
-                type: 'remove',
-                rowId,
-                row: { ...removedRow },
-                rows: updatedRows,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPQuerySortsComponent {
+    constructor() {
+        this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
+        this.sortQueries = signal([], ...(ngDevMode ? [{ debugName: "sortQueries", equal: isEqual }] : [{
+                equal: isEqual,
+            }]));
+        this.initialSortQueries = input([], ...(ngDevMode ? [{ debugName: "initialSortQueries" }] : []));
+        this.sortQueriesChange = output();
+        // Recompute merged sort queries whenever inputs change
+        effect(() => {
+            const initialQueries = this.initialSortQueries();
+            const definitions = this.sortDefinitions();
+            const existingQueriesMap = new Map(initialQueries.map((q) => [q.name, q]));
+            const mergedQueries = definitions.map((def) => {
+                const existingQuery = existingQueriesMap.get(def.name);
+                return existingQuery ? { ...def, dir: existingQuery.dir } : { ...def };
             });
-            this.spreadsheetChange.emit(updatedRows);
-        }
+            this.sortQueries.set(mergedQueries);
+        });
+        effect(() => {
+            this.sortQueriesChange.emit(this.sortQueries().filter((q) => q.dir !== undefined));
+        });
     }
-    //#endregion
-    //#region ----   Utility Methods   ----
-    /**
-     * Generate unique row ID for dynamic mode
-     */
-    generateRowId() {
-        return `row_${AXPDataGenerator.uuid()}`;
+    drop(event) {
+        const sd = this.sortDefinitions();
+        moveItemInArray(sd, event.previousIndex, event.currentIndex);
+        this.sortDefinitions.set([...sd]);
+        // Reorder sortQueries based on new sortDefinitions order
+        const sq = this.sortQueries();
+        moveItemInArray(sq, event.previousIndex, event.currentIndex);
+        this.sortQueries.set([...sq]);
     }
-    /**
-     * Update rows array (sync internal state)
-     */
-    updateRows() {
-        if (this.rowMode() === 'dynamic') {
-            // For dynamic mode, rowsModel is already updated (two-way binding)
-            // Just trigger change detection
-            this.rowsModel.set([...this.rowsModel()]);
-        }
-        else {
-            // For fixed mode, update internal state
-            this.internalRows.set([...this.internalRows()]);
-        }
+    getSortDirection(item) {
+        return this.sortQueries().find((i) => i.name === item.name)?.dir;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: i1$1.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: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    changeItemSort(item) {
+        const itemDirection = this.getSortDirection(item);
+        const newDirection = itemDirection === 'asc' ? 'desc' : itemDirection === 'desc' ? undefined : 'asc';
+        this.sortQueries.update((prev) => {
+            return prev.map((field) => {
+                if (field.name === item.name) {
+                    return { ...field, dir: newDirection };
+                }
+                return field;
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-spreadsheet', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
+            args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        AXTabsModule,
                         AXTranslationModule,
-                        AXButtonModule,
+                        CommonModule,
                         AXDecoratorModule,
-                        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 (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']]
-            }] } });
-
-//#endregion
+                        AXButtonModule,
+                    ], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { sortDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDefinitions", required: false }] }, { type: i0.Output, args: ["sortDefinitionsChange"] }], initialSortQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSortQueries", required: false }] }], sortQueriesChange: [{ type: i0.Output, args: ["sortQueriesChange"] }] } });
 
-class AXPLogoComponent {
-    constructor() {
-        this.platform = inject(AXPlatform);
-    }
-    ngOnInit() {
-        this.setLogoType();
-        this.platform.themeMode$.subscribe(() => {
-            this.setLogoTheme();
-        });
-    }
-    ngOnChanges() {
-        this.setLogoTheme();
-        this.setLogoType();
-    }
-    setLogoType() {
-        switch (true) {
-            case this.source instanceof AXPImageUrlLogoConfig:
-                this.logoType = 'url';
-                break;
-            case this.source instanceof AXPComponentLogoConfig:
-                this.logoType = 'component';
-                break;
-            case this.source instanceof AXPIconLogoConfig:
-                this.logoType = 'icon';
-                break;
-            default:
-                break;
-        }
-    }
-    setLogoTheme() {
-        if (this.source && this.source.dark && this.source.light) {
-            this.source = this.platform.isDark() ? this.source.dark : this.source.light;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { classAttribute: "ax-flex ax-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@switch (logoType) { \n  @case ('url') {\n    <ax-image [width]=\"source.width\" [height]=\"source.height\" [src]=\"source.url\"></ax-image>\n  } \n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n  } \n  @case ('icon') {\n    <i [class]=\"source.icon\" [style.color]=\"source.color\"></i>\n  } \n}\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i2$6.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPLogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, template: "@switch (logoType) { \n  @case ('url') {\n    <ax-image [width]=\"source.width\" [height]=\"source.height\" [src]=\"source.url\"></ax-image>\n  } \n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"source.component\"></ng-container>\n  } \n  @case ('icon') {\n    <i [class]=\"source.icon\" [style.color]=\"source.color\"></i>\n  } \n}\n\n" }]
-        }], propDecorators: { source: [{
-                type: Input
-            }] } });
-
-class AXPPropertyViewerComponent {
+//#region ----   Component Definition   ----
+class AXPSpreadsheetComponent {
     //#endregion
+    //#region ----   Lifecycle Methods   ----
     constructor() {
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Computed Properties for Translations   ----
+        /**
+         * Translated column titles
+         */
+        this.translatedColumnTitles = signal(new Map(), ...(ngDevMode ? [{ debugName: "translatedColumnTitles" }] : []));
+        //#endregion
         //#region ----   Inputs   ----
         /**
-         * List of tabs that should be rendered inside the property viewer.
+         * Title for the spreadsheet (displayed in corner cell)
          */
-        this.tabsInput = input([], ...(ngDevMode ? [{ debugName: "tabsInput" }] : []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
         /**
-         * Determines rendering mode.
+         * Column definitions
          */
-        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+        /**
+         * Row mode: 'fixed' or 'dynamic'
+         */
+        this.rowMode = input('fixed', ...(ngDevMode ? [{ debugName: "rowMode" }] : []));
+        /**
+         * Rows data (for fixed mode - input only)
+         * Each row must have a 'name' property for identification
+         */
+        this.rowsInput = input([], ...(ngDevMode ? [{ debugName: "rowsInput" }] : []));
+        /**
+         * Rows data (for dynamic mode - two-way binding)
+         */
+        this.rowsModel = model([], ...(ngDevMode ? [{ debugName: "rowsModel" }] : []));
+        /**
+         * Whether the spreadsheet is in readonly mode
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        /**
+         * Placeholder text for empty cells (default: "–")
+         */
+        this.emptyCellPlaceholder = input('–', ...(ngDevMode ? [{ debugName: "emptyCellPlaceholder" }] : []));
+        /**
+         * Path to property in row object to display as row header title
+         * Example: 'name', 'title', 'user.name'
+         */
+        this.rowTitlePath = input(null, ...(ngDevMode ? [{ debugName: "rowTitlePath" }] : []));
+        /**
+         * Path to property in row object to display as row header description
+         * Example: 'description', 'details', 'user.description'
+         */
+        this.rowDescriptionPath = input(null, ...(ngDevMode ? [{ debugName: "rowDescriptionPath" }] : []));
+        /**
+         * Whether to allow adding rows (dynamic mode only, default: true)
+         */
+        this.allowAddRows = input(true, ...(ngDevMode ? [{ debugName: "allowAddRows" }] : []));
+        /**
+         * Whether to allow removing rows (default: true for dynamic mode, false for fixed mode)
+         * Can be enabled for fixed mode if needed
+         */
+        this.allowRemoveRows = input(true, ...(ngDevMode ? [{ debugName: "allowRemoveRows" }] : []));
         //#endregion
         //#region ----   Outputs   ----
         /**
-         * Emits when property context changes.
+         * Emitted when a single cell value changes
          */
-        this.onChanged = new EventEmitter();
+        this.cellChange = output();
+        /**
+         * Emitted when rows are added or removed (dynamic mode only)
+         */
+        this.rowChange = output();
+        /**
+         * Emitted when the entire spreadsheet data changes
+         */
+        this.spreadsheetChange = output();
         //#endregion
-        //#region ----   Signals   ----
-        this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : []));
-        this.tabs = computed(() => {
-            const incomingTabs = this.tabsInput() ?? [];
-            return incomingTabs
-                .map((tab) => ({
-                ...tab,
-                groups: (tab.groups ?? [])
-                    .map((group) => ({
-                    ...group,
-                    isCollapsed: group.isCollapsed ?? false,
-                    props: (group.props ?? []).filter((prop) => prop.visible !== false),
-                }))
-                    .filter((group) => group.props.length > 0),
-            }))
-                .filter((tab) => tab.groups.length > 0);
-        }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-        this.groups = computed(() => {
-            const preparedTabs = this.tabs();
-            if (!preparedTabs.length) {
-                return [];
+        //#region ----   Class Properties   ----
+        /**
+         * Currently editing cell: { rowId, columnName } | null
+         */
+        this.editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : []));
+        /**
+         * Original value when entering edit mode (for cancel functionality)
+         */
+        this.originalCellValue = signal(null, ...(ngDevMode ? [{ debugName: "originalCellValue" }] : []));
+        /**
+         * Internal rows state (for fixed mode)
+         */
+        this.internalRows = signal([], ...(ngDevMode ? [{ debugName: "internalRows" }] : []));
+        /**
+         * Row ID mapping: rowId -> row index (for tracking)
+         */
+        this.rowIdMap = new Map();
+        /**
+         * Cache for widget nodes to prevent re-rendering
+         * Key: `${rowIndex}_${columnName}`, Value: AXPWidgetNode
+         */
+        this.widgetNodeCache = new Map();
+        /**
+         * Cache for cell values to detect actual changes
+         * Key: `${rowIndex}_${columnName}`, Value: any
+         */
+        this.cellValueCache = new Map();
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Get current rows based on mode
+         */
+        this.currentRows = computed(() => {
+            if (this.rowMode() === 'dynamic') {
+                return this.rowsModel();
             }
-            const index = Math.min(this.currentTabIndex(), preparedTabs.length - 1);
-            if (index !== this.currentTabIndex()) {
-                this.currentTabIndex.set(index);
+            else {
+                return this.internalRows();
             }
-            return preparedTabs[index].groups.map((group) => ({
-                ...group,
-                isCollapsed: this.groupCollapsedStates.get(group.name) ?? !!group.isCollapsed,
-            }));
-        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
-        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "currentRows" }] : []));
         /**
-         * Per-expression-path override for "use expression" vs "use value" when binding.enabled.
-         * Updated when user toggles the ax-switch; otherwise derived from isExpression(valueAtPath).
+         * Context for widgets-container (all rows as an object with rows array)
+         * This allows widgets to access their cell via path like: rows[index].column.path
          */
-        this.expressionModeState = signal({}, ...(ngDevMode ? [{ debugName: "expressionModeState" }] : []));
-        //#endregion
-        //#region ----   Properties   ----
-        this.groupCollapsedStates = new Map();
-        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
-        this.popupService = inject(AXPopupService);
-        effect(() => {
-            const availableTabs = this.tabs();
-            const availableGroups = availableTabs.flatMap((tab) => tab.groups);
-            availableGroups.forEach((group) => {
-                if (!this.groupCollapsedStates.has(group.name) && group.isCollapsed !== undefined) {
-                    this.groupCollapsedStates.set(group.name, !!group.isCollapsed);
+        this.spreadsheetContext = computed(() => {
+            return {
+                rows: this.currentRows(),
+            };
+        }, ...(ngDevMode ? [{ debugName: "spreadsheetContext" }] : []));
+        /**
+         * Get rows with IDs (ensure all rows have identifiers)
+         */
+        this.rowsWithIds = computed(() => {
+            const rows = this.currentRows();
+            const mode = this.rowMode();
+            const result = [];
+            rows.forEach((row, index) => {
+                let rowId;
+                if (mode === 'fixed') {
+                    // Fixed mode: use 'name' property
+                    rowId = row['name'] || `row_${index}`;
+                }
+                else {
+                    // Dynamic mode: generate ID if not exists
+                    if (!row['_id']) {
+                        row['_id'] = this.generateRowId();
+                    }
+                    rowId = row['_id'];
                 }
+                // Update row ID map
+                this.rowIdMap.set(rowId, index);
+                result.push({ rowId, row });
             });
-            if (!availableTabs.length) {
-                this.currentTabIndex.set(0);
-            }
-            else if (this.currentTabIndex() >= availableTabs.length) {
-                this.currentTabIndex.set(0);
-            }
-        });
-    }
-    //#region ----   Public Methods   ----
-    /**
-     * Replaces the current context with the provided value and emits an init event.
-     */
-    initializeContext(value) {
-        untracked(() => {
-            this.context.set(cloneDeep(value ?? {}));
-            this.onChanged.emit({ values: this.context(), mode: 'init' });
-        });
-    }
-    /**
-     * Merges the provided value into the current context and emits an update event.
-     */
-    update(value) {
-        untracked(() => {
-            this.context.set(merge(cloneDeep(this.context()), value ?? {}));
-            this.onChanged.emit({ values: this.context(), mode: 'update' });
-        });
-    }
-    //#endregion
-    //#region ----   Event Handlers   ----
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "rowsWithIds" }] : []));
+        /**
+         * Check if spreadsheet is completely empty (both columns and rows)
+         */
+        this.isEmpty = computed(() => {
+            const columns = this.columns();
+            const rows = this.currentRows();
+            return (!columns || columns.length === 0) && (!rows || rows.length === 0);
+        }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+        /**
+         * 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();
+            return !columns || columns.length === 0;
+        }, ...(ngDevMode ? [{ debugName: "isColumnsEmpty" }] : []));
+        /**
+         * Check if only rows are empty (columns exist but no rows)
+         */
+        this.isRowsEmpty = computed(() => {
+            const columns = this.columns();
+            const rows = this.currentRows();
+            return (columns && columns.length > 0) && (!rows || rows.length === 0);
+        }, ...(ngDevMode ? [{ debugName: "isRowsEmpty" }] : []));
+        // Initialize rows from input (fixed mode)
+        this.internalRows.set(this.rowsInput());
+        // Watch for rowsInput changes and update internalRows (fixed mode only)
+        effect(() => {
+            const rowsInput = this.rowsInput();
+            const rowMode = this.rowMode();
+            // Only update internalRows in fixed mode
+            if (rowMode === 'fixed') {
+                this.internalRows.set(rowsInput);
+            }
+        });
+    }
+    //#endregion
+    //#region ----   Cell Value Methods   ----
     /**
-     * Handles context changes produced by rendered widgets.
+     * Get the value for a specific cell by row index
      */
-    handleContextChange(event) {
-        untracked(() => {
-            this.context.set(event.data);
-            this.onChanged.emit({ values: this.context(), mode: event.state === 'initiated' ? 'init' : 'update' });
-        });
+    getCellValue(rowIndex, columnName) {
+        const rows = this.currentRows();
+        const row = rows[rowIndex];
+        if (!row) {
+            return null;
+        }
+        const column = this.columns().find((col) => col.name === columnName);
+        if (!column) {
+            return null;
+        }
+        return get(row, column.path, null);
     }
     /**
-     * Handles tab selection changes.
+     * Get row title from row object using rowTitlePath
      */
-    handleTabChange(event) {
-        const index = event.index;
-        if (this.currentTabIndex() !== index) {
-            this.currentTabIndex.set(index);
+    getRowTitle(row, path) {
+        if (!row || !path) {
+            return '';
         }
+        return get(row, path, '') || '';
     }
     /**
-     * Stores collapsed state for a group.
+     * Get row description from row object using rowDescriptionPath
      */
-    handleCollapsedChange(groupName, isCollapsed) {
-        this.groupCollapsedStates.set(groupName, isCollapsed);
+    getRowDescription(row, path) {
+        if (!row || !path) {
+            return '';
+        }
+        return get(row, path, '') || '';
     }
     /**
-     * Returns the config path used for the binding value (and expression) for a property with binding.enabled.
+     * Get row by ID
      */
-    getExpressionPath(prop) {
-        const basePath = prop.schema?.interface?.path ?? prop.name;
-        return prop.binding?.optionKey ? `${basePath}.${prop.binding.optionKey}` : basePath;
+    getRowById(rowId) {
+        const rowsWithIds = this.rowsWithIds();
+        const found = rowsWithIds.find((item) => item.rowId === rowId);
+        return found ? found.row : null;
     }
     /**
-     * True when the property is in "expression" mode: show only the expression editor button, not the widget.
-     * Uses expressionModeState when set; otherwise derives from isExpression(valueAtPath).
+     * Check if a cell is currently being edited
      */
-    isExpressionMode(prop) {
-        this.expressionModeState(); // dependency for change detection
-        const path = this.getExpressionPath(prop);
-        const stored = this.expressionModeState()[path];
-        if (stored !== undefined) {
-            return stored;
+    isCellEditing(rowId, columnName) {
+        const editing = this.editingCell();
+        return editing?.rowId === rowId && editing?.columnName === columnName;
+    }
+    /**
+     * Check if a column is readonly
+     */
+    isColumnReadonly(column) {
+        return this.readonly() || column.readonly === true;
+    }
+    /**
+     * Get widget node for a cell with dynamic path based on row index
+     * Path format: rows[rowIndex].column.path
+     * Uses caching to prevent unnecessary re-renders
+     */
+    getCellWidgetNode(column, rowIndex) {
+        const cacheKey = `${rowIndex}_${column.name}`;
+        const rows = this.currentRows();
+        const row = rows[rowIndex];
+        const currentValue = row ? get(row, column.path, null) : null;
+        const cachedValue = this.cellValueCache.get(cacheKey);
+        // Get or create widget node
+        let widgetNode = this.widgetNodeCache.get(cacheKey);
+        if (!widgetNode) {
+            // Create path: rows[index].column.path
+            const dynamicPath = `rows.${rowIndex}.${column.path}`;
+            // Create new widget node
+            widgetNode = {
+                ...column.widget,
+                path: dynamicPath,
+                defaultValue: currentValue !== null && currentValue !== undefined ? currentValue : column.widget.defaultValue,
+            };
+            // Cache the widget node
+            this.widgetNodeCache.set(cacheKey, widgetNode);
+            this.cellValueCache.set(cacheKey, currentValue);
         }
-        const v = get(this.context(), path);
-        return this.expressionEvaluator.isExpression(typeof v === 'string' ? v : '');
+        else {
+            // Update path in case row index changed (shouldn't happen, but be safe)
+            widgetNode.path = `rows.${rowIndex}.${column.path}`;
+            // Only update defaultValue if value actually changed (to prevent re-renders)
+            if (cachedValue !== currentValue) {
+                widgetNode.defaultValue = currentValue !== null && currentValue !== undefined ? currentValue : column.widget.defaultValue;
+                this.cellValueCache.set(cacheKey, currentValue);
+            }
+        }
+        return widgetNode;
     }
+    //#endregion
+    //#region ----   Event Handlers   ----
     /**
-     * Returns the default value when switching from expression to value mode.
-     * Source of truth is prop.schema.defaultValue (widget.types): plain value, or function (context) => value.
-     * A minimal dataType fallback is used only when the schema provides no default.
+     * Handle cell click to start editing
      */
-    getDefaultValueForProperty(prop) {
-        const def = prop.schema?.defaultValue;
-        if (typeof def === 'function') {
-            return def(this.context());
+    handleCellClick(rowId, columnName, event) {
+        if (this.readonly()) {
+            return;
         }
-        if (def !== undefined && def !== null) {
-            return def;
+        // Don't open editor if clicking on toolbar or buttons
+        if (event) {
+            const target = event.target;
+            if (target.closest('.__cell-toolbar') || target.closest('ax-button')) {
+                return;
+            }
         }
-        const dataType = prop.schema?.dataType ?? 'string';
-        switch (dataType) {
-            case 'boolean':
-                return false;
-            case 'number':
-                return 0;
-            case 'object':
-                return {};
-            case 'array':
-                return [];
-            default:
-                return '';
+        const column = this.columns().find((col) => col.name === columnName);
+        if (!column || this.isColumnReadonly(column)) {
+            return;
+        }
+        // Don't open if already editing this cell
+        const currentEditing = this.editingCell();
+        if (currentEditing?.rowId === rowId && currentEditing?.columnName === columnName) {
+            return;
+        }
+        // Store original value for cancel functionality
+        const row = this.getRowById(rowId);
+        if (row) {
+            const originalValue = get(row, column.path, null);
+            this.originalCellValue.set(originalValue);
         }
+        this.editingCell.set({ rowId, columnName });
     }
     /**
-     * Updates the expression/value toggle state for a binding-enabled property.
-     * When switching to value: resets the value at path to a type-appropriate default so the
-     * widget renderer does not receive the expression string (e.g. checkbox gets false, not a string).
-     * When switching to expression: sets the value at path to '{{ }}' so the popup opens with
-     * a clean expression placeholder instead of the previous literal (e.g. true/false).
+     * Handle cell value change from widget
+     * The widget sets the value at path like rows[index].column.path
      */
-    setExpressionMode(prop, useExpression) {
-        const path = this.getExpressionPath(prop);
-        const currentVal = get(this.context(), path);
-        const currentIsExpression = this.expressionEvaluator.isExpression(typeof currentVal === 'string' ? currentVal : '');
-        this.expressionModeState.update((s) => ({ ...s, [path]: useExpression }));
-        if (!useExpression && currentIsExpression) {
-            const next = cloneDeep(this.context());
-            set(next, path, this.getDefaultValueForProperty(prop));
-            untracked(() => {
-                this.context.set(next);
-                this.onChanged.emit({ values: this.context(), mode: 'update' });
-            });
+    handleCellValueChange(rowIndex, columnName, event) {
+        // Only process if context has changed (not just initiated)
+        if (event.state !== 'changed') {
+            return;
         }
-        else if (useExpression && !currentIsExpression) {
-            const next = cloneDeep(this.context());
-            set(next, path, '{{ }}');
-            untracked(() => {
-                this.context.set(next);
-                this.onChanged.emit({ values: this.context(), mode: 'update' });
-            });
+        const rows = this.currentRows();
+        const row = rows[rowIndex];
+        if (!row) {
+            return;
+        }
+        const column = this.columns().find((col) => col.name === columnName);
+        if (!column) {
+            return;
         }
+        // Get the new value from the context (widget sets it at rows[index].column.path)
+        const dynamicPath = `rows.${rowIndex}.${column.path}`;
+        const newValue = get(event.data, dynamicPath);
+        // Update the row object directly
+        set(row, column.path, newValue);
+        // Update rows array
+        this.updateRows();
+        // Get rowId for events
+        const rowId = this.rowMode() === 'fixed' ? row['name'] : row['_id'];
+        // Emit events
+        this.cellChange.emit({
+            rowId: rowId || `row_${rowIndex}`,
+            columnName,
+            value: newValue,
+            row: { ...row },
+        });
+        this.spreadsheetChange.emit([...this.currentRows()]);
+        // Don't close edit mode automatically - let user finish editing
+        // Edit mode will close on blur or click outside
     }
     /**
-     * Opens the binding/expression code editor for a property with binding.enabled.
-     * Ensures the value passed to the popup is always a string to avoid code-editor crashes.
+     * Handle spreadsheet context change from widgets-container
+     * This is called when any widget in the spreadsheet changes
      */
-    async openBindingEditor(prop) {
-        const expressionPath = this.getExpressionPath(prop);
-        const raw = get(this.context(), expressionPath);
-        const currentValue = typeof raw === 'string' ? raw : '';
-        const { AXPBindingExpressionEditorPopupComponent } = await import('./acorex-platform-layout-components-binding-expression-editor-popup.component-Cb6Lk4Ch.mjs');
-        const result = await this.popupService.open(AXPBindingExpressionEditorPopupComponent, {
-            title: '@general:widgets.triggers.edit-binding-expression',
-            size: 'lg',
-            data: { initialValue: signal(currentValue) },
-        });
-        if (result?.data?.value !== undefined) {
-            const next = cloneDeep(this.context());
-            set(next, expressionPath, result.data.value);
-            untracked(() => {
-                this.context.set(next);
-                this.onChanged.emit({ values: this.context(), mode: 'update' });
+    handleSpreadsheetContextChange(event) {
+        if (event.state !== 'changed') {
+            return;
+        }
+        // Extract row index and column from the path (format: rows[index].column.path)
+        const path = event.path || '';
+        const pathMatch = path.match(/^rows\.(\d+)\.(.+)$/);
+        if (!pathMatch) {
+            return;
+        }
+        const rowIndex = parseInt(pathMatch[1], 10);
+        const columnPath = pathMatch[2];
+        // Find the column by path
+        const column = this.columns().find((col) => col.path === columnPath);
+        if (!column) {
+            return;
+        }
+        // Get the new value from event.data
+        const newValue = get(event.data, path);
+        // Update the row object (sync with context)
+        const rows = this.currentRows();
+        const row = rows[rowIndex];
+        if (row) {
+            // The context should already have the updated value, but sync row object to be sure
+            set(row, columnPath, newValue);
+            // Update cache (widget node will update defaultValue on next getCellWidgetNode call)
+            const cacheKey = `${rowIndex}_${column.name}`;
+            this.cellValueCache.set(cacheKey, newValue);
+            // Don't delete widget node cache - just update defaultValue on next access
+            // This prevents re-rendering while still reflecting the new value
+            this.updateRows();
+            // Get rowId for events
+            const rowId = this.rowMode() === 'fixed' ? row['name'] : row['_id'];
+            // Emit events
+            this.cellChange.emit({
+                rowId: rowId || `row_${rowIndex}`,
+                columnName: column.name,
+                value: newValue,
+                row: { ...row },
             });
+            this.spreadsheetChange.emit([...this.currentRows()]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n            <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                @if (prop.showLabel !== false) {\n                @if (translateTitle) {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                } @else {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                }\n                }\n                @if (prop.binding?.enabled) {\n                <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                    <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                        [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                        [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                        (selectedChange)=\"setExpressionMode(prop, $event)\">\n                        @if (isExpressionMode(prop)) {\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                        } @else {\n                        <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                        }\n                    </ax-button>\n                </div>\n                }\n            </div>\n            <!-- Property content: Open Editor button (expression mode) or widget renderer (value mode) -->\n            @if (prop.binding?.enabled && isExpressionMode(prop)) {\n            <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                [text]=\"'@general:widgets.triggers.open-editor' | translate | async\" (onClick)=\"openBindingEditor(prop)\"\n                [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                </ax-prefix>\n            </ax-button>\n            } @else if (prop.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n            </ng-container>\n            }\n        </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: false }\">\n                        </ng-container>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n        </ng-container>\n        }\n        }\n    </div>\n    }\n    <!-- #endregion -->\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$7.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$7.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: AXButtonGroupModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5$3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.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.16", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        CommonModule,
-                        AXAccordionModule,
-                        AXButtonModule,
-                        AXButtonGroupModule,
-                        AXDecoratorModule,
-                        AXTabsModule,
-                        AXPWidgetCoreModule,
-                        AXTranslationModule,
-                    ], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n            <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                @if (prop.showLabel !== false) {\n                @if (translateTitle) {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                } @else {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                }\n                }\n                @if (prop.binding?.enabled) {\n                <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                    <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                        [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                        [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                        (selectedChange)=\"setExpressionMode(prop, $event)\">\n                        @if (isExpressionMode(prop)) {\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                        } @else {\n                        <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                        }\n                    </ax-button>\n                </div>\n                }\n            </div>\n            <!-- Property content: Open Editor button (expression mode) or widget renderer (value mode) -->\n            @if (prop.binding?.enabled && isExpressionMode(prop)) {\n            <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                [text]=\"'@general:widgets.triggers.open-editor' | translate | async\" (onClick)=\"openBindingEditor(prop)\"\n                [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                </ax-prefix>\n            </ax-button>\n            } @else if (prop.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n            </ng-container>\n            }\n        </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: false }\">\n                        </ng-container>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n        </ng-container>\n        }\n        }\n    </div>\n    }\n    <!-- #endregion -->\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsInput", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChanged: [{
-                type: Output
-            }] } });
-
-class AXPPropertyViewerPopupComponent extends AXBasePageComponent {
-    //#endregion
-    constructor() {
-        super();
-        //#region ----   Inputs   ----
-        this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
-        this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-        this.context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
-        //#endregion
-        //#region ----   Properties   ----
-        this.propertyViewer = viewChild(AXPPropertyViewerComponent, ...(ngDevMode ? [{ debugName: "propertyViewer" }] : []));
-        this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
-        this.currentMode = 'init';
-        effect(() => {
-            const viewer = this.propertyViewer();
-            if (!viewer) {
-                return;
-            }
-            viewer.initializeContext(this.context() ?? {});
-        });
-    }
-    //#region ----   Event Handlers   ----
-    handlePropertyChanged(event) {
-        this.currentValues.set(event.values ?? {});
-        this.currentMode = event.mode;
-    }
-    handleCloseClick() {
-        this.close();
-    }
-    handleApplyClick() {
-        this.close({
-            values: this.currentValues(),
-            mode: this.currentMode,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AXPPropertyViewerPopupComponent, isStandalone: true, selector: "axp-property-viewer-popup", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
-      <axp-property-viewer
-        [tabsInput]="tabs()"
-        [mode]="mode()"
-        (onChanged)="handlePropertyChanged($event)"
-      ></axp-property-viewer>
-    </div>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button
-          look="solid"
-          [text]="'@general:actions.close.title' | translate | async"
-          (onClick)="handleCloseClick()"
-        ></ax-button>
-        <ax-button
-          look="solid"
-          color="primary"
-          [text]="'@general:actions.apply.title' | translate | async"
-          (onClick)="handleApplyClick()"
-        ></ax-button>
-      </ax-suffix>
-    </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerPopupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-property-viewer-popup',
-                    template: `
-    <div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
-      <axp-property-viewer
-        [tabsInput]="tabs()"
-        [mode]="mode()"
-        (onChanged)="handlePropertyChanged($event)"
-      ></axp-property-viewer>
-    </div>
-
-    <ax-footer>
-      <ax-suffix>
-        <ax-button
-          look="solid"
-          [text]="'@general:actions.close.title' | translate | async"
-          (onClick)="handleCloseClick()"
-        ></ax-button>
-        <ax-button
-          look="solid"
-          color="primary"
-          [text]="'@general:actions.apply.title' | translate | async"
-          (onClick)="handleApplyClick()"
-        ></ax-button>
-      </ax-suffix>
-    </ax-footer>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPPropertyViewerComponent],
-                }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], propertyViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }] } });
-
-var propertyViewerPopup_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPPropertyViewerPopupComponent: AXPPropertyViewerPopupComponent
-});
-
-class AXPPropertyViewerService {
-    constructor() {
-        //#region ----   Services & Dependencies   ----
-        this.popupService = inject(AXPopupService);
+    /**
+     * Handle blur event to stop editing (when user clicks away from cell)
+     */
+    handleCellBlur(rowId, columnName) {
+        // Small delay to allow click events to process first
+        setTimeout(() => {
+            const editing = this.editingCell();
+            if (editing?.rowId === rowId && editing?.columnName === columnName) {
+                // Don't close if clicking on the toolbar or buttons
+                const activeElement = document.activeElement;
+                const toolbarElement = activeElement?.closest('.__cell-toolbar');
+                const buttonElement = activeElement?.closest('ax-button');
+                // Only auto-commit if not clicking on toolbar or buttons
+                if (!toolbarElement && !buttonElement) {
+                    this.commitCellEdit();
+                }
+            }
+        }, 150);
     }
-    //#endregion
-    //#region ----   Public Methods   ----
     /**
-     * Open property viewer popup with predefined tabs and context.
+     * Handle Escape key to cancel editing
      */
-    async open(config) {
-        const { AXPPropertyViewerPopupComponent } = await Promise.resolve().then(function () { return propertyViewerPopup_component; });
-        const result = await this.popupService.open(AXPPropertyViewerPopupComponent, {
-            title: config.title,
-            size: config.size || 'md',
-            data: {
-                tabs: signal(config.tabs),
-                mode: signal(config.mode || 'simple'),
-                context: signal(config.context ?? {}),
-            },
-        });
-        return result.data || null;
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.editingCell()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelCellEdit();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPropertyViewerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class AXPQuerySortsComponent {
-    constructor() {
-        this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
-        this.sortQueries = signal([], ...(ngDevMode ? [{ debugName: "sortQueries", equal: isEqual }] : [{
-                equal: isEqual,
-            }]));
-        this.initialSortQueries = input([], ...(ngDevMode ? [{ debugName: "initialSortQueries" }] : []));
-        this.sortQueriesChange = output();
-        // Recompute merged sort queries whenever inputs change
-        effect(() => {
-            const initialQueries = this.initialSortQueries();
-            const definitions = this.sortDefinitions();
-            const existingQueriesMap = new Map(initialQueries.map((q) => [q.name, q]));
-            const mergedQueries = definitions.map((def) => {
-                const existingQuery = existingQueriesMap.get(def.name);
-                return existingQuery ? { ...def, dir: existingQuery.dir } : { ...def };
-            });
-            this.sortQueries.set(mergedQueries);
+    /**
+     * Commit cell edit (save changes and close editing mode)
+     */
+    commitCellEdit() {
+        const editing = this.editingCell();
+        if (!editing) {
+            return;
+        }
+        // Changes are already saved via handleSpreadsheetContextChange
+        // Close the editor (same as escape, but keeps changes)
+        this.editingCell.set(null);
+        this.originalCellValue.set(null);
+    }
+    /**
+     * Cancel cell edit (discard changes and close editing mode - same as escape)
+     */
+    cancelCellEdit() {
+        const editing = this.editingCell();
+        if (!editing) {
+            return;
+        }
+        const row = this.getRowById(editing.rowId);
+        const column = this.columns().find((col) => col.name === editing.columnName);
+        const originalValue = this.originalCellValue();
+        if (row && column) {
+            // Restore original value in row
+            set(row, column.path, originalValue);
+            // Clear cache for this cell so widget re-renders with original value
+            const rowsWithIds = this.rowsWithIds();
+            const rowIndex = rowsWithIds.findIndex((item) => item.rowId === editing.rowId);
+            if (rowIndex !== -1) {
+                const cacheKey = `${rowIndex}_${editing.columnName}`;
+                this.cellValueCache.set(cacheKey, originalValue);
+                this.widgetNodeCache.delete(cacheKey);
+            }
+            this.updateRows();
+        }
+        // Close the editor (same as escape)
+        this.editingCell.set(null);
+        this.originalCellValue.set(null);
+    }
+    /**
+     * Handle click outside to stop editing
+     */
+    handleClickOutside(event) {
+        const target = event.target;
+        // Don't close if clicking inside a widget or its elements
+        if (target.closest('[axp-widget-renderer]') ||
+            target.closest('.ax-dropdown') ||
+            target.closest('.ax-popup') ||
+            target.closest('.__cell-editor')) {
+            return;
+        }
+        this.editingCell.set(null);
+    }
+    /**
+     * Handle add row (dynamic mode only)
+     */
+    handleAddRow() {
+        if (this.rowMode() !== 'dynamic' || !this.allowAddRows() || this.readonly()) {
+            return;
+        }
+        const columns = this.columns();
+        const newRow = {
+            _id: this.generateRowId(),
+        };
+        // Initialize with default values from widgets
+        columns.forEach((column) => {
+            if (column.widget.defaultValue !== undefined && column.widget.defaultValue !== null) {
+                set(newRow, column.path, column.widget.defaultValue);
+            }
         });
-        effect(() => {
-            this.sortQueriesChange.emit(this.sortQueries().filter((q) => q.dir !== undefined));
+        const currentRows = this.rowsModel();
+        const updatedRows = [...currentRows, newRow];
+        this.rowsModel.set(updatedRows);
+        this.rowChange.emit({
+            type: 'add',
+            rowId: newRow['_id'],
+            row: { ...newRow },
+            rows: updatedRows,
         });
+        this.spreadsheetChange.emit(updatedRows);
     }
-    drop(event) {
-        const sd = this.sortDefinitions();
-        moveItemInArray(sd, event.previousIndex, event.currentIndex);
-        this.sortDefinitions.set([...sd]);
-        // Reorder sortQueries based on new sortDefinitions order
-        const sq = this.sortQueries();
-        moveItemInArray(sq, event.previousIndex, event.currentIndex);
-        this.sortQueries.set([...sq]);
+    /**
+     * Handle remove row (works for both fixed and dynamic modes)
+     */
+    handleRemoveRow(rowId, _event) {
+        if (!this.allowRemoveRows() || this.readonly()) {
+            return;
+        }
+        const currentRows = this.currentRows();
+        let rowIndex = -1;
+        let removedRow;
+        if (this.rowMode() === 'fixed') {
+            // Fixed mode: find by 'name' property
+            rowIndex = currentRows.findIndex((row) => row['name'] === rowId);
+        }
+        else {
+            // Dynamic mode: find by '_id' property
+            rowIndex = currentRows.findIndex((row) => row['_id'] === rowId);
+        }
+        if (rowIndex === -1) {
+            return;
+        }
+        removedRow = currentRows[rowIndex];
+        if (this.rowMode() === 'dynamic') {
+            // Dynamic mode: update rowsModel
+            const updatedRows = currentRows.filter((_, index) => index !== rowIndex);
+            this.rowsModel.set(updatedRows);
+            this.rowChange.emit({
+                type: 'remove',
+                rowId,
+                row: { ...removedRow },
+                rows: updatedRows,
+            });
+            this.spreadsheetChange.emit(updatedRows);
+        }
+        else {
+            // Fixed mode: update internalRows and emit events
+            const updatedRows = currentRows.filter((_, index) => index !== rowIndex);
+            this.internalRows.set(updatedRows);
+            this.rowChange.emit({
+                type: 'remove',
+                rowId,
+                row: { ...removedRow },
+                rows: updatedRows,
+            });
+            this.spreadsheetChange.emit(updatedRows);
+        }
     }
-    getSortDirection(item) {
-        return this.sortQueries().find((i) => i.name === item.name)?.dir;
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Generate unique row ID for dynamic mode
+     */
+    generateRowId() {
+        return `row_${AXPDataGenerator.uuid()}`;
     }
-    changeItemSort(item) {
-        const itemDirection = this.getSortDirection(item);
-        const newDirection = itemDirection === 'asc' ? 'desc' : itemDirection === 'desc' ? undefined : 'asc';
-        this.sortQueries.update((prev) => {
-            return prev.map((field) => {
-                if (field.name === item.name) {
-                    return { ...field, dir: newDirection };
-                }
-                return field;
-            });
-        });
+    /**
+     * Update rows array (sync internal state)
+     */
+    updateRows() {
+        if (this.rowMode() === 'dynamic') {
+            // For dynamic mode, rowsModel is already updated (two-way binding)
+            // Just trigger change detection
+            this.rowsModel.set([...this.rowsModel()]);
+        }
+        else {
+            // For fixed mode, update internal state
+            this.internalRows.set([...this.internalRows()]);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: i1$1.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: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.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.16", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        CdkDropList,
-                        CdkDrag,
-                        CdkDragHandle,
-                        AXTabsModule,
-                        AXTranslationModule,
+            args: [{ selector: 'axp-spreadsheet', standalone: true, imports: [
                         CommonModule,
-                        AXDecoratorModule,
+                        FormsModule,
+                        AXTranslationModule,
                         AXButtonModule,
-                    ], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n      @for (item of sortDefinitions(); track item.name) {\n        <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n          <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n            <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n            <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n          </div>\n          <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n              class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n            ></ax-icon>\n            <ax-icon\n              [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n              class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n            ></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { sortDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDefinitions", required: false }] }, { type: i0.Output, args: ["sortDefinitionsChange"] }], initialSortQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSortQueries", required: false }] }], sortQueriesChange: [{ type: i0.Output, args: ["sortQueriesChange"] }] } });
+                        AXDecoratorModule,
+                        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 (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']]
+            }] } });
+
+//#endregion
 
 //#region ----   Imports   ----
 //#endregion
@@ -6282,5 +6013,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPLogoComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPSpreadsheetComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_MENU_CUSTOMIZER_SERVICE, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, buildTableColumnsEditorLayout };
+export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPLogoComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPSpreadsheetComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_MENU_CUSTOMIZER_SERVICE, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, buildTableColumnsEditorLayout };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map