@acorex/platform 20.6.0-next.3 → 20.6.0-next.5

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

@@ -15,7 +15,7 @@ import { AXPWorkflowService } from '@acorex/platform/workflow';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, untracked, EventEmitter, Output, linkedSignal, ViewChildren, Input } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, untracked, EventEmitter, Output, linkedSignal, HostListener, ViewChildren, Input } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
@@ -1022,7 +1022,7 @@ class AXPCategoryTreeComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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\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>\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'\"\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    <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\">{{ item.title | translate | async }}</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]=\"actions().createChildLabel || 'Add New Child'\"\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 || 'Edit'\"\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 || 'Delete'\"\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: AXTreeViewModule }, { kind: "component", type: i2$2.AXTreeViewComponent, selector: "ax-tree-view", 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: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], 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: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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\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>\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'\"\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    <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\">{{ item.title | translate | async }}</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]=\"actions().createChildLabel || 'Add New Child'\"\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 || 'Edit'\"\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 || 'Delete'\"\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: AXTreeViewModule }, { kind: "component", type: i2$2.AXTreeViewComponent, selector: "ax-tree-view", 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: i4$2.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: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
             type: Component,
@@ -1809,7 +1809,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         this.config().dataSource.refresh();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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\n          [dataSource]=\"config().categoryFilter!.dataSource\"\n          [config]=\"categoryTreeConfig()\"\n          [actions]=\"categoryTreeActions()\"\n          (nodeClick)=\"handleCategoryFilterClick($event)\"\n        >\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\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm\"\n            (onValueChanged)=\"handleChangeSearchValue($event)\"\n            [axAutoFocus]=\"true\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </div>\n      }\n\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-h-[50vh]\"\n        [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\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\n              [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n              [caption]=\"col.title | translate | async\"\n              [node]=\"{\n                path: col.dataPath || col.name,\n                type: col.widget.type,\n                options: col.widget.options,\n              }\"\n            >\n            </axp-widget-column-renderer>\n          }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\"\n    >\n    </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>\n", 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$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { 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$3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "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$3.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { 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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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\n          [dataSource]=\"config().categoryFilter!.dataSource\"\n          [config]=\"categoryTreeConfig()\"\n          [actions]=\"categoryTreeActions()\"\n          (nodeClick)=\"handleCategoryFilterClick($event)\"\n        >\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\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm\"\n            (onValueChanged)=\"handleChangeSearchValue($event)\"\n            [axAutoFocus]=\"true\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </div>\n      }\n\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-h-[50vh]\"\n        [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().parentField\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\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\n              [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n              [caption]=\"col.title | translate | async\"\n              [node]=\"{\n                path: col.dataPath || col.name,\n                type: col.widget.type,\n                options: col.widget.options,\n              }\"\n            >\n            </axp-widget-column-renderer>\n          }\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\"\n    >\n    </ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\"\n      [disabled]=\"allowSelect() === false\"\n    >\n    </ax-button>\n    <!-- @if (config().allowCreate) {\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.create.title' | translate | async\"\n        (onClick)=\"handleCreateNewClick()\"\n      >\n        <ax-prefix>\n          <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    } -->\n  </ax-suffix>\n</ax-footer>\n", 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$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { 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$3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "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$3.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.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$2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { 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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -4097,6 +4097,7 @@ class AXPQueryFiltersComponent {
         this.initialFilters = input([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : []));
         this.onFiltersChanged = output();
         this.tagBox = viewChild('tagBox', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
+        this.widgetRenderer = viewChild('widgetRenderer', ...(ngDevMode ? [{ debugName: "widgetRenderer" }] : []));
         this.selectedField = signal(null, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
         this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()), ...(ngDevMode ? [{ debugName: "selectedFilters", equal: isEqual }] : [{
                 equal: isEqual,
@@ -4157,31 +4158,75 @@ class AXPQueryFiltersComponent {
                     }));
             });
         };
-        this.#effect = effect(() => {
-            const context = untracked(() => this.context());
+        this.#emitFiltersEffect = effect(() => {
+            // Prevent emitting while a filter is actively being edited
+            const isEditing = this.activeFilter();
+            if (isEditing) {
+                return;
+            }
             const selectedFilters = this.selectedFilters();
+            const context = untracked(() => this.context());
             untracked(() => {
-                const convertedFilters = selectedFilters.map((f) => ({
-                    field: f.field,
-                    operator: context[f.field]?.operation,
-                    value: context[f.field]?.value,
-                    hidden: f.hidden,
-                    displayText: context[f.field]?.displayText,
-                }));
+                // 1. Separate "all" filter from others
+                const allFilter = selectedFilters.find((f) => f.field === 'all');
+                const otherFilters = selectedFilters.filter((f) => f.field !== 'all');
+                let convertedFilters = [];
+                // 2. Convert regular filters
+                otherFilters.forEach((f) => {
+                    convertedFilters.push({
+                        field: f.field,
+                        operator: context[f.field]?.operation || f.operator,
+                        value: context[f.field]?.value ?? f.value, // Prefer context, fallback to filter value
+                        hidden: f.hidden,
+                        displayText: context[f.field]?.displayText,
+                    });
+                });
+                // 3. If "all" filter exists, create a nested filter with OR logic
+                if (allFilter) {
+                    const allValue = allFilter.value; // Get value from filter definition
+                    const inlineFieldsFilters = this.filtersDefinitions()
+                        .filter((f) => f.filterType.inline)
+                        .map((f) => ({
+                        field: f.field,
+                        operator: { type: 'contains' },
+                        value: allValue,
+                    }));
+                    // Create a single filter with nested OR logic
+                    if (inlineFieldsFilters.length > 0) {
+                        convertedFilters.push({
+                            field: 'all',
+                            operator: { type: 'contains' },
+                            value: allValue,
+                            logic: 'or',
+                            filters: inlineFieldsFilters,
+                            hidden: false,
+                            displayText: 'All',
+                        });
+                    }
+                }
+                // 4. Build new context from selectedFilters (source of truth)
                 const newContext = {};
-                convertedFilters.forEach((cf) => {
-                    newContext[cf.field] = {
-                        value: cf.value,
-                        operation: typeof cf.operator === 'string' ? { type: cf.operator } : cf.operator,
-                        displayText: context[cf.field]?.displayText,
+                // Add context for regular filters
+                otherFilters.forEach((f) => {
+                    newContext[f.field] = {
+                        value: context[f.field]?.value ?? f.value, // Prefer context, fallback to filter value
+                        operation: context[f.field]?.operation || f.operator,
+                        displayText: context[f.field]?.displayText,
                     };
                 });
+                // Add context for "all" filter
+                if (allFilter) {
+                    newContext['all'] = {
+                        value: allFilter.value,
+                        operation: { type: 'contains' },
+                    };
+                }
                 this.context.set(newContext);
                 this.deactivateAllListItems();
                 this.onFiltersChanged.emit(convertedFilters);
             });
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
-        this.#effect2 = effect(() => {
+        }, ...(ngDevMode ? [{ debugName: "#emitFiltersEffect" }] : []));
+        this.#updateTagsEffect = effect(() => {
             const filters = this.selectedFilters();
             const context = this.context();
             Promise.all(filters.map(async (filter) => {
@@ -4195,7 +4240,35 @@ class AXPQueryFiltersComponent {
             })).then((results) => {
                 this.asyncTags.set(results.filter((r) => !r.hidden));
             });
-        }, ...(ngDevMode ? [{ debugName: "#effect2" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#updateTagsEffect" }] : []));
+        //#region ----   Widget Focus Effect   ----
+        /**
+         * Auto-focus widget when component ref is ready and filter is active
+         * This reactive approach eliminates the need for setTimeout
+         */
+        this.#focusEffect = effect(() => {
+            const renderer = this.widgetRenderer();
+            const activeFilter = this.activeFilter();
+            // Early return if no renderer or no active filter
+            if (!renderer || !activeFilter) {
+                return;
+            }
+            // Listen to componentRefSignal reactively
+            const componentRef = renderer.componentRefSignal();
+            // When componentRef is set (not null), focus the widget
+            if (componentRef) {
+                const componentInstance = componentRef.instance;
+                // Try to use the component's native focus method
+                if (componentInstance && typeof componentInstance.focus === 'function') {
+                    try {
+                        componentInstance.focus();
+                    }
+                    catch (error) {
+                        // console.error('Error focusing widget component:', error);
+                    }
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "#focusEffect" }] : []));
     }
     convertQueriesToDefinitions(queries) {
         const definitions = this.filtersDefinitions();
@@ -4205,7 +4278,7 @@ class AXPQueryFiltersComponent {
                 field: q.field,
                 operator: q.operator,
                 value: q.value,
-                title: definition?.title || '',
+                title: definition?.title ?? q.displayText ?? '',
                 widget: definition?.widget,
                 filterType: definition?.filterType,
                 hidden: q.hidden,
@@ -4222,22 +4295,40 @@ class AXPQueryFiltersComponent {
         this.tagBoxInput = this.tagBox()?.getHostElement().querySelector('input');
     }
     handleSelectField(field) {
-        console.log(field);
         this.activeFilter.set(field);
-        // this.inputValue.set('');
         this.tagBox()?.inputValue.set('');
     }
     handleFieldKeyDown(e, field) {
         if (e.key === 'Enter') {
             this.handleSelectField(field);
+            if (this.tagBoxInput && (field.widget.type === 'string-filter' || field.widget.type === 'number-filter')) {
+                this.context.update((prev) => {
+                    return {
+                        ...prev,
+                        [field.field]: {
+                            value: this.tagBoxInput?.value,
+                            operation: { type: 'contains' },
+                        },
+                    };
+                });
+            }
         }
     }
     onContextChanged(e) {
         this.context.set(e.data);
     }
     handleApplyFilter() {
-        if (this.activeFilter()) {
-            this.selectedFilters.update((prev) => [...prev, this.activeFilter()]);
+        const reservedFitler = this.activeFilter();
+        if (reservedFitler) {
+            const { field } = reservedFitler;
+            const selectedFiltersFields = this.selectedFilters().map((f) => f.field);
+            const context = this.context();
+            if (selectedFiltersFields.includes(field)) {
+                this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value: context[field] } : f)));
+            }
+            else {
+                this.selectedFilters.update((prev) => [...prev, reservedFitler]);
+            }
             this.activeFilter.set(null);
             this.popover()?.close();
         }
@@ -4262,20 +4353,75 @@ class AXPQueryFiltersComponent {
                     e.nativeEvent?.preventDefault();
                 }
             }
+            else {
+                this.popover()?.open();
+            }
         }
-        else {
-            this.popover()?.open();
+        else if (e.nativeEvent?.key === 'Enter' && this.tagBox()?.inputValue()?.trim()) {
+            e.nativeEvent?.preventDefault();
+            e.nativeEvent?.stopPropagation();
+            this.handleAddAllInlineFilters();
+            this.popover()?.close();
         }
     }
-    #effect;
+    onEnterKeyPressed(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.handleApplyFilter();
+    }
+    handleTagClick(item) {
+        if (item.field === 'all') {
+            return;
+        }
+        this.activeFilter.set(item);
+        this.popover()?.open();
+    }
+    handleRemoveTag(e, index) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.tagBox()?.removeItem(index);
+    }
+    #emitFiltersEffect;
     handleSelectFilters(e) {
         if (e.value?.length < this.selectedFilters().length) {
+            // Find removed filter by comparing old and new values
+            const oldValue = e.oldValue;
+            const newValue = e.value;
+            const removedFilter = oldValue.find((oldFilter) => !newValue.some((newFilter) => newFilter.field === oldFilter.field));
+            // If removed filter is "all" filter, restore its value to tagBox input
+            if (removedFilter?.field === 'all') {
+                this.tagBox()?.inputValue.set(String(removedFilter.value || ''));
+            }
             const hiddenFilters = this.selectedFilters().filter((f) => f.hidden);
             this.selectedFilters.update((prev) => {
                 return hiddenFilters.concat(e.value);
             });
         }
     }
+    handleAddAllInlineFilters() {
+        const inputValue = this.tagBox()?.inputValue();
+        // Check if input is empty
+        if (!inputValue?.trim()) {
+            return;
+        }
+        // Remove existing "all" filter (if exists) and add new one with updated value
+        // This creates a new reference and triggers the effect
+        this.selectedFilters.update((prev) => {
+            const withoutAll = prev.filter((f) => f.field !== 'all');
+            return [
+                ...withoutAll,
+                {
+                    title: 'All',
+                    field: 'all',
+                    operator: { type: 'contains' },
+                    value: inputValue, // Store value in filter definition
+                    widget: { type: 'text-box' },
+                    filterType: { inline: true, advance: false },
+                },
+            ];
+        });
+        this.tagBox()?.inputValue.set('');
+    }
     getActiveOperator(filter) {
         if (!filter) {
             return undefined;
@@ -4285,15 +4431,16 @@ class AXPQueryFiltersComponent {
         return ALL_DEFAULT_OPERATORS.find((o) => o.name === operatorType)?.title;
     }
     handleSelectInlineFilter(filter) {
-        this.context.update((prev) => ({
+        const inputValue = this.tagBox()?.inputValue();
+        // Add filter with value stored in the filter definition
+        this.selectedFilters.update((prev) => [
             ...prev,
-            [filter.field]: {
-                value: this.tagBox()?.inputValue(),
-                operation: { type: 'contains' },
+            {
+                ...filter,
+                value: inputValue, // Store value in filter
             },
-        }));
+        ]);
         this.tagBox()?.inputValue.set('');
-        this.selectedFilters.update((prev) => [...prev, filter]);
         this.popover()?.close();
     }
     handleInlineFilterKeyDown(e, filter) {
@@ -4318,9 +4465,26 @@ class AXPQueryFiltersComponent {
             });
         }
     }
-    #effect2;
+    #updateTagsEffect;
+    //#region ----   Widget Focus Effect   ----
+    /**
+     * Auto-focus widget when component ref is ready and filter is active
+     * This reactive approach eliminates the need for setTimeout
+     */
+    #focusEffect;
+    async handleKeyboardEvent(event) {
+        if (event.ctrlKey) {
+            switch (event.code) {
+                case 'KeyF':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.tagBox()?.focus();
+                    break;
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -4336,11 +4500,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  ></ax-tag-box>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          }\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
-        }], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], listItems: [{
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box\n    #tagBoxComponent\n    [ngModel]=\"asyncTags()\"\n    (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\"\n    [valueField]=\"'id'\"\n    [readonly]=\"filtersDefinitions().length === 0\"\n    [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\"\n    [tagTemplate]=\"tagTemplate\"\n    (onKeyDown)=\"handleKeyDown($event)\"\n    [addOnEnter]=\"false\"\n    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\n    #tagBox\n  >\n    <ax-suffix><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\n    >\n      <span>{{ item.query }}</span>\n      <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n        <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n      </button>\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n  >\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive()\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n              tabindex=\"0\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
+        }], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']
-            }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
+            }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 class AXPImageEditorPopupComponent extends AXBasePageComponent {
     constructor() {
@@ -4416,7 +4583,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         </ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
+  `, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled", "aspectRatio"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
             type: Component,