@acorex/platform 21.0.0-next.64 → 21.0.0-next.67

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

@@ -16,7 +16,7 @@ import { AXPLayoutRendererComponent, AXPLayoutBuilderService, AXP_PREVIEW_WIDGET
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, Input } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, ChangeDetectorRef, Input } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import * as i1$1 from '@acorex/components/avatar';
@@ -24,9 +24,10 @@ import { AXAvatarModule } from '@acorex/components/avatar';
 import * as i3$1 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import { isNil, isEmpty, cloneDeep, isEqual, get, unionBy, sortBy, isArray, set, merge, capitalize } from 'lodash-es';
-import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
+import { AXPLayoutThemeService, AXPMenuVerticalMode } from '@acorex/platform/themes/shared';
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i5 from '@acorex/components/search-box';
@@ -64,7 +65,7 @@ import { AXSelectionListModule } from '@acorex/components/selection-list';
 import * as i5$1 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
-import { AXPFilterOperatorMiddlewareService, AXPSettingsService, ALL_DEFAULT_OPERATORS, AXPFileStorageService, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService } from '@acorex/platform/common';
+import { AXPFilterOperatorMiddlewareService, AXPSettingsService, ALL_DEFAULT_OPERATORS, AXPFileStorageService, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, AXP_PLATFORM_CONFIG_TOKEN } from '@acorex/platform/common';
 import { Subject, filter, BehaviorSubject, timer, takeUntil } from 'rxjs';
 import * as i1$7 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
@@ -381,17 +382,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class AXPTaskBadgeDirective {
     constructor() {
         this.badgeService = inject(AXPTaskBadgeService);
-        this.host = inject(AXBadgeComponent); // assumes it's applied on <ax-badge>
+        this.host = inject(AXBadgeComponent);
         this.hostElement = this.host.getHostElement();
+        this.themeStore = inject(AXPLayoutThemeService);
         this.badgeKey = input(undefined, ...(ngDevMode ? [{ debugName: "badgeKey" }] : /* istanbul ignore next */ []));
         this.count = input(0, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), alias: 'axp-task-badge' });
-        this.displayCount = computed(() => {
-            const value = this.count() || (this.badgeKey() && this.badgeService.getCount(this.badgeKey())());
-            return value ? value.toString() : '';
-        }, ...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
+        this.actualCount = computed(() => {
+            const inputCount = this.count();
+            if (inputCount) {
+                return inputCount;
+            }
+            const key = this.badgeKey();
+            if (!key) {
+                return 0;
+            }
+            return this.badgeService.getCount(key)();
+        }, ...(ngDevMode ? [{ debugName: "actualCount" }] : /* istanbul ignore next */ []));
+        this.badgeText = computed(() => {
+            const count = this.actualCount();
+            if (!count) {
+                return '';
+            }
+            const isCompact = this.themeStore.menuVerticalMode() === 'compact';
+            return isCompact ? '' : count.toString();
+        }, ...(ngDevMode ? [{ debugName: "badgeText" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
-            this.setValueOfInputSignal(this.host.text, this.displayCount());
-            if (!this.displayCount()) {
+            const count = this.actualCount();
+            this.setValueOfInputSignal(this.host.text, this.badgeText());
+            if (!count) {
                 this.hostElement.style.display = 'none';
             }
             else {
@@ -991,9 +1009,9 @@ class AXPCategoryTreeComponent {
         };
         this.collapseChange.emit(entity);
         this.events().onCollapseChange?.(entity);
-        // Load children if node is being expanded
-        // Check both expand property and active property (active seems to be the actual expansion state)
-        if ((node.expand || node.active) && this.dataSource().loadChildNodes) {
+        // Load children when the node has not been loaded yet (independent of expand event timing).
+        const hasUnloadedChildren = (node.childrenCount ?? 0) > 0 && (!node.children || node.children.length === 0);
+        if (node.id !== 'root' && hasUnloadedChildren && this.dataSource().loadChildNodes) {
             await this.loadChildNodes(node.id);
         }
     }
@@ -1123,7 +1141,7 @@ class AXPCategoryTreeComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-flex-1 ax-min-h-0 ax-min-w-0 ax-overflow-y-auto ax-overflow-x-hidden\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}axp-layout-content{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
             type: Component,
@@ -1140,7 +1158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXButtonModule,
                         AXDropdownModule,
                         AXPStateMessageComponent,
-                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n" }]
+                    ], template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div class=\"ax-px-4 ax-flex-1 ax-min-h-0 ax-min-w-0 ax-overflow-y-auto ax-overflow-x-hidden\" [class.ax-pt-2]=\"config().searchable\">\n      <ax-tree-view-legacy\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n        [showCheckbox]=\"config().showCheckbox || false\"\n        [itemTemplate]=\"itemTemplate\"\n        #treeRef\n        [textField]=\"config().textField || 'title'\"\n        [valueField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        [items]=\"treeItems()\"\n        #tree\n      >\n      </ax-tree-view-legacy>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-item>\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n          <div class=\"ax-flex ax-items-center ax-gap-1\">\n            <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}axp-layout-content{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}\n"] }]
         }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeCreate: [{ type: i0.Output, args: ["nodeCreate"] }], nodeUpdate: [{ type: i0.Output, args: ["nodeUpdate"] }], nodeDelete: [{ type: i0.Output, args: ["nodeDelete"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
 
 //#region ----   Tree Node Interface   ----
@@ -1574,14 +1592,9 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         this.config = signal({
             title: '',
             dataSource: null,
-            columns: [],
-            selectionMode: 'single',
-            searchFields: [],
-            initialSearchTerm: undefined,
-            parentField: undefined,
-            allowCreate: 'none',
-            filters: undefined,
-            selectedItemIds: undefined
+            grid: { columns: [] },
+            selection: { mode: 'single' },
+            create: { mode: 'none' },
         }, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.searchTerm = '';
         this.searchPlaceholderText = signal('', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []));
@@ -1590,6 +1603,8 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         this.initialSelectionApplied = false;
         this.userHasInteracted = false;
         this.isApplyingInitialSelection = false;
+        /** Suppresses stale grid selection events while a single-mode row click is being applied. */
+        this.rowClickSelectionSync = false;
         this.initialSelectedItems = []; // Track initial selection to calculate difference
         // Category Filter State
         this.activeCategoryFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeCategoryFilter" }] : /* istanbul ignore next */ []));
@@ -1599,12 +1614,23 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         //#region ----   Services & Dependencies   ----
         this.translationService = inject(AXTranslationService);
         //#region ----   Computed Properties   ----
-        this.allowSelect = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "allowSelect" }] : /* istanbul ignore next */ []));
+        this.allowUnselect = computed(() => this.config().selection?.allowUnselect ?? true, ...(ngDevMode ? [{ debugName: "allowUnselect" }] : /* istanbul ignore next */ []));
+        this.allowSelect = computed(() => {
+            if (this.allowUnselect()) {
+                return true;
+            }
+            return this.selectedItems().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "allowSelect" }] : /* istanbul ignore next */ []));
         this.selectedCount = computed(() => this.selectedItems().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
         this.hasSearch = computed(() => {
-            const searchFields = this.config().searchFields;
+            const searchFields = this.config().search?.fields;
             return searchFields && searchFields.length > 0;
         }, ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
+        this.selectionMode = computed(() => this.config().selection?.mode ?? 'single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        this.categoryEnabled = computed(() => {
+            const category = this.config().category;
+            return !!category && category.enabled !== false && !!category.dataSource;
+        }, ...(ngDevMode ? [{ debugName: "categoryEnabled" }] : /* istanbul ignore next */ []));
         // Category Tree Configuration
         this.categoryTreeConfig = computed(() => ({
             textField: 'title',
@@ -1623,12 +1649,26 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             canDelete: false,
             canCreateChild: false,
         }), ...(ngDevMode ? [{ debugName: "categoryTreeActions" }] : /* istanbul ignore next */ []));
+        this.hasRowActionPrimary = computed(() => this.config().rowActions?.hasPrimary() ?? false, ...(ngDevMode ? [{ debugName: "hasRowActionPrimary" }] : /* istanbul ignore next */ []));
+        this.hasRowActionDropdown = computed(() => this.config().rowActions?.hasDropdown() ?? false, ...(ngDevMode ? [{ debugName: "hasRowActionDropdown" }] : /* istanbul ignore next */ []));
+        this.primaryRowActionItems = computed(() => (this.config().rowActions?.getPrimaryItems() ?? []), ...(ngDevMode ? [{ debugName: "primaryRowActionItems" }] : /* istanbul ignore next */ []));
+        this.primaryRowActionColumnWidth = computed(() => {
+            const count = this.primaryRowActionItems().length;
+            return count > 0 ? `${count * 70}px` : '60px';
+        }, ...(ngDevMode ? [{ debugName: "primaryRowActionColumnWidth" }] : /* istanbul ignore next */ []));
+        this.getDropdownRowActionItems = (rowData) => {
+            const handler = this.config().rowActions;
+            if (!handler) {
+                return Promise.resolve([]);
+            }
+            return handler.getDropdownItems(rowData).then((items) => items);
+        };
         effect(() => {
-            const searchFields = this.config().searchFields;
+            const searchFields = this.config().search?.fields;
             void this.updateSearchPlaceholder(searchFields);
         });
         effect(() => {
-            const initialTerm = this.config().initialSearchTerm ?? '';
+            const initialTerm = this.config().search?.initial ?? '';
             if (!this.initialSearchApplied && initialTerm && initialTerm.trim().length > 0) {
                 this.initialSearchApplied = true;
                 this.searchTerm = initialTerm;
@@ -1658,23 +1698,32 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         this.close({ items: [e.data] });
     }
     handleRowClick(e) {
-        // Mark user interaction
-        this.userHasInteracted = true;
-        // In single selection mode, update selectedItems directly since grid doesn't fire selectedRowsChange
-        if (this.config().selectionMode === 'single') {
-            this.selectedItems.set([e.data]);
+        if (!this.isSingleSelectionMode()) {
+            return;
         }
-        // In multiple mode, selection is handled by the grid via checkboxes
-        // The grid will fire handleSelectedRowsChange which updates our signal
+        const clicked = e.data;
+        const current = this.selectedItems();
+        const clickedKey = this.getRowKey(clicked);
+        const isAlreadySelected = current.length === 1 && this.getRowKey(current[0]) === clickedKey;
+        const nextSelection = this.allowUnselect() && isAlreadySelected ? [] : [clicked];
+        this.rowClickSelectionSync = true;
+        this.applySingleSelection(nextSelection, true);
     }
     async handleSelectedRowsChange(rows) {
-        const newSelection = rows || [];
-        // If we're applying initial selection, just update the signal
-        // Otherwise, mark as user interaction and update
+        if (this.rowClickSelectionSync) {
+            return;
+        }
+        let newSelection = rows || [];
+        if (this.isSingleSelectionMode()) {
+            const clamped = this.clampSingleSelection(newSelection);
+            if (!isEqual(clamped, newSelection) && !this.isApplyingInitialSelection) {
+                this.syncGridSingleSelection(clamped);
+            }
+            newSelection = clamped;
+        }
         if (!this.isApplyingInitialSelection) {
             this.userHasInteracted = true;
         }
-        // Always update selectedItems from data table selection
         this.selectedItems.set(newSelection);
     }
     handleChangeSearchValue(e) {
@@ -1685,12 +1734,12 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     async handleCreateNewClick(mode) {
-        const onCreate = this.config().onCreate;
+        const onCreate = this.config().create?.onCreate;
         if (!onCreate)
             return;
         const createdItem = await onCreate(mode);
         if (createdItem) {
-            if (this.config().selectionMode === 'multiple') {
+            if (this.selectionMode() === 'multiple') {
                 const currentSelection = this.selectedItems();
                 const newSelection = [...currentSelection, createdItem];
                 this.selectedItems.set(newSelection);
@@ -1718,9 +1767,26 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             await this.grid().expandRow(row);
         }
     }
+    async handleRowActionClick(event) {
+        const handler = this.config().rowActions;
+        if (!handler || this.grid()?.dataSource.isLoading) {
+            return;
+        }
+        if (event.setLoading) {
+            event.setLoading(true);
+        }
+        try {
+            await handler.execute(event.name, event.data);
+        }
+        finally {
+            if (event.setLoading) {
+                event.setLoading(false);
+            }
+        }
+    }
     // Category Filter Event Handlers
     handleCategoryFilterClick(node) {
-        const categoryConfig = this.config().categoryFilter;
+        const categoryConfig = this.config().category;
         // Get the filter value from the node
         const filterValue = node.id;
         // Store active filter state
@@ -1734,7 +1800,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
     clearCategoryFilter() {
         this.activeCategoryFilter.set(null);
         // Apply only base filters (without category filter)
-        const baseFilters = this.config().filters;
+        const baseFilters = this.config().filter?.value;
         if (baseFilters) {
             this.config().dataSource.filter(baseFilters);
         }
@@ -1745,15 +1811,75 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
     }
     //#endregion
     //#region ----   Private Methods   ----
+    getRowKey(row) {
+        const dataSource = this.config().dataSource;
+        const keyField = dataSource.config?.key ?? 'id';
+        return String(row?.[keyField] ?? '');
+    }
+    isSingleSelectionMode() {
+        return this.selectionMode() === 'single';
+    }
+    applySingleSelection(selection, force = false) {
+        const clamped = this.clampSingleSelection(selection);
+        if (!force && isEqual(clamped, this.selectedItems())) {
+            this.clearRowClickSelectionSync();
+            return;
+        }
+        this.userHasInteracted = true;
+        this.selectedItems.set(clamped);
+        this.syncGridSingleSelection(clamped);
+    }
+    clearRowClickSelectionSync() {
+        this.rowClickSelectionSync = false;
+    }
+    /**
+     * Keeps at most one row when single mode uses checkboxes.
+     */
+    clampSingleSelection(newSelection) {
+        if (newSelection.length <= 1) {
+            return newSelection;
+        }
+        const prev = this.selectedItems();
+        const prevKeys = new Set(prev.map((row) => this.getRowKey(row)));
+        const added = newSelection.filter((row) => !prevKeys.has(this.getRowKey(row)));
+        if (added.length > 0) {
+            return [added[added.length - 1]];
+        }
+        return [newSelection[newSelection.length - 1]];
+    }
+    syncGridSingleSelection(selection) {
+        const grid = this.grid();
+        if (!grid) {
+            this.clearRowClickSelectionSync();
+            return;
+        }
+        queueMicrotask(() => {
+            this.isApplyingInitialSelection = true;
+            try {
+                if (selection.length === 1 && grid.selectRows) {
+                    grid.selectRows(selection[0]);
+                }
+                else if (selection.length === 0) {
+                    grid.selectedRows = [];
+                }
+            }
+            finally {
+                setTimeout(() => {
+                    this.isApplyingInitialSelection = false;
+                    this.clearRowClickSelectionSync();
+                }, 0);
+            }
+        });
+    }
     applySearchFilter(searchTerm) {
-        const searchFields = this.config().searchFields;
+        const searchFields = this.config().search?.fields;
         if (!searchFields || searchFields.length === 0) {
             return;
         }
         const normalizedTerm = isNil(searchTerm) ? '' : `${searchTerm}`.trim();
         if (isEmpty(normalizedTerm)) {
             // Apply only base filters when search is cleared
-            const baseFilters = this.config().filters;
+            const baseFilters = this.config().filter?.value;
             if (baseFilters) {
                 this.config().dataSource.filter(baseFilters);
             }
@@ -1764,7 +1890,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             return;
         }
         // Get base filters from config
-        const baseFilters = this.config().filters;
+        const baseFilters = this.config().filter?.value;
         // Create search filters for all configured fields
         const searchFilters = searchFields.map((field) => ({
             field: field.name,
@@ -1791,7 +1917,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
     }
     applyFilterAndSort() {
         // Apply base filters from config
-        const baseFilters = this.config().filters;
+        const baseFilters = this.config().filter?.value;
         if (baseFilters) {
             this.config().dataSource.filter(baseFilters);
             this.config().dataSource.refresh();
@@ -1799,7 +1925,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
     }
     applyCategoryFilter(filterValue, categoryConfig) {
         if (isNil(filterValue) || filterValue === 'root') {
-            const baseFilters = this.config().filters;
+            const baseFilters = this.config().filter?.value;
             if (baseFilters) {
                 this.config().dataSource.filter(baseFilters);
             }
@@ -1810,12 +1936,12 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             return;
         }
         // Get base filters from config
-        const baseFilters = this.config().filters;
+        const baseFilters = this.config().filter?.value;
         // Create category filter
         const categoryFilter = {
-            field: categoryConfig.filterField,
+            field: categoryConfig.filter.field,
             value: filterValue,
-            operator: { type: categoryConfig.filterOperator || 'contains' }
+            operator: { type: categoryConfig.filter.operator || 'contains' }
         };
         // Merge base filters with category filter
         const allFilters = baseFilters ? [baseFilters, categoryFilter] : [categoryFilter];
@@ -1866,7 +1992,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         if (this.initialSelectionApplied || this.userHasInteracted) {
             return;
         }
-        const selectedIds = this.config().selectedItemIds;
+        const selectedIds = this.config().selection?.selectedItemIds;
         if (!selectedIds || selectedIds.length === 0) {
             // No initial selection, so initialSelectedItems should be empty
             this.initialSelectedItems = [];
@@ -1885,7 +2011,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
             const keyField = dataSourceAny.config?.key || 'id';
             const byKeyMethod = dataSourceAny.config?.byKey;
             // First, try to find items in already loaded grid data
-            const itemsToSelect = [];
+            let itemsToSelect = [];
             const maxAttempts = 10; // Try for up to 1 second (10 * 100ms)
             let attempts = 0;
             const missingIds = [];
@@ -1949,28 +2075,28 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
                     }
                 }
             }
+            if (this.isSingleSelectionMode() && itemsToSelect.length > 1) {
+                itemsToSelect = [itemsToSelect[0]];
+            }
             // Only mark as applied if we found items to select
             if (itemsToSelect.length > 0) {
-                // Store initial selected items for later comparison
                 this.initialSelectedItems = [...itemsToSelect];
-                // Set flag to indicate we're applying initial selection
                 this.isApplyingInitialSelection = true;
                 try {
-                    // Update selectedItems signal first
-                    this.selectedItems.set(itemsToSelect);
-                    // Select the rows using the grid's selectRows method
-                    if (this.grid()?.selectRows) {
-                        if (itemsToSelect.length === 1) {
-                            this.grid().selectRows(itemsToSelect[0]);
-                        }
-                        else {
+                    if (this.isSingleSelectionMode()) {
+                        this.rowClickSelectionSync = true;
+                        this.selectedItems.set(itemsToSelect);
+                        this.syncGridSingleSelection(itemsToSelect);
+                    }
+                    else {
+                        this.selectedItems.set(itemsToSelect);
+                        if (this.grid()?.selectRows) {
                             this.grid().selectRows(...itemsToSelect);
                         }
                     }
                     this.initialSelectionApplied = true;
                 }
                 finally {
-                    // Reset flag after a short delay to allow the event to process
                     setTimeout(() => {
                         this.isApplyingInitialSelection = false;
                     }, 50);
@@ -1988,11 +2114,11 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <!-- TODO: needs to show checkbox for single selection mode too -->\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        @if (config().selectionMode === 'multiple') {\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().allowCreate === 'full' || config().allowCreate === 'quick') && config().onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().allowCreate === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (config().selectionMode === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1 ax-min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-data-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'axp-data-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         AXCommonModule,
                         AXButtonModule,
@@ -2005,7 +2131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXTranslationModule,
                         AXBadgeModule,
                         AXPCategoryTreeComponent,
-                    ], inputs: [], template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n    <!-- Category Filter Side Panel -->\n    @if (config().categoryFilter?.enabled) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <!-- TODO: needs to show checkbox for single selection mode too -->\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\n        @if (config().selectionMode === 'multiple') {\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n\n        @for (col of config().columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().allowCreate === 'full' || config().allowCreate === 'quick') && config().onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().allowCreate === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (config().selectionMode === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>", styles: [":host{display:block;height:100%}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-h-\\[50vh\\]{height:50vh}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area .ax-data-table{flex:1;min-height:0}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"] }]
+                    ], inputs: [], template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"ax-w-full ax-mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1 ax-min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
 var dataSelector_component = /*#__PURE__*/Object.freeze({
@@ -2027,38 +2153,29 @@ class AXPDataSelectorService {
      */
     async open(config) {
         const component = await Promise.resolve().then(function () { return dataSelector_component; }).then(c => c.AXPDataSelectorComponent);
-        // Create a copy of config to avoid mutating the original
         const processedConfig = { ...config };
-        // Evaluate filters if they exist
-        if (processedConfig.filters) {
-            processedConfig.filters = await this.expressionService.evaluate(processedConfig.filters);
+        if (processedConfig.filter?.value) {
+            processedConfig.filter = {
+                ...processedConfig.filter,
+                value: await this.expressionService.evaluate(processedConfig.filter.value),
+            };
         }
-        // Apply column width resolution to all columns
-        processedConfig.columns = this.applyColumnWidths(processedConfig.columns);
+        processedConfig.grid = {
+            ...processedConfig.grid,
+            columns: this.applyColumnWidths(processedConfig.grid.columns),
+        };
+        const categoryActive = processedConfig.category?.enabled !== false && !!processedConfig.category?.dataSource;
         const result = await this.popupService.open(component, {
             title: processedConfig.title,
-            size: processedConfig.categoryFilter?.enabled ?
-                'lg'
-                : (processedConfig.columns.length > 3 ? 'lg' : 'md'),
+            size: categoryActive
+                ? 'lg'
+                : (processedConfig.grid.columns.length > 3 ? 'lg' : 'md'),
             data: {
                 config: signal(processedConfig)
             }
         });
         return result.data || null;
     }
-    /**
-     * Open data selector with category filter
-     */
-    async openWithCategoryFilter(config, categoryFilterConfig) {
-        const enhancedConfig = {
-            ...config,
-            categoryFilter: {
-                enabled: true,
-                ...categoryFilterConfig
-            }
-        };
-        return this.open(enhancedConfig);
-    }
     //#endregion
     //#region ----   Private Methods   ----
     /**
@@ -2066,11 +2183,9 @@ class AXPDataSelectorService {
      */
     applyColumnWidths(columns) {
         return columns.map((column) => {
-            // Skip if column already has a width
             if (column.width) {
                 return column;
             }
-            // Convert to IColumnWithWidth interface for width resolution
             const columnWithWidth = {
                 name: column.name,
                 width: column.width,
@@ -2078,7 +2193,6 @@ class AXPDataSelectorService {
                     type: column.widget.type,
                 },
             };
-            // Resolve width using column width service
             const resolvedWidth = this.columnWidthService.resolveWidth(columnWithWidth);
             if (resolvedWidth) {
                 return {
@@ -4769,45 +4883,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class AXPLogoComponent {
     constructor() {
+        this.isCompactLogo = false;
+        this.compactLogoSize = 32;
         this.platform = inject(AXPlatform);
+        this.themeStore = inject(AXPLayoutThemeService);
+        this.platformConfig = inject(AXP_PLATFORM_CONFIG_TOKEN);
+        this.cdr = inject(ChangeDetectorRef);
+        effect(() => {
+            this.themeStore.menuVerticalMode();
+            this.updateActiveSource();
+        });
     }
     ngOnInit() {
-        this.setLogoType();
         this.platform.themeMode$.subscribe(() => {
-            this.setLogoTheme();
+            this.updateActiveSource();
         });
     }
     ngOnChanges() {
-        this.setLogoTheme();
+        this.inputSource = this.source;
+        this.updateActiveSource();
+    }
+    updateActiveSource() {
+        const compactIcon = this.themeStore.menuVerticalMode() === AXPMenuVerticalMode.Compact
+            ? this.platformConfig.logo?.icon
+            : undefined;
+        if (compactIcon?.dark) {
+            this.activeSource = compactIcon.dark;
+        }
+        else if (compactIcon) {
+            this.activeSource = compactIcon.light;
+        }
+        else if (this.inputSource?.dark && this.inputSource?.light) {
+            this.activeSource = this.platform.isDark() ? this.inputSource.dark : this.inputSource.light;
+        }
+        else {
+            this.activeSource = this.inputSource;
+        }
+        this.isCompactLogo =
+            this.themeStore.menuVerticalMode() === AXPMenuVerticalMode.Compact && !!compactIcon;
         this.setLogoType();
+        this.cdr.markForCheck();
     }
     setLogoType() {
         switch (true) {
-            case this.source instanceof AXPImageUrlLogoConfig:
+            case this.activeSource instanceof AXPImageUrlLogoConfig:
                 this.logoType = 'url';
                 break;
-            case this.source instanceof AXPComponentLogoConfig:
+            case this.activeSource instanceof AXPComponentLogoConfig:
                 this.logoType = 'component';
                 break;
-            case this.source instanceof AXPIconLogoConfig:
+            case this.activeSource 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: "21.2.9", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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\n      [width]=\"isCompactLogo ? compactLogoSize : activeSource.width\"\n      [height]=\"isCompactLogo ? compactLogoSize : activeSource.height\"\n      [src]=\"activeSource.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource.component\"></ng-container>\n  }\n  @case ('icon') {\n    <i [class]=\"activeSource.icon\" [style.color]=\"activeSource.color\"></i>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
+            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (logoType) {\n  @case ('url') {\n    <ax-image\n      [width]=\"isCompactLogo ? compactLogoSize : activeSource.width\"\n      [height]=\"isCompactLogo ? compactLogoSize : activeSource.height\"\n      [src]=\"activeSource.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource.component\"></ng-container>\n  }\n  @case ('icon') {\n    <i [class]=\"activeSource.icon\" [style.color]=\"activeSource.color\"></i>\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { source: [{
                 type: Input
             }] } });
 
@@ -6213,7 +6351,7 @@ class AXPResourceAppointmentComponent {
         this.resourceAppointmentService.executeCommand(event.item.data?.command, providerName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPResourceAppointmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container ax-flex ax-flex-col ax-min-h-0 ax-h-full\">\n  @if (isReady()) {\n    <!-- TODO: Add weekly view 'timeline-weekly' -->\n    <ax-scheduler\n      #scheduler\n      [views]=\"['timeline-day', 'timeline-month']\"\n      [dataSource]=\"schedulerAppointments()\"\n      [resources]=\"schedulerResources()\"\n      [startingDate]=\"currentDate()\"\n      [selectedView]=\"currentView()\"\n      [draggable]=\"false\"\n      (onRangeChanged)=\"handleRangeChanged($event)\"\n      class=\"axp-resource-appointment__scheduler ax-bg-lightest dark:ax-bg-darkest ax-flex-1\"\n    ></ax-scheduler>\n\n    <ax-context-menu\n      #contextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    ></ax-context-menu>\n  } @else {\n    <div class=\"axp-resource-appointment__loading ax-flex ax-items-center ax-justify-center ax-w-full ax-h-full\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;width:100%;height:100%;min-height:400px}.axp-resource-appointment__loading{min-height:300px}\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$8.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container ax-flex ax-flex-col ax-min-h-0 ax-h-full\">\n  @if (isReady()) {\n    <!-- TODO: Add weekly view 'timeline-weekly' -->\n    <ax-scheduler\n      #scheduler\n      [views]=\"['timeline-day', 'timeline-month']\"\n      [dataSource]=\"schedulerAppointments()\"\n      [resources]=\"schedulerResources()\"\n      [startingDate]=\"currentDate()\"\n      [selectedView]=\"currentView()\"\n      [draggable]=\"false\"\n      (onRangeChanged)=\"handleRangeChanged($event)\"\n      class=\"axp-resource-appointment__scheduler ax-bg-lightest dark:ax-bg-darkest ax-flex-1\"\n    ></ax-scheduler>\n\n    <ax-context-menu\n      #contextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    ></ax-context-menu>\n  } @else {\n    <div class=\"axp-resource-appointment__loading ax-flex ax-items-center ax-justify-center ax-w-full ax-h-full\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;width:100%;height:100%;min-height:400px}.axp-resource-appointment__loading{min-height:300px}\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$8.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPResourceAppointmentComponent, decorators: [{
             type: Component,
@@ -6232,6 +6370,12 @@ class AXPSectionItemsBuilderComponent {
         this.readonlyMode = input(false, { ...(ngDevMode ? { debugName: "readonlyMode" } : /* istanbul ignore next */ {}), alias: 'readonly' });
         this.valueChange = output();
         this.vm = signal({ sections: [] }, ...(ngDevMode ? [{ debugName: "vm" }] : /* istanbul ignore next */ []));
+        /** Snapshot from the last external `[value]` sync (load, discard, save refresh). */
+        this.baseline = signal({ sections: [] }, ...(ngDevMode ? [{ debugName: "baseline" }] : /* istanbul ignore next */ []));
+        /** Set on local {@link commit}; cleared on external sync or {@link markClean}. */
+        this.pendingCommitSnapshot = null;
+        /** True when the live model differs from the external baseline. */
+        this.isDirty = computed(() => !isEqual(this.normalizeValue(this.vm()), this.baseline()), ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
         this.sectionsModel = computed(() => this.normalizeValue(this.vm()), ...(ngDevMode ? [{ debugName: "sectionsModel" }] : /* istanbul ignore next */ []));
         this.sectionRows = computed(() => {
             const def = this.definition();
@@ -6251,10 +6395,31 @@ class AXPSectionItemsBuilderComponent {
             return this.sectionsModel().sections.length > min;
         }, ...(ngDevMode ? [{ debugName: "canRemoveSection" }] : /* istanbul ignore next */ []));
         effect(() => {
-            const next = cloneDeep(this.value());
-            untracked(() => this.vm.set(this.normalizeValue(next)));
+            const normalized = this.normalizeValue(cloneDeep(this.value()));
+            const current = untracked(() => this.normalizeValue(this.vm()));
+            if (isEqual(normalized, current)) {
+                this.pendingCommitSnapshot = null;
+                return;
+            }
+            if (this.pendingCommitSnapshot != null) {
+                untracked(() => this.vm.set(normalized));
+                if (isEqual(normalized, this.baseline())) {
+                    this.pendingCommitSnapshot = null;
+                    this.baseline.set(cloneDeep(normalized));
+                }
+                return;
+            }
+            untracked(() => {
+                this.vm.set(normalized);
+                this.baseline.set(cloneDeep(normalized));
+            });
         });
     }
+    /** Align dirty baseline to the current model (call after save). */
+    markClean() {
+        this.baseline.set(cloneDeep(this.normalizeValue(this.vm())));
+        this.pendingCommitSnapshot = null;
+    }
     /**
      * Opens add-section flow (same as primary "Add section" control). For page commands / ViewChild.
      */
@@ -6489,6 +6654,7 @@ class AXPSectionItemsBuilderComponent {
     commit(next) {
         const normalized = this.normalizeValue(next);
         this.vm.set(normalized);
+        this.pendingCommitSnapshot = cloneDeep(normalized);
         this.valueChange.emit(normalized);
     }
     normalizeValue(v) {
@@ -7396,6 +7562,14 @@ class AXPStandardSectionItemsBuilderComponent {
     async addSection() {
         await this.inner()?.addSection();
     }
+    /** Whether the builder model differs from the last external baseline. */
+    isDirty() {
+        return this.inner()?.isDirty() ?? false;
+    }
+    /** Clears dirty state by aligning baseline to the current model. */
+    markClean() {
+        this.inner()?.markClean();
+    }
     isDuplicateSectionName(value, key, excludeSectionId) {
         const n = key.trim().toLowerCase();
         if (!n)